Added Telephony Context and removed HelloWorld
example
This commit is contained in:
parent
c366605fe1
commit
1408725f91
@ -2,9 +2,12 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link
|
||||||
|
rel="icon"
|
||||||
|
href="https://www.verint.com/wp-content/themes/verint/dist/img/favicon.ico"
|
||||||
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue + TS</title>
|
<title>Channel Automation Vue Apps</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
1194
package-lock.json
generated
1194
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,9 +6,14 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vue-tsc && vite build",
|
"build": "vue-tsc && vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
|
||||||
|
"format": "prettier . --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"eslint": "^8.51.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
|
|||||||
10
src/.eslintrc.cjs
Normal file
10
src/.eslintrc.cjs
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
|
||||||
|
rules: {
|
||||||
|
// override/add rules settings here, such as:
|
||||||
|
// 'vue/no-unused-vars': 'error'
|
||||||
|
},
|
||||||
|
};
|
||||||
36
src/App.vue
36
src/App.vue
@ -1,45 +1,23 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="router">
|
<div id="router">
|
||||||
<h1>Hello App!</h1>
|
<h1>Channel Automation Vue Apps</h1>
|
||||||
<p>
|
<p>
|
||||||
<!-- use the router-link component for navigation. -->
|
<!-- use the router-link component for navigation. -->
|
||||||
<!-- specify the link by passing the `to` prop. -->
|
<!-- specify the link by passing the `to` prop. -->
|
||||||
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
|
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
|
||||||
<router-link to="/">Go to Home</router-link>
|
<router-link to="/">Go to Home</router-link>
|
||||||
<router-link to="/about">Go to About</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>
|
</p>
|
||||||
<!-- route outlet -->
|
<!-- route outlet -->
|
||||||
<!-- component matched by the route will render here -->
|
<!-- component matched by the route will render here -->
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
|
||||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<HelloWorld msg="Vite + Vue" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.vue:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #42b883aa);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 496 B |
@ -1,38 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps<{ msg: string }>()
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Install
|
|
||||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
|
||||||
in your IDE for a better DX
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
24
src/components/VerticalLabelValue.vue
Normal file
24
src/components/VerticalLabelValue.vue
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
// eslint-disable-next-line
|
||||||
|
const props = defineProps(["label", "value"]);
|
||||||
|
const rows = Math.ceil(props.value.length / 18);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="vertical-layout-cell">
|
||||||
|
<div class="GTTextLabel GTRTextLabel" :title="label" style="">
|
||||||
|
{{ label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vertical-layout-cell">
|
||||||
|
<textarea
|
||||||
|
:value="value"
|
||||||
|
class="GTTextField read-only"
|
||||||
|
:title="label"
|
||||||
|
type="textarea"
|
||||||
|
readonly
|
||||||
|
:rows="rows"
|
||||||
|
maxlength="1024"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style></style>
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from "vue";
|
||||||
import './style.css'
|
import "./style.css";
|
||||||
import App from './App.vue'
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
|
|
||||||
createApp(App)
|
createApp(App).use(router).mount("#app");
|
||||||
.use(router).mount('#app')
|
|
||||||
|
|||||||
@ -1,16 +1,28 @@
|
|||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory } from "vue-router";
|
||||||
import Home from '../views/Home.vue'
|
import Home from "../views/Home.vue";
|
||||||
import About from '../views/About.vue'
|
import About from "../views/About.vue";
|
||||||
|
import TelephonyContext from "../views/TelephonyContext.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', component: Home },
|
{ path: "/", component: Home },
|
||||||
{ path: '/about', component: About },
|
{ path: "/about", component: About },
|
||||||
]
|
{
|
||||||
|
path: "/telephonyContext/",
|
||||||
|
name: "telephonyContext",
|
||||||
|
components: { default: TelephonyContext },
|
||||||
|
props: {
|
||||||
|
default: (route: { params: any; query: any }) => ({
|
||||||
|
...route.params,
|
||||||
|
...route.query,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
|
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes, // short for `routes: routes`
|
routes, // short for `routes: routes`
|
||||||
})
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
@ -1,80 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,13 +1,5 @@
|
|||||||
<template lang="">
|
<template lang="">
|
||||||
<div>
|
<div>
|
||||||
<h1>About</h1>
|
<h1>About</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,13 +1,5 @@
|
|||||||
<template lang="">
|
<template lang="">
|
||||||
<div>
|
<div>
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
94
src/views/TelephonyContext.vue
Normal file
94
src/views/TelephonyContext.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import VerticalLabelValue from "../components/VerticalLabelValue.vue";
|
||||||
|
defineProps({
|
||||||
|
channel: { type: String, default: "" },
|
||||||
|
type: { type: String, default: "" },
|
||||||
|
queue: { type: String, default: "" },
|
||||||
|
direction: { type: String, default: "" },
|
||||||
|
ani: { type: String, default: "" },
|
||||||
|
dnis: { type: String, default: "" },
|
||||||
|
startTime: { type: String, default: "" },
|
||||||
|
transferSummary: { type: String, default: "" },
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<h2>Summary</h2>
|
||||||
|
<div class="customerAccount customer-detail-container" width="100%">
|
||||||
|
<div class="customer-profile-fields vertical-layout">
|
||||||
|
<div
|
||||||
|
class="column-layout"
|
||||||
|
style="width: 100%; max-width: 100%; height: 100%"
|
||||||
|
>
|
||||||
|
<div class="row1 column-layout-row">
|
||||||
|
<div
|
||||||
|
class="blockOuterSpacingRight col1 column-layout-cell"
|
||||||
|
style="width: 25%"
|
||||||
|
>
|
||||||
|
<h3>Telephony Data</h3>
|
||||||
|
<VerticalLabelValue
|
||||||
|
label="Channel"
|
||||||
|
:value="channel"
|
||||||
|
></VerticalLabelValue>
|
||||||
|
<VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
|
||||||
|
<VerticalLabelValue
|
||||||
|
label="Queue"
|
||||||
|
:value="queue"
|
||||||
|
></VerticalLabelValue>
|
||||||
|
<VerticalLabelValue
|
||||||
|
label="Direction"
|
||||||
|
:value="direction"
|
||||||
|
></VerticalLabelValue>
|
||||||
|
<VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
|
||||||
|
<VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="blockOuterSpacingRight col2 column-layout-cell"
|
||||||
|
style="width: 25%"
|
||||||
|
>
|
||||||
|
<h3>Da Vinci Transfer Summary</h3>
|
||||||
|
<!-- <VerticalLabelValue label="Da Vinci Transfer Summary" :value="transferSummary"></VerticalLabelValue> -->
|
||||||
|
<p>Payments How much is my premium?</p>
|
||||||
|
<p>IVA: Your premium is 100 a month</p>
|
||||||
|
<p>Why did my premium go up?</p>
|
||||||
|
<p>
|
||||||
|
There are many factors that can impact your premium, let me
|
||||||
|
escalate you to an agent
|
||||||
|
</p>
|
||||||
|
<p>Customer is passed over to General Inquiries queue</p>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from "vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
})
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user