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

Seperated images to component

Browse Source
This commit is contained in:
Adam Bem
2023-11-15 13:03:57 +01:00
parent b9263a7e72
commit e8c2a4ff54
2 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Frontend/src/components/man/ImgMan.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps(
{
imgPath: {type: String, required: true},
label: {type: String, required: true}
}
)
</script>
<template>
<div class="flex flex-col gap-2 w-fit h-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
<img id="url_section" class="rounded-md" :src="imgPath" />
<label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">{{ label }}</label>
</div>
</template>

32
Frontend/src/components/man/RestMockManComponent.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import ImgMan from './ImgMan.vue';
</script>
<template>
@@ -54,26 +56,22 @@ operation addition
priority urgent
</pre></div>
<p>In this example we will focus on the left-hand side panel first as it contains most of the settings. On the top you see autogenerated URL link to your REST Mock service and the "Save" button that saves every setting on this page.</p>
<div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
<img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/URL_section.png" />
<label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Rest Mock URL bar and Save button</label>
</div>
<ImgMan imgPath="../../src/assets/man/rest-mock/URL_section.png" label="Screenshot of Rest Mock URL bar and Save button"></ImgMan>
<p>Next, down from REST Mock URL are two text fields. One for content type of a response and second for the HTTP status of a response. </p>
<div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
<img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Status_section.png" />
<label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of "Response Content Type" and "Response HTTP Status"</label>
</div>
<p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave unchanged for now.</p><br/>
<ImgMan imgPath="../../src/assets/man/rest-mock/Status_section.png" label='Screenshot of "Response Content Type" and "Response HTTP Status"'></ImgMan>
<p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave
unchanged for now.</p><br/>
<p>Next element of this tool is big "Response Body" text field. Here you can put data that you want your REST Mock to respond with. In this example we will put JSON from few lines above.</p>
<div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
<img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Body_section.png" />
<label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Response Body field filled with example JSON</label>
</div>
<ImgMan imgPath="../../src/assets/man/rest-mock/Body_section.png" label='Screenshot of Response Body field filled with example JSON'></ImgMan>
<p>Last thing that we have to set are headers. Those we can set in Headers section.</p>
<div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
<img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Header_section.png" />
<label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Headers Section with added custom headers.</label>
</div>
<ImgMan imgPath="../../src/assets/man/rest-mock/Header_section.png" label='Screenshot of Headers Section with added custom headers.'></ImgMan>
</div>
</div>