c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 Pull requests Projects 2 Releases Wiki Activity Actions

disable Toasts for socket errors

Browse source
This commit is contained in:
j3d1 2024-01-07 21:42:23 +01:00
parent c5023202fc
commit e4188df18e
1 changed files with 68 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
web/src/App.vue
View file

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