make display informasi perangkat dan sensor to realtime view,and litle configuration on reports
This commit is contained in:
Vckynando12
parent
fd69390cdd
commit
24c4212b2f
|
|
@ -128,10 +128,10 @@
|
|||
<span class="w-3 h-3 rounded-full bg-pink-500 mr-2"></span>
|
||||
<span><strong>System Wemos:</strong> Perubahan status sistem Wemos</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
{{-- <li class="flex items-center">
|
||||
<span class="w-3 h-3 rounded-full bg-gray-500 mr-2"></span>
|
||||
<span><strong>Device Status:</strong> Perubahan status perangkat lainnya</span>
|
||||
</li>
|
||||
</li> --}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
<div class="relative">
|
||||
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
|
||||
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2.586a1 1 0 0 0 .293.707l-6.414 6.414a1 1 0 0 1-.293.707V17l-4 4v-6.586a1 1 0 0 1-.293-.707L3.293 7.293A1 1 0 0 0 3 6.586V4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="date" id="filterDate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5">
|
||||
|
|
@ -815,7 +815,6 @@ function renderReports(reports) {
|
|||
|
||||
// Flowbite badge styles dengan warna khusus untuk setiap jenis
|
||||
const badgeClasses = {
|
||||
'primary': 'bg-blue-100 text-blue-800',
|
||||
'motion': 'bg-yellow-100 text-yellow-800',
|
||||
'status': 'bg-red-100 text-red-800',
|
||||
'fan': 'bg-green-100 text-green-800',
|
||||
|
|
@ -959,14 +958,10 @@ function detectChanges(report, reports, index) {
|
|||
}
|
||||
|
||||
// Device changes - general fallback if needed
|
||||
if (report.device && prevReport.device &&
|
||||
JSON.stringify(report.device) !== JSON.stringify(prevReport.device)) {
|
||||
changes.push({ type: 'Device Status', badge: 'device' });
|
||||
}
|
||||
|
||||
if (changes.length === 0) {
|
||||
changes.push({ type: 'Tidak ada perubahan', badge: 'light' });
|
||||
}
|
||||
// if (report.device && prevReport.device &&
|
||||
// JSON.stringify(report.device) !== JSON.stringify(prevReport.device)) {
|
||||
// changes.push({ type: 'Device Status', badge: 'device' });
|
||||
// }
|
||||
|
||||
return changes;
|
||||
}
|
||||
|
|
@ -1018,7 +1013,7 @@ function showDetail(report) {
|
|||
<li class="p-3 bg-gray-50 rounded-lg"><strong class="text-gray-700">Akses Terakhir:</strong> ${report.smartcab.last_access || 'N/A'}</li>
|
||||
<li class="p-3 bg-gray-50 rounded-lg"><strong class="text-gray-700">Status Servo:</strong> ${report.smartcab.servo_status || 'N/A'}</li>
|
||||
<li class="p-3 bg-gray-50 rounded-lg"><strong class="text-gray-700">Status Perangkat:</strong> ${report.smartcab.status_device || 'N/A'}</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -1169,7 +1164,6 @@ function analyzeSystemOverview(reports) {
|
|||
'servoLog': 0, // Servo log
|
||||
'systemEsp': 0, // System ESP
|
||||
'systemWemos': 0, // System Wemos
|
||||
'deviceStatus': 0 // Device status
|
||||
};
|
||||
|
||||
// Total untuk persentase
|
||||
|
|
@ -1256,12 +1250,6 @@ function countChanges(report, index) {
|
|||
}
|
||||
}
|
||||
|
||||
// Device changes - general fallback if needed
|
||||
if (report.device && prevReport.device &&
|
||||
JSON.stringify(report.device) !== JSON.stringify(prevReport.device)) {
|
||||
changes.push('deviceStatus');
|
||||
}
|
||||
|
||||
return changes;
|
||||
}
|
||||
|
||||
|
|
@ -1273,11 +1261,6 @@ function countChanges(report, index) {
|
|||
statusCounts[change]++;
|
||||
totalCounts++;
|
||||
});
|
||||
|
||||
// Jika tidak ada perubahan, tambahkan satu ke total untuk report ini
|
||||
if (changes.length === 0 && index > 0 && index < reports.length - 1) {
|
||||
totalCounts++;
|
||||
}
|
||||
});
|
||||
|
||||
// Update counter
|
||||
|
|
@ -1299,7 +1282,6 @@ function countChanges(report, index) {
|
|||
statusCounts['servoLog'],
|
||||
statusCounts['systemEsp'],
|
||||
statusCounts['systemWemos'],
|
||||
statusCounts['deviceStatus']
|
||||
];
|
||||
|
||||
// Label yang sesuai dengan resultData
|
||||
|
|
@ -1317,7 +1299,6 @@ function countChanges(report, index) {
|
|||
'Servo Log',
|
||||
'System ESP',
|
||||
'System Wemos',
|
||||
'Device Status'
|
||||
];
|
||||
|
||||
// Warna yang sesuai dengan resultData (sesuai dengan badge colors)
|
||||
|
|
@ -1334,8 +1315,7 @@ function countChanges(report, index) {
|
|||
'#14b8a6', // MPU (Teal)
|
||||
'#0ea5e9', // Servo Log (Sky)
|
||||
'#e11d48', // System ESP (Rose)
|
||||
'#ec4899', // System Wemos (Pink)
|
||||
'#6b7280' // Device Status (Gray)
|
||||
'#ec4899' // System Wemos (Pink)
|
||||
];
|
||||
|
||||
// Filter untuk menghilangkan kategori dengan nilai nol
|
||||
|
|
|
|||
|
|
@ -281,7 +281,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">DHT 11</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $dhtStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $dhtStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
<p class="dht-status text-sm sm:text-lg font-semibold {{ $dhtStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $dhtStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -292,7 +292,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">MPU 6050</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $mpuStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $mpuStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
<p class="mpu-status text-sm sm:text-lg font-semibold {{ $mpuStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $mpuStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -303,7 +303,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Servo MG996r</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $servoStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $servoStatus }}</p>
|
||||
<p class="servo-status text-sm sm:text-lg font-semibold {{ $servoStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $servoStatus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">RFID Reader</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $rfidStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $rfidStatus }}</p>
|
||||
<p class="rfid-status text-sm sm:text-lg font-semibold {{ $rfidStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $rfidStatus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -344,7 +344,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">DHT 11</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $dhtStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $dhtStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
<p class="dht-status text-sm sm:text-lg font-semibold {{ $dhtStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $dhtStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -355,7 +355,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">MPU 6050</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $mpuStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $mpuStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
<p class="mpu-status text-sm sm:text-lg font-semibold {{ $mpuStatus == 'connected' ? 'text-green-500' : 'text-red-500' }}">{{ $mpuStatus == 'connected' ? 'Connected' : 'Disconnected' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -366,7 +366,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Servo MG996r</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $servoStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $servoStatus }}</p>
|
||||
<p class="servo-status text-sm sm:text-lg font-semibold {{ $servoStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $servoStatus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -377,7 +377,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">RFID Reader</p>
|
||||
<p class="text-sm sm:text-lg font-semibold {{ $rfidStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $rfidStatus }}</p>
|
||||
<p class="rfid-status text-sm sm:text-lg font-semibold {{ $rfidStatus == 'Connected' ? 'text-green-500' : 'text-red-500' }}">{{ $rfidStatus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -388,7 +388,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
|
|||
<div class="flex items-center mb-6">
|
||||
<div class="p-3 sm:p-4 mr-3 sm:mr-4 bg-green-100 rounded-full">
|
||||
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v10a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -975,6 +975,78 @@ function setupListeners() {
|
|||
console.error('Error getting motion status:', error);
|
||||
});
|
||||
|
||||
// TAMBAHAN: Listener untuk status sensor DHT11
|
||||
database.ref('sensors/dht11').on('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('DHT11 status received:', status);
|
||||
|
||||
const isConnected = status === 'connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
// Update status DHT11 di semua elemen yang sesuai
|
||||
document.querySelectorAll('.dht-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `dht-status ${statusClass}`;
|
||||
});
|
||||
}, (error) => {
|
||||
console.error('Error getting DHT11 status:', error);
|
||||
});
|
||||
|
||||
// TAMBAHAN: Listener untuk status sensor MPU6050
|
||||
database.ref('sensors/mpu6050').on('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('MPU6050 status received:', status);
|
||||
|
||||
const isConnected = status === 'connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
// Update status MPU6050 di semua elemen yang sesuai
|
||||
document.querySelectorAll('.mpu-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `mpu-status ${statusClass}`;
|
||||
});
|
||||
}, (error) => {
|
||||
console.error('Error getting MPU6050 status:', error);
|
||||
});
|
||||
|
||||
// TAMBAHAN: Listener untuk status Servo
|
||||
database.ref('sensors/servo').on('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('Servo status received:', status);
|
||||
|
||||
const isConnected = status === 'Connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
// Update status Servo di semua elemen yang sesuai
|
||||
document.querySelectorAll('.servo-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `servo-status ${statusClass}`;
|
||||
});
|
||||
}, (error) => {
|
||||
console.error('Error getting Servo status:', error);
|
||||
});
|
||||
|
||||
// TAMBAHAN: Listener untuk status RFID
|
||||
database.ref('sensors/rfid').on('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('RFID status received:', status);
|
||||
|
||||
const isConnected = status === 'Connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
// Update status RFID di semua elemen yang sesuai
|
||||
document.querySelectorAll('.rfid-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `rfid-status ${statusClass}`;
|
||||
});
|
||||
}, (error) => {
|
||||
console.error('Error getting RFID status:', error);
|
||||
});
|
||||
|
||||
console.log('All listeners setup complete with new approach');
|
||||
}
|
||||
|
||||
|
|
@ -1207,6 +1279,63 @@ function forceRefreshDeviceStatus() {
|
|||
el.className = statusClass;
|
||||
});
|
||||
});
|
||||
|
||||
// PERBAIKAN: Update status sensor dengan path yang benar
|
||||
database.ref('logs/dht/status').once('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('Forcing refresh of DHT11 status:', status);
|
||||
|
||||
const isConnected = status === 'connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
document.querySelectorAll('.dht-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `dht-status ${statusClass}`;
|
||||
});
|
||||
});
|
||||
|
||||
database.ref('logs/mpu/status').once('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('Forcing refresh of MPU6050 status:', status);
|
||||
|
||||
const isConnected = status === 'connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
document.querySelectorAll('.mpu-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `mpu-status ${statusClass}`;
|
||||
});
|
||||
});
|
||||
|
||||
database.ref('logs/servo/status').once('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('Forcing refresh of Servo status:', status);
|
||||
|
||||
const isConnected = status === 'Connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
document.querySelectorAll('.servo-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `servo-status ${statusClass}`;
|
||||
});
|
||||
});
|
||||
|
||||
database.ref('logs/RFID/status').once('value', (snapshot) => {
|
||||
const status = snapshot.val();
|
||||
console.log('Forcing refresh of RFID status:', status);
|
||||
|
||||
const isConnected = status === 'Connected';
|
||||
const statusText = isConnected ? 'Connected' : 'Disconnected';
|
||||
const statusClass = `text-sm sm:text-lg font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`;
|
||||
|
||||
document.querySelectorAll('.rfid-status').forEach(el => {
|
||||
el.textContent = statusText;
|
||||
el.className = `rfid-status ${statusClass}`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fungsi untuk memeriksa status online/offline perangkat
|
||||
|
|
|
|||
11132
storage/app/reports.json
11132
storage/app/reports.json
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue