aran/seepur
1
0
Fork 0
forked from sagi/seepur
Code Issues Pull requests Releases Wiki Activity

A bit more polish

Browse source
This commit is contained in:
Sagi Dayan 2020-05-01 13:24:22 -04:00
parent beb38b10c5
commit 8acef2bf39
13 changed files with 182 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/scripts/applications/admin/app.bundle.js
View file

File diff suppressed because one or more lines are too long

8
public/scripts/applications/home/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/components/navbar/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/views/register/app.bundle.js
View file

File diff suppressed because one or more lines are too long

6
public/style.css
View file

@ -6969,3 +6969,9 @@ video {
.book-thumb.enabled:hover {
transform: scale(1.1);
z-index: 10; }
.fade-enter-active, .fade-leave-active {
transition: opacity .2s; }
.fade-enter, .fade-leave-to {
opacity: 0; }

7
resources/sass/main.scss
View file

@ -263,3 +263,10 @@ video{
z-index: 10;
}
}
//Fade vue transition
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

2
resources/scripts/applications/home/views/home.vue
View file

@ -148,7 +148,7 @@ export default {
async makeCall(event) {
try {
const response = await Services.ApiService.createCall(event);
this.notify({ message: `Connectiong...` });
this.notify({ message: `Connecting...` });
this.$router.push({ path: `/call/${response.data.id}` });
} catch (e) {
console.error(e);

2
resources/scripts/applications/home/views/settings.vue
View file

@ -58,7 +58,7 @@
<h4 class="subtitle">{{user.name}}</h4>
</div>
<div class="columns">
<div class="column is-one-quarter">
<div class="column is-5">
<figure class="image is-128x128 m-auto">
<img class="is-rounded is-avatar" :src="user.avatar" />
</figure>

2
resources/scripts/applications/home/ws/call.manager.ts
View file

@ -219,8 +219,8 @@ export default class CallManager {
}
close() {
console.log('Closing...');
if (!this.inCall) return;
console.log('Closing...');
this.emit(ECallEvents.CLOSE, this.callId);
if (this.signalingChannel) this.signalingChannel.close();
this.signalingChannel = null;

32
resources/scripts/applications/services/api.service.ts
View file

@ -1,16 +1,31 @@
export default class ApiService {
static async getUser(userId?: number) {
return (await fetch('/api/v1/client/user/')).json();
try {
return (await fetch('/api/v1/client/user/')).json();
} catch (e) {
console.error(`getUser ERROR: ${e.message}`);
return e;
}
}
static async getAllUsers() {
return (await fetch('/api/v1/admin/users')).json();
try {
return (await fetch('/api/v1/admin/users')).json();
} catch (e) {
console.error(`getAllUsers ERROR: ${e.message}`);
return e;
}
}
static async getChild(id: number): Promise<IApiResponse> {
return (await fetch(`/api/v1/client/child/${id}`)).json();
try {
return (await fetch(`/api/v1/client/child/${id}`)).json();
} catch (e) {
console.error(`getChild ERROR: ${e.message}`);
return e;
}
}
static async createConnection(payload: { child_id: number, email: string, is_parent: boolean }) {
@ -23,8 +38,9 @@ export default class ApiService {
}
try {
return (await fetch('/api/v1/client/connections/create', options)).json();
} catch (error) {
return error;
} catch (e) {
console.error(`createConnection ERROR: ${e.message}`);
return e;
}
}
@ -44,7 +60,7 @@ export default class ApiService {
return response.json();
} catch (e) {
console.error(e);
console.error(`updateChildCover ERROR: ${e.message}`);
return false;
}
};
@ -62,7 +78,7 @@ export default class ApiService {
return response.json();
} catch (e) {
console.error(e);
console.error(`createCall ERROR: ${e.message}`);
return false;
}
}
@ -87,7 +103,7 @@ export default class ApiService {
return response.json();
} catch (e) {
console.error(e);
console.error(`createChild ERROR: ${e.message}`);
return false;
}
}

43
resources/scripts/applications/shared/components/Modal/Modal.vue
View file

@ -1,35 +1,40 @@
<template>
<div :class="['modal', { 'is-active': !!isActive }]">
<div class="modal-background" @click="close()"></div>
<div class="modal-card">
<header class="modal-card-head" v-if="showTitle">
<p class="modal-card-title">{{title}}</p>
<button class="delete" aria-label="close" @click="close()"></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
<footer class="modal-card-foot" v-if="showButtons">
<button class="button is-success" v-if="!!acceptText" @click="$emit('accept')">{{acceptText}}</button>
<button class="button" @click="close()" v-if="!!rejectText">{{rejectText}}</button>
</footer>
<transition name="fade">
<div :class="['modal', { 'is-active': !!isActive }]" v-if="!!isActive">
<div class="modal-background" @click="close()"></div>
<div class="modal-card">
<header class="modal-card-head" v-if="showTitle">
<p class="modal-card-title">{{title}}</p>
<button class="delete" aria-label="close" @click="close()"></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
<footer class="modal-card-foot" v-if="showButtons">
<button
class="button is-success"
v-if="!!acceptText"
@click="$emit('accept')"
>{{acceptText}}</button>
<button class="button" @click="close()" v-if="!!rejectText">{{rejectText}}</button>
</footer>
</div>
</div>
</div>
</transition>
</template>
<script lang="ts">
export default {
props: ["title", "isActive", "acceptText", "rejectText"],
data(){
data() {
return {
showTitle: !!this.title,
showButtons: this.acceptText || this.rejectText
}
};
},
methods: {
close() {
this.$emit('close');
this.$emit("close");
}
}
};

20
resources/scripts/applications/shared/components/Notification.vue
View file

@ -1,16 +1,24 @@
<template>
<div
:class="['notification','notification-fade' ,'is-light', `is-${notification.level || 'info'}`]"
>
<button class="delete" @click="close()"></button>
{{notification.message}}
</div>
<transition name="fade">
<div :class="['notification' ,'is-light', `is-${notification.level || 'info'}`]" v-if="ready">
<button class="delete" @click="close()"></button>
{{notification.message}}
</div>
</transition>
</template>
<script lang="ts">
export default {
name: "Notification",
props: ["notification"],
mounted() {
this.ready = true;
},
data() {
return {
ready: false
};
},
methods: {
close() {
this.$emit("onClose");

172
resources/scripts/applications/shared/components/TopNavbar.vue
View file

@ -1,98 +1,113 @@
<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>
<!-- 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">
<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="/"
class="button is-danger"
to="/settings"
class="navbar-item"
exact
replace
v-if="inCall"
>
<i class="fa fa-fw fa-times-circle-o"></i> End Call
</router-link>
</p>
>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 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 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>
<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>
</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",
components: {
Modal
},
async created() {
const ws = await WebsocketService.getInstance();
this.callManager = ws.callManager;
@ -104,6 +119,7 @@ export default {
},
data() {
return {
showConfirmEndCall: false,
showMenu: false,
subscribedToLobbyEvents: false,
callManager: null as CallManager
@ -128,6 +144,10 @@ export default {
...mapGetters(["user", "inCall"])
},
methods: {
onConfirmedEndCall() {
this.showConfirmEndCall = false;
this.$router.replace({ path: `/` });
},
changeHost() {
this.callManager.changeHost();
},