forked from sagi/seepur
116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
<template>
|
|
<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">
|
|
<router-link
|
|
active-class="is-active"
|
|
to="/"
|
|
class="button is-danger"
|
|
exact
|
|
replace
|
|
v-if="inCall"
|
|
>
|
|
<i class="fa fa-fw fa-times-circle-o"></i> End Call
|
|
</router-link>
|
|
</p>
|
|
<p class="control">
|
|
<router-link
|
|
:to="{path:'..'}"
|
|
class="button is-info"
|
|
append
|
|
replace
|
|
v-if="inCall && $route.name==='book'"
|
|
>
|
|
<i class="fa fa-fw fa-arrow-circle-o-left"></i> Back
|
|
</router-link>
|
|
</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>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapGetters, mapActions } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
showMenu: false
|
|
};
|
|
},
|
|
computed: {
|
|
host() {
|
|
if (this.inCall) {
|
|
if (this.callManager.isHost) return this.user;
|
|
return this.callManager.peer;
|
|
}
|
|
return null;
|
|
},
|
|
...mapGetters(["user", "inCall", "callManager"])
|
|
},
|
|
methods: {
|
|
changeHost() {
|
|
this.callManager.changeHost();
|
|
},
|
|
...mapActions([])
|
|
}
|
|
};
|
|
</script>
|
|
|