Updated Styling and added threadId query

client/src/App.vue

@@ -3,8 +3,6 @@ import { ref } from 'vue'
 import ContactTable from './components/ContactTable.vue'
 import ContactsSummary from './components/ContactsSummary.vue';
 
-const titleClass = ref('title')
-
 const threadId = ref('')
 const contactData = ref(null)
 
@@ -15,41 +13,31 @@ function onInput(e) {
 async function fetchData() {
   console.log('fetchingData');
   contactData.value = null
-  const res = await fetch(`http://localhost:9000/thread-tracker`, {
+  const res = await fetch(`http://localhost:9000/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 :class="titleClass">Thread Tracker</h1>
+      <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" />
+    </div>
     
-    <input :value="text" @input="onInput" placeholder="Enter threadId here">
+    <div><button @click="fetchData">Fetch Contacts</button></div>
-    <button @click="fetchData">Fetch Contacts</button>
 
     <ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
+    <div v-else>No Contacts Found</div>
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
     
   </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>

client/src/assets/eo.css

@@ -0,0 +1,87 @@
+h1 {
+    font-size: 18px;
+    line-height: 19px;
+    overflow: hidden;
+    padding: 6px 0 12px 0;
+    min-height: 23px;
+    vertical-align: middle;
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    border-bottom: 1px solid #c7c7c7;
+}
+
+h3 {
+    border-bottom: 1px solid rgb(199, 199, 199);
+    display: block;
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 23px;
+    min-height: 23px;
+    overflow: hidden;
+}
+
+body {
+    font: 12px/18px "OpenSans", Ariel, sans-serif;
+}
+
+p {
+    color: rgb(51, 51, 51);
+    display: block;
+    font: normal normal normal normal 12px/18px OpenSans, Arial, sans-serif;
+    font-variant: normal;
+    text-align: left;
+    visibility: visible;
+    white-space: normal;
+}
+
+table {
+    border-collapse: collapse;
+    font: normal normal normal normal 12px/18px OpenSans, Arial, sans-serif;
+    width: 100%;
+}
+
+th {
+    background: rgb(238, 238, 238) none repeat-x scroll 0px 0px / auto padding-box border-box;
+    border-right: 2px solid rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(255, 255, 255);
+    padding: 3px 6px 2px;
+    text-align: left;
+    vertical-align: bottom;
+}
+
+td {
+    margin: 0px;
+    padding: 0px;
+    text-align: left;
+}
+
+tr {
+    border-bottom: 1px solid rgb(199, 199, 199);
+    padding: 4px 0px 3px;
+}
+
+button {
+    margin-left: 5px;
+    color: #333333;
+    background-color: #ccc;
+    background-image: none;
+    border: 2px solid transparent;
+    height: 24px;
+    line-height: 22px;
+    white-space: nowrap;
+    width: auto;
+    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;
+    box-sizing: border-box;
+    box-shadow: 0 0 0 1px transparent inset;
+    writing-mode: horizontal-tb !important;
+    appearance: auto;
+    text-rendering: auto;
+    align-items: flex-start;
+}

client/src/components/ContactTable.vue

@@ -7,14 +7,15 @@ import CustomerList from './CustomerList.vue'
 import NotesList from './NotesList.vue'
 
 // eslint-disable-next-line
-defineProps(["tableData"]);
+const props = defineProps(["tableData"]);
+console.log(props.tableData)
 </script>
 
 <template>
     <table>
         <thead>
             <tr>
-                <th>System ID</th>
+                <th>Contact ID</th>
                 <th>Start Time</th>
                 <th>End Time</th>
                 <th>Direction</th>

client/src/components/ContactsSummary.vue

@@ -4,19 +4,59 @@ defineProps(["results"]);
 </script>
 
 <template>
-    <div class="horizonal center link list">
+    <div class="stats">
-        <div class="item">Contacts Found: {{ results.totalCount }}</div>
+        <div class="item">
-        <div class="item">Total Handle Time: {{ results.totalHTDays }}</div>
+            <div class="measure">{{ results.totalCount }}</div>
-        <div class="item">Active Handle Time: {{ results.activeHTDays }}</div>
+            <div class="label">Contacts Found</div>
-        <div class="item">Total Active Time: {{ results.totalATHours }}</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.totalHTDays }}</div>
+            <div class="label">Total Handle Time (days)</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.activeHTDays }}</div>
+            <div class="label">Active Handle Time (days)</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.totalATHours }}</div>
+            <div class="label">Total Active Time (days)</div>
+        </div>
     </div>
 </template>
 <style>
-.summary {
+.stats {
     display: flex;
 }
 .item {
     width: 100%;
-    color: var(--color-text);
+    border: 2px solid rgb(57, 145, 201);
+    border-radius: 4px;
+    background-color: #f7f9fc;
+    font-weight: bold;
+    white-space: normal;
+    margin: 5px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.measure {
+    width: 100%;
+    color: rgb(57,145,201);
+    font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
+    text-align: center;
+    font-size: 16px;
+    padding: 5px;
+}
+
+.label {
+    width: 100%;
+    font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
+    font-size: 11px;
+    text-align: center;
+    padding: 5px;
 }
 </style>

client/src/components/CustomerList.vue

@@ -4,5 +4,8 @@ defineProps(["customers"]);
 
 </script>
 <template>
-    <span v-for="customer in customers.edges" :key="customer.node.ref">{{ customer.node.firstName }} {{ customer.node.lastName }} ({{ customer.node.ref }})</span>
+    <div v-if="customers">
+        <ul v-for="customer in customers.edges" :key="customer.node.ref">{{ customer.node.firstName }} {{ customer.node.lastName }} ({{ customer.node.ref }})</ul>
+    </div>
+    <div v-else>No Customer</div>
 </template>

client/src/components/EmailInteraction.vue

@@ -3,7 +3,14 @@
 defineProps(["email"]);
 </script>
 <template>
+    <p>Interaction ID {{ email.systemId }}</p>
     <p>To: <span v-for="address in email.toAddresses" :key="address">{{ address }} </span> </p>
     <p>From: {{ email.fromAddress }}</p>
     <p>Subject: {{ email.subject }}</p>
+    <p>Thread ID: {{ email.threadId }}</p>
 </template>
+<style>
+p {
+    margin: 0;
+}
+</style>

client/src/components/OutcomeList.vue

@@ -4,5 +4,5 @@ defineProps(["outcomes"]);
 
 </script>
 <template>
-    <span v-for="outcome in outcomes.edges" :key="outcome">{{ outcome.node.text }} </span>
+    <div v-for="outcome in outcomes.edges" :key="outcome">{{ outcome.node.text }} </div>
 </template>

client/src/main.js

@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
+import "./assets/eo.css";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");

server/routes/threadTracker.js

@@ -2,12 +2,12 @@ const express = require("express");
 const router = express.Router();
 const axios = require("axios");
 const qs = require("querystring");
-const { threadId } = require("worker_threads");
+const util = require("util");
 
 router.get("/", (req, res) => {
   // token in session -> get user data and send it back to the vue app
   if (req.session.token) {
-    query();
+    query(req.query.threadId);
   }
   // no token -> send nothing
   else {
@@ -33,14 +33,14 @@ router.get("/", (req, res) => {
         req.session.token = result.data.access_token;
         console.log(result);
         //redirect to Vue app
-        query();
+        query(req.query.threadId);
       })
       .catch((err) => {
         console.error(err);
       });
   }
 
-  function query() {
+  function query(threadId) {
     console.log("Executing Query");
 
     var query = `query ($startTime: DateTime, $endTime: DateTime) {
@@ -137,7 +137,6 @@ router.get("/", (req, res) => {
         }
       )
       .then((result) => {
-        const threadId = "1000503";
         var contacts = result.data.data.findContactsCompletedBetween.edges;
         var filteredContacts = [];
         for (const contact of contacts) {
@@ -184,6 +183,14 @@ router.get("/", (req, res) => {
           totalATHours.toPrecision(5);
 
         if (result.data) {
+          console.log(
+            util.inspect(result.data, {
+              showHidden: false,
+              depth: null,
+              colors: true,
+            })
+          );
+
           res.send(result.data);
         }