63 lines
2.0 KiB
Vue
63 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import {ref, type Ref } from 'vue';
|
|
|
|
interface historyRecord {
|
|
clientUUID : String,
|
|
dateTimeStamp: String,
|
|
headers : Object,
|
|
httpMethod: String,
|
|
requestBody: String
|
|
}
|
|
|
|
const emit = defineEmits([
|
|
'click:showHeaders',
|
|
'click:showBody',
|
|
])
|
|
|
|
|
|
const clientUUID = localStorage.getItem("clientUUID")
|
|
const fetchLink = window.location.protocol + "//" + window.location.hostname + "/mock/api/event";
|
|
const historyRecords : Ref<Array<historyRecord>> = ref([])
|
|
fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
|
|
|
|
function parseTimeStamp(timestamp : String){
|
|
return timestamp.substring(10,19).replace("T"," ");
|
|
}
|
|
|
|
function showHeaders(headers: Object, index : number){
|
|
emit('click:showHeaders',headers, index)
|
|
}
|
|
|
|
function showBody(body: String , index : number){
|
|
console.log(body)
|
|
emit('click:showBody',body, index)
|
|
}
|
|
|
|
function refreshHistory(){
|
|
fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<table class="text-white h-28 w-full text-center">
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>HTTP Method</th>
|
|
<th>HTTP Headers</th>
|
|
<th>Request Body</th>
|
|
<th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
|
|
</tr>
|
|
<tr v-for="(item , index) in historyRecords" :key="index">
|
|
<td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
|
|
<td> {{ item.httpMethod }} </td>
|
|
<td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
|
|
<td>
|
|
<button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button>
|
|
<span v-else>Empty Body</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</template> |