c3lf-system-3/web/src/App.vue

110 lines
3.8 KiB
Vue
Raw Normal View History

2019-11-13 21:02:44 +00:00
<template>
2023-11-27 00:14:52 +00:00
<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>
2019-11-13 22:21:19 +00:00
</div>
2019-11-13 21:02:44 +00:00
</template>
<script>
2019-11-14 02:59:17 +00:00
import Navbar from '@/components/Navbar';
2019-12-27 01:39:56 +00:00
import AddItemModal from '@/components/AddItemModal';
2019-12-27 01:06:04 +00:00
import Toast from './components/Toast';
import {mapState, mapMutations} from 'vuex';
2019-11-14 03:37:35 +00:00
2019-11-13 21:02:44 +00:00
export default {
2023-11-27 00:14:52 +00:00
name: 'app',
components: {Toast, Navbar, AddItemModal},
computed: mapState(['loadedItems', 'layout', 'toasts']),
data: () => ({
2023-11-27 00:38:43 +00:00
addModalOpen: false,
notify_socket: null,
socket_toast: null,
2023-11-27 00:14:52 +00:00
}),
methods: {
...mapMutations(['removeToast', 'createToast']),
openAddModal() {
this.addModalOpen = true;
},
closeAddModal() {
this.addModalOpen = false;
2023-11-27 00:38:43 +00:00
},
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/');
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);
}
}
},
},
2023-11-27 00:14:52 +00:00
created: function () {
2023-11-27 00:38:43 +00:00
this.tryConnect();
}
2019-11-13 21:21:47 +00:00
};
2019-11-13 21:02:44 +00:00
</script>
<style>
body, html, #app {
2023-11-27 00:14:52 +00:00
background: #000;
}
2019-11-13 21:02:44 +00:00
</style>
2019-12-01 21:00:06 +00:00