1 files changed, 90 insertions, 8 deletions
diff --git a/templates/client.html b/templates/client.html
index e03394a..5a52f43 100644
--- a/templates/client.html
+++ b/templates/client.html
@@ -12,19 +12,52 @@
     <div class="streams-container">
         {% for camera_id in camera_ids %}
         <div class="camera-stream">
-            <h2>Camera {{ camera_id }}</h2>
+            <h2>Camera: {{ camera_id }}</h2>
             <img id="video-{{ camera_id }}" width="640" height="480" />
+            <div>
+                <h3>Modify Camera Name</h3>
+                <input type="text" id="new-name-{{ camera_id }}" placeholder="New Name">
+                <button onclick="sendConfig('{{ camera_id }}', 'modify_camera_name')">Send</button>
+            </div>
+            <div>
+                <h3>Modify Camera Threshold</h3>
+                <input type="number" id="threshold-value-{{ camera_id }}" placeholder="Threshold">
+                <button onclick="sendConfig('{{ camera_id }}', 'modify_camera_threshold')">Send</button>
+            </div>
+            <div>
+                <h3>Modify Camera Grace Period</h3>
+                <input type="number" id="grace-value-{{ camera_id }}" placeholder="Grace Period">
+                <button onclick="sendConfig('{{ camera_id }}', 'modify_camera_grace_pd')">Send</button>
+            </div>
+            <div>
+                <h3>Modify Camera Address</h3>
+                <input type="text" id="address-value-{{ camera_id }}" placeholder="New Address">
+                <button onclick="sendConfig('{{ camera_id }}', 'modify_camera_address')">Send</button>
+            </div>
         </div>
-        {% endfor %}
-    </div> 
+    {% endfor %}
+    <div>
+        <h3>Add Camera</h3>
+        <input type="text" id="add-name" placeholder="Camera Name">
+        <input type="text" id="add-address" placeholder="Address">
+        <button onclick="sendConfig('add_camera')">Send</button>
+    </div>
+    <div>
+        <h3>Remove Camera</h3>
+        <input type="text" id="remove-name" placeholder="Camera Name">
+        <button onclick="sendConfig('remove_camera')">Send</button>
+    </div>
+    </div>
     <script>
-    // For each camera, open a WebSocket and update the corresponding <img>
+    const wsMap = {};
     {% for camera_id in camera_ids %}
+    // For each camera, open a WebSocket and update the corresponding <img>
     (function() {
-        let ws = new WebSocket('ws://' + window.location.host + '/ws/{{ client_id }}/{{ camera_id }}');
-        let image = document.getElementById('video-{{ camera_id }}');
+        const cameraId = '{{ camera_id }}';
+        const ws = new WebSocket('ws://' + window.location.host + '/ws/{{ client_id }}/' + cameraId);
         let currentUrl = null;
         ws.onmessage = function(event) {
+            let image = document.getElementById('video-' + cameraId);
             if (currentUrl) {
                 URL.revokeObjectURL(currentUrl);
             }
@@ -32,16 +65,65 @@
             image.src = currentUrl;
         };
         ws.onclose = function(event) {
-            console.log('WebSocket closed for camera {{ camera_id }}:', event);
+            console.log('WebSocket closed for camera ' + cameraId + ':', event);
         };
         ws.onerror = function(event) {
-            console.log('WebSocket error for camera {{ camera_id }}:', event);
+            console.log('WebSocket error for camera ' + cameraId + ':', event);
         };
         window.addEventListener('beforeunload', function() {
             ws.close();
         });
+        wsMap[cameraId] = ws;
     })();
     {% endfor %}
+
+    function sendConfig(cameraId, type) {
+        let msg = {};
+        switch(type) {
+            case 'modify_camera_name':
+                msg[type] = [
+                    // cameraId,
+                    document.getElementById('new-name-' + cameraId).value
+                ];
+                break;
+            case 'modify_camera_threshold':
+                msg[type] = [
+                    // cameraId,
+                    document.getElementById('threshold-value-' + cameraId).value
+                ];
+                break;
+            case 'modify_camera_grace_pd':
+                msg[type] = [
+                    // cameraId,
+                    parseInt(document.getElementById('grace-value-' + cameraId).value)
+                ];
+                break;
+            case 'modify_camera_address':
+                msg[type] = [
+                    // cameraId,
+                    document.getElementById('address-value-' + cameraId).value
+                ];
+                break;
+            case 'add_camera':
+                msg[type] = [
+                    document.getElementById('add-name').value,
+                    document.getElementById('add-address').value
+                ];
+                break;
+            case 'remove_camera':
+                msg[type] = [
+                    document.getElementById('remove-name').value
+                ];
+                break;
+        }
+        const ws = wsMap[cameraId] && wsMap[cameraId] ? wsMap[cameraId] : Object.values(wsMap)[0];
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            console.log("Sending message:", msg, "on ws:", ws);
+            ws.send(JSON.stringify(msg));
+        } else {
+            alert('WebSocket is not open for camera ' + cameraId);
+        }
+    }
     </script>
 </body>
 </html>