seepur/resources/scripts/applications/home/app.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>