From e4188df18e7d9a9d51320e2c3afa9aed6faba525 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 7 Jan 2024 21:42:23 +0100
Subject: [PATCH] disable Toasts for socket errors

---
 web/src/App.vue | 119 +++++++++++++++++++++++++++---------------------
 1 file changed, 68 insertions(+), 51 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 99a78d8..d741a99 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,12 +1,13 @@
 <template>
     <div id="app">
-        <AddItemModal v-if="addModalOpen" @close="closeAddModal()" isModal="true"/>
-        <Navbar @addClicked="openAddModal()"/>
+        <AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
+        <AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
+        <Navbar v-if="isLoggedIn" @addItemClicked="openAddItemModal()" @addTicketClicked="openAddTicketModal()"/>
         <router-view/>
-        <div aria-live="polite" aria-atomic="true"
+        <div aria-live="polite" aria-atomic="true" v-if="isLoggedIn"
              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"
+            <Toast v-for="(toast , index) in toasts" :key="index" :title="toast.title" :message="toast.message"
                    :color="toast.color"
                    @close="removeToast(toast.key)" style="pointer-events: auto"/>
         </div>
@@ -17,80 +18,96 @@
 import Navbar from '@/components/Navbar';
 import AddItemModal from '@/components/AddItemModal';
 import Toast from './components/Toast';
-import {mapState, mapMutations} from 'vuex';
+import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
+import AddTicketModal from "@/components/AddTicketModal.vue";
 
 export default {
     name: 'app',
-    components: {Toast, Navbar, AddItemModal},
-    computed: mapState(['loadedItems', 'layout', 'toasts']),
+    components: {Toast, Navbar, AddItemModal, AddTicketModal},
+    computed: {
+        ...mapState(['loadedItems', 'layout', 'toasts']),
+        ...mapGetters(['isLoggedIn']),
+    },
     data: () => ({
-        addModalOpen: false,
+        addItemModalOpen: false,
+        addTicketModalOpen: false,
         notify_socket: null,
         socket_toast: null,
     }),
     methods: {
         ...mapMutations(['removeToast', 'createToast']),
-        openAddModal() {
-            this.addModalOpen = true;
+        ...mapActions(['loadEventItems', 'loadTickets']),
+        openAddItemModal() {
+            this.addItemModalOpen = true;
         },
-        closeAddModal() {
-            this.addModalOpen = false;
+        openAddTicketModal() {
+            this.addTicketModalOpen = true;
+        },
+        closeAddItemModal() {
+            this.addItemModalOpen = false;
+        },
+        closeAddTicketModal() {
+            this.addTicketModalOpen = false;
         },
         tryConnect() {
             if (!this.notify_socket || this.notify_socket.readyState !== WebSocket.OPEN) {
-                if (this.socket_toast) {
-                    this.removeToast(this.socket_toast.key);
-                    this.socket_toast = null;
-                }
-                this.socket_toast = this.createToast({
-                    title: "Connecting...",
-                    message: "Connecting to websocket...",
-                    color: "warning"
-                });
-                this.notify_socket = new WebSocket('wss://' + window.location.host + '/ws/2/notify/');
+                //if (this.socket_toast) {
+                //    this.removeToast(this.socket_toast.key);
+                //    this.socket_toast = null;
+                //}
+                //this.socket_toast = this.createToast({
+                //    title: "Connecting...",
+                //    message: "Connecting to websocket...",
+                //    color: "warning"
+                //});
+                const scheme = window.location.protocol === "https:" ? "wss" : "ws";
+                this.notify_socket = new WebSocket(scheme + '://' + window.location.host + '/ws/2/notify/');
                 this.notify_socket.onopen = (e) => {
-                    if (this.socket_toast) {
-                        this.removeToast(this.socket_toast.key);
-                        this.socket_toast = null;
-                    }
-                    this.socket_toast = this.createToast({
-                        title: "Connection established",
-                        message: JSON.stringify(e),
-                        color: "success"
-                    });
+                    //if (this.socket_toast) {
+                    //    this.removeToast(this.socket_toast.key);
+                    //    this.socket_toast = null;
+                    //}
+                    //this.socket_toast = this.createToast({
+                    //    title: "Connection established",
+                    //    message: JSON.stringify(e),
+                    //    color: "success"
+                    //});
+                    console.log(e);
                 };
                 this.notify_socket.onclose = (e) => {
-                    if (this.socket_toast) {
-                        this.removeToast(this.socket_toast.key);
-                        this.socket_toast = null;
-                    }
-                    this.socket_toast = this.createToast({
-                        title: "Connection closed",
-                        message: JSON.stringify(e),
-                        color: "danger"
-                    });
+                    //if (this.socket_toast) {
+                    //    this.removeToast(this.socket_toast.key);
+                    //    this.socket_toast = null;
+                    //}
+                    //this.socket_toast = this.createToast({
+                    //    title: "Connection closed",
+                    //    message: JSON.stringify(e),
+                    //    color: "danger"
+                    //});
+                    console.log(e);
                     setTimeout(() => {
                         this.tryConnect();
                     }, 1000);
                 };
                 this.notify_socket.onerror = (e) => {
-                    if (this.socket_toast) {
-                        this.removeToast(this.socket_toast.key);
-                        this.socket_toast = null;
-                    }
-                    this.socket_toast = this.createToast({
-                        title: "Connection error",
-                        message: JSON.stringify(e),
-                        color: "danger"
-                    });
+                    //if (this.socket_toast) {
+                    //    this.removeToast(this.socket_toast.key);
+                    //    this.socket_toast = null;
+                    //}
+                    //this.socket_toast = this.createToast({
+                    //    title: "Connection error",
+                    //    message: JSON.stringify(e),
+                    //    color: "danger"
+                    //});
+                    console.log(e);
                     setTimeout(() => {
                         this.tryConnect();
                     }, 1000);
                 };
                 this.notify_socket.onmessage = (e) => {
                     let data = JSON.parse(e.data);
-                    console.log(data);
-
+                    this.loadEventItems()
+                    this.loadTickets()
                 }
             }
         },