More pages

src/components/home/navBar.vue

@@ -1,28 +1,66 @@
 <template>
-	<div>
-		<v-btn block color="primary" @click="router('/telemaketer')"
-			>Telemarketer</v-btn
-		>
-		<v-btn block color="primary" @click="router('/booking')">Booking</v-btn>
-		<v-btn block color="primary" @click="router('/calls')">Calls</v-btn>
-		<v-btn block color="primary" @click="router('/importer')"
-			>Importer</v-btn
-		>
-		<v-btn block color="primary" @click="router('/reporting')"
-			>Reporting</v-btn
-		>
-		<v-btn block color="primary" @click="router('/settings')"
-			>Settings</v-btn
-		>
-	</div>
+  <div>
+    <v-btn block color="primary" @click="router('/telemaketer')">Telemarketer</v-btn>
+    <v-btn block color="primary" @click="router('/booking')">Booking</v-btn>
+    <v-btn block color="primary" @click="router('/calls')">Calls</v-btn>
+    <v-btn block color="primary" @click="router('/importer')">Importer</v-btn>
+    <v-btn block color="primary" @click="router('/reporting')">Reporting</v-btn>
+    <v-btn block color="primary" @click="ShowSettings">Settings</v-btn>
+    <transition name="fade">
+      <v-container v-if="showSettings">
+        <v-btn block color="secondary" @click="router('/settings/sipaccount')">SIP Account</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/mediadevices')">Media Devices</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/defaults')">Defaults</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/network')">Network</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/colours')">Colors</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/admin')">Admin</v-btn>
+        <v-btn block color="secondary" @click="router('/settings/about')">About</v-btn>
+      </v-container>
+    </transition>
+  </div>
 </template>
 
 <script>
 export default {
-	methods: {
-		router(goTo) {
-			this.$emit('routerGoTo', goTo)
-		},
-	},
-}
+  data() {
+    return {
+      showSettings: false
+    };
+  },
+  methods: {
+    router(goTo) {
+      this.$emit("routerGoTo", goTo);
+      if (goTo.includes("/settings")) {
+        this.showSettings = true;
+      } else {
+        this.showSettings = false;
+      }
+    },
+    ShowSettings() {
+      this.showSettings = this.showSettings !== true;
+    }
+  }
+};
 </script>
+
+<style>
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

src/components/settings/defaults.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-container>
+    <h1 style="text-align:center">Defaults</h1>
+    <v-row>
+      <v-col>
+        <v-container>
+          <v-row>
+            <v-col cols="4">
+              <h3>Feedback</h3>
+            </v-col>
+            <v-col cols="4">
+              <h3>Import Source</h3>
+            </v-col>
+            <v-col cols="4">
+              <h3>Call Reschedule</h3>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="4">
+              <v-combobox label="Feedback Type" />
+            </v-col>
+            <v-col cols="4">
+              <v-combobox label="Import Source" />
+            </v-col>
+            <v-col cols="4">
+              <v-text-field disabled label="Next Trigger" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="4">
+              <v-text-field label="Feedback Message" />
+            </v-col>
+            <v-col cols="4">
+              <v-switch label="Random Leads" />
+            </v-col>
+            <v-col cols="4">
+              <v-text-field label="Time Popup Open" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="4" offset="8">
+              <v-combobox label="Popup Location" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="4" offset="4">
+        <v-btn color="primary" block>Save</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "Defaults"
+};
+</script>

src/components/settings/mediaDevices.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-container>
+    <h1 style="text-align:center">Media Device Settings</h1>
+    <v-row>
+      <v-col offset="5">
+        <v-container>
+          <v-row>
+            <h3>Microphone Settings</h3>
+          </v-row>
+          <v-row>
+            <v-col cols="3">
+              <v-combobox label="Device" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="2">
+              <v-slider />
+            </v-col>
+            <v-col cols="1">
+              <v-switch label="Mute" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col offset="5">
+        <v-container>
+          <v-row>
+            <h3>Speaker Settings</h3>
+          </v-row>
+          <v-row>
+            <v-col cols="3">
+              <v-combobox label="Device" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="2">
+              <v-slider />
+            </v-col>
+            <v-col cols="1">
+              <v-switch label="Mute" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "MediaDevices"
+};
+</script>

