sagi/seepur
sagi/seepur
Archived
1
0
Fork 1
Code Issues 1 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 { .book-thumb.enabled:hover {
transform: scale(1.1); transform: scale(1.1);
z-index: 10; } 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; 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) { async makeCall(event) {
try { try {
const response = await Services.ApiService.createCall(event); const response = await Services.ApiService.createCall(event);
this.notify({ message: `Connectiong...` }); this.notify({ message: `Connecting...` });
this.$router.push({ path: `/call/${response.data.id}` }); this.$router.push({ path: `/call/${response.data.id}` });
} catch (e) { } catch (e) {
console.error(e); console.error(e);

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

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

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

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

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

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

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

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

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

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

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

@ -1,98 +1,113 @@
<template> <template>
<nav class="navbar" role="navigation" aria-label="main navigation"> <div>
<div class="navbar-brand"> <!-- End Call Modal -->
<router-link to="/" class="navbar-item" exact v-if="!inCall"> <Modal
<strong>Seepur</strong> title="Are You Sure?"
</router-link> :isActive="showConfirmEndCall"
<!-- <a class="navbar-item" href="/"> acceptText="End"
</a>--> rejectText="Cancel"
<a @accept="onConfirmedEndCall()"
id="menu-button" @close="showConfirmEndCall=false"
role="button" >
class="navbar-burger burger" <p>End Call?</p>
@click="showMenu=!showMenu" </Modal>
aria-label="menu" <nav class="navbar" role="navigation" aria-label="main navigation">
aria-expanded="false" <div class="navbar-brand">
data-target="navbarBasicExample" <router-link to="/" class="navbar-item" exact v-if="!inCall">
> <strong>Seepur</strong>
<span aria-hidden="true"></span> </router-link>
<span aria-hidden="true"></span> <!-- <a class="navbar-item" href="/">
<span aria-hidden="true"></span> </a>-->
</a> <a
</div> 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 id="nav-menu" :class="['navbar-menu', {'is-active':showMenu}]">
<div class="navbar-start"> <div class="navbar-start">
<!-- Normal Nav --> <!-- 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="/" class="navbar-item" exact v-if="!inCall">Home</router-link>
<router-link <router-link
active-class="is-active" active-class="is-active"
to="/about" to="/about"
class="navbar-item" class="navbar-item"
exact exact
v-if="!inCall" v-if="!inCall"
>About</router-link> >About</router-link>
<!-- In call Nav --> <!-- In call Nav -->
<div class="navbar-item" v-if="inCall"> <div class="navbar-item" v-if="inCall">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control"> <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 <router-link
active-class="is-active" active-class="is-active"
to="/" to="/settings"
class="button is-danger" class="navbar-item"
exact exact
replace >Settings</router-link>
v-if="inCall" <a class="navbar-item" href="/logout">Logout</a>
> <hr class="navbar-divider" v-if="user.is_admin" />
<i class="fa fa-fw fa-times-circle-o"></i> End Call <a class="navbar-item" href="/admin/" v-if="user.is_admin">Admin Settigns</a>
</router-link> </div>
</p> </div>
<div class="navbar-item" v-if="inCall">
<p class="control"> <p class="control">
<button <button class="button" @click="changeHost()">
class="button is-info" <i class="fa fa-fw fa-refresh"></i> Change Host
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> </button>
</p> </p>
</div> </div>
<div v-if="inCall" class="navbar-item">Current Host: {{host.name}}</div>
</div> </div>
</div> </div>
</nav>
<div class="navbar-end"> </div>
<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> </template>
<script lang="ts"> <script lang="ts">
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import CallManager, { ECallEvents } from "../../home/ws/call.manager"; import CallManager, { ECallEvents } from "../../home/ws/call.manager";
import WebsocketService from "../../home/ws/websocket.service"; import WebsocketService from "../../home/ws/websocket.service";
import Modal from "../../shared/components/Modal/Modal.vue";
export default { export default {
name: "TobNavbar", name: "TobNavbar",
components: {
Modal
},
async created() { async created() {
const ws = await WebsocketService.getInstance(); const ws = await WebsocketService.getInstance();
this.callManager = ws.callManager; this.callManager = ws.callManager;
@ -104,6 +119,7 @@ export default {
}, },
data() { data() {
return { return {
showConfirmEndCall: false,
showMenu: false, showMenu: false,
subscribedToLobbyEvents: false, subscribedToLobbyEvents: false,
callManager: null as CallManager callManager: null as CallManager
@ -128,6 +144,10 @@ export default {
...mapGetters(["user", "inCall"]) ...mapGetters(["user", "inCall"])
}, },
methods: { methods: {
onConfirmedEndCall() {
this.showConfirmEndCall = false;
this.$router.replace({ path: `/` });
},
changeHost() { changeHost() {
this.callManager.changeHost(); this.callManager.changeHost();
}, },