115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
|
<div class="app">
|
|
<!-- <Header :appName="appName" /> -->
|
|
<div class="loading" v-if="loading">
|
|
<Loading />
|
|
</div>
|
|
<div class v-else>
|
|
<div class="notifications">
|
|
<Notification
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
:notification="notification"
|
|
@onClose="onNotificationClose(notification)"
|
|
/>
|
|
</div>
|
|
<div class="columns m-t-xs is-fullheight">
|
|
<div class="column sidebar">
|
|
<SideBar :title="appName" :menu="menu" :appName="appName" />
|
|
</div>
|
|
<section class="section column app-content">
|
|
<div class="container">
|
|
<router-view></router-view>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Header from "./components/Header.vue";
|
|
import Services from "../services/index";
|
|
import Notification from "../shared/components/Notification.vue";
|
|
import { mapActions, mapGetters } from "vuex";
|
|
import Loading from "../shared/components/Loading/Loading.vue";
|
|
import WebsocketService from "./scripts/websocket.service";
|
|
// import AppRouter from "./router/router.vue";
|
|
import {
|
|
default as SideBar,
|
|
IMenuItem
|
|
} from "../shared/components/SideBar/SideBar.vue";
|
|
const menu: IMenuItem[] = [
|
|
{
|
|
href: "/",
|
|
text: "Home",
|
|
isRouterLink: true,
|
|
icon: "fa fa-home"
|
|
},
|
|
{
|
|
href: "/settings",
|
|
isRouterLink: true,
|
|
text: "Settings",
|
|
icon: "fa fa-gears"
|
|
},
|
|
{
|
|
isRouterLink: false,
|
|
href: "/logout",
|
|
text: "Logout",
|
|
icon: "fa fa-sign-out"
|
|
}
|
|
];
|
|
// Services.ApiService.getConnections();
|
|
|
|
export default {
|
|
name: "App",
|
|
// router: AppRouter,
|
|
components: {
|
|
SideBar,
|
|
Header,
|
|
Notification,
|
|
Loading
|
|
},
|
|
async created() {
|
|
await this.getUser();
|
|
this.ws = await WebsocketService.getInstance();
|
|
this.ws.on(WebsocketService.Events.CONNECTION_ONLINE, user => {
|
|
console.log(`User Online: ${JSON.stringify(user, null, 2)}`);
|
|
this.notify({ message: `${user.name} is online!`, level: "success" });
|
|
});
|
|
this.ws.on(WebsocketService.Events.CONNECTION_OFFLINE, user => {
|
|
this.notify({ message: `${user.name} disconnected`, level: "warning" });
|
|
});
|
|
this.ws.on(
|
|
WebsocketService.Events.INCOMING_CALL,
|
|
this.onIncomingCall.bind(this)
|
|
);
|
|
this.loading = false;
|
|
return true;
|
|
},
|
|
data() {
|
|
return {
|
|
appName: "Seepur",
|
|
menu,
|
|
loading: true,
|
|
ws: null
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["notifications"])
|
|
},
|
|
methods: {
|
|
onIncomingCall(payload: { callId: number; child: any }) {
|
|
this.notify({
|
|
message: `New call from ${payload.child.name}`,
|
|
level: "success"
|
|
});
|
|
this.$router.push({ path: `/call/${payload.callId}` });
|
|
},
|
|
onNotificationClose(notification) {
|
|
this.dismissNotification(notification.id);
|
|
},
|
|
...mapActions(["dismissNotification", "getUser", "notify"])
|
|
}
|
|
};
|
|
</script>
|