Merge branch 'dsutanto-main' to main

templates/dashboard.html

@@ -159,6 +159,8 @@
   }
   .nav-link:hover { border-color: var(--accent); color: var(--text-primary); background: var(--cell-bg); }
   .nav-link.active { border-color: var(--accent); color: var(--accent); }
+  .nav-link.counting-on { border-color: rgba(0,255,136,0.5); color: var(--accent4); }
+  .nav-link.counting-off { border-color: rgba(255,45,120,0.5); color: var(--accent3); }
 
   /* Section title */
   .section-title {
@@ -608,6 +610,7 @@
         <span>{{ site_name }}</span>
       </div>
       <a class="nav-link" href="/snapshots" title="Snapshots"><i class="fas fa-images"></i> SNAPSHOTS</a>
+      {% if control_enabled %}<button class="nav-link" id="countingToggle" onclick="toggleCounting()" title="Start/stop counting"><i class="fas fa-power-off"></i> <span id="counting-label">--</span></button>{% endif %}
       <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme">☀️</button>
     </div>
   </div>
@@ -830,8 +833,59 @@ document.addEventListener('DOMContentLoaded', () => {
   setInterval(() => {
     loadCurrentCounter();
   }, 2000);
+
+  if (document.getElementById('countingToggle')) {
+    loadControlState();
+    setInterval(loadControlState, 5000);
+  }
 });
 
+let countingActive = null;
+
+async function loadControlState() {
+  try {
+    const res = await fetch('/api/control');
+    const data = await res.json();
+    countingActive = !!data.counting;
+    renderCountingToggle();
+  } catch (err) { /* ignore */ }
+}
+
+function renderCountingToggle() {
+  const btn = document.getElementById('countingToggle');
+  const label = document.getElementById('counting-label');
+  if (!btn || !label) return;
+  if (countingActive) {
+    label.textContent = 'COUNTING ON';
+    btn.classList.add('counting-on');
+    btn.classList.remove('counting-off');
+  } else {
+    label.textContent = 'COUNTING OFF';
+    btn.classList.add('counting-off');
+    btn.classList.remove('counting-on');
+  }
+}
+
+async function toggleCounting() {
+  const next = !countingActive;
+  try {
+    const res = await fetch('/api/control', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ counting: next }),
+    });
+    const data = await res.json();
+    if (data.success) {
+      countingActive = !!data.counting;
+      renderCountingToggle();
+    } else {
+      alert('Control error: ' + (data.error || 'unknown'));
+    }
+  } catch (err) {
+    alert('Control request failed: ' + err.message);
+  }
+}
+
 async function loadCurrentCounter() {
   try {
     const res = await fetch('/api/current-counter');