gitkwesi/sms-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed login email placeholder and added datepicker on date filter on sms list

Browse Source
This commit is contained in:
Kwesi Banson Jnr
2026-04-22 19:15:46 +00:00
parent d42764a89d
commit 16f2dbbdb6
2 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/views/client-traffic/index-test.blade.php
View File

@@ -9,7 +9,14 @@
@endsection
@section('content')
<div id="loadingOverlay"
style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(255,255,255,0.8); z-index:9999;
align-items:center; justify-content:center;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<section class="traffic-hero mb-4">
<div class="row g-4 align-items-end">
<div class="col-lg-8">
@@ -55,9 +62,9 @@
<div class="col-md-6">
<input id="endDate" name="end_date" type="text" class="form-control" placeholder="Select End Date">
</div>
<div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
<!-- <div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
<span class="visually-hidden">Loading...</span>
</div>
</div> -->
</div>
<!-- <div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div> -->
@@ -144,6 +151,7 @@
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="{{ url('public/libs/tabulator-master/dist/js/autotable.min.js') }}"></script>
<script src=" https://cdn.jsdelivr.net/npm/luxon@3.7.2/build/global/luxon.min.js "></script>
<script>
console.log(base_url);
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -163,7 +171,8 @@
});
function sendDailySmsUnits() {
document.getElementById('loadingSpinner').style.display = 'inline-block';
// document.getElementById('loadingSpinner').style.display = 'inline-block';
document.getElementById('loadingOverlay').style.display = 'flex';
const endpoint = "{{ route('client.dailysmsunits') }}";
const startDate = startDateElement.value;
const endDate = endDateElement.value;
@@ -174,9 +183,8 @@
})
.then(response => response.json())
.then(data => {
console.log('Server response:', data);
console.log(data.smsUnits);
document.getElementById('loadingSpinner').style.display = 'none';
// document.getElementById('loadingSpinner').style.display = 'none';
document.getElementById('loadingOverlay').style.display = 'none';
const theReportRange = document.getElementById('reportRange');
const theSmsUnitsValue = document.getElementById('smsUnitsValue');
theReportRange.innerHTML = data.reportDate;
@@ -187,8 +195,8 @@
}
//startDateElement.addEventListener('changeDate', sendDailySmsUnits);
endDateElement.addEventListener('changeDate', sendDailySmsUnits);
//startDateElement.addEventListener('changeDate', sendDailySmsUnits);
endDateElement.addEventListener('changeDate', sendDailySmsUnits);
function statusDesign (cell, formatterParams){
@@ -231,20 +239,55 @@
ajaxResponse: function(url, params, response) {
return response.content;
},
columns: [
// columns: [
{title: "Sender", field: "from", width:150, headerFilter:"input"},
{title: "Msisdn", field: "to", width:150, headerFilter:"input"},
// {title: "Message", field: "message"},
{title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},
// {title: "Status", field: "status"},
// {title: "Delivery Status", field: "deliveryStatus", width:100, headerFilter:"input", formatter: statusDesign},
// {title: "Created At", field: "createdAt"},
{title:"Date Created ", field:"createdAt", width:200, formatter:"datetime", headerFilter:"input", formatterParams:{
inputFormat: "iso",
outputFormat: "dd-MM-yyyy HH:mm:ss",
invalidPlaceholder: "(invalid date)"
}}
// {title: "Sender", field: "from", width:150, headerFilter:"input"},
// {title: "Msisdn", field: "to", width:150, headerFilter:"input"},
// {title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},
// {title:"Date Created ", field:"createdAt", width:200, formatter:"datetime", headerFilter:"input", formatterParams:{
// inputFormat: "iso",
// outputFormat: "dd-MM-yyyy HH:mm:ss",
// invalidPlaceholder: "(invalid date)"
// }}
// ],
columns: [
{title: "Sender", field: "from", width:150, headerFilter:"input"},
{title: "Msisdn", field: "to", width:150, headerFilter:"input"},
{title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},
{
title:"Date Created",
field:"createdAt",
width:200,
formatter:"datetime",
formatterParams:{
inputFormat:"iso",
outputFormat:"yyyy-MM-dd",
invalidPlaceholder:"(invalid date)"
},
headerFilter:function(cell, onRendered, success, cancel){
// Create native date input
var input = document.createElement("input");
input.type = "date";
input.addEventListener("change", function(){
console.log(input.value);
success(input.value); // pass value to Tabulator filter
});
return input;
},
headerFilterFunc:function(headerValue, rowValue){
if(!headerValue){ return true; } // no filter
if(!rowValue){ return false; }
// Extract just the date portion from ISO timestamp
const rowDate = new Date(rowValue);
const formatted = rowDate.toISOString().split("T")[0]; // yyyy-MM-dd
return formatted === headerValue;
}
}
],
});