better UI

ui/src/App.js

@@ -1,54 +1,57 @@
 import React, { useState, useEffect } from 'react';
-import './App.css';
+import { Container, Row, Col, Form, Button, Alert } from 'react-bootstrap';
 import { CWaterPumpAPI } from './api/CWaterPumpAPI.js';
+import './App.css';
 
 const STORE_API = 'apiAddress';
 const STORE_RUNTIME = 'runTime';
 
 function App() {
   const [apiAddress, setApiAddress] = useState('');
   const [runTime, setRunTime] = useState(1000);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [showAlert, setShowAlert] = useState(false);
 
   useEffect(() => {
     const storedApiAddress = localStorage.getItem(STORE_API);
     if (storedApiAddress) setApiAddress(storedApiAddress);
 
     let storedRunTime = localStorage.getItem(STORE_RUNTIME);
     if (storedRunTime) {
-      // if string then convert to int
       if (typeof storedRunTime === 'string') {
         storedRunTime = parseInt(storedRunTime, 10);
       }
       setRunTime(storedRunTime);
     }
-  }, []); // on mount
+  }, []);
 
-  const waterPumpAPI = React.useMemo(
-    () => {
-      // ensure apiAddress is started with http:// or https://
-      let url = apiAddress;
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        url = 'http://' + url;
-      }
-      return new CWaterPumpAPI({ URL: url });
-    }, [apiAddress] // only re-create if apiAddress changes
-  );
+  const waterPumpAPI = React.useMemo(() => {
+    let url = apiAddress;
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      url = 'http://' + url;
+    }
+    return new CWaterPumpAPI({ URL: url });
+  }, [apiAddress]);
 
   const handleStart = async () => {
     try {
       await waterPumpAPI.start(runTime);
-      alert('Water pump started successfully!');
+      setAlertMessage('Water pump started successfully!');
+      setShowAlert(true);
     } catch (error) {
-      alert('Error starting water pump: ' + error.message);
+      setAlertMessage('Error starting water pump: ' + error.message);
+      setShowAlert(true);
     }
   };
 
   const handleStop = async () => {
     try {
       await waterPumpAPI.stop();
-      alert('Water pump stopped successfully!');
+      setAlertMessage('Water pump stopped successfully!');
+      setShowAlert(true);
     } catch (error) {
-      alert('Error stopping water pump: ' + error.message);
+      setAlertMessage('Error stopping water pump: ' + error.message);
+      setShowAlert(true);
     }
   };
 
@@ -65,23 +68,30 @@ function App() {
   };
 
   return (
-    <div className="App">
+    <Container className="App">
       <h1>Tea System UI</h1>
-      <div>
-        <label>
-          API Address:
-          <input type="text" value={apiAddress} onChange={handleApiAddressChange} />
-        </label>
-      </div>
-      <div>
-        <label>
-          Run Time (ms):
-          <input type="number" value={runTime} onChange={handleRunTimeChange} />
-        </label>
-      </div>
-      <button onClick={handleStart}>Start</button>
-      <button onClick={handleStop}>Stop</button>
-    </div>
+      {showAlert && <Alert variant="info" onClose={() => setShowAlert(false)} dismissible>{alertMessage}</Alert>}
+      <Form>
+        <Form.Group as={Row} className="mb-3">
+          <Form.Label column sm="2">
+            API Address:
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control type="text" value={apiAddress} onChange={handleApiAddressChange} />
+          </Col>
+        </Form.Group>
+        <Form.Group as={Row} className="mb-3">
+          <Form.Label column sm="2">
+            Run Time (ms):
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control type="number" value={runTime} onChange={handleRunTimeChange} />
+          </Col>
+        </Form.Group>
+        <Button variant="primary" onClick={handleStart}>Start</Button>{' '}
+        <Button variant="secondary" onClick={handleStop}>Stop</Button>
+      </Form>
+    </Container>
   );
 }