Added router
This commit is contained in:
parent
78d5fb914b
commit
a7d4edb4ad
@ -1 +1 @@
|
||||
VITE_EO_SERVICES_URL=https://eo-services.mortons.site
|
||||
VITE_EO_SERVICES_URL=https://eo-services.mortons.site/api
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<title>Engagement Orchestration Services</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
35
package-lock.json
generated
35
package-lock.json
generated
@ -8,7 +8,8 @@
|
||||
"name": "vite-project",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"vue": "^3.2.37"
|
||||
"vue": "^3.2.37",
|
||||
"vue-router": "^4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.1.0",
|
||||
@ -117,6 +118,11 @@
|
||||
"@vue/shared": "3.2.41"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
|
||||
"integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.2.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
|
||||
@ -754,6 +760,20 @@
|
||||
"@vue/server-renderer": "3.2.41",
|
||||
"@vue/shared": "3.2.41"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
|
||||
"integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.1.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -829,6 +849,11 @@
|
||||
"@vue/shared": "3.2.41"
|
||||
}
|
||||
},
|
||||
"@vue/devtools-api": {
|
||||
"version": "6.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
|
||||
"integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
|
||||
@ -1192,6 +1217,14 @@
|
||||
"@vue/server-renderer": "3.2.41",
|
||||
"@vue/shared": "3.2.41"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
|
||||
"integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.1.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.2.37"
|
||||
"vue": "^3.2.37",
|
||||
"vue-router": "^4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.1.0",
|
||||
|
||||
44
src/App.vue
44
src/App.vue
@ -1,42 +1,6 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ContactTable from './components/ContactTable.vue'
|
||||
import ContactsSummary from './components/ContactsSummary.vue';
|
||||
|
||||
const threadId = ref('')
|
||||
const contactData = ref(null)
|
||||
|
||||
function onInput(e) {
|
||||
threadId.value = e.target.value
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
contactData.value = null
|
||||
const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/thread-tracker?threadId=${ threadId.value }`, {
|
||||
credentials: "include" // fetch won't send cookies unless you set credentials
|
||||
})
|
||||
contactData.value = await res.json()
|
||||
console.log(contactData.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div id="app">
|
||||
<header>
|
||||
<h1>Message Tracking Time</h1>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<label for="threadId">Reference ID: </label>
|
||||
<input id="threadId" :value="threadId" @input="onInput" placeholder="enter Reference ID here" />
|
||||
<button @click="fetchData">Fetch Contacts</button>
|
||||
</div>
|
||||
|
||||
<ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
|
||||
<div v-else>No Contacts Found</div>
|
||||
<ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
|
||||
|
||||
</div>
|
||||
<!-- <router-link to="/">Home</router-link>
|
||||
<router-link to="/about">About</router-link>
|
||||
<router-link to="/referenceId">Reference ID Tracker</router-link> -->
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
|
||||
42
src/ReferenceID.vue
Normal file
42
src/ReferenceID.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ContactTable from './components/ContactTable.vue'
|
||||
import ContactsSummary from './components/ContactsSummary.vue';
|
||||
|
||||
const referenceId = ref('')
|
||||
const contactData = ref(null)
|
||||
|
||||
function onInput(e) {
|
||||
referenceId.value = e.target.value
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
contactData.value = null
|
||||
const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
|
||||
credentials: "include" // fetch won't send cookies unless you set credentials
|
||||
})
|
||||
contactData.value = await res.json()
|
||||
console.log(contactData.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div id="app">
|
||||
<!-- <header>
|
||||
<h1>Message Tracking Time</h1>
|
||||
</header> -->
|
||||
|
||||
<div>
|
||||
<label for="referenceId">Reference ID: </label>
|
||||
<input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
|
||||
<button @click="fetchData">Search Contacts</button>
|
||||
</div>
|
||||
|
||||
<ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
|
||||
<div v-else>No Contacts Found</div>
|
||||
<ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
@ -26,7 +26,7 @@ defineProps(["summary"]);
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="measure">{{ (summary.totalInboundActiveSeconds / 6).toFixed(2) }}</div>
|
||||
<div class="measure">{{ (summary.totalInboundActiveSeconds / 60).toFixed(2) }}</div>
|
||||
<div class="label">Total [INBOUND] Active Time (minutes)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
25
src/main.js
25
src/main.js
@ -1,5 +1,22 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import { createApp } from "vue";
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import "./style.css";
|
||||
import App from "./App.vue";
|
||||
import Home from "./views/Home.vue";
|
||||
import About from "./views/About.vue";
|
||||
import ReferenceID from "./ReferenceID.vue";
|
||||
|
||||
const routes = [
|
||||
{ path: "/", component: Home },
|
||||
{ path: "/about", component: About },
|
||||
{ path: "/referenceId/", component: ReferenceID },
|
||||
];
|
||||
|
||||
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`
|
||||
});
|
||||
|
||||
createApp(App).use(router).mount("#app");
|
||||
|
||||
@ -74,7 +74,6 @@ button {
|
||||
min-width: 0px;
|
||||
font-size: 12px;
|
||||
padding: 0 6px !important;
|
||||
margin: 0;
|
||||
font-family: "OpenSans", Arial, sans-serif;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
5
src/views/About.vue
Normal file
5
src/views/About.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
</template>
|
||||
5
src/views/Home.vue
Normal file
5
src/views/Home.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<h1>Home</h1>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user