src/components/settings/sipAccount.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-container>
+    <h1 style="text-align:center">SIP Account</h1>
+    <v-row>
+      <v-col cols="2" offset="4">
+        <v-combobox label="Line" />
+      </v-col>
+      <v-col cols="1">
+        <v-dialog v-model="dialog" persistent max-width="600">
+          <template v-slot:activator="{ on }">
+            <v-btn color="primary" block v-on="on">Add</v-btn>
+          </template>
+          <v-card>
+            <sip />
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="dialog = false">Close</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col cols="1">
+        <v-dialog v-model="dialog" persistent max-width="600">
+          <template v-slot:activator="{ on }">
+            <v-btn color="primary" block v-on="on">Modify</v-btn>
+          </template>
+          <v-card>
+            <sip />
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" text @click="dialog = false">Close</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2" offset="4">
+        <v-text-field disabled label="Status" />
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary" block>Remove</v-btn>
+      </v-col>
+      <v-col cols="1">
+        <v-btn color="primary" block>Default</v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="2" offset="4">
+        <v-btn color="primary" block>Register</v-btn>
+      </v-col>
+      <v-col cols="2">
+        <v-btn color="primary" block>Unregister</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import sip from "./sipAccountDetails";
+
+export default {
+  name: "SipAccount",
+  data() {
+    return {
+      dialog: false
+    };
+  },
+  components: {
+    sip
+  }
+};
+</script>

src/components/settings/sipAccountDetails.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-container>
+    <h2>SIP ACCOUNT SETTINGS</h2>
+    <v-container>
+      <v-text-field label="Display Name" />
+      <v-text-field label="Username" />
+      <v-text-field label="Register Name" />
+      <v-text-field label="Password" type="password" />
+      <v-text-field label="Domain" />
+      <v-text-field label="Outbound Proxy" />
+      <v-switch label="Registration Required" />
+    </v-container>
+    <!-- <br />
+    <h2>SIP ACCOUNT SETTINGS</h2>
+    <v-container>
+      <v-combobox label="Display Name" />
+      <v-combobox label="Username" />
+      <v-switch label="Registration Required" />
+      <v-combobox label="Username" />
+      <v-text-field label="Username" />
+    </v-container>-->
+    <v-btn color="primary">save</v-btn>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "SIPDetails"
+};
+</script>

src/components/telemarketer/lead.vue

@@ -86,9 +86,6 @@
                 </template>
                 <v-card>
                   <booking />
-                  <!-- <v-card-title class="headline">Use Google's location service?</v-card-title>
-                  <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
-                  -->
                   <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn color="primary" text @click="dialog = false">Close</v-btn>

src/router/index.js

@@ -8,6 +8,9 @@ import leadFind from '../components/telemarketer/leadFindByTel.vue'
 import Booking from '../components/booking/booking.vue'
 import Calls from '../components/calls/calls.vue'
 import Importer from '../components/importer/leadImporter.vue'
+import SipAccount from '../components/settings/sipAccount.vue'
+import MediaDevices from '../components/settings/mediaDevices.vue'
+import Defaults from '../components/settings/defaults.vue'
 
 Vue.use(VueRouter)
 
@@ -61,6 +64,21 @@ const routes = [
 		name: 'Importer',
 		component: Importer,
 	},
+	{
+		path: '/settings/sipaccount',
+		name: 'SipAccount',
+		component: SipAccount,
+	},
+	{
+		path: '/settings/mediadevices',
+		name: 'MediaDevices',
+		component: MediaDevices,
+	},
+	{
+		path: '/settings/defaults',
+		name: 'Defaults',
+		component: Defaults,
+	},
 ]
 
 const router = new VueRouter({