feat(quick-2): archive Flask v1 interface to src_v1/
- Copy app.py, templates, static, data, routes, services - Copy requirements.txt for v1 dependencies
This commit is contained in:
380
src_v1/templates/calibration.html
Normal file
380
src_v1/templates/calibration.html
Normal file
@@ -0,0 +1,380 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TCKRTUIYO - Calibration</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--touch-target-min: 48px;
|
||||
--touch-target-primary: 64px;
|
||||
--primary-color: #0d6efd;
|
||||
--bg-color: #f8f9fa;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* Touch-optimized navigation */
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-btn:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Logo in navigation */
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Calibration cards */
|
||||
.calib-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.calib-card h4 {
|
||||
font-size: 1.3rem;
|
||||
color: #212529;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ADC Channel display */
|
||||
.adc-channel {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.adc-channel h5 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-type {
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 10px;
|
||||
background: #e9ecef;
|
||||
border-radius: 6px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.channel-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.channel-item {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.channel-label {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.channel-value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* Rainfall counters */
|
||||
.rainfall-counter {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rainfall-box {
|
||||
background: #e7f1ff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rainfall-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rainfall-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Reset button */
|
||||
.btn-reset {
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
padding: 15px 30px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
/* Live indicator */
|
||||
.live-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
.live-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #198754;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<a href="/" class="nav-logo">
|
||||
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||
</a>
|
||||
<a href="/" class="nav-btn">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/settings" class="nav-btn">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</a>
|
||||
<a href="/calibration" class="nav-btn active">
|
||||
<i class="bi bi-sliders"></i> Calibration
|
||||
</a>
|
||||
<a href="/files" class="nav-btn">
|
||||
<i class="bi bi-folder"></i> Files
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid p-0">
|
||||
<!-- Alert for status -->
|
||||
<div id="alertMessage" class="alert alert-success m-3" style="display: none;">
|
||||
Settings saved successfully!
|
||||
</div>
|
||||
|
||||
<!-- Live indicator -->
|
||||
<div class="calib-card" style="padding: 10px 20px;">
|
||||
<div class="live-indicator">
|
||||
<span class="live-dot"></span>
|
||||
Live ADC Readings
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADC Channels -->
|
||||
<div class="calib-card">
|
||||
<h4><i class="bi bi-gpu"></i> ADC Channels</h4>
|
||||
<div id="adcChannels">
|
||||
<!-- ADC channels will be populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rainfall Counters -->
|
||||
<div class="calib-card">
|
||||
<h4><i class="bi bi-cloud-rain"></i> Rainfall Counters</h4>
|
||||
<div class="rainfall-counter">
|
||||
<div class="rainfall-box">
|
||||
<div class="rainfall-label" id="rf1Label">RF1 Tips</div>
|
||||
<div class="rainfall-value" id="rf1Tips">0</div>
|
||||
</div>
|
||||
<div class="rainfall-box">
|
||||
<div class="rainfall-label" id="rf2Label">RF2 Tips</div>
|
||||
<div class="rainfall-value" id="rf2Tips">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger btn-reset w-100" onclick="resetRainfall()">
|
||||
<i class="bi bi-arrow-counterclockwise"></i> Reset Rainfall Counters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.4/dist/socket.io.min.js"></script>
|
||||
<script>
|
||||
const socket = io();
|
||||
|
||||
// Load calibration data
|
||||
async function loadCalibration() {
|
||||
try {
|
||||
const response = await fetch('/api/calibration');
|
||||
const data = await response.json();
|
||||
|
||||
// Update rainfall counters
|
||||
document.getElementById('rf1Label').textContent = data.rainfall.rf1_id + ' Tips';
|
||||
document.getElementById('rf1Tips').textContent = data.rainfall.rf1_tips;
|
||||
document.getElementById('rf2Label').textContent = data.rainfall.rf2_id + ' Tips';
|
||||
document.getElementById('rf2Tips').textContent = data.rainfall.rf2_tips;
|
||||
|
||||
// Render ADC channels
|
||||
renderAdcChannels(data.adc);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading calibration:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Render ADC channels
|
||||
function renderAdcChannels(channels) {
|
||||
const container = document.getElementById('adcChannels');
|
||||
container.innerHTML = '';
|
||||
|
||||
channels.forEach(channel => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'adc-channel';
|
||||
div.innerHTML = `
|
||||
<h5>
|
||||
<span>Channel ${channel.id}</span>
|
||||
<span class="channel-type">${channel.type}</span>
|
||||
</h5>
|
||||
<div class="channel-data">
|
||||
<div class="channel-item">
|
||||
<div class="channel-label">ADC Value</div>
|
||||
<div class="channel-value">${channel.value.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="channel-item">
|
||||
<div class="channel-label">Datum</div>
|
||||
<div class="channel-value">${channel.datum.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="channel-item">
|
||||
<div class="channel-label">Reading</div>
|
||||
<div class="channel-value">${channel.reading.toFixed(1)} ${channel.unit}</div>
|
||||
</div>
|
||||
<div class="channel-item">
|
||||
<div class="channel-label">Status</div>
|
||||
<div class="channel-value">${channel.value > 0 ? 'Active' : 'Idle'}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Real-time ADC updates via Socket.IO
|
||||
socket.on('sensor_update', function(data) {
|
||||
// Refresh calibration data periodically
|
||||
loadCalibration();
|
||||
});
|
||||
|
||||
// Reset rainfall counters
|
||||
async function resetRainfall() {
|
||||
if (!confirm('Are you sure you want to reset all rainfall counters?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/calibration/reset_rainfall', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
showAlert('Rainfall counters reset successfully!');
|
||||
loadCalibration();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error resetting rainfall:', error);
|
||||
showAlert('Error resetting rainfall counters', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'success') {
|
||||
const alert = document.getElementById('alertMessage');
|
||||
alert.className = 'alert alert-' + type;
|
||||
alert.textContent = message;
|
||||
alert.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
alert.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Initial load
|
||||
loadCalibration();
|
||||
|
||||
// Refresh every 2 seconds
|
||||
setInterval(loadCalibration, 2000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
339
src_v1/templates/dashboard.html
Normal file
339
src_v1/templates/dashboard.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TCKRTUIYO - Dashboard</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
/* Touch-optimized for 7" 1024x600 display */
|
||||
:root {
|
||||
--touch-target-min: 48px;
|
||||
--touch-target-primary: 64px;
|
||||
--primary-color: #0d6efd;
|
||||
--success-color: #198754;
|
||||
--warning-color: #ffc107;
|
||||
--danger-color: #dc3545;
|
||||
--bg-color: #f8f9fa;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
background-color: var(--bg-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Touch-optimized navigation */
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-btn:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Logo in navigation */
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Grid layout */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.rainfall-grid {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rainfall-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #e7f1ff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.rainfall-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.rainfall-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Last updated */
|
||||
.last-updated {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Version info */
|
||||
.version-info {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #adb5bd;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rainfall-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.sensor-value {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<a href="/" class="nav-logo">
|
||||
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||
</a>
|
||||
<a href="/" class="nav-btn active">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/settings" class="nav-btn">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</a>
|
||||
<a href="/calibration" class="nav-btn">
|
||||
<i class="bi bi-sliders"></i> Calibration
|
||||
</a>
|
||||
<a href="/files" class="nav-btn">
|
||||
<i class="bi bi-folder"></i> Files
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid p-0">
|
||||
<!-- Date/Time Display -->
|
||||
<div class="datetime-display">
|
||||
<div class="time-display" id="timeDisplay">--:--:--</div>
|
||||
<div class="date-display" id="dateDisplay">--</div>
|
||||
</div>
|
||||
|
||||
<!-- Station Info -->
|
||||
<div class="station-info">
|
||||
<span class="station-id" id="stationId">Loading...</span>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div class="dashboard-grid">
|
||||
<!-- Rainfall Section -->
|
||||
<div class="sensor-card rainfall-grid">
|
||||
<div class="rainfall-item">
|
||||
<div class="rainfall-label">Today</div>
|
||||
<div class="rainfall-value" id="rainfallToday">0.0</div>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
<div class="rainfall-item">
|
||||
<div class="rainfall-label">Hourly</div>
|
||||
<div class="rainfall-value" id="rainfallHourly">0.0</div>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
<div class="rainfall-item">
|
||||
<div class="rainfall-label">MAR</div>
|
||||
<div class="rainfall-value" id="rainfallMar">0.0</div>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
<div class="rainfall-item">
|
||||
<div class="rainfall-label">Yearly</div>
|
||||
<div class="rainfall-value" id="rainfallYearly">0.0</div>
|
||||
<small>mm</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solar Voltage -->
|
||||
<div class="sensor-card">
|
||||
<h5><i class="bi bi-sun-fill"></i> Solar Voltage</h5>
|
||||
<div class="sensor-value">
|
||||
<span id="solarVoltage">--</span>
|
||||
<span class="sensor-unit">V</span>
|
||||
</div>
|
||||
<span class="status-badge status-normal" id="solarStatus">--</span>
|
||||
</div>
|
||||
|
||||
<!-- Battery Voltage -->
|
||||
<div class="sensor-card">
|
||||
<h5><i class="bi bi-battery-full"></i> Battery Voltage</h5>
|
||||
<div class="sensor-value">
|
||||
<span id="batteryVoltage">--</span>
|
||||
<span class="sensor-unit">V</span>
|
||||
</div>
|
||||
<span class="status-badge" id="batteryStatus">--</span>
|
||||
</div>
|
||||
|
||||
<!-- Communication Status -->
|
||||
<div class="sensor-card">
|
||||
<h5><i class="bi bi-wifi"></i> Communication</h5>
|
||||
<div class="comm-status">
|
||||
<div class="signal-bars">
|
||||
<div class="signal-bar active"></div>
|
||||
<div class="signal-bar active"></div>
|
||||
<div class="signal-bar active"></div>
|
||||
<div class="signal-bar" id="signal4"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="connectionStatus">Connected</div>
|
||||
<small class="text-muted" id="signalStrength">-65 dBm</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Software Version -->
|
||||
<div class="sensor-card">
|
||||
<h5><i class="bi bi-info-circle"></i> Software</h5>
|
||||
<div class="sensor-value" style="font-size: 1.5rem;">
|
||||
v<span id="softwareVersion">{{ version }}</span>
|
||||
</div>
|
||||
<small class="text-muted">{{ build_date }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last Updated -->
|
||||
<div class="last-updated">
|
||||
<i class="bi bi-clock-history"></i> Last Updated: <span id="lastUpdated">--</span>
|
||||
</div>
|
||||
|
||||
<!-- Version Footer -->
|
||||
<div class="version-info">
|
||||
TCKRTUIYO - Rainfall Station RTU
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.4/dist/socket.io.min.js"></script>
|
||||
<script>
|
||||
// Socket.IO connection for real-time updates
|
||||
const socket = io();
|
||||
|
||||
// Status API data
|
||||
async function loadStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/status');
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('timeDisplay').textContent = data.datetime;
|
||||
document.getElementById('dateDisplay').textContent = data.date;
|
||||
document.getElementById('stationId').textContent = data.station_id;
|
||||
document.getElementById('connectionStatus').textContent = data.connection_status;
|
||||
document.getElementById('signalStrength').textContent = data.signal_strength + ' dBm';
|
||||
|
||||
// Update signal bars based on RSSI
|
||||
const rssi = data.signal_strength;
|
||||
const bars = ['signal4'];
|
||||
if (rssi > -50) {
|
||||
// Excellent
|
||||
} else if (rssi > -70) {
|
||||
bars.pop();
|
||||
} else if (rssi > -85) {
|
||||
bars.length = 0;
|
||||
} else {
|
||||
bars.length = 0;
|
||||
}
|
||||
bars.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.add('active');
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Sensor data via Socket.IO
|
||||
socket.on('sensor_update', function(data) {
|
||||
// Update rainfall
|
||||
document.getElementById('rainfallToday').textContent = data.rainfall.today.toFixed(1);
|
||||
document.getElementById('rainfallHourly').textContent = data.rainfall.hourly.toFixed(1);
|
||||
document.getElementById('rainfallMar').textContent = data.rainfall.mar.toFixed(1);
|
||||
document.getElementById('rainfallYearly').textContent = data.rainfall.yearly.toFixed(1);
|
||||
|
||||
// Update voltage
|
||||
document.getElementById('solarVoltage').textContent = data.voltage.solar.toFixed(1);
|
||||
document.getElementById('batteryVoltage').textContent = data.voltage.battery.toFixed(1);
|
||||
|
||||
// Update voltage status
|
||||
const solarStatus = document.getElementById('solarStatus');
|
||||
solarStatus.textContent = data.voltage.solar_status;
|
||||
solarStatus.className = 'status-badge status-' + data.voltage.solar_status.toLowerCase();
|
||||
|
||||
const batteryStatus = document.getElementById('batteryStatus');
|
||||
batteryStatus.textContent = data.voltage.battery_status;
|
||||
batteryStatus.className = 'status-badge status-' + data.voltage.battery_status.toLowerCase();
|
||||
|
||||
// Update timestamp
|
||||
document.getElementById('lastUpdated').textContent = data.last_updated;
|
||||
});
|
||||
|
||||
// Initial load
|
||||
loadStatus();
|
||||
|
||||
// Update status every 30 seconds
|
||||
setInterval(loadStatus, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
484
src_v1/templates/files.html
Normal file
484
src_v1/templates/files.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TCKRTUIYO - Flash Memory</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--touch-target-min: 48px;
|
||||
--touch-target-primary: 64px;
|
||||
--primary-color: #0d6efd;
|
||||
--bg-color: #f8f9fa;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* Touch-optimized navigation */
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-btn:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Logo in navigation */
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* File list container with scroll */
|
||||
.file-list-container {
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
margin: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* File count display */
|
||||
.file-count {
|
||||
padding: 15px 20px;
|
||||
background: #e9ecef;
|
||||
border-radius: 12px;
|
||||
margin: 15px 15px 0 15px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.search-container {
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
margin: 15px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 12px 15px;
|
||||
font-size: 1rem;
|
||||
border-radius: 10px;
|
||||
min-height: var(--touch-target-min);
|
||||
}
|
||||
|
||||
/* File items */
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
min-height: var(--touch-target-min);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.file-item:active {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-btn {
|
||||
min-width: var(--touch-target-min);
|
||||
min-height: var(--touch-target-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.file-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Export all button */
|
||||
.export-all-container {
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
margin: 0 15px 15px 15px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.btn-export-all {
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
padding: 15px 30px;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Alert messages */
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<a href="/" class="nav-logo">
|
||||
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||
</a>
|
||||
<a href="/" class="nav-btn">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/settings" class="nav-btn">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</a>
|
||||
<a href="/calibration" class="nav-btn">
|
||||
<i class="bi bi-sliders"></i> Calibration
|
||||
</a>
|
||||
<a href="/files" class="nav-btn active">
|
||||
<i class="bi bi-file-earmark"></i> Files
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid p-0">
|
||||
<!-- Alert for status messages -->
|
||||
<div id="alertMessage" class="alert alert-success m-3" style="display: none;"></div>
|
||||
|
||||
<!-- Search/Filter -->
|
||||
<div class="search-container">
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Search files by name...">
|
||||
</div>
|
||||
|
||||
<!-- File Count Display -->
|
||||
<div class="file-count">
|
||||
<span id="fileCountText">Loading...</span>
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="refreshFiles()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable File List -->
|
||||
<div class="file-list-container" id="fileList">
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-folder2-open"></i>
|
||||
<p>No files found</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export All Button -->
|
||||
<div class="export-all-container">
|
||||
<button class="btn btn-primary btn-export-all" onclick="exportAllFiles()">
|
||||
<i class="bi bi-download"></i> Generate tidEDA Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let files = [];
|
||||
let filteredFiles = [];
|
||||
|
||||
// Load files on page load
|
||||
async function loadFiles() {
|
||||
try {
|
||||
const response = await fetch('/api/files');
|
||||
const data = await response.json();
|
||||
files = data.files || [];
|
||||
filterFiles();
|
||||
updateFileCount();
|
||||
} catch (error) {
|
||||
console.error('Error loading files:', error);
|
||||
showAlert('Error loading files', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh files
|
||||
async function refreshFiles() {
|
||||
await loadFiles();
|
||||
showAlert('Files refreshed', 'success');
|
||||
}
|
||||
|
||||
// Filter files by search
|
||||
function filterFiles() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
filteredFiles = files.filter(f => f.name.toLowerCase().includes(searchTerm));
|
||||
// Sort by date, newest first
|
||||
filteredFiles.sort((a, b) => new Date(b.modified) - new Date(a.modified));
|
||||
renderFiles();
|
||||
}
|
||||
|
||||
// Update file count display
|
||||
function updateFileCount() {
|
||||
const countText = document.getElementById('fileCountText');
|
||||
countText.textContent = `Showing ${filteredFiles.length} of ${files.length} files`;
|
||||
}
|
||||
|
||||
// Render file list
|
||||
function renderFiles() {
|
||||
const container = document.getElementById('fileList');
|
||||
|
||||
if (filteredFiles.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-folder2-open"></i>
|
||||
<p>No files found</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = filteredFiles.map(file => `
|
||||
<div class="file-item">
|
||||
<div class="file-info" onclick="viewFile('${file.name}')">
|
||||
<div class="file-name">
|
||||
<i class="bi bi-file-earmark-spreadsheet"></i> ${file.name}
|
||||
</div>
|
||||
<div class="file-meta">
|
||||
${formatDate(file.modified)} | ${formatSize(file.size)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="file-btn btn-view" onclick="viewFile('${file.name}')" title="View">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
<button class="file-btn btn-export" onclick="exportFile('${file.name}')" title="Export">
|
||||
<i class="bi bi-download"></i>
|
||||
</button>
|
||||
<button class="file-btn btn-delete" onclick="deleteFile('${file.name}')" title="Delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// View file content
|
||||
async function viewFile(filename) {
|
||||
try {
|
||||
const response = await fetch('/api/files/' + encodeURIComponent(filename));
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
showAlert(data.error, 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Display content in a modal or alert for now
|
||||
alert(`${filename}\n\n${data.content.substring(0, 500)}${data.content.length > 500 ? '...' : ''}`);
|
||||
} catch (error) {
|
||||
console.error('Error viewing file:', error);
|
||||
showAlert('Error viewing file', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Export single file as tidEDA
|
||||
async function exportFile(filename) {
|
||||
try {
|
||||
const response = await fetch('/api/files/export', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ filename: filename })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
showAlert(data.error, 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Download the file
|
||||
downloadFile(data.filename, data.content);
|
||||
showAlert(`Exported ${data.filename}`, 'success');
|
||||
} catch (error) {
|
||||
console.error('Error exporting file:', error);
|
||||
showAlert('Error exporting file', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Export all files
|
||||
async function exportAllFiles() {
|
||||
if (files.length === 0) {
|
||||
showAlert('No files to export', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// For simplicity, export the first file (in production, could create a combined export)
|
||||
const filename = filteredFiles[0].name;
|
||||
await exportFile(filename);
|
||||
}
|
||||
|
||||
// Delete file
|
||||
async function deleteFile(filename) {
|
||||
if (!confirm(`Delete ${filename}?`)) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/files/' + encodeURIComponent(filename), {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showAlert(`${filename} deleted`, 'success');
|
||||
loadFiles();
|
||||
} else {
|
||||
showAlert(data.error || 'Error deleting file', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting file:', error);
|
||||
showAlert('Error deleting file', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Download helper function
|
||||
function downloadFile(filename, content) {
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Format date
|
||||
function formatDate(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
// Format file size
|
||||
function formatSize(bytes) {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
// Show alert message
|
||||
function showAlert(message, type = 'success') {
|
||||
const alert = document.getElementById('alertMessage');
|
||||
alert.className = 'alert alert-' + type;
|
||||
alert.textContent = message;
|
||||
alert.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
alert.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Search listener
|
||||
document.getElementById('searchInput').addEventListener('input', filterFiles);
|
||||
|
||||
// Load files on page load
|
||||
loadFiles();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
578
src_v1/templates/settings.html
Normal file
578
src_v1/templates/settings.html
Normal file
@@ -0,0 +1,578 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TCKRTUIYO - Settings</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--touch-target-min: 48px;
|
||||
--touch-target-primary: 64px;
|
||||
--primary-color: #0d6efd;
|
||||
--bg-color: #f8f9fa;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* Touch-optimized navigation */
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-btn:not(.active) {
|
||||
background-color: #e9ecef;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Logo in navigation */
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.nav-logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Settings sections */
|
||||
.settings-section {
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.settings-section h4 {
|
||||
font-size: 1.3rem;
|
||||
color: #212529;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Form controls */
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
padding: 12px 15px;
|
||||
font-size: 1rem;
|
||||
border-radius: 10px;
|
||||
min-height: var(--touch-target-min);
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons */
|
||||
.btn-save {
|
||||
min-height: var(--touch-target-primary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
padding: 15px 30px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ADC Channel cards */
|
||||
.adc-channel {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.adc-channel h6 {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tabs for sub-sections */
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 10px 15px;
|
||||
background: #e9ecef;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 15px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.settings-tab.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-tab:not(.active) {
|
||||
background: transparent;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Tab content */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Alert messages */
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<a href="/" class="nav-logo">
|
||||
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||
</a>
|
||||
<a href="/" class="nav-btn">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/settings" class="nav-btn active">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</a>
|
||||
<a href="/calibration" class="nav-btn">
|
||||
<i class="bi bi-sliders"></i> Calibration
|
||||
</a>
|
||||
<a href="/files" class="nav-btn">
|
||||
<i class="bi bi-folder"></i> Files
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid p-0">
|
||||
<!-- Alert for save status -->
|
||||
<div id="alertMessage" class="alert alert-success m-3" style="display: none;">
|
||||
Settings saved successfully!
|
||||
</div>
|
||||
|
||||
<!-- Settings Tabs -->
|
||||
<div class="settings-tabs">
|
||||
<div class="settings-tab active" onclick="showTab('station')">
|
||||
<i class="bi bi-building"></i> Station
|
||||
</div>
|
||||
<div class="settings-tab" onclick="showTab('datetime')">
|
||||
<i class="bi bi-clock"></i> Date/Time
|
||||
</div>
|
||||
<div class="settings-tab" onclick="showTab('network')">
|
||||
<i class="bi bi-wifi"></i> Network
|
||||
</div>
|
||||
<div class="settings-tab" onclick="showTab('adc')">
|
||||
<i class="bi bi-gpu"></i> ADC
|
||||
</div>
|
||||
<div class="settings-tab" onclick="showTab('sensors')">
|
||||
<i class="bi bi-thermometer"></i> Sensors
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Station Settings -->
|
||||
<div class="tab-content active" id="tab-station">
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-building"></i> Station Information</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Station ID</label>
|
||||
<input type="text" class="form-control" id="stationId" placeholder="TCKRTUIYO-001">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Station Name</label>
|
||||
<input type="text" class="form-control" id="stationName" placeholder="Rainfall Station">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Location</label>
|
||||
<input type="text" class="form-control" id="stationLocation" placeholder="Unknown">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date/Time Settings -->
|
||||
<div class="tab-content" id="tab-datetime">
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-clock"></i> Date & Time Settings</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Timezone</label>
|
||||
<select class="form-select" id="timezone">
|
||||
<option value="UTC">UTC</option>
|
||||
<option value="GMT">GMT</option>
|
||||
<option value="EST">EST (UTC-5)</option>
|
||||
<option value="CST">CST (UTC-6)</option>
|
||||
<option value="MST">MST (UTC-7)</option>
|
||||
<option value="PST">PST (UTC-8)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<input type="checkbox" id="ntpEnabled" checked> Enable NTP Sync
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">NTP Server</label>
|
||||
<input type="text" class="form-control" id="ntpServer" placeholder="pool.ntp.org">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Settings -->
|
||||
<div class="tab-content" id="tab-network">
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-wifi"></i> Network Settings</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">IP Address</label>
|
||||
<input type="text" class="form-control" id="ipAddress" placeholder="192.168.1.100">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subnet Mask</label>
|
||||
<input type="text" class="form-control" id="subnetMask" placeholder="255.255.255.0">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Gateway</label>
|
||||
<input type="text" class="form-control" id="gateway" placeholder="192.168.1.1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">DNS Server</label>
|
||||
<input type="text" class="form-control" id="dnsServer" placeholder="8.8.8.8">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">MAC Address</label>
|
||||
<input type="text" class="form-control" id="macAddress" placeholder="00:00:00:00:00:00" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-phone"></i> Mobile Network (4G)</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<input type="checkbox" id="mobileEnabled"> Enable Mobile Network
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">APN</label>
|
||||
<input type="text" class="form-control" id="apn" placeholder="internet">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">PIN</label>
|
||||
<input type="text" class="form-control" id="mobilePin" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADC Settings -->
|
||||
<div class="tab-content" id="tab-adc">
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-gpu"></i> ADC Channel Configuration</h4>
|
||||
<div id="adcChannels">
|
||||
<!-- ADC channels will be populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sensor Settings -->
|
||||
<div class="tab-content" id="tab-sensors">
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-cloud-rain"></i> Rainfall Sensors</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">RF1 Sensor ID</label>
|
||||
<input type="text" class="form-control" id="rf1Id" placeholder="RF1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">RF2 Sensor ID</label>
|
||||
<input type="text" class="form-control" id="rf2Id" placeholder="RF2">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bucket Size (mm per tip)</label>
|
||||
<input type="number" class="form-control" id="bucketSize" step="0.01" value="0.2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-water"></i> Water Level Thresholds</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Warning Threshold (%)</label>
|
||||
<input type="number" class="form-control" id="waterWarning" value="80">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Danger Threshold (%)</label>
|
||||
<input type="number" class="form-control" id="waterDanger" value="95">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-battery-charging"></i> Voltage Thresholds</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Battery HIGH (V)</label>
|
||||
<input type="number" class="form-control" id="batteryHigh" step="0.1" value="14.0">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Battery NORMAL (V)</label>
|
||||
<input type="number" class="form-control" id="batteryNormal" step="0.1" value="12.0">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Battery LOW (V)</label>
|
||||
<input type="number" class="form-control" id="batteryLow" step="0.1" value="11.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4><i class="bi bi-thermometer-half"></i> EVAP Settings</h4>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<input type="checkbox" id="evapEnabled"> Enable EVAP
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Coefficient</label>
|
||||
<input type="number" class="form-control" id="evapCoefficient" step="0.01" value="0.0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="settings-section">
|
||||
<button class="btn btn-primary btn-save w-100" onclick="saveSettings()">
|
||||
<i class="bi bi-check-circle"></i> Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let currentSettings = {};
|
||||
|
||||
// Tab navigation
|
||||
function showTab(tabName) {
|
||||
// Update tab buttons
|
||||
document.querySelectorAll('.settings-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.closest('.settings-tab').classList.add('active');
|
||||
|
||||
// Update tab content
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
document.getElementById('tab-' + tabName).classList.add('active');
|
||||
}
|
||||
|
||||
// Load settings
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const response = await fetch('/api/settings');
|
||||
currentSettings = await response.json();
|
||||
|
||||
// Station
|
||||
document.getElementById('stationId').value = currentSettings.station.id;
|
||||
document.getElementById('stationName').value = currentSettings.station.name;
|
||||
document.getElementById('stationLocation').value = currentSettings.station.location;
|
||||
|
||||
// Date/Time
|
||||
document.getElementById('timezone').value = currentSettings.datetime.timezone;
|
||||
document.getElementById('ntpEnabled').checked = currentSettings.datetime.ntp_enabled;
|
||||
document.getElementById('ntpServer').value = currentSettings.datetime.ntp_server;
|
||||
|
||||
// Network
|
||||
document.getElementById('ipAddress').value = currentSettings.network.ip;
|
||||
document.getElementById('subnetMask').value = currentSettings.network.subnet;
|
||||
document.getElementById('gateway').value = currentSettings.network.gateway;
|
||||
document.getElementById('dnsServer').value = currentSettings.network.dns;
|
||||
document.getElementById('macAddress').value = currentSettings.network.mac;
|
||||
|
||||
// Mobile
|
||||
document.getElementById('mobileEnabled').checked = currentSettings.mobile.enabled;
|
||||
document.getElementById('apn').value = currentSettings.mobile.apn;
|
||||
document.getElementById('mobilePin').value = currentSettings.mobile.pin;
|
||||
|
||||
// ADC Channels
|
||||
renderAdcChannels();
|
||||
|
||||
// Sensors
|
||||
document.getElementById('rf1Id').value = currentSettings.sensors.rainfall.rf1_id;
|
||||
document.getElementById('rf2Id').value = currentSettings.sensors.rainfall.rf2_id;
|
||||
document.getElementById('bucketSize').value = currentSettings.sensors.rainfall.bucket_size;
|
||||
document.getElementById('waterWarning').value = currentSettings.sensors.water_level.threshold_warning;
|
||||
document.getElementById('waterDanger').value = currentSettings.sensors.water_level.threshold_danger;
|
||||
document.getElementById('batteryHigh').value = currentSettings.sensors.voltage.battery_high;
|
||||
document.getElementById('batteryNormal').value = currentSettings.sensors.voltage.battery_normal;
|
||||
document.getElementById('batteryLow').value = currentSettings.sensors.voltage.battery_low;
|
||||
|
||||
// EVAP
|
||||
document.getElementById('evapEnabled').checked = currentSettings.evap.enabled;
|
||||
document.getElementById('evapCoefficient').value = currentSettings.evap.coefficient;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Render ADC channel configuration
|
||||
function renderAdcChannels() {
|
||||
const container = document.getElementById('adcChannels');
|
||||
container.innerHTML = '';
|
||||
|
||||
currentSettings.adc.channels.forEach((channel, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'adc-channel';
|
||||
div.innerHTML = `
|
||||
<h6>Channel ${channel.id}: ${channel.name}</h6>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Type</label>
|
||||
<select class="form-select" id="adcType${channel.id}">
|
||||
<option value="4-20mA" ${channel.type === '4-20mA' ? 'selected' : ''}>4-20mA</option>
|
||||
<option value="0-10vDC" ${channel.type === '0-10vDC' ? 'selected' : ''}>0-10vDC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="adcName${channel.id}" value="${channel.name}">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="adcEnabled${channel.id}" ${channel.enabled ? 'checked' : ''}>
|
||||
<label class="form-check-label" for="adcEnabled${channel.id}">Enabled</label>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Save settings
|
||||
async function saveSettings() {
|
||||
const settings = {
|
||||
station: {
|
||||
id: document.getElementById('stationId').value,
|
||||
name: document.getElementById('stationName').value,
|
||||
location: document.getElementById('stationLocation').value
|
||||
},
|
||||
datetime: {
|
||||
timezone: document.getElementById('timezone').value,
|
||||
ntp_enabled: document.getElementById('ntpEnabled').checked,
|
||||
ntp_server: document.getElementById('ntpServer').value
|
||||
},
|
||||
network: {
|
||||
ip: document.getElementById('ipAddress').value,
|
||||
subnet: document.getElementById('subnetMask').value,
|
||||
gateway: document.getElementById('gateway').value,
|
||||
dns: document.getElementById('dnsServer').value,
|
||||
mac: document.getElementById('macAddress').value
|
||||
},
|
||||
mobile: {
|
||||
enabled: document.getElementById('mobileEnabled').checked,
|
||||
apn: document.getElementById('apn').value,
|
||||
pin: document.getElementById('mobilePin').value
|
||||
},
|
||||
adc: {
|
||||
channels: currentSettings.adc.channels.map((ch, i) => ({
|
||||
id: ch.id,
|
||||
type: document.getElementById('adcType' + ch.id).value,
|
||||
name: document.getElementById('adcName' + ch.id).value,
|
||||
enabled: document.getElementById('adcEnabled' + ch.id).checked
|
||||
}))
|
||||
},
|
||||
sensors: {
|
||||
rainfall: {
|
||||
rf1_id: document.getElementById('rf1Id').value,
|
||||
rf2_id: document.getElementById('rf2Id').value,
|
||||
bucket_size: parseFloat(document.getElementById('bucketSize').value)
|
||||
},
|
||||
water_level: {
|
||||
threshold_warning: parseInt(document.getElementById('waterWarning').value),
|
||||
threshold_danger: parseInt(document.getElementById('waterDanger').value)
|
||||
},
|
||||
voltage: {
|
||||
battery_high: parseFloat(document.getElementById('batteryHigh').value),
|
||||
battery_normal: parseFloat(document.getElementById('batteryNormal').value),
|
||||
battery_low: parseFloat(document.getElementById('batteryLow').value),
|
||||
solar_high: 15.0,
|
||||
solar_normal: 12.0
|
||||
}
|
||||
},
|
||||
evap: {
|
||||
enabled: document.getElementById('evapEnabled').checked,
|
||||
coefficient: parseFloat(document.getElementById('evapCoefficient').value)
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/settings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(settings)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
showAlert('Settings saved successfully!');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving settings:', error);
|
||||
showAlert('Error saving settings', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'success') {
|
||||
const alert = document.getElementById('alertMessage');
|
||||
alert.className = 'alert alert-' + type;
|
||||
alert.textContent = message;
|
||||
alert.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
alert.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Load settings on page load
|
||||
loadSettings();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user