From c88d434f395a296c56bd93ccee5e30e0d3b5a549 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Wed, 22 Nov 2023 21:57:14 +0100
Subject: [PATCH] connect to /notify WebSocket from frontend on app startup

---
 .gitignore      |  7 ++++++
 web/src/App.vue | 57 ++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bc512e3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+
+/.idea
+.env
+.local
+
+staticfiles/
+userfiles/
diff --git a/web/src/App.vue b/web/src/App.vue
index 96591d0..9f3cb9a 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,42 +1,73 @@
 <template>
-    <div id="app">
-        <AddItemModal v-if="addModalOpen" @close="closeAddModal()" isModal="true"/>
-        <Navbar @addClicked="openAddModal()"/>
-        <router-view/>
-        <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-end align-items-start fixed-top mx-1 my-5 py-3" style="min-height: 200px; z-index: 100000; pointer-events: none">
-            <Toast v-for="toast in toasts" :key="toast" :title="toast.title" :message="toast.message" :color="toast.color" @close="removeToast(toast.key)" style="pointer-events: auto"/>
-        </div>
+  <div id="app">
+    <AddItemModal v-if="addModalOpen" @close="closeAddModal()" isModal="true"/>
+    <Navbar @addClicked="openAddModal()"/>
+    <router-view/>
+    <div aria-live="polite" aria-atomic="true"
+         class="d-flex justify-content-end align-items-start fixed-top mx-1 my-5 py-3"
+         style="min-height: 200px; z-index: 100000; pointer-events: none">
+      <Toast v-for="toast in toasts" :key="toast" :title="toast.title" :message="toast.message" :color="toast.color"
+             @close="removeToast(toast.key)" style="pointer-events: auto"/>
     </div>
+  </div>
 </template>
 
 <script>
 import Navbar from '@/components/Navbar';
 import AddItemModal from '@/components/AddItemModal';
 import Toast from './components/Toast';
-import { mapState, mapMutations } from 'vuex';
+import {mapState, mapMutations} from 'vuex';
 
 export default {
   name: 'app',
-  components: { Toast, Navbar, AddItemModal },
+  components: {Toast, Navbar, AddItemModal},
   computed: mapState(['loadedItems', 'layout', 'toasts']),
   data: () => ({
     addModalOpen: false
   }),
   methods: {
-    ...mapMutations(['removeToast']),
+    ...mapMutations(['removeToast', 'createToast']),
     openAddModal() {
       this.addModalOpen = true;
     },
     closeAddModal() {
       this.addModalOpen = false;
     }
+  },
+  created: function () {
+    this.notify_socket = new WebSocket('wss://' + window.location.host + '/notify/');
+    this.notify_socket.onmessage = (e) => {
+      let data = JSON.parse(e.data);
+      console.log(data, e.data);
+    };
+    this.notify_socket.onopen = (e) => {
+      this.createToast({
+        title: "Connection established",
+        message: JSON.stringify(e),
+        color: "success"
+      });
+    };
+    this.notify_socket.onclose = (e) => {
+      this.createToast({
+        title: "Connection closed",
+        message: JSON.stringify(e),
+        color: "danger"
+      });
+    };
+    this.notify_socket.onerror = (e) => {
+      this.createToast({
+        title: "Connection error",
+        message: JSON.stringify(e),
+        color: "danger"
+      });
+    };
   }
 };
 </script>
 
 <style>
-    body, html, #app {
-        background: #000;
-    }
+body, html, #app {
+  background: #000;
+}
 </style>