110 lines
3.9 KiB
Vue
110 lines
3.9 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import Navbar from '@/components/Navbar';
|
|
import AddItemModal from '@/components/AddItemModal';
|
|
import Toast from './components/Toast';
|
|
import {mapState, mapMutations} from 'vuex';
|
|
|
|
export default {
|
|
name: 'app',
|
|
components: {Toast, Navbar, AddItemModal},
|
|
computed: mapState(['loadedItems', 'layout', 'toasts']),
|
|
data: () => ({
|
|
addModalOpen: false,
|
|
notify_socket: null,
|
|
socket_toast: null,
|
|
}),
|
|
methods: {
|
|
...mapMutations(['removeToast', 'createToast']),
|
|
openAddModal() {
|
|
this.addModalOpen = true;
|
|
},
|
|
closeAddModal() {
|
|
this.addModalOpen = 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"
|
|
});
|
|
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"
|
|
});
|
|
};
|
|
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"
|
|
});
|
|
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"
|
|
});
|
|
setTimeout(() => {
|
|
this.tryConnect();
|
|
}, 1000);
|
|
};
|
|
this.notify_socket.onmessage = (e) => {
|
|
let data = JSON.parse(e.data);
|
|
console.log(data);
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created: function () {
|
|
//this.tryConnect();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
body, html, #app {
|
|
background: #000;
|
|
}
|
|
</style>
|
|
|