Added Telephony Context and removed HelloWorld
example
This commit is contained in:
parent
c366605fe1
commit
1408725f91
@ -2,9 +2,12 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<title>Channel Automation Vue Apps</title>
|
||||
</head>
|
||||
<body>
|
||||
<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": {
|
||||
"dev": "vite",
|
||||
"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": {
|
||||
"eslint": "^8.51.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"vue": "^3.3.4",
|
||||
"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">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div id="router">
|
||||
<h1>Hello App!</h1>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<style scoped>
|
||||
.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>
|
||||
<style scoped></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 './style.css'
|
||||
import App from './App.vue'
|
||||
import { createApp } from "vue";
|
||||
import "./style.css";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
createApp(App)
|
||||
.use(router).mount('#app')
|
||||
createApp(App).use(router).mount("#app");
|
||||
|
||||
@ -1,16 +1,28 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import About from '../views/About.vue'
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import Home from "../views/Home.vue";
|
||||
import About from "../views/About.vue";
|
||||
import TelephonyContext from "../views/TelephonyContext.vue";
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/about', component: About },
|
||||
]
|
||||
{ path: "/", component: Home },
|
||||
{ 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({
|
||||
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
|
||||
history: createWebHashHistory(),
|
||||
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="">
|
||||
<div>
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="">
|
||||
|
||||
</style>
|
||||
@ -1,13 +1,5 @@
|
||||
<template lang="">
|
||||
<div>
|
||||
<h1>Home</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Home</h1>
|
||||
</div>
|
||||
</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 vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user