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

migrate to vue 3

Browse source
This commit is contained in:
j3d1 2024-06-18 20:10:10 +02:00
parent bb07a6b641
commit bb71c44aa7
16 changed files with 318 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

82
web/src/App.vue
View file

@ -5,40 +5,30 @@
<AddBoxModal v-if="showAddBoxModal && isLoggedIn" @close="closeAddBoxModal()" isModal="true"/>
<Navbar v-if="isLoggedIn" @addItemClicked="openAddItemModal()" @addTicketClicked="openAddTicketModal()"/>
<router-view/>
<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 , index) in toasts" :key="index" :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, mapActions, mapGetters} from 'vuex';
import AddTicketModal from "@/components/AddTicketModal.vue";
import AddBoxModal from "@/components/AddBoxModal.vue";
export default {
name: 'app',
components: {AddBoxModal, Toast, Navbar, AddItemModal, AddTicketModal},
components: {AddBoxModal, Navbar, AddItemModal, AddTicketModal},
computed: {
...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal']),
...mapGetters(['isLoggedIn']),
},
data: () => ({
addItemModalOpen: false,
addTicketModalOpen: false,
notify_socket: null,
socket_toast: null,
addTicketModalOpen: false
}),
methods: {
...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal']),
...mapActions(['loadEventItems', 'loadTickets']),
...mapActions(['loadEvents']),
openAddItemModal() {
this.addItemModalOpen = true;
},
@ -50,72 +40,10 @@ export default {
},
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"
//});
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"
//});
//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"
//});
//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"
//});
//console.log(e);
setTimeout(() => {
this.tryConnect();
}, 1000);
};
this.notify_socket.onmessage = (e) => {
let data = JSON.parse(e.data);
this.loadEventItems()
this.loadTickets()
}
}
},
}
},
created: function () {
this.tryConnect();
document.title = document.location.hostname;
}
};
</script>