Added dev server options

Implemented basic structure for mock service

Frontend/Dockerfile

@@ -18,3 +18,13 @@ COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 80
 EXPOSE 443
+
+
+FROM node:latest as dev
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+ENV HOST=0.0.0.0
+COPY . .
+EXPOSE 8080
+CMD ["npm", "run", "dev"]

Frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",

Frontend/src/components/mock/HeadersComponent.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps(
+    {
+        headersObject : Object
+    } 
+)
+const headerData = ref( props.headersObject )
+
+const newHeaderName = ref('');
+const newHeaderValue = ref('');
+
+function isHeaderEssential(headerName){
+    return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
+}
+
+function setEssentialHeaderStyle(headerName){
+return isHeaderEssential(headerName) ? "text-gray-400" : "text-red-400";
+}
+
+function deleteHeader(index){
+    if(!isHeaderEssential(index)){
+        delete headerData.value[index]
+    }
+}
+
+function addNewHeader(name, value){
+    headerData.value[name] = value;
+    newHeaderName.value = "";
+    newHeaderValue.value = "";
+}
+
+</script>
+
+<template>
+    <div class="w-full flex">
+        <div class="w-full">Header name</div>
+        <div class="w-full">Header value</div>
+    </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>
+        </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>
+        </div>
+    </div>
+</template>

Frontend/src/components/mock/RestMockComponent.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>RestMock</h1>
-</template>
-
-<style scoped></style>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {ref, onBeforeMount , type Ref} from 'vue';
+import HeadersComponent from './HeadersComponent.vue';
+
+const clientUUID = ref('');
+const host = window.location.protocol + "//" + window.location.hostname + "/mock";
+const mockMessageLink = ref("www.google.com");
+
+interface mockedMessageData {
+  clientUUID: string;
+  contentType: string;
+  messageBody: object;
+  httpHeaders: object;
+  httpStatus: number;
+}
+
+const exampleData : mockedMessageData = {
+  clientUUID : "exampleUUID",
+  contentType: "application/json",
+  messageBody: {message: "hello!"},
+  httpHeaders: {Connection:"keep-alive"},
+  httpStatus: 200,
+}
+let messageData : Ref<mockedMessageData> = ref(exampleData) ;
+
+
+onBeforeMount( () => {
+  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 )
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col w-3/5 text-center gap-6">
+    <div>
+      <label for="link">Link</label><br/>
+    <div class="p-2 border-white border-2">
+      <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
+    </div>
+    </div>
+    <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" :value="messageData.contentType"/>
+      </div>
+      <div class=" w-full">
+        <label for="httpStatus">HttpStatus</label><br/>
+        <input class="bg-gray-600 w-full" id="httpStatus" type="text" :value="messageData.httpStatus"/>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <label for="messageBody">Body</label>
+      <textarea class="bg-gray-600 h-64" id="messageBody" :value="messageData.messageBody.toString()"></textarea>
+    </div>
+    <HeadersComponent :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
+  </div>
+</template>
+
+<style scoped></style>

Frontend/src/router/index.ts

@@ -34,6 +34,16 @@ const routes = [
     name: 'xslt',
     component: () => xsltTool
   },
+  {
+    path: '/xml/xpath',
+    name: 'xpath',
+    component: () => restMock
+  },
+  {
+    path: '/rest/mock',
+    name: 'restmock',
+    component: () => restMock
+  }
 ]
 
 

Frontend/src/views/RestMockView.vue

@@ -1,14 +1,20 @@
 <script lang="ts">
-import RestMockComponent from '@components/mock/RestMockComponent.vue'
+import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
+import mockedMessageData from '@components/mock/RestMockMessageComponent.vue'
 
 export default {
     name:"RestMockView",
-    components: {RestMockComponent}
+    components: {RestMockMessageComponent}
 }
+
+
 </script>
 
 
 <template>
-    <RestMockComponent></RestMockComponent>
+    <div class="flex w-full h-screen items-center flex-col">
+        <RestMockMessageComponent></RestMockMessageComponent>
+    </div>
+    
 </template>
 

Frontend/vite.config.ts

@@ -8,6 +8,27 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
+  server:{
+    port: 80,
+    host: '0.0.0.0',
+    proxy : {
+      '/java': {
+        target:'http://xmltools-backend:8081/',
+        rewrite: (path) => path.replace(/^\/java/, ''),
+      },
+      '/libxml': {
+        target:'http://xmltools-libxml-backend/',
+        rewrite: (path) => path.replace(/^\/libxml/, ''), 
+      },
+      '/mock': {
+        target:'http://xmltools-mocked-services:8097/',
+        rewrite: (path) => path.replace(/^\/mock/, ''),
+      },
+      '/api/mock': {
+        target: 'http://xmltools-mocked-services:8097/'
+      }
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),