659 lines
31 KiB
PHP
659 lines
31 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Display Antrian - Puskesmas')
|
|
|
|
@section('content')
|
|
<style>
|
|
@keyframes secondPulse {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.second-change {
|
|
animation: secondPulse 0.2s ease-in-out;
|
|
}
|
|
|
|
.clock-glow {
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.time-digit {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
</style>
|
|
|
|
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-blue-800 to-blue-700">
|
|
<div class="container mx-auto px-4 py-6 md:py-8">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8 md:mb-12 animate-fade-in">
|
|
<h1 class="text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-3">🏥 PUSKESMAS</h1>
|
|
<p class="text-blue-200 text-lg md:text-xl">Sistem Antrian Digital</p>
|
|
<div class="w-24 h-1 bg-white mx-auto mt-4 rounded-full"></div>
|
|
|
|
<!-- Digital Clock with Running Seconds -->
|
|
<div class="mt-6 flex justify-center">
|
|
<div
|
|
class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6 border border-white/30 shadow-2xl animate-pulse clock-glow">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="relative">
|
|
<svg class="w-6 h-6 md:w-8 md:h-8 text-white" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<!-- Animated dot for seconds -->
|
|
<div class="absolute -top-1 -right-1 w-2 h-2 bg-red-400 rounded-full animate-ping"></div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-lg md:text-xl text-blue-200 font-medium" id="current-date">Loading...</div>
|
|
<div class="text-2xl md:text-3xl lg:text-4xl text-white font-bold font-mono tracking-wider time-digit"
|
|
id="current-time">00:00:00</div>
|
|
<div class="text-xs text-blue-200 mt-1">Waktu Real-time</div>
|
|
<div class="text-xs text-blue-100 mt-1" id="time-format">24 Jam</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Queue Display -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
|
<!-- Poli Umum -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 animate-slide-up">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">Poli Umum</h2>
|
|
<div class="w-16 h-1 bg-blue-500 mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<div class="text-4xl md:text-6xl lg:text-7xl font-bold text-blue-600 mb-3" id="poli-umum-current">
|
|
{{ $poliUmumCurrent?->no_antrian ?? '---' }}
|
|
</div>
|
|
<p class="text-gray-600 text-sm md:text-base font-medium">Sedang Dipanggil</p>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Antrian Berikutnya:</h3>
|
|
<div class="space-y-3" data-next-queue="poli-umum-next">
|
|
@forelse($poliUmumNext ?? [] as $antrian)
|
|
<div
|
|
class="bg-gray-50 rounded-xl p-4 border border-gray-200 hover:shadow-md transition duration-200">
|
|
<span
|
|
class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-gray-500 text-center py-6 bg-gray-50 rounded-xl">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
|
</path>
|
|
</svg>
|
|
<p class="text-sm">Tidak ada antrian</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Poli Gigi -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 animate-slide-up" style="animation-delay: 0.1s;">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">Poli Gigi</h2>
|
|
<div class="w-16 h-1 bg-green-500 mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<div class="text-4xl md:text-6xl lg:text-7xl font-bold text-green-600 mb-3" id="poli-gigi-current">
|
|
{{ $poliGigiCurrent?->no_antrian ?? '---' }}
|
|
</div>
|
|
<p class="text-gray-600 text-sm md:text-base font-medium">Sedang Dipanggil</p>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Antrian Berikutnya:</h3>
|
|
<div class="space-y-3" data-next-queue="poli-gigi-next">
|
|
@forelse($poliGigiNext ?? [] as $antrian)
|
|
<div
|
|
class="bg-gray-50 rounded-xl p-4 border border-gray-200 hover:shadow-md transition duration-200">
|
|
<span
|
|
class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-gray-500 text-center py-6 bg-gray-50 rounded-xl">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
|
</path>
|
|
</svg>
|
|
<p class="text-sm">Tidak ada antrian</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Poli Jiwa -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 animate-slide-up" style="animation-delay: 0.2s;">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">Poli Jiwa</h2>
|
|
<div class="w-16 h-1 bg-pink-500 mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<div class="text-4xl md:text-6xl lg:text-7xl font-bold text-pink-600 mb-3" id="poli-jiwa-current">
|
|
{{ $poliJiwaCurrent?->no_antrian ?? '---' }}
|
|
</div>
|
|
<p class="text-gray-600 text-sm md:text-base font-medium">Sedang Dipanggil</p>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Antrian Berikutnya:</h3>
|
|
<div class="space-y-3" data-next-queue="poli-jiwa-next">
|
|
@forelse($poliJiwaNext ?? [] as $antrian)
|
|
<div
|
|
class="bg-gray-50 rounded-xl p-4 border border-gray-200 hover:shadow-md transition duration-200">
|
|
<span
|
|
class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-gray-500 text-center py-6 bg-gray-50 rounded-xl">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
|
</path>
|
|
</svg>
|
|
<p class="text-sm">Tidak ada antrian</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Poli Tradisional -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 animate-slide-up" style="animation-delay: 0.3s;">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">Poli Tradisional</h2>
|
|
<div class="w-16 h-1 bg-yellow-500 mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<div class="text-4xl md:text-6xl lg:text-7xl font-bold text-yellow-600 mb-3"
|
|
id="poli-tradisional-current">
|
|
{{ $poliTradisionalCurrent?->no_antrian ?? '---' }}
|
|
</div>
|
|
<p class="text-gray-600 text-sm md:text-base font-medium">Sedang Dipanggil</p>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Antrian Berikutnya:</h3>
|
|
<div class="space-y-3" data-next-queue="poli-tradisional-next">
|
|
@forelse($poliTradisionalNext ?? [] as $antrian)
|
|
<div
|
|
class="bg-gray-50 rounded-xl p-4 border border-gray-200 hover:shadow-md transition duration-200">
|
|
<span
|
|
class="text-lg md:text-xl font-bold text-gray-900">{{ $antrian->no_antrian }}</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-gray-500 text-center py-6 bg-gray-50 rounded-xl">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p class="text-sm">Tidak ada antrian</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="text-center mt-12 md:mt-16">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 md:p-6 inline-block">
|
|
<p class="text-blue-200 text-sm md:text-base font-medium">
|
|
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
|
|
</path>
|
|
</svg>
|
|
Sistem Antrian Digital Puskesmas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// 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() {
|
|
this.audioQueue = [];
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
// Play complete audio sequence
|
|
async playAudioSequence(audioSequence) {
|
|
if (this.isPlaying) {
|
|
console.log('Audio already playing, queueing...');
|
|
this.audioQueue.push(audioSequence);
|
|
return;
|
|
}
|
|
|
|
this.isPlaying = true;
|
|
|
|
for (let i = 0; i < audioSequence.length; i++) {
|
|
const audioItem = audioSequence[i];
|
|
await this.playAudioItem(audioItem);
|
|
|
|
// Wait between audio items (0.5 second gap)
|
|
if (i < audioSequence.length - 1) {
|
|
await this.delay(500);
|
|
}
|
|
}
|
|
|
|
this.isPlaying = false;
|
|
|
|
// Play next in queue if available
|
|
if (this.audioQueue.length > 0) {
|
|
const nextSequence = this.audioQueue.shift();
|
|
this.playAudioSequence(nextSequence);
|
|
}
|
|
}
|
|
|
|
// Play single audio item
|
|
playAudioItem(audioItem) {
|
|
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 => {
|
|
console.error('Audio play error:', error);
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
audio.addEventListener('ended', () => {
|
|
console.log('Audio ended');
|
|
resolve();
|
|
});
|
|
|
|
audio.addEventListener('error', (error) => {
|
|
console.error('Audio playback error:', error);
|
|
resolve();
|
|
});
|
|
|
|
// Fallback timeout
|
|
setTimeout(() => {
|
|
resolve();
|
|
}, audioItem.duration || 5000);
|
|
} else if (audioItem.type === 'delay') {
|
|
// Handle delay between audio files
|
|
console.log(`Waiting ${audioItem.duration}ms delay...`);
|
|
setTimeout(() => {
|
|
console.log('Delay finished');
|
|
resolve();
|
|
}, audioItem.duration);
|
|
} else {
|
|
console.warn('Unknown audio type:', audioItem.type);
|
|
resolve();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Utility function for delays
|
|
delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
// Play audio for queue call
|
|
async playQueueCall(poliName) {
|
|
try {
|
|
console.log('Playing audio for:', poliName);
|
|
|
|
const response = await fetch('{{ route('audio.queue-call') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|
},
|
|
body: JSON.stringify({
|
|
poli_name: poliName
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.audio_sequence) {
|
|
console.log('Audio sequence received:', data.audio_sequence);
|
|
await this.playAudioSequence(data.audio_sequence);
|
|
} else {
|
|
console.error('Failed to get audio sequence:', data.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error playing audio:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize Audio Player
|
|
const audioPlayer = new AudioPlayer();
|
|
|
|
|
|
|
|
|
|
// Show SweetAlert2 for success messages
|
|
@if (session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: '{{ session('success') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#10B981',
|
|
timer: 3000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Show SweetAlert2 for error messages
|
|
@if (session('error'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 4000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Show display error message
|
|
@if (session('error') && str_contains(session('error'), 'display'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error Display!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 4000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// No more auto refresh - using real-time updates instead
|
|
|
|
// Add sound effect for new calls
|
|
function playNotificationSound() {
|
|
const audio = new Audio(
|
|
'data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'
|
|
);
|
|
audio.play();
|
|
}
|
|
|
|
// Check for new calls every 2 seconds
|
|
setInterval(function() {
|
|
// This would typically make an AJAX call to check for new calls
|
|
// For now, we'll just reload the page
|
|
}, 2000);
|
|
|
|
// Show notification when new call is detected
|
|
function showNewCallNotification(poliName, number) {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Panggilan Baru!',
|
|
text: `Antrian selanjutnya poli ${poliName} nomor ${number}`,
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#3B82F6',
|
|
timer: 5000,
|
|
timerProgressBar: true,
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
background: '#3B82F6',
|
|
color: '#ffffff'
|
|
});
|
|
|
|
// Play notification sound
|
|
playNotificationSound();
|
|
}
|
|
|
|
// Add pulse animation to current numbers
|
|
function addPulseAnimation() {
|
|
const currentNumbers = document.querySelectorAll('[id$="-current"]');
|
|
currentNumbers.forEach(element => {
|
|
if (element.textContent !== '---') {
|
|
element.classList.add('animate-pulse');
|
|
setTimeout(() => {
|
|
element.classList.remove('animate-pulse');
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize animations
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
addPulseAnimation();
|
|
});
|
|
|
|
// Check for new calls using polling (fallback for broadcast)
|
|
let lastCallTime = new Date().getTime();
|
|
|
|
function checkForNewCalls() {
|
|
fetch('/api/check-new-calls?last_check=' + lastCallTime)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.has_new_call && data.antrian) {
|
|
console.log('New call detected:', data.antrian);
|
|
|
|
// Play audio for the called queue
|
|
audioPlayer.playQueueCall(data.antrian.poli_name);
|
|
|
|
// Show notification
|
|
showNewCallNotification(data.antrian.poli_name, data.antrian.queue_number);
|
|
|
|
// Add pulse animation to the current number
|
|
addPulseAnimation();
|
|
|
|
// Update last check time
|
|
lastCallTime = new Date().getTime();
|
|
|
|
// Update display without refresh
|
|
updateDisplayData();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('Error checking for new calls:', error);
|
|
});
|
|
}
|
|
|
|
// Function to update display data without refresh
|
|
function updateDisplayData() {
|
|
fetch('/api/display-data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update current numbers
|
|
if (data.poliUmumCurrent) {
|
|
document.getElementById('poli-umum-current').textContent = data.poliUmumCurrent.no_antrian;
|
|
}
|
|
if (data.poliGigiCurrent) {
|
|
document.getElementById('poli-gigi-current').textContent = data.poliGigiCurrent.no_antrian;
|
|
}
|
|
if (data.poliJiwaCurrent) {
|
|
document.getElementById('poli-jiwa-current').textContent = data.poliJiwaCurrent.no_antrian;
|
|
}
|
|
if (data.poliTradisionalCurrent) {
|
|
document.getElementById('poli-tradisional-current').textContent = data.poliTradisionalCurrent
|
|
.no_antrian;
|
|
}
|
|
|
|
// Update next queues
|
|
updateNextQueue('poli-umum-next', data.poliUmumNext);
|
|
updateNextQueue('poli-gigi-next', data.poliGigiNext);
|
|
updateNextQueue('poli-jiwa-next', data.poliJiwaNext);
|
|
updateNextQueue('poli-tradisional-next', data.poliTradisionalNext);
|
|
})
|
|
.catch(error => {
|
|
console.log('Error updating display data:', error);
|
|
});
|
|
}
|
|
|
|
// Function to update next queue section
|
|
function updateNextQueue(containerId, nextQueues) {
|
|
const container = document.querySelector(`[data-next-queue="${containerId}"]`);
|
|
if (!container) return;
|
|
|
|
if (nextQueues && nextQueues.length > 0) {
|
|
container.innerHTML = nextQueues.map(antrian => `
|
|
<div class="bg-gray-50 rounded-xl p-4 border border-gray-200 hover:shadow-md transition duration-200">
|
|
<span class="text-lg md:text-xl font-bold text-gray-900">${antrian.no_antrian}</span>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
container.innerHTML = `
|
|
<div class="text-gray-500 text-center py-6 bg-gray-50 rounded-xl">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
<p class="text-sm">Tidak ada antrian</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Check for new calls every 3 seconds
|
|
setInterval(checkForNewCalls, 3000);
|
|
|
|
// Update display data every 10 seconds
|
|
setInterval(updateDisplayData, 10000);
|
|
</script>
|
|
@endpush
|
|
@endsection
|