Fixed some resizing issuses

2023-06-16 13:12:30 +02:00
parent f7e147c882
commit 510ce477fb
10 changed files with 92 additions and 20 deletions
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>

 <template>
-  <div id="layout" class="flex bg-gradient-to-br from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
    <SidebarComponent />
    <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
      <RouterView></RouterView>
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -30,16 +30,16 @@ onMounted( () => {
            </a>
            <div class="flex flex-col font-medium items-center">
                <sidebar-menu-element-component category-name="XML">
-                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
-                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                </sidebar-menu-element-component>

                <sidebar-menu-element-component category-name="Formatter">
-                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                </sidebar-menu-element-component>


--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -24,14 +24,14 @@ function sendTransform() {
 </script>

 <template>
-    <div class="flex flex-col w-full h-full items-center gap-4">
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
        <div class="flex flex-col w-full h-1/2">
            <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
        </div>
        <div class="flex flex-col w-full h-1/2">
            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
-            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
        </div>
    </div>
 </template>
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
-import { resourceUsage } from 'process';
 import { ref } from 'vue';


@@ -15,17 +14,16 @@ const props = defineProps(
 const result = ref('');

 function parseResult(data: any) {
-    console.log(data.result);
    result.value = data.result;
 }

 </script>

 <template>
-    <div class="flex flex-col w-full h-full items-center">
-        <xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-full p-2 border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
-            <pre><code>{{ result }}</code></pre>
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center">
+        <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
+        <div class="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
+            <pre class="break-words"><code>{{ result }}</code></pre>
        </div>
        
    </div>
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -11,6 +11,7 @@ const props = defineProps(
 )

 const engine = ref('');
+const version = ref('');

 const isSaxonHidden = ref(false);
 const isXalanHidden = ref(false);
@@ -43,7 +44,7 @@ function prepareRequestBody():string {
        "data": props.xml,
        "process": props.query,
        "processor": engine.value,
-        "version": "3.0"
+        "version": version.value
    });
    return requestBody;
 }
@@ -92,6 +93,12 @@ function showOnlyAvailableEngines() {
                <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
                <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
            </select>
+            <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <option value="1.0">1.0</option>
+                <option value="2.0">2.0</option>
+                <option value="3.0">3.0</option>
+                <option value="3.1">3.1</option>
+            </select>
            <button class="tool-button">Clear</button>    
            <button class="tool-button" @click="process">Process</button>
        </div>
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -4,6 +4,9 @@ const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")

 const xsltTool = import("@views/XSLTView.vue")
+const xsdTool = import("@views/XSDView.vue")
+const xpathTool = import("@views/XPathView.vue")
+const xqueryTool = import("@views/XQueryView.vue")

 const routes = [
  {
@@ -11,16 +14,26 @@ const routes = [
    name: 'landing',
    component: () => landingPage
  },
+  {
+    path: '/xml/xpath',
+    name: 'xpath',
+    component: () => xpathTool
+  },
+  {
+    path: '/xml/xquery',
+    name: 'xquery',
+    component: () => xqueryTool
+  },
+  {
+    path: '/xml/xsd',
+    name: 'xsd',
+    component: () => xsdTool
+  },
  {
    path: '/xml/xslt',
    name: 'xslt',
    component: () => xsltTool
  },
-  {
-    path: '/xml/xpath',
-    name: 'xpath',
-    component: () => restMock
-  },
 ]


--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -13,6 +13,6 @@ const query = ref('');
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    

-        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
    </div>
 </template>