56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup>
|
|
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)
|
|
|
|
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 Contacts</button>
|
|
|
|
<ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
|
|
<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>
|