seepur/resources/scripts/applications/home/app.vue

105 lines
2.6 KiB
Vue
Raw Normal View History

<template>
<div class="app">
2020-04-12 14:25:42 +00:00
<!-- <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>
2020-04-12 14:25:42 +00:00
<div class="columns m-t-xs is-fullheight">
<div class="column sidebar">
<SideBar :title="appName" :menu="menu" :appName="appName" />
</div>
2020-04-12 14:25:42 +00:00
<section class="section column app-content">
<div class="container">
<router-view></router-view>
</div>
</section>
</div>
</div>
</div>
</template>
2020-02-02 22:42:18 +00:00
<script lang="ts">
import Header from "./components/Header.vue";
2020-03-17 22:16:34 +00:00
import Services from "../services/index";
2020-04-12 14:25:42 +00:00
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";
2020-02-02 22:42:18 +00:00
// 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"
}
];
2020-03-17 22:16:34 +00:00
// Services.ApiService.getConnections();
2020-02-02 22:42:18 +00:00
export default {
name: "App",
// router: AppRouter,
components: {
SideBar,
2020-04-12 14:25:42 +00:00
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.loading = false;
return true;
2020-02-02 22:42:18 +00:00
},
data() {
return {
appName: "Seepur",
2020-04-12 14:25:42 +00:00
menu,
loading: true,
ws: null
2020-02-02 22:42:18 +00:00
};
2020-04-12 14:25:42 +00:00
},
computed: {
...mapGetters(["notifications"])
},
methods: {
onNotificationClose(notification) {
this.dismissNotification(notification.id);
},
...mapActions(["dismissNotification", "getUser", "notify"])
2020-02-02 22:42:18 +00:00
}
};
</script>