Clean up router

package-lock.json

@@ -18,7 +18,7 @@
         "@vitejs/plugin-vue": "^4.2.3",
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
-        "vue-tsc": "^1.8.5"
+        "vue-tsc": "^1.8.16"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -643,17 +643,17 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.15",
+      "version": "1.8.16",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.15.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.16.tgz",
-      "integrity": "sha512-zche5Aw8kkvp3YaghuLiOZyVIpoWHjSQ0EfjxGSsqHOPMamdCoa9x3HtbenpR38UMUoKJ88wiWuiOrV3B/Yq+A==",
+      "integrity": "sha512-IAONyjgR3XImwgrtyQ7CCJlSXTlLesXG6/LpPjOBaXFiwknmGf1yDAXGa9fVH0lRplcnvOA7HNDI92OwWBi9qg==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~1.10.0",
+        "@volar/language-core": "~1.10.3",
-        "@volar/source-map": "~1.10.0",
+        "@volar/source-map": "~1.10.3",
         "@vue/compiler-dom": "^3.3.0",
         "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
-        "minimatch": "^9.0.0",
+        "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
         "vue-template-compiler": "^2.7.14"
       },
@@ -723,13 +723,13 @@
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
     "node_modules/@vue/typescript": {
-      "version": "1.8.15",
+      "version": "1.8.16",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.15.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.16.tgz",
-      "integrity": "sha512-qWyanQKXOsK84S8rP7QBrqsvUdQ0nZABZmTjXMpb3ox4Bp5IbkscREA3OPUrkgl64mAxwwCzIWcOc3BPTCPjQw==",
+      "integrity": "sha512-ywbY4bS4YJw8gYyPpOhwyutqzl0lqkYI7l3waZkOcQG4ZYgiu6KyHZc3aagEbH8saFQTQxi5+I3ATUN5KwfvNw==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~1.10.0",
+        "@volar/typescript": "~1.10.3",
-        "@vue/language-core": "1.8.15"
+        "@vue/language-core": "1.8.16"
       }
     },
     "node_modules/acorn": {
@@ -2040,14 +2040,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.15",
+      "version": "1.8.16",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.15.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.16.tgz",
-      "integrity": "sha512-4DoB3LUj7IToLmggoCxRiFG+QU5lem0nv03m1ocqugXA9rSVoTOEoYYaP8vu8b99Eh+/cCVdYOeIAQ+RsgUYUw==",
+      "integrity": "sha512-PT2xOJNl2qkmmp8eHf4qapfzvcRTQLxQQhQAzY7sMjv0JKsud9vo+aotklh/VzM9ZfaSo1UlDGZy6zSSRc+8wA==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.15",
+        "@vue/language-core": "1.8.16",
-        "@vue/typescript": "1.8.15",
+        "@vue/typescript": "1.8.16",
-        "semver": "^7.3.8"
+        "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"

package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
-    "vue-tsc": "^1.8.5"
+    "vue-tsc": "^1.8.16"
   }
 }

src/App.vue

@@ -2,18 +2,6 @@
 
 <template>
   <div id="router">
-    <h1>Channel Automation Vue Apps</h1>
-    <p>
-      <!-- use the router-link component for navigation. -->
-      <!-- specify the link by passing the `to` prop. -->
-      <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
-      <router-link to="/">Go to Home</router-link>
-      <router-link to="/about">Go to About</router-link>
-      <router-link
-        to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&_sessionIdentifier=bc93f1fc"
-        >Telephony Context</router-link
-      >
-    </p>
     <!-- route outlet -->
     <!-- component matched by the route will render here -->
     <router-view></router-view>

src/views/Home.vue

@@ -1,5 +1,14 @@
 <template lang="">
   <div>
     <h1>Home</h1>
+    <ul>
+      <li><router-link to="/about">Go to About</router-link></li>
+      <li>
+        <router-link
+          to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&_sessionIdentifier=bc93f1fc"
+          >Telephony Context</router-link
+        >
+      </li>
+    </ul>
   </div>
 </template>

src/views/TelephonyContext.vue

@@ -15,80 +15,47 @@ defineProps({
   <h2>Summary</h2>
   <div class="customerAccount customer-detail-container" width="100%">
     <div class="customer-profile-fields vertical-layout">
-      <div
+      <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
-        class="column-layout"
-        style="width: 100%; max-width: 100%; height: 100%"
-      >
         <div class="row1 column-layout-row">
-          <div
+          <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
-            class="blockOuterSpacingRight col1 column-layout-cell"
-            style="width: 25%"
-          >
             <h3>Telephony Data</h3>
-            <VerticalLabelValue
+            <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
-              label="Channel"
-              :value="channel"
-            ></VerticalLabelValue>
             <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-            <VerticalLabelValue
+            <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
-              label="Queue"
+            <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
-              :value="queue"
-            ></VerticalLabelValue>
-            <VerticalLabelValue
-              label="Direction"
-              :value="direction"
-            ></VerticalLabelValue>
             <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
             <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
           </div>
-          <div
+          <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
-            class="blockOuterSpacingRight col2 column-layout-cell"
-            style="width: 25%"
-          >
             <h3>Da Vinci Transfer Summary</h3>
-            <!-- <VerticalLabelValue label="Da Vinci Transfer Summary" :value="transferSummary"></VerticalLabelValue> -->
+            <ul>
-            <p>Payments How much is my premium?</p>
+              <li><span class="customer">Alice</span> is a new employee who needs access to an application for her work, but she doesn't have the
-            <p>IVA: Your premium is 100 a month</p>
+                password.</li>
-            <p>Why did my premium go up?</p>
+              <li>She asked the <span class="iva">IVA</span> but they are unable to help her</li>
-            <p>
+              <li>She tries to guess the password, but fails.</li>
-              There are many factors that can impact your premium, let me
+              <li>She uses a hacking tool to find the password, which is "ilovebing".</li>
-              escalate you to an agent
+              <li>She logs into the application, unaware that the senior developer is monitoring her.</li>
-            </p>
+            </ul>
-            <p>Customer is passed over to General Inquiries queue</p>
           </div>
         </div>
       </div>
-    </div>
+    </div>` `
   </div>
 </template>
 <style scoped>
 @import "https://em28.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
 @import "https://em28.verint.live/ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
-
-/* label,
-  input,
-  select,
-  textarea {
-    display: block;
-    width: 200px;
-    float: left;
-    margin-bottom: 1em;
-  }
-
-  select {
-    width: 205px;
-  }
-
-  label {
-    text-align: right;
-    width: 100px;
-    padding-right: 2em;
-  }
-
-  .clear {
-    clear: both;
-  } */
 p {
   size: 24pt;
 }
+
+span.customer {
+  color: #ff0000;
+  font-weight:bold; 
+}
+
+span.iva {
+  color: #0000a0;
+  font-weight:bold; 
+}
 </style>

vite.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command }) => {
-  plugins: [vue()],
+  if (command === "build") {
+    return { plugins: [vue()], base: "/ca_vue_apps/dist" };
+  } else {
+    return { plugins: [vue()] };
+  }
 });