seepur/resources/scripts/applications/shared/components/TopNavbar.vue

170 lines
5 KiB
Vue

<template>
<div>
<!-- End Call Modal -->
<Modal
title="Are You Sure?"
:isActive="showConfirmEndCall"
acceptText="End"
rejectText="Cancel"
@accept="onConfirmedEndCall()"
@close="showConfirmEndCall=false"
>
<p>End Call?</p>
</Modal>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<router-link to="/" class="navbar-item" exact v-if="!inCall">
<strong>Seepur</strong>
</router-link>
<!-- <a class="navbar-item" href="/">
</a>-->
<a
id="menu-button"
role="button"
class="navbar-burger burger"
@click="showMenu=!showMenu"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="nav-menu" :class="['navbar-menu', {'is-active':showMenu}]">
<div class="navbar-start">
<!-- Normal Nav -->
<router-link active-class="is-active" to="/" class="navbar-item" exact v-if="!inCall">Home</router-link>
<router-link
active-class="is-active"
to="/about"
class="navbar-item"
exact
v-if="!inCall"
>About</router-link>
<!-- In call Nav -->
<div class="navbar-item" v-if="inCall">
<div class="field is-grouped">
<p class="control">
<button @click="showConfirmEndCall = true" class="button is-danger" v-if="inCall">
<i class="fa fa-fw fa-times-circle-o"></i> End Call
</button>
</p>
<p class="control">
<button
class="button is-info"
append
replace
v-if="inCall && $route.name==='book'"
:disabled="!callManager.isHost"
@click="backToLobby(true)"
>
<i class="fa fa-fw fa-arrow-circle-o-left"></i> Back
</button>
</p>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable is-dark" v-if="!inCall">
<a class="navbar-link">{{user.name}}</a>
<div class="navbar-dropdown">
<router-link
active-class="is-active"
to="/settings"
class="navbar-item"
exact
>Settings</router-link>
<a class="navbar-item" href="/logout">Logout</a>
<hr class="navbar-divider" v-if="user.is_admin" />
<a class="navbar-item" href="/admin/" v-if="user.is_admin">Admin Settigns</a>
</div>
</div>
<div class="navbar-item" v-if="inCall">
<p class="control">
<button class="button" @click="changeHost()">
<i class="fa fa-fw fa-refresh"></i> Change Host
</button>
</p>
</div>
<div v-if="inCall" class="navbar-item">Current Host: {{host.name}}</div>
</div>
</div>
</nav>
</div>
</template>
<script lang="ts">
import { mapGetters, mapActions } from "vuex";
import CallManager, { ECallEvents } from "../../home/ws/call.manager";
import WebsocketService from "../../home/ws/websocket.service";
import Modal from "../../shared/components/Modal/Modal.vue";
export default {
name: "TobNavbar",
props: ["ws"],
components: {
Modal
},
watch: {
ws(val, oldVal) {
if (val != null) {
this.callManager = this.ws.callManager;
}
}
},
async created() {},
updated() {
if (!this.inCall) {
this.subscribedToLobbyEvents = false;
}
},
data() {
return {
showConfirmEndCall: false,
showMenu: false,
subscribedToLobbyEvents: false,
callManager: null as CallManager
};
},
computed: {
host() {
if (this.inCall) {
if (!this.subscribedToLobbyEvents) {
console.log("TopNav subscribe to back_to_lobby");
this.subscribedToLobbyEvents = true;
this.callManager.on(
ECallEvents.CALL_VIEW_LOBBY,
this.remoteBackToLobby.bind(this)
);
}
if (this.callManager.isHost) return this.user;
return this.callManager.peer;
}
return null;
},
...mapGetters(["user", "inCall"])
},
methods: {
onConfirmedEndCall() {
this.showConfirmEndCall = false;
this.$router.replace({ path: `/` });
},
changeHost() {
this.callManager.changeHost();
},
backToLobby(payload) {
this.callManager.backToLobby();
this.$router.replace({ path: `/call/${this.callManager.callId}` });
},
remoteBackToLobby(payload) {
this.$router.replace({ path: `/call/${this.callManager.callId}` });
},
...mapActions([])
}
};
</script>