API tools faq
paste
vitareinforce

new sp index.blade.php

vitareinforce
Oct 13th, 2021 (edited)
299
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 18.65 KB | None | 0 0
raw download clone embed print report
  1. @extends('layouts.master')
  2.  
  3. @section('css')
  4. <style>
  5.     .swal-modal {
  6.         background-color: #FE9508;
  7.    }
  8.  
  9.     .swal-title {
  10.         color: #ffffff;
  11.    }
  12.  
  13.     .swal-button--confirm{
  14.         background-color: #064A25;
  15.    }
  16.  
  17.     .swal-button--cancel {
  18.         background-color: #ff0000;
  19.        color: #ffffff;
  20.    }
  21.  
  22.     .swal-footer {
  23.         text-align: center;
  24.     }
  25.  
  26.     table {
  27.         table-layout: auto;
  28.         width: 1500px;
  29.         position: sticky;
  30.         overflow-x: auto;
  31.         /* transform-origin: right top; */
  32.     }
  33.     /**
  34.     Fix container luar
  35.     */
  36.     .fixed-table-container {
  37.         overflow-y: hidden;
  38.         overflow-x: hidden;
  39.         height: 500px;
  40.     }
  41.     /**
  42.     Fix container dalam
  43.     */
  44.     .fixed-table-body {
  45.         overflow-y: scroll;
  46.         overflow-x: scroll;
  47.         height: 500px;
  48.     }
  49.  
  50.     thead, tr {
  51.         display: table;
  52.         width: 1550px;
  53.         position: sticky;
  54.         top: 0;
  55.         table-layout: fixed;
  56.         /**
  57.         Menaruh header di lapisan z paling atas
  58.         */
  59.         z-index: 99;
  60.     }
  61.  
  62.     tbody {
  63.         display: block;
  64.         position: sticky;
  65.         table-layout: auto;
  66.     }
  67.     td{
  68.         height: 100px;
  69.     }
  70.     tbody, tr:hover {
  71.         z-index: -99;
  72.     }
  73.     .btn-info{
  74.         width: 50%;
  75.         margin: 0 auto;
  76.         text-align: center;
  77.     }
  78.  
  79.     .horizontal-scroll-wrapper {
  80.         height: 500px;
  81.     }
  82.  
  83.     .horizontal-scroll-wrapper > div {
  84.         height: 20px;
  85.     }
  86.  
  87.     .adjust-col {
  88.         width: 100px !important;
  89.     }
  90.     .nomor-col {
  91.         width: 70px !important;
  92.     }
  93.     .sp-col {
  94.         width: 310px !important;
  95.     }
  96. </style>
  97.  
  98. @endsection
  99.  
  100. @section('title')
  101.     Surat Peringatan
  102. @endsection
  103.  
  104. @section('content')
  105. @if(Auth::user()->role->is_read_sp == 1)
  106. <div class="row">
  107.     <div class="col-lg-12">
  108.         <div class="row">
  109.             <div class="text-left margin-tb mt-3">
  110.                     @if ($message = Session::get('success'))
  111.                     <div class="alert alert-success alert-dismissible fade show" role="alert">
  112.                     <strong>
  113.                         <p>{{ $message }}</p>
  114.                     </strong>
  115.                     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  116.                         <span aria-hidden="true">&times;</span>
  117.                     </button>
  118.                     </div>
  119.                     @endif
  120.             </div>
  121.  
  122.             <div class="form-inline margin-tb mt-3 mb-1 cari">
  123.                 @if(Auth::user()->role->is_create_sp == 1)
  124.                 <div class="col-lg-12">
  125.                     <a class="btn btn-success btn-sm " href="{{ route('peringatan.create') }}" role="button">
  126.                         Input SP
  127.                     </a>
  128.                 </div>
  129.                 @endif
  130.             </div>
  131.  
  132.             <div class="col-lg-12 margin-tb mb-3 ">
  133.                 <!-- <div class="form-inline">
  134.                     {{-- <a href="{{route('peringatan.edit')}}" class="btn btn-success btn-sm">Reset</a> --}}
  135.                 </div> -->
  136.  
  137.                 <div class="text-right mb-1">
  138.                     <select id="selectgroup" style="width: 263px !important; height: 38px !important; border-radius: 0.25rem; border: 1px solid #ced4da;">
  139.                         <option value="-">Pilih Group</option>
  140.                         @foreach ($group as $data)
  141.                         <option value="{{$data->id}}">{{$data->nama}}</option>
  142.                         @endforeach
  143.                     </select>
  144.                     <select id="selectkaryawan" style="width: 263px !important; height: 38px !important; border-radius: 0.25rem; border: 1px solid #ced4da;">
  145.                         <option value="-">Pilih Karyawan</option>
  146.                         @foreach ($karyawan as $data)
  147.                         <option value="{{$data->id}}">{{$data->nama}}</option>
  148.                         @endforeach
  149.                     </select>
  150.  
  151.                 </div>
  152.  
  153.                 <!-- <div class="form-inline my-2 my-lg-0 float-right ">
  154.                     <input type="date" id="filtertanggal" class="form-control" onchange="filterTanggal(event);">
  155.                 </div> -->
  156.                 {{-- <br>
  157.                 <br> --}}
  158.                 <!-- <div class="text-right mb-1">
  159.                     <a role="button" type="submit" class="btn btn-outline-success my-2 my-sm-0 aksi"><i class="fas fa-file-export"></i></a>
  160.                 </div> -->
  161.  
  162.                 <table
  163.                     id="hadir-harian"
  164.                     data-row-style="rowStyle"
  165.                     data-url="peringatan/apiperingatan"
  166.                     data-pagination="true"
  167.                     data-pagination-h-align="left"
  168.                     data-pagination-detail-h-align="right"
  169.                     data-search="true"
  170.                     data-show-search-button="true"
  171.                     data-show-fullscreen="true"
  172.                     data-show-export="false"
  173.                     data-search-on-enter-key="true"
  174.                     data-filter-control="true"
  175.                     data-page-list="[10, 20, 50, 100, all]"
  176.                     class="col-lg-12 table-sm table-hover">
  177.                     <thead>
  178.                     <tr>
  179.                     <th data-sortable="false" data-field="index" data-formatter="formatUrutan" class="nomor-col" data-searchable="false">No.</th>
  180.                     <!-- <th data-sortable="true" data-field="tanggal">Tanggal</th> -->
  181.                     <th data-sortable="true" data-field="nama_karyawan" data-formatter="lihatdetilriwayat"  data-searchable="true" class="adjust-col">Nama</th>
  182.                     <th data-sortable="true" data-field="nik" data-searchable="true" class="adjust-col">Group</th>
  183.                     <th data-sortable="true" data-field="jumlah_tidak_hadir" data-searchable="true" class="adjust-col">Jumlah Tidak<br/>Hadir (kali)</th>
  184.                     <th data-sortable="true" data-field="sp1" data-formatter="cetaksp1" data-searchable="false" class="sp-col">Terbitkan<br/>SP 1</th>
  185.                     <th data-sortable="true" data-field="sp2" data-formatter="cetaksp2" data-searchable="false" class="sp-col">Terbitkan<br/>SP 2</th>
  186.                     <th data-sortable="true" data-field="sp3" data-formatter="cetaksp3" data-searchable="false" class="sp-col">Terbitkan<br/>SP 3</th>
  187.                     <!-- <th data-sortable="true" data-field="print" data-formatter="print">Cetak</th> -->
  188.                     <!-- <th data-sortable="true" data-field="reset" data-formatter="reset"></th> -->
  189.                     </tr>
  190.                     </thead>
  191.                 </table>
  192.             </div>
  193.         </div>
  194.     </div>
  195. </div>
  196.  
  197. @else
  198. Anda tidak memiliki hak akses ke tempat ini
  199. @endif
  200. @endsection
  201.  
  202. @section('js')
  203. {{-- <script src='https://kit.fontawesome.com/a076d05399.js'></script> --}}
  204.  
  205. <script>
  206.     let tanggal = moment().format("YYYY-MM-DD");
  207.  
  208.     $tabel_harian = $('#hadir-harian');
  209.     $tabel_harian.bootstrapTable();
  210.  
  211.     $('#selectgroup').change(function(){
  212.         var selected = $(this).children("option:selected").val();
  213.         console.log(selected);
  214.         if(selected != '-') {
  215.             $tabel_harian.bootstrapTable('filterBy', {
  216.                 group_id: parseInt(selected)
  217.             });
  218.         } else {
  219.             $tabel_harian.bootstrapTable('filterBy', {});
  220.         }
  221.     });
  222.  
  223.     $('#selectkaryawan').change(function(){
  224.         var selected = $(this).children("option:selected").val();
  225.         console.log(selected);
  226.         if(selected != '-') {
  227.             $tabel_harian.bootstrapTable('filterBy', {
  228.                 karyawan_id: parseInt(selected)
  229.             });
  230.         } else {
  231.             $tabel_harian.bootstrapTable('filterBy', {});
  232.         }
  233.     });
  234.  
  235.     function filterTanggal(e) {
  236.         tanggal = e.target.value;
  237.         console.log(e.target.value);
  238.         $tabel_harian.bootstrapTable('filterBy', {
  239.           tanggal: e.target.value
  240.         });
  241.     }
  242.  
  243.     function formatUrutan(value, row, index) {
  244.         return index + 1;
  245.     }
  246.  
  247.     function lihatdetilriwayat(value, row) {
  248.         return `<a href="peringatan/show/:id">:nama</a>`.replace(':id', row.id).replace(':nama', row.nama_karyawan);
  249.     }
  250.  
  251.     function cetaksp1(value, row) {
  252.         if(row.jumlah_tidak_hadir >= (row.limit_sp_1 - 1)) {
  253.             if(row.status_terbit_sp1 != 'batal') {
  254.                 return `
  255.                 @if(Auth::user()->role->is_terbitkan_sp == 1)
  256.                     <div class="row" style="margin: 0">
  257.                         <a href="peringatan/print/:id/1/:tidak_hadir" class="btn btn-sm btn-info" style="width: 200px; text-align:center; margin-left: 10px; margin-right: 10px;">SP1</a>
  258.                         <a href="peringatan/batal/:spid/1/:tidak_hadir" class="btn btn-sm btn-danger"  style="width: 200px; text-align:center; margin-left: 10px; margin-right: 10px;">Batalkan SP1</a>
  259.                     </div>
  260.                 @endif
  261.                 `.replace(':id', row.karyawan_id).replace(':spid', row.id).replace(':tidak_hadir', row.jumlah_tidak_hadir).replace(':tidak_hadir', row.jumlah_tidak_hadir);
  262.             }
  263.         } else {
  264.             return '-';
  265.         }
  266.     }
  267.  
  268.     function cetaksp2(value, row) {
  269.         if(row.jumlah_tidak_hadir >= (row.limit_sp_2 - 1)) {
  270.             if(row.status_terbit_sp2 != 'batal') {
  271.                 return `
  272.                 @if(Auth::user()->role->is_terbitkan_sp == 1)
  273.                     <div class="row" style="margin: 0">
  274.                         <a href="peringatan/print/:id/2/:tidak_hadir" class="btn btn-sm btn-info" style="width: 200px; text-align:center; margin-left: 10px; margin-right: 10px;">SP2</a>
  275.                         <a href="peringatan/batal/:spid/2/:tidak_hadir" class="btn btn-sm btn-danger"  style="width: 200px; text-align:center; margin-left: 10px; margin-right: 10px;">Batalkan SP2</a>
  276.                     </div>
  277.                 @endif
  278.                 `.replace(':id', row.karyawan_id).replace(':spid', row.id).replace(':tidak_hadir', row.jumlah_tidak_hadir).replace(':tidak_hadir', row.jumlah_tidak_hadir);
  279.             }
  280.         } else {
  281.             return '-';
  282.         }
  283.     }
  284.  
  285.     function cetaksp3(value, row) {
  286.         if(row.jumlah_tidak_hadir >= (row.limit_sp_3 - 1)) {
  287.             if(row.status_terbit_sp3 != 'batal') {
  288.                 return `
  289.                 @if(Auth::user()->role->is_terbitkan_sp == 1)
  290.                     <div class="row" style="margin: 0">
  291.                         <a href="peringatan/print/:id/3/:tidak_hadir" class="btn btn-sm btn-info"  style="width:200px; margin-left: 10px; margin-right: 10px;">SP3</a>
  292.                         <a href="peringatan/batal/:spid/3/:tidak_hadir" class="btn btn-sm btn-danger"  style="width: 200px; margin-left: 10px; margin-right: 10px;">Batalkan SP3</a>
  293.                     </div>
  294.                 @endif
  295.                 `.replace(':id', row.karyawan_id).replace(':spid', row.id).replace(':tidak_hadir', row.jumlah_tidak_hadir).replace(':tidak_hadir', row.jumlah_tidak_hadir);
  296.             }
  297.         } else {
  298.             return '-';
  299.         }
  300.     }
  301.  
  302.     function formatHari(value, row, index) {
  303.         let hari_angka = null;
  304.         if(tanggal) {
  305.             hari_angka = moment(tanggal).day()
  306.         } else {
  307.             hari_angka = moment().day()
  308.         }
  309.         let hari;
  310.         switch(hari_angka) {
  311.             case 0:
  312.                 hari = 'Minggu';
  313.                 break;
  314.             case 1:
  315.                 hari = 'Senin';
  316.                 break;
  317.             case 2:
  318.                 hari = 'Selasa';
  319.                 break;
  320.             case 3:
  321.                 hari = 'Rabu';
  322.                 break;
  323.             case 4:
  324.                 hari = 'Kamis';
  325.                 break;
  326.             case 5:
  327.                 hari = 'Jum at';
  328.                 break;
  329.             case 6:
  330.                 hari = 'Sabtu';
  331.                 break;
  332.             default:
  333.                 break;
  334.         }
  335.         return hari;
  336.     }
  337.  
  338.     function formatTanggal(value, row, index) {
  339.         if(tanggal) {
  340.             return moment(tanggal).format("DD MMMM yyyy");
  341.         } else {
  342.             return moment().format("DD MMMM yyyy");
  343.         }
  344.     }
  345.  
  346.     function formatNik(value, row) {
  347.         if(row.group_id) {
  348.             return row.group.nama + "-" + row.groupno;
  349.         } else {
  350.             return '-'
  351.         }
  352.     }
  353.  
  354.     function formatDetail(value, row) {
  355.         var detailLink = null;
  356.         detailLink = `<a href="{{ route('peringatan.show', ':id') }}">` + value + `</a>`;
  357.         detailLink = detailLink.replace(':id', row.id);
  358.         return detailLink;
  359.     }
  360.  
  361.     function rowStyle(row, index) {
  362.         let css_class = null;
  363.         if(row.jumlah_tidak_hadir >= (row.limit_sp_1 - 1)) {
  364.             css_class = 'table-danger'
  365.         }
  366.         return {
  367.             classes: css_class
  368.         };
  369.     }
  370.  
  371.  
  372.     function formatTidakHadir(value, row) {
  373.         return Math.floor(row.tidak_hadir/4);
  374.     }
  375.  
  376.     function calculateTidakHadir(value, row) {
  377.         // let tanggal_presensi_sebelumnya = null;
  378.         // let tanggal_presensi_saat_ini = null;
  379.         // let tanggal_reset = null;
  380.         // let jumlah_tidak_hadir = 0;
  381.         // if(row.jadwal_id != null && row.jadwal_group_id != null){
  382.         //     let jumlah_hari = row.jadwalharikerja.checkbox_harikerja_senin + row.jadwalharikerja.checkbox_harikerja_selasa + row.jadwalharikerja.checkbox_harikerja_rabu + row.jadwalharikerja.checkbox_harikerja_kamis + row.jadwalharikerja.checkbox_harikerja_jumat + row.jadwalharikerja.checkbox_harikerja_sabtu + row.jadwalharikerja.checkbox_harikerja_minggu;
  383.         // }
  384.         // if(row.tanggal_reset) {
  385.         //     tanggal_reset = row.tanggal_reset;
  386.         // } else {
  387.         //     tanggal_reset = row.tanggal_masuk;
  388.         // }
  389.  
  390.         // if((row.presensis.length > 0) && (row.presensis !== undefined)) { // punya data presensi
  391.         //     for(let i = 0; i < row.presensis.length; i++) {
  392.         //         if(i == 0) {
  393.         //             tanggal_presensi_sebelumnya = moment(tanggal_reset);
  394.         //             tanggal_presensi_saat_ini = moment(row.presensis[i].tanggal_dan_waktu_tap);
  395.         //             let jarak_minggu = tanggal_presensi_saat_ini.diff(tanggal_presensi_sebelumnya, 'weeks');
  396.         //             if(row.jadwal_id != null && row.jadwal_group_id != null) {
  397.         //                 jumlah_tidak_hadir = jarak_minggu * jumlah_hari;
  398.         //             }
  399.         //             tanggal_presensi_sebelumnya = moment(row.presensis[i].tanggal_dan_waktu_tap);
  400.         //         } else {
  401.         //             tanggal_presensi_saat_ini = moment(row.presensis[i].tanggal_dan_waktu_tap);
  402.         //             let jarak_minggu = tanggal_presensi_saat_ini.diff(tanggal_presensi_sebelumnya, 'weeks');
  403.         //             if(jarak_minggu > 0) {
  404.         //                 if((row.jadwalharikerja.checkbox_harikerja_senin == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 1)) {
  405.  
  406.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_selasa == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 2)) {
  407.  
  408.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_rabu == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 3)) {
  409.  
  410.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_kamis == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 4)) {
  411.  
  412.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_jumat == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 5)) {
  413.  
  414.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_sabtu == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 6)) {
  415.  
  416.         //                 } else if((row.jadwalharikerja.checkbox_harikerja_minggu == 1) && (moment(row.presensis[i].tanggal_dan_waktu_tap).format(d) == 0)) {
  417.  
  418.         //                 } else {
  419.         //                     jumlah_tidak_hadir = jumlah_tidak_hadir + 1;
  420.         //                 }
  421.         //             }
  422.         //             tanggal_presensi_sebelumnya = moment(row.presensis[i].tanggal_dan_waktu_tap);
  423.         //         }
  424.         //     }
  425.         // } else { // ga pernah presensi dari awal sampai sekarang
  426.         //     tanggal_presensi_sebelumnya = moment(tanggal_reset);
  427.         //     tanggal_presensi_saat_ini = moment();
  428.         //     let jarak_minggu = tanggal_presensi_saat_ini.diff(tanggal_presensi_sebelumnya, 'weeks');
  429.         //     if(row.jadwal_id != null && row.jadwal_group_id != null) {
  430.         //         jumlah_tidak_hadir = jarak_minggu * jumlah_hari;
  431.         //     }
  432.         // }
  433.  
  434.         if(row.jumlah_tidak_hadir >= 5) {
  435.             return '<span style="color: red" class="sp">SP 5</span>';
  436.         } else if(row.jumlah_tidak_hadir == 4) {
  437.             return '<span style="color: orange">SP 4</span>';
  438.         } else if(row.jumlah_tidak_hadir == 3) {
  439.             return '<span style="color: yellow">SP 3</span>';
  440.         } else {
  441.             return '<span style="color: black"> - </span>';
  442.         }
  443.     }
  444.  
  445.     function reset(value, row) {
  446.         if(row.posisi_sp > 0) {
  447.             return '<a href="peringatan/reset/:id" class="btn btn-sm btn-success">Reset</a>'.replace(':id', row.id_karyawan);
  448.         } else {
  449.             return '-';
  450.         }
  451.     }
  452.  
  453.     function printPreview(printdata) {
  454.         axios.post('peringatan/print', printdata).then(function(response) {
  455.             console.log(response);
  456.         });
  457.     }
  458.  
  459.  
  460.     function print(value, row) {
  461.         if(row.posisi_sp > 0) {
  462.             return `<a href="peringatan/print/:id/:sp/:tidak_hadir" class="btn btn-sm btn-info">Cetak</button>`.replace(':id', row.id_karyawan).replace(':sp', row.posisi_sp).replace(':tidak_hadir', row.tidak_hadir);
  463.         } else {
  464.             return '-';
  465.         }
  466.     }
  467.  
  468.     // Script Javascript Disini
  469.     $('.delete-confirm').on('click', function (event) {
  470.     event.preventDefault();
  471.     const url = $(this).attr('href');
  472.     swal({
  473.         title: 'Apakah Anda Yakin menghapus grup?',
  474.         text: "",
  475.         type: 'warning',
  476.         icon: 'warning',
  477.         buttons:{
  478.             confirm: {
  479.                 text : 'Ya, hapus!',
  480.                 className : 'btn btn-success'
  481.             },
  482.             cancel: {
  483.                 visible: true,
  484.                 text : 'Tidak',
  485.                 className: 'btn outline-success'
  486.             }
  487.         },
  488.     }).then(function(value) {
  489.         if (value) {
  490.             window.location.href = url;
  491.         }
  492.     });
  493. });
  494.  
  495. </script>
  496. @endsection
  497.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!