surya90 NikhilJain Here is my solution, we will play with the update time of the command to define a stage.
"Ongoing order" will continue from the creation of the order and below the time will reset when there is an action on the order: Order Accepted, Delivery Assigned, Picked Up.
Go to resources/views/admin/viewOrder.blade.php
Search "Ongoing order"
After @endif put this code
@if($order->orderstatus_id == 2)
<div class="card">
<div class="card-body text-center">
<h4 class="mb-0"><b>Order Accepted</b></h4>
<span class="liveTimerOrderUpdated"></span>
</div>
</div>
@elseif($order->orderstatus_id == 3)
<div class="card">
<div class="card-body text-center">
<h4 class="mb-0"><b>DeliveryAssigned</b></h4>
<span class="liveTimerOrderUpdated"></span>
</div>
</div>
@elseif($order->orderstatus_id == 4)
<div class="card">
<div class="card-body text-center">
<h4 class="mb-0"><b>Picked up</b></h4>
<span class="liveTimerOrderUpdated"></span>
</div>
</div>
@endif
Now scroll down to the bottom of the page
Before </script> paste this code
$(function() {
var orderCreatedData = "{{ $order->updated_at }}";
var startDateTime = new Date(orderCreatedData);
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer;
function updateClock() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000);
var d = Math.floor(diff/(24*60*60));
diff = diff-(d*24*60*60);
var h = Math.floor(diff/(60*60));
diff = diff-(h*60*60);
var m = Math.floor(diff/(60));
diff = diff-(m*60);
var s = diff;
var checkDay = d > 0 ? true : false;
var checkHour = h > 0 ? true : false;
var checkMin = m > 0 ? true : false;
var checkSec = s > 0 ? true : false;
var formattedTime = checkDay ? d+ " day" : "";
formattedTime += checkHour ? " " +h+ " hour" : "";
formattedTime += checkMin ? " " +m+ " minute" : "";
formattedTime += checkSec ? " " +s+ " second" : "";
$('.liveTimerOrderUpdated').text(formattedTime);
}
timer = setInterval(updateClock, 1000);
});
Save 🙂
