R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Added styling and RWD

Browse Source
This commit is contained in:
Adam Bem
2023-06-20 12:18:21 +02:00
parent 3a3073d236
commit 5c2516797b
5 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Frontend/src/components/mock/HeadersComponent.vue
View File

@@ -20,7 +20,7 @@ function isHeaderEssential(headerName : string){
}
function setEssentialHeaderStyle(headerName : string){
return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
}
function deleteHeader(index : string){
@@ -48,14 +48,14 @@ function addNewHeader(name : string, value : string){
</div>
<div class="flex flex-col gap-4">
<div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
<input type="text" :value="index" class="w-full bg-gray-600 p-2" />
<input type="text" :value="item" class="w-full bg-gray-600 p-2" />
<button @click="deleteHeader(index)" :class="setEssentialHeaderStyle(index)">X</button>
<input type="text" :value="index" class="text-field" />
<input type="text" :value="item" class="text-field" />
<button @click="deleteHeader(index)" class="tool-button" :class="setEssentialHeaderStyle(index)">X</button>
</div>
<div class="flex gap-9 flex-row">
<input type="text" v-model="newHeaderName" class="w-full p-2 bg-gray-600" />
<input type="text" v-model="newHeaderValue" class="w-full p-2 bg-gray-600" />
<button class="text-2xl" @click="addNewHeader(newHeaderName, newHeaderValue)" > + </button>
<input type="text" v-model="newHeaderName" class="text-field" />
<input type="text" v-model="newHeaderValue" class="text-field" />
<button class="tool-button" @click="addNewHeader(newHeaderName, newHeaderValue)" >+</button>
</div>
</div>
</template>

31
Frontend/src/components/mock/HistoryComponent.vue
View File

@@ -31,19 +31,22 @@ function showBody(body : String){
<template>
<table class="text-white h-28 w-5/12 text-center border-l-4 border-b-2">
<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 @click="showBody(item.requestBody)">Show Body</button> </td>
</tr>
</table>
<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 @click="showBody(item.requestBody)">Show Body</button> </td>
</tr>
</table>
</div>
</template>

10
Frontend/src/components/mock/RestMockMessageComponent.vue
View File

@@ -39,11 +39,11 @@ function putDataInFields(data: mockedMessageData){
</script>
<template>
<div class="flex flex-col w-3/5 text-center dark:text-white gap-6">
<div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
<div>
<label for="link">Link</label><br/>
<div class="flex gap-4">
<div class="p-2 w-full border-white border-2">
<div class="p-2 w-full border-slate-400 border-2 rounded-lg">
<a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
</div>
<SaveComponent v-bind:message-data="messageData"></SaveComponent>
@@ -52,18 +52,18 @@ function putDataInFields(data: mockedMessageData){
<div class="flex flex-row w-full gap-64">
<div class="w-full">
<label for="contentType">Content Type</label><br/>
<input class="bg-gray-600 w-full" id="contentType" type="text" v-model="messageData.contentType"/>
<input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
</div>
<div class="w-full">
<label for="httpStatus">HttpStatus</label><br/>
<input class="bg-gray-600 w-full" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
<input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
</div>
</div>
<div class="flex flex-col">
<label for="messageBody">Body</label>
<textarea class="bg-gray-600 h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
<textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
</div>
<HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
</div>

4
Frontend/src/style.css
View File

@@ -4,4 +4,8 @@
.tool-button {
@apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200 dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
}
.text-field {
@apply w-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
}

4
Frontend/src/views/RestMockView.vue
View File

@@ -6,9 +6,11 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
<template>
<div class="flex gap-6 w-full h-screen">
<div class="flex flex-col xl:flex-row gap-6 w-full h-full">
<RestMockMessageComponent></RestMockMessageComponent>
<HistoryComponent></HistoryComponent>
</div>
</template>