Guest User

Dashboardv2.blade.php

a guest
May 11th, 2021
192
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @extends('admin.layouts.master')
  2. @section("title")
  3. {{__('storeDashboard.dashboardTitle')}}
  4. @endsection
  5. @section('content')
  6. <style>
  7.     .dashboard-stats {
  8.     display: none !important;
  9.     }
  10.     .single-order-parent {
  11.     border-radius: 0.25rem;
  12.     background-color: #192038;
  13.    cursor: pointer;
  14.     }
  15.     body {
  16.     background-color: #161B31;
  17.    }
  18.     .card {
  19.     background-color: #222b45;
  20.    border: 1px solid #101426;
  21.    color: #fff;
  22.    }
  23.     .card a {
  24.     color: #fff;
  25.    transition: 0.15s linear all;
  26.     }
  27.     .card a:hover {
  28.     color: #ddd;
  29.    transition: 0.15s linear all;
  30.     }
  31.     .card hr {
  32.     border-color: #151a30;
  33.    }
  34.     .dark-badge {
  35.     background-color: #222b45;
  36.    border: 1px solid #101426;
  37.    color: #fff;
  38.    }
  39.     @media (min-width: 1200px) {
  40.     .container {
  41.     max-width: 1250px;
  42.     }
  43.     }
  44.     .content-wrapper {
  45.     height: 95vh;
  46.     overflow-y: hidden;
  47.     }
  48.     .navbar-dark {
  49.     display: none;
  50.     }
  51.     .navbar-sticky {
  52.     display: none;
  53.     }
  54.     .modal-backdrop {
  55.     background-color: #161B31;
  56.    }
  57.     .order-dashboard-time {
  58.     background-color: transparent;
  59.     border-radius: 0;
  60.     text-align: left !important;
  61.     padding: 0;
  62.     color: #969696;
  63.    margin-top: 0 !important;
  64.     }
  65. </style>
  66. <div class="content">
  67.     <div class="d-flex justify-content-end mt-2">
  68.         @if($autoPrinting)
  69.         <button class="btn text-danger btn-md mr-2 mt-2 float-right printerStatus" data-popup="tooltip" data-placement="right" title="{{ __('thermalPrinterLang.connectingToPrinterFailedMessage') }}" style="border: 0; background-color: #222b45;"><i class="icon-printer4"></i>
  70.         </button>
  71.         @endif
  72.         <a href="{{ route('restaurant.zenMode', "false") }}" class="btn text-white btn-md mr-1 mt-2" style="border: 0; background-color: #222b45;"><i class="icon-switch" data-popup="tooltip" data-placement="right" title="Quit ZenMode"></i></a>
  73.     </div>
  74.  
  75.     <div class="row mt-4" @if($agent->isMobile()) style="display: block; overflow-x: auto; white-space: nowrap;" @endif>
  76.     <div class="col @if($agent->isMobile()) d-inline-block @endif">
  77.         <div class="card">
  78.             <div class="text-center">
  79.                 <h4 class="mt-2 mb-0"><strong>{{__('storeDashboard.dashboardNewOrders')}} <span class="badge badge-flat dark-badge ml-1" id="newOrdersCount">
  80.                     {{ count($newOrders) }}
  81.                     </span></strong>
  82.                 </h4>
  83.                 <hr class="mt-1 mb-0">
  84.             </div>
  85.             <div class="card-body px-2" style="height: 95vh; overflow-y: scroll;">
  86.                 @if(!count($newOrders))
  87.                 <div class="text-center pt-2 pb-1 single-order-parent" id="newOrdersNoOrdersMessage">
  88.                     <h4> {{__('storeDashboard.dashboardNoOrders')}} </h4>
  89.                 </div>
  90.                 @endif
  91.                 @foreach($newOrders as $nO)
  92.                 <div class="single-order-parent p-2 mb-3">
  93.                     <div class="single-order single-new-order" data-order="{{ $nO->unique_order_id }}">
  94.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $nO->user->name }}</b></a>
  95.                         <br>
  96.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $nO->unique_order_id }}</b></a>
  97.                         <br>
  98.                         {{ $nO->restaurant->name }}
  99.                         <br>
  100.                          @php
  101.                             if(!is_null($nO->tip_amount)) {
  102.                                 $nOTotal = $nO->total - $nO->tip_amount;
  103.                             } else {
  104.                                 $nOTotal = $nO->total;
  105.                             }
  106.                         @endphp
  107.                         {{ config('appSettings.currencyFormat') }}{{ $nOTotal }}
  108.                         <br>
  109.                         @if($nO->delivery_type == 2)
  110.                         <span class="badge badge-flat dark-badge">
  111.                         {{__('storeDashboard.dashboardSelfPickup')}}
  112.                         </span>
  113.                         @endif
  114.                     </div>
  115.                     <p class="liveTimer my-1 text-center min-fit-content order-dashboard-time" title="{{ $nO->created_at }}"><i class="icon-spinner10 spinner position-left"></i></p>
  116.                     <div class="new-order-actions d-flex mt-1">
  117.                         <a href="javascript:void(0)"
  118.                             class="btn btn-primary accpetOrderBtnTableList mr-1" data-id={{ $nO->id }}>
  119.                         {{__('storeDashboard.dashboardAcceptOrder')}} </a>
  120.                         <a href="{{ route('restaurant.cancelOrder', $nO->id) }}"
  121.                             class="btn btn-danger cancelOrderBtnTableList" data-popup="tooltip"
  122.                             data-placement="top" title="{{ __('storeDashboard.dashboardDoubleClickMsg') }}">{{__('storeDashboard.dashboardCancelOrder')}} </a>
  123.                     </div>
  124.                 </div>
  125.                 @if($loop->last)
  126.                 <div style="height: 10rem;"></div>
  127.                 @endif
  128.                 @endforeach
  129.             </div>
  130.         </div>
  131.     </div>
  132.     <div class="col @if($agent->isMobile()) d-inline-block @endif">
  133.         <div class="card">
  134.             <div class="text-center">
  135.                 <h4 class="mt-2 mb-0"><strong>{{__('storeDashboard.dashboardPreparingOrders')}} <span class="badge badge-flat dark-badge ml-1">
  136.                     {{ count($preparingOrders) }}
  137.                     </span></strong>
  138.                 </h4>
  139.                 <hr class="mt-1 mb-0">
  140.             </div>
  141.             <div class="card-body px-2" style="height: 95vh; overflow-y: scroll;">
  142.                 @if(!count($preparingOrders))
  143.                 <div class="text-center pt-2 pb-1 single-order-parent" id="newOrdersNoOrdersMessage">
  144.                     <h4> {{__('storeDashboard.dashboardNoOrders')}} </h4>
  145.                 </div>
  146.                 @endif
  147.                 @foreach($preparingOrders as $pO)
  148.                 <div class="single-order-parent p-2 mb-3">
  149.                     <div class="single-order" data-order="{{ $pO->unique_order_id }}">
  150.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $pO->user->name }}</b></a>
  151.                         <br>
  152.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $pO->unique_order_id }}</b></a>
  153.                         <br>
  154.                         {{ $pO->restaurant->name }}
  155.                         <br>
  156.                          @php
  157.                             if(!is_null($pO->tip_amount)) {
  158.                                 $pOTotal = $pO->total - $pO->tip_amount;
  159.                             } else {
  160.                                 $pOTotal = $pO->total;
  161.                             }
  162.                         @endphp
  163.                         {{ config('appSettings.currencyFormat') }}{{ $pOTotal }}
  164.                         <br>
  165.                         @if($pO->delivery_type == 2)
  166.                         <span class="badge badge-flat dark-badge">
  167.                         {{__('storeDashboard.dashboardSelfPickup')}}
  168.                         </span>
  169.                         @endif
  170.                     </div>
  171.                     <p class="liveTimer my-1 text-center min-fit-content order-dashboard-time" title="{{ $pO->created_at }}"><i class="icon-spinner10 spinner position-left"></i></p>
  172.                 </div>
  173.                 @if($loop->last)
  174.                 <div style="height: 10rem;"></div>
  175.                 @endif
  176.                 @endforeach
  177.             </div>
  178.         </div>
  179.     </div>
  180.     @if($agent->isDesktop()) @if(count($selfpickupOrders) > 0) @endif
  181.     <div class="col @if($agent->isMobile()) d-inline-block @endif">
  182.         <div class="card">
  183.             <div class="text-center">
  184.                 <h4 class="mt-2 mb-0"><strong>{{__('storeDashboard.dashboardSelfpickupOrders')}} <span class="badge badge-flat dark-badge ml-1">
  185.                     {{ count($selfpickupOrders) }}
  186.                     </span></strong>
  187.                 </h4>
  188.                 <hr class="mt-1 mb-0">
  189.             </div>
  190.             <div class="card-body px-2" style="height: 95vh; overflow-y: scroll;">
  191.                 @if(!count($selfpickupOrders))
  192.                 <div class="text-center pt-2 pb-1 single-order-parent" id="newOrdersNoOrdersMessage">
  193.                     <h4> {{__('storeDashboard.dashboardNoOrders')}} </h4>
  194.                 </div>
  195.                 @endif
  196.                 @foreach($selfpickupOrders as $spO)
  197.                 <div class="single-order-parent p-2 mb-3">
  198.                     <div class="single-order single-self-pickup-order" data-order="{{ $spO->unique_order_id }}" data-orderstatusid="{{ $spO->orderstatus_id }}">
  199.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $spO->user->name }}</b></a>
  200.                         <br>
  201.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $spO->unique_order_id }}</b></a>
  202.                         <br>
  203.                         {{ $spO->restaurant->name }}
  204.                         <br>
  205.                         {{ config('appSettings.currencyFormat') }}{{ $spO->total }}
  206.                         <br>
  207.                     </div>
  208.                     <div class="d-flex mt-1">
  209.                         @if($spO->delivery_type == 2 && $spO->orderstatus_id == 2)
  210.                         <a href="{{ route('restaurant.markOrderReady', $spO->id) }}"
  211.                             class="btn btn-warning btn-labeled btn-labeled-left mr-2 actionAfterAccept"> <b><i
  212.                             class="icon-checkmark3 ml-1"></i></b> {{__('storeDashboard.dashboardMarkAsReady')}} </a>
  213.                         @endif
  214.                         @if($spO->delivery_type == 2 && $spO->orderstatus_id == 7)
  215.                         <a href="{{ route('restaurant.markSelfPickupOrderAsCompleted', $spO->id) }}"
  216.                             class="btn btn-success btn-labeled btn-labeled-left mr-2 actionAfterAccept"> <b><i
  217.                             class="icon-checkmark3 ml-1"></i></b> {{__('storeDashboard.dashboardMarkAsCompleted')}} </a>
  218.                         @endif
  219.                     </div>
  220.                 </div>
  221.                 @if($loop->last)
  222.                 <div style="height: 10rem;"></div>
  223.                 @endif
  224.                 @endforeach
  225.             </div>
  226.         </div>
  227.     </div>
  228.     @if($agent->isDesktop()) @endif @endif
  229.     <div class="col @if($agent->isMobile()) d-inline-block @endif">
  230.         <div class="card">
  231.             <div class="text-center">
  232.                 <h4 class="mt-2 mb-0"><strong>{{__('storeDashboard.dashboardOngoingDeliveries')}} <span class="badge badge-flat dark-badge ml-1">
  233.                     {{ count($ongoingOrders) }}
  234.                     </span></strong>
  235.                 </h4>
  236.                 <hr class="mt-1 mb-0">
  237.             </div>
  238.             <div class="card-body px-2" style="height: 95vh; overflow-y: scroll;">
  239.                 @if(!count($ongoingOrders))
  240.                 <div class="text-center pt-2 pb-1 single-order-parent" id="newOrdersNoOrdersMessage">
  241.                     <h4> {{__('storeDashboard.dashboardNoOrders')}} </h4>
  242.                 </div>
  243.                 @endif
  244.                 @foreach($ongoingOrders as $ogO)
  245.                 <div class="single-order-parent p-2 mb-3">
  246.                     <div class="single-order" data-order="{{ $ogO->unique_order_id }}">
  247.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $ogO->user->name }}</b></a>
  248.                         <br>
  249.                         <a href="javascript:void(0)" class="letter-icon-title"><b>{{ $ogO->unique_order_id }}</b></a>
  250.                         <br>
  251.                         {{ $ogO->restaurant->name }}
  252.                         <br>
  253.                          @php
  254.                             if(!is_null($ogO->tip_amount)) {
  255.                                 $ogOTotal = $ogO->total - $ogO->tip_amount;
  256.                             } else {
  257.                                 $ogOTotal = $ogO->total;
  258.                             }
  259.                         @endphp
  260.                         {{ config('appSettings.currencyFormat') }}{{ $ogOTotal }}
  261.                         <br>
  262.                         @if($ogO->delivery_type == 2)
  263.                         <span class="badge badge-flat dark-badge">
  264.                         {{__('storeDashboard.dashboardSelfPickup')}}
  265.                         </span>
  266.                         @endif
  267.                     </div>
  268.                 </div>
  269.                 @if($loop->last)
  270.                 <div style="height: 10rem;"></div>
  271.                 @endif
  272.                 @endforeach
  273.             </div>
  274.         </div>
  275.     </div>
  276. </div>
  277. <div id="viewOrderModal" class="modal fade mt-1" tabindex="-1">
  278.     <div class="modal-dialog modal-lg">
  279.         <div class="modal-content" style="height: 85vh;border-radius: 0.8rem;">
  280.             <div class="float-right pr-3 pt-3" style="position: absolute; right: 0;">
  281.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  282.             </div>
  283.             <div class="modal-body p-0" style="border-radius: 0.8rem;">
  284.                 <iframe src="" frameborder="0" style="overflow:hidden;height:100%;width:100%;border-radius: 0.8rem;min-height: 100vh;" height="100%" width="100%"></iframe>
  285.                 <input type="hidden" value="">
  286.             </div>
  287.         </div>
  288.     </div>
  289. </div>
  290. <div id="newOrderModal" class="modal fade mt-5" tabindex="-1" data-backdrop="static" data-keyboard="false">
  291.     <div class="modal-dialog modal-md">
  292.         <div class="modal-content">
  293.             <div class="modal-header justify-content-center">
  294.                 <h5 class="modal-title mt-3"> <i class="icon-bell3 animated-bell"></i> </h5>
  295.             </div>
  296.             <div class="float-right pr-3 pt-3" style="position: absolute; right: 0;">
  297.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  298.             </div>
  299.             <div class="modal-body" id="newOrdersData">
  300.                 <div class="d-flex justify-content-center">
  301.                     <h3 class="text-muted"> {{__('storeDashboard.dashboardNoOrders')}} </h3>
  302.                 </div>
  303.             </div>
  304.         </div>
  305.     </div>
  306. </div>
  307. </div>
  308. <input type="hidden" value="{{ csrf_token() }}" id="csrfToken">
  309. <script>
  310.  
  311.     var autoPrinting = '{{ $autoPrinting }}';
  312.  
  313.     if (autoPrinting) {
  314.         var socket = null;
  315.         var socket_host = 'ws://127.0.0.1:6441';
  316.  
  317.         initializeSocket = function() {
  318.             try {
  319.                 if (socket == null) {
  320.                     socket = new WebSocket(socket_host);
  321.                     socket.onopen = function() {};
  322.                     socket.onmessage = function(msg) {
  323.                         let message = msg.data;
  324.                         $.jGrowl("", {
  325.                             position: 'bottom-center',
  326.                             header: message,
  327.                             theme: 'bg-danger',
  328.                             life: '5000'
  329.                         });
  330.                     };
  331.                     socket.onclose = function() {
  332.                         socket = null;
  333.                     };
  334.                 }
  335.             } catch (e) {
  336.                 console.log("ERROR", e);
  337.             }
  338.  
  339.             var checkSocketConnecton = setInterval(function() {
  340.                 if (socket == null || socket.readyState != 1) {
  341.                     $('.printerStatus').attr('data-original-title', '{{__('thermalPrinterLang.connectingToPrinterFailedMessage')}}').removeClass('text-success').addClass('text-danger');
  342.                 }
  343.                 if (socket != null && socket.readyState == 1) {
  344.                      $('.printerStatus').removeClass('text-danger').addClass('text-success').attr('data-original-title', '{{ __('thermalPrinterLang.connectionSuccessToLocalServer') }}');
  345.                 }
  346.                 clearInterval(checkSocketConnecton);
  347.             }, 500)
  348.         };
  349.     }
  350.  
  351.     $(function() {
  352.  
  353.         if (autoPrinting) {
  354.             initializeSocket();
  355.         }
  356.  
  357.  
  358.         var touchtime = 0;
  359.    
  360.         timer = setInterval(updateClock, 1000);
  361.    
  362.         var newDate = new Date();
  363.         var newStamp = newDate.getTime();
  364.    
  365.         var timer;
  366.    
  367.         function updateClock() {
  368.    
  369.             $('.liveTimer').each(function(index, el) {
  370.                 var orderCreatedData = $(this).attr("title");
  371.                 var startDateTime = new Date(orderCreatedData);
  372.                 var startStamp = startDateTime.getTime();
  373.            
  374.    
  375.                 newDate = new Date();
  376.                 newStamp = newDate.getTime();
  377.                 var diff = Math.round((newStamp-startStamp)/1000);
  378.                
  379.                 var d = Math.floor(diff/(24*60*60));
  380.                 diff = diff-(d*24*60*60);
  381.                 var h = Math.floor(diff/(60*60));
  382.                 diff = diff-(h*60*60);
  383.                 var m = Math.floor(diff/(60));
  384.                 diff = diff-(m*60);
  385.                 var s = diff;
  386.                 var checkDay = d > 0 ? true : false;
  387.                 var checkHour = h > 0 ? true : false;
  388.                 var checkMin = m > 0 ? true : false;
  389.                 var checkSec = s > 0 ? true : false;
  390.                 var formattedTime = checkDay ? d+ " day" : "";
  391.                 formattedTime += checkHour ? " " +h+ " hour" : "";
  392.                 formattedTime += checkMin ? " " +m+ " minute" : "";
  393.                 formattedTime += checkSec ? " " +s+ " second" : "";
  394.    
  395.                 $(this).text(formattedTime);
  396.             });
  397.         }
  398.    
  399.         var clickedElem = null;
  400.         var orderstatus_id = null;
  401.         $('.single-order').click(function(event) {
  402.             clickedElem = $(this);
  403.             clickedElem.addClass('popup-order-processing')
  404.             event.preventDefault();
  405.             orderstatus_id = clickedElem.attr("data-orderstatusid");
  406.             let order_id = clickedElem.attr("data-order");
  407.             let url = 'order/'+order_id;
  408.             let iframeElem = $('#viewOrderModal');
  409.             iframeElem.modal('show');
  410.             iframeElem.find('iframe').attr('src', url)
  411.             iframeElem.find('input').val(order_id);
  412.             $('#viewOrderModal').modal('show').find('iframe').attr('src', url);
  413.         });
  414.    
  415.         //on modal hide
  416.         $('#viewOrderModal').on('hidden.bs.modal', function () {
  417.             clickedElem.removeClass('popup-order-processing');
  418.    
  419.             let order_id = $(this).find('input').val();
  420.             let token = $('#csrfToken').val();
  421.    
  422.             if(clickedElem.hasClass("single-new-order")) {
  423.                 $.ajax({
  424.                     url: "{{ route('restaurant.checkOrderStatusNewOrder') }}",
  425.                     type: 'POST',
  426.                     dataType: 'JSON',
  427.                     data: {order_id: order_id, _token: token},
  428.                 })
  429.                 .done(function(data) {
  430.    
  431.                     console.log(data.reloadPage);
  432.                     if (data.reloadPage) {
  433.                         //on true, reload the page
  434.                         window.location.reload();
  435.                     }
  436.                 })
  437.                 .fail(function() {
  438.                     console.log("error");
  439.                     //reload the page
  440.                     window.location.reload();
  441.                 })
  442.             }
  443.             if (clickedElem.hasClass('single-self-pickup-order')) {
  444.                 if (orderstatus_id == 7) {
  445.                     var processSelfPickup = true
  446.                 } else {
  447.                     processSelfPickup=  false;
  448.                 }
  449.                 $.ajax({
  450.                     url: "{{ route('restaurant.checkOrderStatusSelfPickupOrder') }}",
  451.                     type: 'POST',
  452.                     dataType: 'JSON',
  453.                     data: {order_id: order_id, _token: token, processSelfPickup: processSelfPickup},
  454.                 })
  455.                 .done(function(data) {
  456.                     console.log(data.reloadPage);
  457.                     if (data.reloadPage && orderstatus_id == 2) {
  458.                         //on true, reload the page
  459.                         window.location.reload();
  460.                     }
  461.                     if (data.reloadPage && orderstatus_id == 7) {
  462.                         //on true, reload the page
  463.                         window.location.reload();
  464.                     }
  465.                 })
  466.                 .fail(function() {
  467.                     console.log("error");
  468.                     //reload the page
  469.                     window.location.reload();
  470.                 })
  471.             }
  472.         })
  473.    
  474.         $(".card-body").overlayScrollbars({
  475.             scrollbars : {
  476.                 visibility       : "auto",
  477.                 autoHide         : "leave",
  478.                 autoHideDelay    : 500
  479.             }
  480.         });
  481.        
  482.         $('body').on("click", ".accpetOrderBtnTableList", function(e) {
  483.            
  484.             let elem = $(this);
  485.             $(this).parents('.new-order-actions').addClass('popup-order-processing');
  486.  
  487.             @if($autoPrinting)
  488.                 let printType = null;
  489.                 let order_id = $(this).data("id");
  490.                 let token = $('.csrfToken').val();
  491.  
  492.                 $.ajax({
  493.                     url: '{{ route('thermalprinter.getOrderData') }}',
  494.                     type: 'POST',
  495.                     dataType: 'JSON',
  496.                     data: {order_id: order_id, _token: token, print_type: printType },
  497.                 })
  498.                 .done(function(response) {
  499.                     let content = {};
  500.                     content.type = 'print-receipt';
  501.                     content.data = response;
  502.                     let sendData = JSON.stringify(content);
  503.                         if (socket != null && socket.readyState == 1) {
  504.                             socket.send(sendData);
  505.                             $.jGrowl("", {
  506.                                 position: 'bottom-center',
  507.                                 header: '{{__('thermalPrinterLang.printCommandSentMessage')}}',
  508.                                 theme: 'bg-success',
  509.                                 life: '3000'
  510.                             });
  511.                         } else {
  512.                             initializeSocket();
  513.                             setTimeout(function() {
  514.                                 socket.send(sendData);
  515.                                 $.jGrowl("", {
  516.                                     position: 'bottom-center',
  517.                                     header: '{{__('storeDashboard.printCommandSentMessage')}}',
  518.                                     theme: 'bg-success',
  519.                                     life: '5000'
  520.                                 });
  521.                             }, 700);
  522.                         }
  523.                         acceptOrderTableList(elem);
  524.                     })
  525.                     .fail(function() {
  526.                         console.log("Print Error.")
  527.                         acceptOrderTableList(elem);
  528.                     })
  529.                 @else
  530.                     acceptOrderTableList(elem);
  531.                 @endif
  532.         });
  533.  
  534.         acceptOrderTableList = function(elem) {
  535.             let id = elem.attr("data-id");
  536.             let acceptOrderUrl = "{{ url('/store-owner/orders/accept-order') }}/" +id;
  537.             $.ajax({
  538.                 url: acceptOrderUrl,
  539.                 type: 'GET',
  540.                 dataType: 'JSON',
  541.             })
  542.             .done(function(data) {
  543.                 $.jGrowl("{{__('storeDashboard.orderAcceptedNotification')}}", {
  544.                     position: 'bottom-center',
  545.                     header: '{{__('storeDashboard.successNotification')}}',
  546.                     theme: 'bg-success',
  547.                     life: '5000'
  548.                 });
  549.                 setTimeout(function() {
  550.                     window.location.reload();
  551.                 }, 500);
  552.             })
  553.             .fail(function() {
  554.                 console.log("error")
  555.                 $.jGrowl("{{__('storeDashboard.orderSomethingWentWrongNotification')}}", {
  556.                     position: 'bottom-center',
  557.                     header: '{{__('storeDashboard.woopssNotification')}}',
  558.                     theme: 'bg-warning',
  559.                     life: '5000'
  560.                 });
  561.             })
  562.         }
  563.    
  564.         $('body').on("click", ".cancelOrderBtnTableList", function(e) {
  565.             return false;
  566.         });
  567.    
  568.         $('body').on("click", ".cancelOrderBtnTableList", function(e) {
  569.             e.preventDefault()
  570.             if (((new Date().getTime()) - touchtime) < 500) {
  571.                 $(this).parents('.new-order-actions').addClass('popup-order-processing');
  572.                 window.location = this.href;
  573.                 return false;
  574.             }
  575.             touchtime = new Date().getTime();
  576.         });
  577.    
  578.         /* NEW ORDER ALERT POPUP */
  579.         let notification = document.createElement('audio');
  580.         let notificationFileRoute = '{{substr(url("/"), 0, strrpos(url("/"), '/'))}}/assets/backend/tones/{{ config('appSettings.restaurantNotificationAudioTrack') }}.mp3';
  581.            notification.setAttribute('src', notificationFileRoute);
  582.            notification.setAttribute('type', 'audio/mp3');
  583.            // notification.setAttribute('muted', 'muted');
  584.            notification.setAttribute('loop', 'true');
  585.        
  586.         $(".stopSound").click(function(event) {
  587.             notification.pause();
  588.             notification.currentTime = 0;
  589.         });
  590.        
  591.      
  592.         const newOrderJson = @json($newOrders);
  593.         console.log(newOrderJson);
  594.    
  595.         setInterval(function() {
  596.             $.ajax({
  597.                 url: '{{ route('restaurant.getNewOrders') }}',
  598.                 type: 'POST',
  599.                 dataType: 'json',
  600.                 data: {listed_order_ids: @json($newOrdersIds), _token: $('#csrfToken').val()},
  601.             })
  602.    
  603.             .done(function(newArray) {
  604.                 console.log("New Array", newArray)
  605.                 console.log(newOrderJson.length);
  606.                 console.log(newArray.length );
  607.    
  608.                 if (newArray.length > 0) {
  609.                     //if new orders, then lenght will be greater, if order cancelled, then it should not go inside this
  610.                     console.log("NEW ORDER")
  611.                
  612.                     $('#newOrderModal').modal({
  613.                         backdrop: 'static',
  614.                         keyboard: false
  615.                     });
  616.    
  617.                     //play sound
  618.                     notification.play();
  619.    
  620.                     console.log("New Array", newArray)
  621.                     // const newOrder = newArray[0];
  622.    
  623.                     let newOrderData = "";
  624.                     $.map(newArray, function(order, index) {
  625.                         if(order.delivery_type == 2) {
  626.                             var selfPickup = '<span class="badge badge-flat border-danger-800 text-default text-capitalize ml-1">{{__('storeDashboard.dashboardSelfPickup')}}</span>'
  627.                         } else {
  628.                             selfPickup = "";
  629.                         }
  630.    
  631.                         let viewOrderURL = "{{ url('/store-owner/order') }}/" + order.unique_order_id;
  632.                        
  633.                         if (order.tip_amount != null) {
  634.                             var orderTotal = parseFloat(order.total) - parseFloat(order.tip_amount);
  635.                         } else {
  636.                              var orderTotal = order.total;
  637.                         }
  638.  
  639.                         newOrderData +='<div class="popup-order mb-3"><div class="text-center my-3 h5"><strong><span class="text-semibold no-margin">{{ config('appSettings.currencyFormat') }}'+orderTotal+'</span> <i class="icon-arrow-right5"></i> <a href="'+viewOrderURL+'">'+order.unique_order_id+'</a> <i class="icon-arrow-right5"></i>'+order.restaurant.name+'</strong> '+ selfPickup +'</div>';
  640.    
  641.                         newOrderData += '<div class="d-flex justify-content-center"><button data-id="'+order.id+'" class="btn btn-primary btn-labeled btn-labeled-left mr-2 acceptOrderBtn"><b><i class="icon-checkmark3 ml-1"></i></b> {{__('storeDashboard.dashboardAcceptOrder')}} </a> <button data-id="'+order.id+'" class="btn btn-danger btn-labeled btn-labeled-right mr-2 cancelOrderBtnPopup" data-popup="tooltip" data-placement="top" title="{{__('storeDashboard.dashboardDoubleClickMsg')}}"> <b><i class="icon-cross ml-1"></i></b> {{__('storeDashboard.dashboardCancelOrder')}}  </a></div></div>'
  642.                        
  643.    
  644.                         $('#newOrdersData').html(newOrderData);
  645.                         $('#newOrdersNoOrdersMessage').remove();
  646.                     });
  647.                    
  648.                 } else {
  649.                     console.log("NO New Order")
  650.                     //when orde has been accepted or denied, length will be 0, close the model
  651.                     $('#newOrderModal').modal('hide');
  652.                 }
  653.             })
  654.             .fail(function() {
  655.                 console.log("error");
  656.             })  
  657.         }, {{ config("appSettings.restaurantNewOrderRefreshRate") }} * 1000); //all API every x seconds (config settings from admin)
  658.        
  659.         //reload page when popup closed
  660.         $('#newOrderModal').on('hidden.bs.modal', function () {
  661.             window.location.reload();
  662.         });
  663.    
  664.         //process accept order click on new order alert popup
  665.          $('body').on("click", ".acceptOrderBtn", function(e) {
  666.            
  667.             let context = $(this).parents('.popup-order');
  668.             context.addClass('popup-order-processing').prepend('<div class="d-flex pt-2 pr-2 float-right"><i class="icon-spinner10 spinner"></i></div>')
  669.             console.log("HERE", context);
  670.    
  671.             let id = $(this).attr("data-id");
  672.             let acceptOrderUrl = "{{ url('/store-owner/orders/accept-order') }}/" +id;
  673.             $.ajax({
  674.                 url: acceptOrderUrl,
  675.                 type: 'GET',
  676.                 dataType: 'JSON',
  677.             })
  678.             .done(function(data) {
  679.                 $(context).remove();
  680.                 //count number of order on popup, if 0 then remove popup
  681.                 if ($('.popup-order').length == 0) {
  682.                     $('#newOrderModal').modal('hide');
  683.                 }
  684.                 $.jGrowl("{{__('storeDashboard.orderAcceptedNotification')}}", {
  685.                     position: 'bottom-center',
  686.                     header: '{{__('storeDashboard.successNotification')}}',
  687.                     theme: 'bg-success',
  688.                     life: '5000'
  689.                 });
  690.             })
  691.             .fail(function() {
  692.                 console.log("error")
  693.                 $.jGrowl("{{__('storeDashboard.orderSomethingWentWrongNotification')}}", {
  694.                     position: 'bottom-center',
  695.                     header: '{{__('storeDashboard.woopssNotification')}}',
  696.                     theme: 'bg-warning',
  697.                     life: '5000'
  698.                 });
  699.             })
  700.         });
  701.    
  702.          //cancel order on double click popup
  703.          $('body').on("click", ".cancelOrderBtnPopup", function(e) {
  704.             e.preventDefault()
  705.    
  706.             if (((new Date().getTime()) - touchtime) < 500) {
  707.            
  708.              let context = $(this).parents('.popup-order');
  709.              context.addClass('popup-order-processing').prepend('<div class="d-flex pt-2 pr-2 float-right"><i class="icon-spinner10 spinner"></i></div>')
  710.              console.log("HERE", context);
  711.          
  712.              let id = $(this).attr("data-id");
  713.              let cancelOrderURL = "{{ url('/store-owner/orders/cancel-order') }}/" +id;
  714.              $.ajax({
  715.                  url: cancelOrderURL,
  716.                  type: 'GET',
  717.                  dataType: 'JSON',
  718.              })
  719.              .done(function(data) {
  720.                  $(context).remove();
  721.                  //count number of order on popup, if 0 then remove popup
  722.                  if ($('.popup-order').length == 0) {
  723.                      $('#newOrderModal').modal('hide');
  724.                  }
  725.                  $.jGrowl("{{__('storeDashboard.orderCanceledNotification')}}", {
  726.                      position: 'bottom-center',
  727.                      header: '{{__('storeDashboard.successNotification')}}',
  728.                      theme: 'bg-success',
  729.                      life: '5000'
  730.                  });
  731.              })
  732.              .fail(function() {
  733.                  console.log("error");
  734.                  $.jGrowl("{{__('storeDashboard.orderSomethingWentWrongNotification')}}", {
  735.                      position: 'bottom-center',
  736.                      header: '{{__('storeDashboard.woopssNotification')}}',
  737.                      theme: 'bg-warning',
  738.                      life: '5000'
  739.                  });
  740.              })
  741.             }
  742.             touchtime = new Date().getTime();
  743.           });
  744.     });
  745. </script>
  746. @endsection
RAW Paste Data