user logs

resources/views/menu_v1/_userLogs.blade.php

@@ -0,0 +1,170 @@
+<style>
+	#map {
+		height: 100%;
+		margin: 0;
+	}
+	.my-leaflet-map-container img {
+		max-height: none;
+	}
+	.dtl-text{
+		font-size: 11px;
+	}
+	.head-text{
+		font-size: 12px !important;
+	}
+	/* .leaflet-overlay-pane svg {
+		transform: none !important;
+	} */
+	.leaflet-routing-container {
+		display: none !important;
+	}
+
+	#viewPdf {
+		display: flex;
+		justify-content: center;
+		width: 794px;
+		/* height: auto; */
+		max-width: 100%; /* Ensures it is responsive */
+	}
+	/* .modal-dialog{
+		width: 794px;
+	} */
+
+</style>
+
+
+<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h5 class="modal-title" id="mdlDetailTripLabel">{{$user->first_name}} Logs</h5>
+			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+		</div>
+		<div class="modal-body">
+			<div class="row">
+				<div class="col-4">
+					<div class="form-group">
+						<label class="text-muted">From</label>
+						<!-- default today -->
+						<!-- <input class="form-control" id="tgl0" value="02-09-2025 00:00"> -->
+						<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
+					</div>
+				</div>
+				<div class="col-4">
+					<div class="form-group">
+						<label class="text-muted">To</label>
+						<!-- <input class="form-control" id="tgl1" value="02-09-2025 23:00"> -->
+						<input class="form-control" id="tgl1" value="{{ date('d-m-Y 23:59') }}">
+					</div>
+				</div>
+				<div class="col-4 d-flex align-items-end">
+					<button class="btn btn-primary" id="submitFilter">Submit</button>
+				</div>
+			</div>
+			<div class="table-responsive">
+				<table id="tLogs" class="table table-hover dataTable w-100">
+					<thead>
+						<tr class="">
+							<th class="">Time</th>
+							<th class="">Log</th>
+						</tr>
+					</thead>
+				</table>
+			</div>
+		</div>
+		<div class="modal-footer">
+			<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Close</button>
+		</div>
+	</div>
+</div>
+
+<script>
+	$(document).ready(function(){
+		$('.time').each(function () {
+			const unix = parseInt($(this).text().trim()) + AppState.TIMEFIX;
+			$(this).text(moment.unix(unix).format('DD MMM YYYY HH:mm:ss'));
+		});
+		$('#tgl0, #tgl1').datetimepicker({
+			format:'d-m-Y H:i',
+			defaultTime:'00:00',
+			closeOnDateSelect: true,
+			// mask:true
+		});
+
+		$('#submitFilter').on('click', function() {
+			DTable.reload();
+		});
+		// $('#submitFilter').trigger('click');
+
+        const DTable = {
+			table: null,
+    		lastAjax: null, // keep track of the last ajax request
+            activate: function() {
+                DTable.reload();
+            },
+            reload: function() {
+				// Abort the last request if it's still running
+				if (DTable.lastAjax) {
+					DTable.lastAjax.abort();
+				}
+				if (DTable.table) {
+					// If table already exists → reload
+					DTable.table.ajax.reload();
+					return;
+				}
+
+				DTable.table = $('#tLogs').DataTable({
+					searching: false,   // 🔹 remove search box
+					ordering: false,    // 🔹 disable sorting for all columns
+					processing: true,
+					serverSide: false,
+					bLengthChange: true,
+					deferRender: true,
+					destroy: true,
+					ajax: function(data, callback, settings) {
+						// Abort previous
+						if (DTable.lastAjax) {
+							DTable.lastAjax.abort();
+						}
+
+						// Fire new request
+						DTable.lastAjax = $.ajax({
+							url: `{{ route('api_user_logs') }}?
+								tgl0=${moment($('#tgl0').val(), "DD-MM-YYYY HH:mm").unix()}
+								&tgl1=${moment($('#tgl1').val(), "DD-MM-YYYY HH:mm").unix()}
+								&id={{$user->id}}
+							`,
+							type: 'GET',
+							success: function(json) {
+								callback(json);
+							},
+							error: function(xhr, status, error) {
+								if (status !== 'abort') {
+									console.error("AJAX error:", error);
+								}
+							},
+							complete: function() {
+								DTable.lastAjax = null;
+							}
+						});
+					},
+                    deferRender: true,
+					columns: [
+						{
+							data: 'crt',
+							render: (data, type, row, meta) => {
+								// let addr = row
+								return `
+									${moment.unix(data).format('DD MMM YYYY HH:mm:ss')}<br>
+								`;
+							} 
+
+						},
+						{ data: 'log'},
+					],
+					paging: false,
+				});
+            },
+        };
+		DTable.activate();
+	});
+</script>