add: added mosquitto and front alerts

front/src/App.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react"
+import axios from "axios"
+
+export default function App() {
+    const [text, setText] = useState("")
+    const [level, setLevel] = useState(1)
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault()
+
+        axios
+            .post('/api/alert', {
+                sensor_id: 1,
+                text: text,
+                level: level
+            })
+            .then(() => {
+                setText("")
+            })
+            .catch((error) => {
+                console.error(error.response.data)
+            });
+    }
+
+    return (
+        <div>
+            <img src="/api/video" alt="" />
+            <form onSubmit={handleSubmit} >
+                <input type="text" name="text" id="text" onChange={(e) => setText(e.target.value)} value={text} />
+                <select name="level" id="level" onChange={(e) => setLevel(Number(e.target.value))} value={level}>
+                    <option value={3}>High</option>
+                    <option value={2}>Medium</option>
+                    <option value={1}>Low</option>
+                </select>
+                <button type="submit">Submit alert</button>
+            </form>
+        </div>
+    )
+}

front/src/main.tsx

@@ -1,9 +1,7 @@
 import { createRoot } from 'react-dom/client'
 
+import App from './App'
+
 createRoot(document.getElementById('root')!).render(
-  <div>
-    <img src="/api/video" alt="" />
-    <img src="/api/video" alt="" />
-    <img src="/api/video" alt="" />
-  </div>
+  <App />
 )