A bit more polish

public/style.css

@@ -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; }

resources/sass/main.scss

@@ -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;
+}

resources/scripts/applications/home/views/home.vue

@@ -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);

resources/scripts/applications/home/views/settings.vue

@@ -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>

resources/scripts/applications/home/ws/call.manager.ts

@@ -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;

resources/scripts/applications/services/api.service.ts

@@ -1,16 +1,31 @@
 export default class ApiService {
 
   static async getUser(userId?: number) {
+    try {
       return (await fetch('/api/v1/client/user/')).json();
+    } catch (e) {
+      console.error(`getUser ERROR: ${e.message}`);
+      return e;
+    }
   }
 
 
   static async getAllUsers() {
+    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> {
+    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) {
+    } catch (e) {
-      return error;
+      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;
     }
   }

resources/scripts/applications/shared/components/Modal/Modal.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :class="['modal', { 'is-active': !!isActive }]">
+  <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">
@@ -10,26 +11,30 @@
           <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 is-success"
+            v-if="!!acceptText"
+            @click="$emit('accept')"
+          >{{acceptText}}</button>
           <button class="button" @click="close()" v-if="!!rejectText">{{rejectText}}</button>
         </footer>
       </div>
     </div>
+  </transition>
 </template>
 
 <script lang="ts">
 export default {
-
   props: ["title", "isActive", "acceptText", "rejectText"],
   data() {
     return {
       showTitle: !!this.title,
       showButtons: this.acceptText || this.rejectText
-    }
+    };
   },
   methods: {
     close() {
-      this.$emit('close');
+      this.$emit("close");
     }
   }
 };

resources/scripts/applications/shared/components/Notification.vue

@@ -1,16 +1,24 @@
 <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>
       {{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");

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

@@ -1,4 +1,16 @@
 <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">
@@ -36,16 +48,9 @@
           <div class="navbar-item" v-if="inCall">
             <div class="field is-grouped">
               <p class="control">
-              <router-link
+                <button @click="showConfirmEndCall = true" class="button is-danger" v-if="inCall">
-                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>
+                </button>
               </p>
               <p class="control">
                 <button
@@ -68,7 +73,12 @@
             <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>
+              <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>
@@ -85,14 +95,19 @@
         </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",
+  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();
     },