gemini added: pump test button, app restart button

Author: chl33

src/main.cpp

@@ -433,8 +433,8 @@ void setup() {
   s_app.web_server().on("/api/plants", HTTP_GET, apiGetPlants);
   s_app.web_server().on("/api/wifi", HTTP_GET, apiGetWifi);
   s_app.web_server().on("/api/mqtt", HTTP_GET, apiGetMqtt);
-  s_app.web_server().on("/api/moisture", apiGetMoisture);
-  s_app.web_server().on("/api/status", apiGetStatus);
+  s_app.web_server().on("/api/moisture", HTTP_GET, apiGetMoisture);
+  s_app.web_server().on("/api/status", HTTP_GET, apiGetStatus);
 
   {  // Add pump test json callback.
     AsyncCallbackJsonWebHandler* pumpTestHandler = new AsyncCallbackJsonWebHandler("/test/pump");
@@ -470,6 +470,11 @@ void setup() {
     s_app.web_server().addHandler(handler);
   }
 
+  s_app.web_server().on("/api/restart", HTTP_POST, [](AsyncWebServerRequest* request) {
+    request->send(200, "text/plain", "restarting");
+    s_app.tasks().runIn(1000, []() { ESP.restart(); });
+  });
+
   // Run the og3 application setup code.
   s_app.setup();
 }

svelte/package-lock.json

@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { Droplet, Wifi, Radio, Home } from 'lucide-svelte';
+  import { Droplet, Wifi, Radio, Home, RefreshCw } from 'lucide-svelte';
 
   export let currentPage;
   export let plants;
@@ -14,6 +14,17 @@
 
   $: plantsList = $plants;
   $: status = $systemStatus;
+
+  async function restartDevice() {
+    if (!confirm('Are you sure you want to restart the device?')) return;
+    try {
+      await fetch('/api/restart', { method: 'POST' });
+      alert('Device is restarting...');
+    } catch (err) {
+      console.error('Error restarting:', err);
+      alert('Failed to restart device');
+    }
+  }
 </script>
 
 <aside class="sidebar">
@@ -57,6 +68,11 @@
 
   <div class="nav-section">Device</div>
 
+  <button class="nav-button" on:click={restartDevice}>
+    <RefreshCw size={20} />
+    <span>Restart Device</span>
+  </button>
+
   <div>
   <p>Software: v{status.software}</p>
   <p>Hardware: board v{status.hardware}</p>

svelte/src/components/Sidebar.svelte

@@ -73,7 +73,7 @@
 
   <div class="card-grid">
     {#each plantsList as plant}
-      <div class="overview-card">
+      <div class="overview-card" class:disabled-card={!plant.enabled}>
         <div class="card-header">
           <Droplet size={24} class="text-green-600" />
           <h3>{plant.name}</h3>
@@ -159,6 +159,11 @@
     border: 1px solid #e5e7eb;
   }
 
+  .overview-card.disabled-card {
+    opacity: 0.7;
+    background: #f9fafb;
+  }
+
   @media (max-width: 768px) {
     .overview-card {
       padding: 1rem;

svelte/src/pages/HomePage.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Save } from 'lucide-svelte';
+  import { Save, Play } from 'lucide-svelte';
   import MoistureGauge from '../components/MoistureGauge.svelte';
 
   // API base URL
@@ -60,6 +60,29 @@
       saving = false;
     }
   }
+
+  async function testPump() {
+    try {
+      const response = await fetch('/test/pump', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pumpId: plant.id, duration: 1000 })
+      });
+
+      if (!response.ok) throw new Error('Network error');
+
+      const result = await response.json();
+      if (!result.isOk) {
+        throw new Error(result.message || 'Pump test failed');
+      }
+
+      saveMessage = 'Pump test started (1s)';
+      setTimeout(() => saveMessage = '', 3000);
+    } catch (err) {
+      console.error('Error testing pump:', err);
+      saveMessage = `Error: ${err.message}`;
+    }
+  }
 </script>
 
 <div class="page">
@@ -209,6 +232,15 @@
           />
           <div class="form-hint">Maximum doses while watering and per day</div>
         </div>
+
+        <div class="form-group">
+          <label class="form-label">Test Pump</label>
+          <button class="btn btn-secondary" on:click={testPump}>
+            <Play size={20} />
+            Test (1s)
+          </button>
+          <div class="form-hint">Run pump for 1 second</div>
+        </div>
       </div>
     </div>
 
@@ -392,6 +424,15 @@
     cursor: not-allowed;
   }
 
+  .btn-secondary {
+    background: #4b5563;
+    color: white;
+  }
+
+  .btn-secondary:hover {
+    background: #374151;
+  }
+
   .save-message {
     margin-top: 1rem;
     padding: 0.75rem 1rem;