Merge branch 'master' of gitea.release11.com:R11/release11-tools into widlam/dev/implement_rest_mock

Frontend/src/components/mock/HistoryRecords.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { h, 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){
+    emit('click:showHeaders',headers)
+}
+
+function showBody(body: String){
+    console.log(body)
+    emit('click:showBody',body)
+}
+
+</script>
+
+<template>
+    <div class="w-full xl:w-5/12">
+        <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>
+            </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)">Show Headers</button> </td>
+                <td> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody)">Show Headers</button> 
+                    <span v-else>Empty Body</span>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>