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

<template>
  <div class="app">
    <!-- <Header :appName="appName" /> -->
    <TopNavbar :ws="this.ws" />
    <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="app-content m-t-xs is-fullheight">
        <div class="application">
          <router-view></router-view>
        </div>
      </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 TopNavbar from "../shared/components/TopNavbar.vue";
import WebsocketService from "./ws/websocket.service";
// import AppRouter from "./router/router.vue";

// Services.ApiService.getConnections();

export default {
  name: "App",
  // router: AppRouter,
  components: {
    Header,
    Notification,
    Loading,
    TopNavbar
  },
  async created() {
    const u = await this.getUser();
    // console.log(u);
    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",
      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.replace({ path: `/call/${payload.callId}` });
    },
    onNotificationClose(notification) {
      this.dismissNotification(notification.id);
    },
    ...mapActions(["dismissNotification", "getUser", "notify"])
  }
};
</script>