42 lines
1.5 KiB
Vue
42 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import HistoryRecords from './HistoryRecords.vue';
|
|
import BodyDetailComponent from './BodyDetailComponent.vue';
|
|
import HeadersDetailComponent from './HeadersDetailComponent.vue';
|
|
|
|
const shownDetail = ref('none');
|
|
const currentShownData = ref('');
|
|
const currentIndex = ref(-1);
|
|
const currentContentType = ref('application/json');
|
|
|
|
function showBody(body : string, index: number, contentType : string){
|
|
if( currentIndex.value == index && shownDetail.value == "body" ){
|
|
shownDetail.value = "none";
|
|
} else {
|
|
currentIndex.value = index;
|
|
shownDetail.value = "body";
|
|
currentShownData.value = body;
|
|
}
|
|
currentContentType.value = contentType;
|
|
}
|
|
|
|
function showHeaders(headers: object, index: number){
|
|
if(currentIndex.value == index && shownDetail.value == "headers" ){
|
|
shownDetail.value = "none";
|
|
} else {
|
|
currentIndex.value = index;
|
|
shownDetail.value = "headers";
|
|
currentShownData.value = JSON.stringify(headers);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
|
|
<HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
|
|
<BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
|
|
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>
|
|
</div>
|
|
</template> |