API tools faq
paste
Advertisement
Guest User

home.blade.php

a guest
Nov 15th, 2019
325
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 24.56 KB | None | 0 0
raw download clone embed print report
  1. @extends('layout.index')
  2. @section('content')    
  3. <style type="text/css">
  4.     @font-face {
  5.         font-family: "Digital Display";
  6.         src : url('{{url('assets/font')}}/DigitalDisplayRegular-ODEO.ttf');
  7.     }
  8.     .digital {
  9.         font-family: "Digital Display";
  10.         font-size: 63px;
  11.         color:white;
  12.     }
  13.     .clock {
  14.         font-family: "Digital Display";
  15.         font-size: 40px;
  16.         text-shadow: 5px 5px 5px #222;
  17.        color: #007bff;
  18.    }
  19. </style>
  20. <script type="text/javascript" src="{{url('assets')}}/js/webcam.js"></script>
  21.     <div class="container">
  22.         <header class="bg-dark text-white mt-3">
  23.             <div class="container-fluid">
  24.                 <div class="row">
  25.                     <div class="col-lg-4 mt-3 mb-3">
  26.                         <div class="form-group row">
  27.                             <div class="col-md-4">
  28.                                 <center><img src="{{url('assets/images')}}/thumb-1.jpg" class="rounded" width="100" height="100"></center>
  29.                             </div>
  30.                             <div class="col-md-8">
  31.                                 <img src="{{url('assets/images')}}/logo-light-icon.png">
  32.                                 <img src="{{url('assets/images')}}/logo-light-text.png"><br>
  33.                                 <label><i class="fa fa-user"></i> {{Session::get('name')}}</label><br>
  34.                                 <label><div id="calendar"></div></label>
  35.                                 <b><label id="time" class="clock"></label></b>
  36.                             </div>
  37.                         </div>
  38.                     </div>
  39.                     <div class="col-lg-8 mt-3">
  40.                         <div class="row">
  41.                             <div class="col-lg-4">
  42.                                 <div class="card bg-danger">
  43.                                     <div class="card-body text-white">
  44.                                         <h1 align="center" class="digital">80</h1>
  45.                                         <p align="center">Motor Parkir</p>
  46.                                         <h1 align="center"><i class="fa fa-motorcycle" style="color:white;"></i></h1>
  47.                                     </div>
  48.                                 </div>
  49.                             </div>
  50.                             <div class="col-lg-4">
  51.                                 <div class="card bg-danger">
  52.                                     <div class="card-body text-white">
  53.                                         <h1 align="center" class="digital">120</h1>
  54.                                         <p align="center">Mobil Parkir</p>
  55.                                         <h1 align="center"><i class="fa fa-car" style="color:white;"></i></h1>
  56.                                     </div>
  57.                                 </div>
  58.                             </div>
  59.                             <div class="col-lg-4">
  60.                                 <div class="card bg-danger">
  61.                                     <div class="card-body text-white">
  62.                                         <h1 align="center" class="digital">200</h1>
  63.                                         <p align="center">Total Parkir</p>
  64.                                         <h1 align="center"><i class="fa fa-table" style="color:white;"></i></h1>
  65.                                     </div>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.             <div class="row">
  73.                 <div class="col-lg-12">
  74.                     <div class="card bg-danger" style="border-radius:1px;">
  75.                         <div class="card-header bg-danger text-white">
  76.                             <div class="row">
  77.                                 <div class="col-lg-4">
  78.                                     <h1 class="card-title text-white">Detail Transaksi</h1>
  79.                                 </div>
  80.                                 <div class="col-lg-8">
  81.                                     <h1 class="card-title text-white float-right">Rp. <label id="labelTotal">100.000<label></h1>
  82.                                 </div>
  83.                             </div>
  84.                         </div>
  85.                         <div class="card-body bg-dark text-white">
  86.                             <form autocomplete="off" id="save_transaksi">
  87.                                 {{csrf_field()}}
  88.                                 <input type="hidden" id="id_parameter" name="id_parameter">
  89.                                 <input type="hidden" name="date_now" id="date_now">
  90.                                 <div class="row">
  91.                                     <div class="col-lg-6">
  92.                                         <div class="form-group row">
  93.                                             <div class="col-lg-4"><label>Jenis Kendaraan</label></div>
  94.                                             <div class="col-lg-8">
  95.                                                     <select  style="width:100%;"  name="jenis" id="jenis" class="form-control select2"  required>
  96.                                                     <option value="">Pilih Jenis Kendaraan</option>
  97.                                                         @if(isset($list_type_transportation))
  98.                                                         @foreach($list_type_transportation as $res)
  99.                                                                 <option value="{{$res->id_type_transportation}}">{{$res->type_transportation}}</option>
  100.                                                         @endforeach
  101.                                                         @endif      
  102.                                                 </select>
  103.                                             </div>
  104.                                         </div>
  105.                                         <div class="form-group row">
  106.                                             <div class="col-lg-4"><label>Tipe Tarif</label></div>
  107.                                             <div class="col-lg-8">
  108.                                                     <select  style="width:100%;"  name="tipe_tarif" id="tipe_tarif" class="form-control select2"  required>
  109.                                                     <option value="">Pilih Tipe Tarif</option>
  110.                                                         @if(isset($list_tipe_tarif))
  111.                                                         @foreach($list_tipe_tarif as $res)
  112.                                                                 <option value="{{$res->id_fee_type_parking}}">{{$res->fee_type}}</option>
  113.                                                         @endforeach
  114.                                                         @endif      
  115.                                                 </select>
  116.                                             </div>
  117.                                         </div>
  118.                                         <div class="form-group row">
  119.                                             <div class="col-lg-4"><label>Nomor Polisi</label></div>
  120.                                             <div class="col-lg-8">
  121.                                                 <div class="input-group">
  122.                                                     <div class="input-group-prepend">
  123.                                                         <label class="input-group-text"><i class="fa fa-list-ol"></i></label>
  124.                                                     </div>
  125.                                                     <input type="text" class="form-control form-control-lg" placeholder="Nomor Polisi" name="no_pol" id="no_pol">
  126.                                                 </div>
  127.                                             </div>
  128.                                         </div>
  129.                                         <div class="form-group row">
  130.                                             <div class="col-lg-4"><label>Qr Code / Barcode</label></div>
  131.                                             <div class="col-lg-8">
  132.                                                 <div class="input-group">
  133.                                                     <div class="input-group-prepend">
  134.                                                         <label class="input-group-text"><i class="fa fa-qrcode"></i></label>
  135.                                                     </div>
  136.                                                     <input type="text"  class="form-control form-control-lg" placeholder="Qr Code / Barcode" id="qr_code" name="qr_code">
  137.                                                     <div class="input-group-append">
  138.                                                         <button type="button" onclick="scan_data()" class="btn btn-danger"><i class="fa fa-search"></i></button>
  139.                                                         <!--<button type="button" data-toggle="modal" data-target="#modalScan" class="btn btn-danger"><i class="fa fa-search"></i></button>-->
  140.                                                     </div>
  141.                                                 </div>
  142.                                             </div>
  143.                                         </div>
  144.                                         <div class="form-group row">
  145.                                             <div class="col-lg-4"><label>Parkir Masuk</label></div>
  146.                                             <div class="col-lg-8"><label id="parking_date">-</label></div>
  147.                                         </div>
  148.                                         <div class="form-group row">
  149.                                             <div class="col-lg-4"><label>Durasi</label></div>
  150.                                             <div class="col-lg-8"><label id="durasi_lbl">-</label></div>
  151.                                             <input type="hidden" name="durasi" id="durasi">
  152.                                         </div>
  153.                                         <div class="form-group row">
  154.                                             <div class="col-lg-4"><label>Denda Overstay</label></div>
  155.                                             <div class="col-lg-8"><label id="">-</label></div>
  156.                                         </div>
  157.                                         <input type="hidden" name="biaya" id="biaya">
  158.                                     </div>
  159.                                     <div class="col-lg-6">
  160.                                         <div class="form-group row">
  161.                                             <div class="col-lg-4"><label>Denda</label></div>
  162.                                             <div class="col-lg-8">
  163.                                                     <select  style="width:100%;"  name="denda_pilihan" id="" class="form-control select2"  required>
  164.                                                     <option value="">Pilih Jenis Denda</option>
  165.                                                         <!-- @if(isset($list_type_transportation))
  166.                                                         @foreach($list_type_transportation as $res)
  167.                                                                 <option value="{{$res->id_type_transportation}}">{{$res->type_transportation}}</option>
  168.                                                         @endforeach
  169.                                                         @endif       -->
  170.                                                 </select>
  171.                                             </div>
  172.                                         </div>
  173.                                         <div class="form-group row">
  174.                                             <div class="col-lg-4"><label>Catatan</label></div>
  175.                                             <div class="col-lg-8">
  176.                                                 <div class="input-group">
  177.                                                     <div class="input-group-prepend">
  178.                                                         <label class="input-group-text"><i class="fa fa-book"></i></label>
  179.                                                     </div>
  180.                                                     <input disabled type="text" class="form-control form-control-lg" placeholder="Catatan" id="catatan" name="catatan">
  181.                                                 </div>
  182.                                             </div>
  183.                                         </div>
  184.                                         <div class="form-group row">
  185.                                             <div class="col-lg-4">
  186.                                                 <label>Foto</label>
  187.                                             </div>
  188.                                             <div class="col-lg-8">
  189.                                                 <img id="bukti_kamera" src="{{url('assets/images')}}/no_image.png" style="width: 500px; height: 180px;" class="rounded img-thumbnail">
  190.                                             </div>
  191.                                         </div>  
  192.                                     </div>
  193.                                 </div>
  194.                                 <div class="form-group row">
  195.                                     <div class="col-lg-12">
  196.                                         <button type="submit" class="btn btn-success btn-block"><i class="fa fa-check"></i> Save</button>
  197.                                     </div>
  198.                                 </div>
  199.                                 <div class="row">
  200.                                     <div class="col-lg-12">
  201.                                         <div class="table-responsive">
  202.                                             <table class="table table-striped">
  203.                                                 <thead class="text-white">
  204.                                                     <th class="bg-secondary">Nomor Polisi</th>
  205.                                                     <th class="bg-secondary">Jenis Kendaraan</th>
  206.                                                     <th class="bg-secondary">Masuk</th>
  207.                                                     <th class="bg-secondary">Keluar</th>
  208.                                                     <th class="bg-secondary">Lama</th>
  209.                                                 </thead>
  210.                                                 <tbody>
  211.                                                     <tr class="table-light">
  212.                                                         <td>B001A</td>
  213.                                                         <td>Motor</td>
  214.                                                         <td>08:00:00</td>
  215.                                                         <td>10:00:00</td>
  216.                                                         <td>2 Jam</td>
  217.                                                     </tr>
  218.                                                     <tr class="table-light">
  219.                                                         <td>B001A</td>
  220.                                                         <td>Motor</td>
  221.                                                         <td>08:00:00</td>
  222.                                                         <td>10:00:00</td>
  223.                                                         <td>2 Jam</td>
  224.                                                     </tr>
  225.                                                     <tr class="table-light">
  226.                                                         <td>B001A</td>
  227.                                                         <td>Motor</td>
  228.                                                         <td>08:00:00</td>
  229.                                                         <td>10:00:00</td>
  230.                                                         <td>2 Jam</td>
  231.                                                     </tr>
  232.                                                     <tr class="table-light">
  233.                                                         <td>B001A</td>
  234.                                                         <td>Motor</td>
  235.                                                         <td>08:00:00</td>
  236.                                                         <td>10:00:00</td>
  237.                                                         <td>2 Jam</td>
  238.                                                     </tr>
  239.                                                     <tr class="table-light">
  240.                                                         <td>B001A</td>
  241.                                                         <td>Motor</td>
  242.                                                         <td>08:00:00</td>
  243.                                                         <td>10:00:00</td>
  244.                                                         <td>2 Jam</td>
  245.                                                     </tr>
  246.                                                 </tbody>
  247.                                             </table>
  248.                                             <ul class="pagination float-right">
  249.                                                 <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
  250.                                                 <li class="page-item active"><a class="page-link" href="#">1</a></li>
  251.                                                 <li class="page-item"><a class="page-link" href="#">2</a></li>
  252.                                                 <li class="page-item"><a class="page-link" href="#">3</a></li>
  253.                                                 <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
  254.                                             </ul>
  255.                                         </div>
  256.                                     </div>
  257.                                 </div>
  258.                             </form>
  259.                         </div>
  260.                     </div>
  261.                 </div>
  262.             </div>
  263.         </header><br>
  264.         <iframe id="print_src" style="width:0;height:0;border:0; border:none;"></iframe>
  265.         <div style="display:none" id="my_camera"></div>
  266.         <form method="POST" id="form_camera" autocomplete="off">
  267.             <input type="hidden" name="uri_camera" id="uri_camera">
  268.             <input type="hidden" name="qr_code" id="qr_code_camera">
  269.             {{csrf_field()}}
  270.         </form>
  271.         <script type="text/javascript">
  272.             function scan_data() {
  273.                 var qr_code      = $("#qr_code").val();
  274.                 var jenis        = $("#jenis").val();
  275.                 var tipe_tarif   = $("#tipe_tarif").val();
  276.                 var no_pol       = $("#no_pol").val();
  277.  
  278.                 if(jenis==""){
  279.                     swal('Error','Jenis kendaraan tidak terpilih','error');
  280.                 }else if(tipe_tarif==""){
  281.                     swal('Error','Tipe tidak terpilih','error');
  282.                 }else if(no_pol==""){
  283.                     swal('Error','Nomor Polisi Kosong','error');
  284.                 }else if(qr_code==""){
  285.                     swal('Error','QRCode / Barcode Kosong','error');
  286.                 }
  287.                 else {
  288.                     $.ajax({
  289.                         url: '{{url('/transaction/detailqrcode')}}',
  290.                         type: 'POST',
  291.                         data: {"_token": "{{ csrf_token() }}",'id':qr_code,'jenis':jenis,'tipe_tarif':tipe_tarif},
  292.                         dataType: 'JSON',
  293.                         success: function(data) {
  294.                             $("#id_parameter").val(data.id);
  295.                             $("#bukti_kamera").attr('src', '{{url('assets/images/kendaraan')}}/'+data.qr_code+".jpg");
  296.                             if(data.id){
  297.                                    $("#biaya").val(data.biaya);
  298.                                    $("#durasi").val(data.durasi);
  299.                                    $("#date_now").val(data.date_now);
  300.                                    $("#biaya_lbl").html("Rp. "+data.biaya_lbl);
  301.                                    $("#durasi_lbl").html(data.durasi);
  302.                                    $("#parking_date").html(data.parking_date);
  303.                                    $('#catatan').prop("disabled", false);
  304.                             }
  305.                         }
  306.                     });
  307.                 }
  308.             }
  309.             function take_snapshot(id) {
  310.                 Webcam.snap( function(data_uri) {
  311.                     var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
  312.  
  313.                     $('#uri_camera').val(raw_image_data);
  314.                     $('#qr_code_camera').val(id);
  315.  
  316.                     $.ajax({
  317.                         url: '{{url('/transaction/save_image_keluar')}}',
  318.                         type: 'POST',
  319.                         dataType: 'html',
  320.                         data: new FormData($('#form_camera')[0]),  // Form ID
  321.                         processData: false,
  322.                         contentType: false,
  323.                         success: function(data) {
  324.                             if(data=="OK"){
  325.                                 swal({
  326.                                   title: 'Success',
  327.                                   type: 'success',
  328.                                   showCancelButton: false,
  329.                                   showLoaderOnConfirm: false,
  330.                                 }).then(function() {
  331.                                      // location.reload();
  332.                                });
  333.                             }
  334.                         }
  335.                     });
  336.  
  337.                 } );
  338.             }
  339.             Webcam.set({
  340.                 width: 600,
  341.                 height: 460,
  342.                 image_format: 'jpeg',
  343.                 jpeg_quality: 90
  344.                
  345.             });
  346.             Webcam.attach('#my_camera');
  347.         </script>
  348.  
  349.             <div class="row">
  350.                 <div class="col-lg-12">
  351.                    
  352.                 </div>
  353.             </div>
  354.         <div class="modal fade" id="modalScan">
  355.             <div class="modal-dialog modal-dialog-centered" role="document">
  356.                 <div class="modal-content">
  357.                     <div class="modal-body">
  358.                         <h5 class="modal-title" align="center">Scan QRCode</h5><br>
  359.                         <center>
  360.                             <select id="inversion-mode-select">
  361.                                 <option value="original">Scan original (dark QR code on bright background)</option>
  362.                                 <option value="invert">Scan with inverted colors (bright QR code on dark background)</option>
  363.                                 <option value="both">Scan both</option>
  364.                             </select>
  365.                             <span id="cam-has-camera"></span>
  366.                             <video muted playsinline id="qr-video"></video>
  367.                             <span id="cam-qr-result"></span>
  368.                             <span id="cam-qr-result-timestamp"></span>
  369.                             <br><br>
  370.                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup Dialog</button>
  371.                         </center>
  372.                     </div>
  373.                 </div>
  374.             </div>
  375.         </div>
  376.         <script type='text/javascript'>
  377.             $("#save_transaksi").on("submit", function (event) {
  378.                 event.preventDefault();
  379.                      $.ajax({
  380.                         url: '{{url('/transaction/save')}}',
  381.                         type: 'POST',
  382.                         dataType: 'JSON',
  383.                         data: new FormData($('#save_transaksi')[0]),  // Form ID
  384.                         processData: false,
  385.                         contentType: false,
  386.                         success: function(data) {
  387.                             take_snapshot(data.qr_code);
  388.                             var url =  '{{url('/transaction/ticket_keluar')}}/'+data.id;
  389.                             $('#print_src').attr('src', url);
  390.                         }
  391.                     });
  392.  
  393.             });
  394.             $(document).ready(function() {
  395.                 var interval = setInterval(function() {
  396.                     var momentNow = moment();
  397.                     var hari  = myDays[momentNow.format('d')];
  398.                     var bulan = months[momentNow.format('M')];
  399.                     //$('#calendar').html(hari+", "+momentNow.format('DD MMMM YYYY'));
  400.                     $('#calendar').html(hari+", "+momentNow.format('DD')+" "+bulan+" "+momentNow.format('YYYY'));
  401.                     $('#time').html(momentNow.format('HH:mm:ss'));
  402.                 }, 100);
  403.                
  404.             });
  405.         </script>
  406. @endsection
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!