rough build out

This commit is contained in:
2022-10-13 00:17:28 -05:00
parent 0a5be1ae0e
commit 3fc46d970e
21 changed files with 10728 additions and 0 deletions

23
client/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
client/README.md Normal file
View File

@@ -0,0 +1,24 @@
# client
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
client/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
client/jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

8414
client/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

43
client/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

BIN
client/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

17
client/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

56
client/src/App.vue Normal file
View File

@@ -0,0 +1,56 @@
<script setup>
import { ref } from 'vue'
import ThreadSummary from './components/ThreadSummary.vue'
import ContactTable from './components/ContactTable.vue'
const titleClass = ref('title')
const threadId = ref('')
const contactData = ref(null)
function onInput(e) {
threadId.value = e.target.value
}
async function fetchData() {
console.log('fetchingData');
contactData.value = null
const res = await fetch(`http://localhost:9000/thread-tracker`, {
credentials: "include" // fetch won't send cookies unless you set credentials
})
contactData.value = await res.json()
}
</script>
<template>
<div id="app">
<header>
<h1 :class="titleClass">Thread Tracker</h1>
</header>
<input :value="text" @input="onInput" placeholder="Enter threadId here">
<button @click="fetchData">Fetch next todo</button>
<ThreadSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
<ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
<!-- <span>{{ contactData }}</span> -->
</div>
</template>
<style>
.title {
text-align: center;
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
box-sizing: border-box;
border: 5px solid gray;
border-radius: 15%;
width: 400px;
height: 400px;
margin: auto;
}
</style>

21
client/src/Greeting.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="greet">
<h3 v-if="data">{{data}}</h3>
<h3 v-else>No Data</h3>
</div>
</template>
<script>
export default {
name: 'display-greeting',
props: ["data"],
};
</script>
<style>
* {
margin-top: 30px;
text-align: center;
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
}
</style>

BIN
client/src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,37 @@
<script setup>
// eslint-disable-next-line
defineProps(["tableData"]);
</script>
<template>
<table>
<thead>
<tr>
<th>System ID</th>
<th>Start Time</th>
<th>End Time</th>
<th>Direction</th>
<th>Handled By</th>
<th>Active Duration (s)</th>
<th>Notes</th>
<th>Interaction</th>
<th>Outcome</th>
<th>Customer</th>
</tr>
</thead>
<tbody>
<tr v-for="td in tableData" :key="td">
<td>{{ td.node.systemId }}</td>
<td>{{ td.node.startTime }}</td>
<td>{{ td.node.endTime }}</td>
<td>{{ td.node.direction }}</td>
<td>{{ td.node.handledBy }}</td>
<td>{{ td.node.activeDuration }}</td>
<td>{{ td.node.notes }}</td>
<td>{{ td.node.interaction }}</td>
<td>{{ td.node.outcome }}</td>
<td>{{ td.node.customer }}</td>
</tr>
</tbody>
</table>
</template>

View File

@@ -0,0 +1,11 @@
<script setup>
// eslint-disable-next-line
defineProps(["results"]);
</script>
<template>
<h4>Contacts Found: {{ results.totalCount }}</h4>
<h4>Total Handle Time: {{ results.totalHTDays }}</h4>
<h4>Active Handle Time: {{ results.activeHTDays }}</h4>
<h4>Total Active Time: {{ results.totalATHours }}</h4>
</template>

4
client/src/main.js Normal file
View File

@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

4
client/vue.config.js Normal file
View File

@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})