connected/disconnected toasts

static/js/rustico.js

@@ -28,7 +28,11 @@ $(document).ready(function () {
     })
 
     socket.on("connect", function(socket) {
-        console.log("Connected");
+        $("#connectedtoast").toast("show")
+    });
+
+    socket.on("disconnect", function(socket) {
+        $("#disconnectedtoast").toast("show")
     });
 
      socket.on("new_tick", function(data) {

templates/index.html

@@ -106,18 +106,29 @@
     </div>
 </main>
 
-    <div class="toast">
+<div class="toast-container hide">
+    <div class="toast mx-2 my-2 bg-success hide" id="connectedtoast" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          Toast Header
+            <strong class="me-auto">Connected!</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>    </div>
+<!--        <div class="toast-body bg-light">-->
+<!--            You are connected to the server.-->
+<!--        </div>-->
     </div>
-        <div class="toast-body">
-          Some text inside the toast body
+
+    <div class="toast mx-2 my-2 bg-danger hide" id="disconnectedtoast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <strong class="me-auto">Disconnected!</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>    </div>
+<!--        <div class="toast-body bg-light">-->
+<!--            You got disconnected from the server.-->
+<!--        </div>-->
     </div>
 </div>
 
 <footer class="footer mt-auto py-3 bg-light border-top">
     <div class="container text-center">
-            <span class="text-muted">Made with love by the Pepe</span>
+        <span class="text-muted">Made with ❤️ by the Pepe</span>
     </div>
 </footer>
 </body>