@@ -10,6 +36,31 @@
🏥 PUSKESMAS
Sistem Antrian Digital
+
+
+
+
+
+
+
+
Loading...
+
00:00:00
+
Waktu Real-time
+
24 Jam
+
+
+
+
@@ -173,9 +224,10 @@ class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}
- {{ now()->format('d F Y H:i:s') }}
+ Sistem Antrian Digital Puskesmas
@@ -184,6 +236,120 @@ class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}
+ // Digital Clock with Running Seconds
+ class DigitalClock {
+ constructor() {
+ this.dateElement = document.getElementById('current-date');
+ this.timeElement = document.getElementById('current-time');
+ this.timeFormatElement = document.getElementById('time-format');
+ this.updateInterval = null;
+ this.lastSeconds = -1;
+ this.use24Hour = true; // Default to 24-hour format
+ }
+
+ // Format date to Indonesian format
+ formatDate(date) {
+ const options = {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ };
+ return date.toLocaleDateString('id-ID', options);
+ }
+
+ // Format time with leading zeros
+ formatTime(date) {
+ let hours = date.getHours();
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ const seconds = String(date.getSeconds()).padStart(2, '0');
+
+ if (!this.use24Hour) {
+ // 12-hour format
+ const ampm = hours >= 12 ? 'PM' : 'AM';
+ hours = hours % 12;
+ hours = hours ? hours : 12; // 0 should be 12
+ return `${String(hours).padStart(2, '0')}:${minutes}:${seconds} ${ampm}`;
+ } else {
+ // 24-hour format
+ return `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`;
+ }
+ }
+
+ // Update clock display with visual effects
+ update() {
+ const now = new Date();
+ const currentSeconds = now.getSeconds();
+
+ // Update date (only once per day)
+ this.dateElement.textContent = this.formatDate(now);
+
+ // Update time
+ this.timeElement.textContent = this.formatTime(now);
+
+ // Add visual effect when seconds change
+ if (currentSeconds !== this.lastSeconds) {
+ this.addSecondChangeEffect();
+ this.lastSeconds = currentSeconds;
+ }
+ }
+
+ // Add visual effect for second change
+ addSecondChangeEffect() {
+ this.timeElement.classList.add('scale-110', 'text-yellow-300');
+ setTimeout(() => {
+ this.timeElement.classList.remove('scale-110', 'text-yellow-300');
+ }, 200);
+ }
+
+ // Start the clock
+ start() {
+ this.update(); // Update immediately
+ this.updateInterval = setInterval(() => this.update(), 1000); // Update every second
+ }
+
+ // Stop the clock
+ stop() {
+ if (this.updateInterval) {
+ clearInterval(this.updateInterval);
+ this.updateInterval = null;
+ }
+ }
+
+ // Get current time as string
+ getCurrentTimeString() {
+ const now = new Date();
+ return this.formatTime(now);
+ }
+
+ // Get current date as string
+ getCurrentDateString() {
+ const now = new Date();
+ return this.formatDate(now);
+ }
+
+ // Toggle between 12 and 24 hour format
+ toggleTimeFormat() {
+ this.use24Hour = !this.use24Hour;
+ this.timeFormatElement.textContent = this.use24Hour ? '24 Jam' : '12 Jam';
+ this.update(); // Update immediately with new format
+ }
+
+ // Set time format
+ setTimeFormat(use24Hour) {
+ this.use24Hour = use24Hour;
+ this.timeFormatElement.textContent = this.use24Hour ? '24 Jam' : '12 Jam';
+ this.update();
+ }
+ }
+
+ // Initialize and start the digital clock
+ let digitalClock;
+ document.addEventListener('DOMContentLoaded', function() {
+ digitalClock = new DigitalClock();
+ digitalClock.start();
+ });
+
// Audio Player for Queue Calls
class AudioPlayer {
constructor() {
@@ -225,7 +391,7 @@ class AudioPlayer {
return new Promise((resolve) => {
if (audioItem.type === 'audio_file') {
const audio = new Audio(audioItem.url);
-
+
audio.addEventListener('loadeddata', () => {
console.log('Audio loaded, playing...');
audio.play().catch(error => {
@@ -271,7 +437,7 @@ class AudioPlayer {
async playQueueCall(poliName) {
try {
console.log('Playing audio for:', poliName);
-
+
const response = await fetch('{{ route('audio.queue-call') }}', {
method: 'POST',
headers: {
@@ -487,8 +653,6 @@ function updateNextQueue(containerId, nextQueues) {
// Update display data every 10 seconds
setInterval(updateDisplayData, 10000);
-
-
@endpush
@endsection