Adam Bem
ea83e95a00
Reviewed-on: #277 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
83 lines
3.0 KiB
Vue
83 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import {ref, type Ref} from 'vue';
|
|
import HeadersComponent from './HeadersComponent.vue';
|
|
import SaveComponent from './SaveComponent.vue';
|
|
import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
|
|
|
|
interface mockedMessageData {
|
|
clientUUID: string;
|
|
contentType: string;
|
|
messageBody: string;
|
|
httpHeaders: object;
|
|
httpStatus: number;
|
|
}
|
|
|
|
const clientUUID = ref('');
|
|
const host = window.location.protocol + "//" + window.location.hostname + "/mock";
|
|
const mockMessageLink = ref("www.google.com");
|
|
|
|
const exampleData : mockedMessageData = {
|
|
clientUUID : "exampleUUID",
|
|
contentType: "application/json",
|
|
messageBody: "hello",
|
|
httpHeaders: {Connection:"keep-alive"},
|
|
httpStatus: 200,
|
|
}
|
|
let messageData : Ref<mockedMessageData> = ref(exampleData);
|
|
|
|
if ( localStorage.clientUUID != undefined ){
|
|
clientUUID.value = localStorage.clientUUID;
|
|
}
|
|
fetch(host + '/api/mock/' + clientUUID.value).then( response => response.json() ).then(data => {putDataInFields(data); });
|
|
|
|
function putDataInFields(data: mockedMessageData){
|
|
clientUUID.value = data.clientUUID;
|
|
localStorage.clientUUID = clientUUID.value
|
|
mockMessageLink.value = host.replace("/mock","/api/mock")+"/r/"+clientUUID.value
|
|
messageData = ref( data )
|
|
}
|
|
|
|
function showUpdatedCode(newCode : string){
|
|
messageData.value.messageBody = newCode
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 p-1">
|
|
<div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
|
|
<div class="flex flex-col w-full">
|
|
<label for="link">REST Service URL</label>
|
|
<div class="p-2 w-full border-slate-400 border-2 rounded-lg">
|
|
<a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
|
|
</div>
|
|
</div>
|
|
<SaveComponent v-bind:message-data="messageData"></SaveComponent>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row w-full gap-4">
|
|
<div class="w-full">
|
|
<label for="contentType">Response Content Type</label><br/>
|
|
<input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<label for="httpStatus">Response HTTP Status</label><br/>
|
|
<input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex text-left flex-col overflow-auto gap-2 h-3/4">
|
|
<label class="text-center" for="messageBody text-center">Response Body</label>
|
|
<CodeEditorComponent
|
|
@update:updated-code="showUpdatedCode"
|
|
v-model="messageData.messageBody"
|
|
:config="{disabled:false,language:messageData.contentType}"
|
|
:code="messageData.messageBody"
|
|
id="messageBody" />
|
|
</div>
|
|
<HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|