Added sidebar (#224)
Co-authored-by: widlam <mikolaj.widla@gmail.com> Reviewed-on: #224 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: Mikolaj Widla <widlam@noreply.example.com> Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { RouterView } from 'vue-router';
|
||||
import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
|
||||
|
||||
const activeToolBox = ref('');
|
||||
|
||||
@@ -12,12 +13,13 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="$router.push('/xml')">XML</button>
|
||||
<button @click="$router.push('/formatter')">Formatter</button>
|
||||
<button @click="$router.push('/restmock')">REST Mock</button>
|
||||
<div id="layout" class="flex dark:bg-gray-700">
|
||||
<SidebarComponent />
|
||||
<div class="relative p-12 w-11/12">
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<RouterView></RouterView>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
101
Frontend/src/assets/logo_biale.svg
Normal file
101
Frontend/src/assets/logo_biale.svg
Normal file
@@ -0,0 +1,101 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Release11_xA0_Image_1_"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1010.2 146"
|
||||
style="enable-background:new 0 0 1010.2 146;"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="logo.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs31" /><sodipodi:namedview
|
||||
id="namedview29"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.3155811"
|
||||
inkscape:cx="375.11942"
|
||||
inkscape:cy="72.971558"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1135"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Release11_xA0_Image_1_" />
|
||||
<style
|
||||
type="text/css"
|
||||
id="style2">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#2A93B0;}
|
||||
.st1{fill:#2A93B0;}
|
||||
.st2{fill:#1A161A;}
|
||||
</style>
|
||||
<path
|
||||
class="st0"
|
||||
d="M41.8,58.5L3,143.7h145.5V4.8L41.8,58.5z"
|
||||
id="path4" />
|
||||
<g
|
||||
id="g10">
|
||||
<path
|
||||
class="st1"
|
||||
d="M961.1,79.2h-16.9V25.3l-16.6,4.9V17.4l32-11.1h1.6V79.2z"
|
||||
id="path6" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M1010.2,79.2h-16.9V25.3l-16.6,4.9V17.4l32-11.1h1.6V79.2z"
|
||||
id="path8" />
|
||||
</g>
|
||||
<g
|
||||
id="g26"
|
||||
style="fill:#ffffff">
|
||||
<path
|
||||
class="st2"
|
||||
d="M290.7,71.3c5-7.3,7.5-15.5,7.5-24.4c0-15-4.8-26.4-14.5-34.1C275,5.9,263,2.4,247.9,2.4h-41.6v138.1h25.5V87 l36.2,53.5h31.9l-37.5-50.9C275,86.8,284.4,80.7,290.7,71.3z M231.8,68V27.2h13.8c8,0,14.2,1.2,18.6,3.7c5.6,3.1,8.4,8.2,8.4,15.2 c0,7.5-2.2,13-6.6,16.6c-4.4,3.6-10.3,5.3-17.8,5.3H231.8z"
|
||||
id="path12"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M397.5,48.4c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2c-8.6,10.6-12.9,22.1-12.9,34.7v4.7 c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2c8.5-6.2,14.6-14.1,18.3-24h-27.4 c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1c0.6-4.3,0.9-8.2,0.9-11.6 C414.5,72.2,408.9,59,397.5,48.4z M333.1,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7 c4.5,3.7,7.6,8.1,9.3,13.2H333.1z"
|
||||
id="path14"
|
||||
style="fill:#ffffff" />
|
||||
<rect
|
||||
x="431.5"
|
||||
y="2.6"
|
||||
class="st2"
|
||||
width="24.8"
|
||||
height="137.9"
|
||||
id="rect16"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M561.8,48.4c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2c-8.6,10.6-12.9,22.1-12.9,34.7v4.7 c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2c8.5-6.2,14.6-14.1,18.3-24h-27.4 c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1c0.6-4.3,0.9-8.2,0.9-11.6 C578.7,72.2,573.1,59,561.8,48.4z M497.3,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7 c4.5,3.7,7.6,8.1,9.3,13.2H497.3z"
|
||||
id="path18"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M773.6,81.7c-7-2.2-13.9-4.5-20.9-6.7c-2.5-1-4.3-2.2-5.5-3.6c-1.2-1.4-1.9-2.9-2.1-4.4c0-2.4,1-4.4,3.1-6.1 c2-1.7,4.3-2.5,6.8-2.5c2.4,0,4.4,0.6,6.2,1.8c1.8,1.2,3.2,3,4.2,5.5h23.7c0-9.2-3.4-16.8-10.3-22.7c-6.9-6-14.8-8.9-23.8-8.9 c-6.7,0-13.1,1.8-19,5.4c-11.4,7-15.5,16.8-15.7,26.7c-0.1,5,1.4,9.8,4.2,14.5c2.8,4.7,7.1,8.4,13,11.3c6.3,2.6,12.8,5.3,19.5,7.9 c6.6,2.7,10,5.8,10,9.2c0,3.2-1.2,5.9-3.4,7.9c-2.3,2.1-5.1,3.1-8.5,3.1c-2.9,0-5.5-1-7.9-3c-2.4-2-4.1-5-4.9-8.9h-25 c0,9.2,2.6,17.1,7.8,23.4c4.8,6,10.9,9.7,18.3,11.1c3.7,0.7,7.4,1.1,11,1.1c12.2,0,21.7-4.1,28.5-12.3c6-7.1,9.5-16.1,8.9-27.1 C791.2,94,784.6,86.8,773.6,81.7z"
|
||||
id="path20"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M912,88.1c0-15.9-5.7-29.1-17-39.7c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2 c-8.6,10.6-12.9,22.1-12.9,34.7v4.7c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2 c8.5-6.2,14.6-14.1,18.3-24h-27.4c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1 C911.7,95.3,912,91.5,912,88.1z M830.6,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7 c4.5,3.7,7.6,8.1,9.3,13.2H830.6z"
|
||||
id="path22"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
class="st2"
|
||||
d="M680.5,44.4c-9.6-8-20.5-12-32.8-12c-7,0-14,1.5-21,4.5c-7,3-13.7,7.6-19.9,13.8c-5,6.2-8.6,12.2-10.7,18.2 c-2.1,6-3.2,12.2-3.2,18.8c0,15.6,5.3,28.8,15.9,39.7c10.6,10.9,23.5,16.3,38.6,16.3c12.6,0,23.7-3.9,33.2-11.8v8.5h22.3V37h-22.3 V44.4z M667.8,110.5c-5.4,5.8-12.5,8.8-21.2,8.8c-8.2,0-15.1-3-20.8-9.1s-8.5-13.3-8.5-21.8c0-4,0.7-7.9,2.2-11.6 c1.5-3.7,3.4-7.1,5.7-10.3c5.7-6.3,12.8-9.4,21.1-9.4c8.6,0,15.7,3,21.3,9c5.6,6,8.4,13.4,8.4,22.2 C675.9,97.3,673.2,104.7,667.8,110.5z"
|
||||
id="path24"
|
||||
style="fill:#ffffff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
47
Frontend/src/assets/logo_czarne.svg
Normal file
47
Frontend/src/assets/logo_czarne.svg
Normal file
@@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Release11_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 1010.2 146" style="enable-background:new 0 0 1010.2 146;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#2A93B0;}
|
||||
.st1{fill:#2A93B0;}
|
||||
.st2{fill:#1A161A;}
|
||||
</style>
|
||||
<path class="st0" d="M41.8,58.5L3,143.7h145.5V4.8L41.8,58.5z"/>
|
||||
<g>
|
||||
<path class="st1" d="M961.1,79.2h-16.9V25.3l-16.6,4.9V17.4l32-11.1h1.6V79.2z"/>
|
||||
<path class="st1" d="M1010.2,79.2h-16.9V25.3l-16.6,4.9V17.4l32-11.1h1.6V79.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st2" d="M290.7,71.3c5-7.3,7.5-15.5,7.5-24.4c0-15-4.8-26.4-14.5-34.1C275,5.9,263,2.4,247.9,2.4h-41.6v138.1h25.5V87
|
||||
l36.2,53.5h31.9l-37.5-50.9C275,86.8,284.4,80.7,290.7,71.3z M231.8,68V27.2h13.8c8,0,14.2,1.2,18.6,3.7c5.6,3.1,8.4,8.2,8.4,15.2
|
||||
c0,7.5-2.2,13-6.6,16.6c-4.4,3.6-10.3,5.3-17.8,5.3H231.8z"/>
|
||||
<path class="st2" d="M397.5,48.4c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2c-8.6,10.6-12.9,22.1-12.9,34.7v4.7
|
||||
c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2c8.5-6.2,14.6-14.1,18.3-24h-27.4
|
||||
c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1c0.6-4.3,0.9-8.2,0.9-11.6
|
||||
C414.5,72.2,408.9,59,397.5,48.4z M333.1,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7
|
||||
c4.5,3.7,7.6,8.1,9.3,13.2H333.1z"/>
|
||||
<rect x="431.5" y="2.6" class="st2" width="24.8" height="137.9"/>
|
||||
<path class="st2" d="M561.8,48.4c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2c-8.6,10.6-12.9,22.1-12.9,34.7v4.7
|
||||
c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2c8.5-6.2,14.6-14.1,18.3-24h-27.4
|
||||
c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1c0.6-4.3,0.9-8.2,0.9-11.6
|
||||
C578.7,72.2,573.1,59,561.8,48.4z M497.3,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7
|
||||
c4.5,3.7,7.6,8.1,9.3,13.2H497.3z"/>
|
||||
<path class="st2" d="M773.6,81.7c-7-2.2-13.9-4.5-20.9-6.7c-2.5-1-4.3-2.2-5.5-3.6c-1.2-1.4-1.9-2.9-2.1-4.4c0-2.4,1-4.4,3.1-6.1
|
||||
c2-1.7,4.3-2.5,6.8-2.5c2.4,0,4.4,0.6,6.2,1.8c1.8,1.2,3.2,3,4.2,5.5h23.7c0-9.2-3.4-16.8-10.3-22.7c-6.9-6-14.8-8.9-23.8-8.9
|
||||
c-6.7,0-13.1,1.8-19,5.4c-11.4,7-15.5,16.8-15.7,26.7c-0.1,5,1.4,9.8,4.2,14.5c2.8,4.7,7.1,8.4,13,11.3c6.3,2.6,12.8,5.3,19.5,7.9
|
||||
c6.6,2.7,10,5.8,10,9.2c0,3.2-1.2,5.9-3.4,7.9c-2.3,2.1-5.1,3.1-8.5,3.1c-2.9,0-5.5-1-7.9-3c-2.4-2-4.1-5-4.9-8.9h-25
|
||||
c0,9.2,2.6,17.1,7.8,23.4c4.8,6,10.9,9.7,18.3,11.1c3.7,0.7,7.4,1.1,11,1.1c12.2,0,21.7-4.1,28.5-12.3c6-7.1,9.5-16.1,8.9-27.1
|
||||
C791.2,94,784.6,86.8,773.6,81.7z"/>
|
||||
<path class="st2" d="M912,88.1c0-15.9-5.7-29.1-17-39.7c-10.4-9.7-22.6-14.5-36.5-14.5c-16.9,0-30.6,6.4-41,19.2
|
||||
c-8.6,10.6-12.9,22.1-12.9,34.7v4.7c0,13.4,5.4,25.3,16.3,35.7c10.9,10.4,24,15.6,39.2,15.6c11.5,0,21.5-3.1,30-9.2
|
||||
c8.5-6.2,14.6-14.1,18.3-24h-27.4c-6.1,6.1-13.5,9.1-22.2,9.1c-6.6,0-12.5-1.8-17.8-5.4c-5.3-3.6-8.7-8.5-10.2-14.5h80.1
|
||||
C911.7,95.3,912,91.5,912,88.1z M830.6,77.9c1.7-5.2,4.8-9.6,9.1-13.2c5.3-4.5,11.7-6.7,19.1-6.7c7.3,0,13.7,2.2,19.1,6.7
|
||||
c4.5,3.7,7.6,8.1,9.3,13.2H830.6z"/>
|
||||
<path class="st2" d="M680.5,44.4c-9.6-8-20.5-12-32.8-12c-7,0-14,1.5-21,4.5c-7,3-13.7,7.6-19.9,13.8c-5,6.2-8.6,12.2-10.7,18.2
|
||||
c-2.1,6-3.2,12.2-3.2,18.8c0,15.6,5.3,28.8,15.9,39.7c10.6,10.9,23.5,16.3,38.6,16.3c12.6,0,23.7-3.9,33.2-11.8v8.5h22.3V37h-22.3
|
||||
V44.4z M667.8,110.5c-5.4,5.8-12.5,8.8-21.2,8.8c-8.2,0-15.1-3-20.8-9.1s-8.5-13.3-8.5-21.8c0-4,0.7-7.9,2.2-11.6
|
||||
c1.5-3.7,3.4-7.1,5.7-10.3c5.7-6.3,12.8-9.4,21.1-9.4c8.6,0,15.7,3,21.3,9c5.6,6,8.4,13.4,8.4,22.2
|
||||
C675.9,97.3,673.2,104.7,667.8,110.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
55
Frontend/src/components/sidebar/SidebarComponent.vue
Normal file
55
Frontend/src/components/sidebar/SidebarComponent.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup>
|
||||
import { ref , onMounted } from 'vue'
|
||||
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
|
||||
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
|
||||
import logoDark from '@assets/logo_biale.svg';
|
||||
import logoWhite from '@assets/logo_czarne.svg';
|
||||
|
||||
const logoR11 = ref( logoDark );
|
||||
|
||||
function isDarkModeSet(){
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
onMounted( () => {
|
||||
changeLogoForTheme();
|
||||
} )
|
||||
|
||||
function changeLogoForTheme(){
|
||||
if (isDarkModeSet()) {
|
||||
logoR11.value = logoDark;
|
||||
} else{
|
||||
logoR11.value = logoWhite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="relative top-0 left-0 z-40 w-1/12 h-screen transition-transform -translate-x-full sm:translate-x-0" >
|
||||
<div class="h-full px-3 py-4 overflow-y-auto bg-gray-100 dark:bg-gray-800">
|
||||
<a href="https://release11.com/">
|
||||
<img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
|
||||
</a>
|
||||
<ul class="space-y-2 font-medium">
|
||||
<sidebar-menu-element-component category-name="XML">
|
||||
<li><SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" /></li>
|
||||
<li><SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" /></li>
|
||||
<li><SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" /></li>
|
||||
<li><SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" /></li>
|
||||
</sidebar-menu-element-component>
|
||||
|
||||
<sidebar-menu-element-component category-name="Formatter">
|
||||
<li><SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" /></li>
|
||||
<li><SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" /></li>
|
||||
<li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
|
||||
</sidebar-menu-element-component>
|
||||
|
||||
<li><SidebarToolLinkComponent class="text-left" path-to="/rest/mock" element-content="REST Mock" /></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const hiddenOrActive = ref('hidden');
|
||||
|
||||
function switchHiddenElement(){
|
||||
if(hiddenOrActive.value == 'hidden'){
|
||||
hiddenOrActive.value = "active";
|
||||
} else{
|
||||
hiddenOrActive.value = "hidden"
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps(
|
||||
{
|
||||
categoryName: {required : true}
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<li>
|
||||
<button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
|
||||
<span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
|
||||
</button>
|
||||
<ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
14
Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
Normal file
14
Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router';
|
||||
const props = defineProps(
|
||||
{
|
||||
elementContent: {required: false},
|
||||
pathTo: {type: String, required:true}
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
|
||||
</template>
|
||||
23
Frontend/src/components/xml/XmlInputFieldComponent.vue
Normal file
23
Frontend/src/components/xml/XmlInputFieldComponent.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps(
|
||||
{
|
||||
transformationName: {type: String},
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6 w-full h-full items-center">
|
||||
<label for="xmlfield" class="dark:text-white">XML</label>
|
||||
<textarea id="xmlfield" class="w-1/2 h-36 bg-gray-500">
|
||||
|
||||
|
||||
</textarea>
|
||||
<label for="transformField" class="dark:text-white">{{ props.transformationName }}</label>
|
||||
<textarea id="transformField" class="w-1/2 h-36 bg-gray-500">
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,10 +1,11 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const landingPage = import("@views/LandingView.vue")
|
||||
const xmlTool = import("@views/XmlToolView.vue")
|
||||
const restMock = import("@views/RestMockView.vue")
|
||||
const formatter = import("@views/FormatterView.vue")
|
||||
|
||||
const xsltTool = import("@views/XSLTView.vue")
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@@ -12,18 +13,23 @@ const routes = [
|
||||
component: () => landingPage
|
||||
},
|
||||
{
|
||||
path: '/xml',
|
||||
name: 'xmltool',
|
||||
component: () => xmlTool
|
||||
path: '/xml/xslt',
|
||||
name: 'xslt',
|
||||
component: () => xsltTool
|
||||
},
|
||||
{
|
||||
path: '/restmock',
|
||||
name: 'restmock',
|
||||
path: '/xml/xpath',
|
||||
name: 'xpath',
|
||||
component: () => restMock
|
||||
},
|
||||
{
|
||||
path: '/formatter',
|
||||
name: 'formatter',
|
||||
path: '/xml/xquery',
|
||||
name: 'xquery',
|
||||
component: () => formatter
|
||||
},
|
||||
{
|
||||
path: '/xml/xsd',
|
||||
name: 'xsd',
|
||||
component: () => formatter
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<script lang="ts">
|
||||
import FormatterComponent from '@components/FormatterComponent.vue'
|
||||
|
||||
export default {
|
||||
name:"FormatterView",
|
||||
components: {FormatterComponent}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<FormatterComponent></FormatterComponent>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import LandingComponent from '@components/LandingComponent.vue'
|
||||
import LandingComponent from '@components/landing/LandingComponent.vue'
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import RestMockComponent from '@components/RestMockComponent.vue'
|
||||
import RestMockComponent from '@components/mock/RestMockComponent.vue'
|
||||
|
||||
export default {
|
||||
name:"RestMockView",
|
||||
|
||||
15
Frontend/src/views/XSLTView.vue
Normal file
15
Frontend/src/views/XSLTView.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
|
||||
|
||||
export default {
|
||||
name: "XSLT",
|
||||
components: {xmlInputFieldComponent}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<xmlInputFieldComponent transformationName="XSLT"></xmlInputFieldComponent>
|
||||
|
||||
</template>
|
||||
@@ -1,14 +0,0 @@
|
||||
<script lang="ts">
|
||||
import XmlToolComponent from '@components/XmlToolComponent.vue'
|
||||
|
||||
export default {
|
||||
name:"XmlToolView",
|
||||
components: {XmlToolComponent}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<XmlToolComponent></XmlToolComponent>
|
||||
</template>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"@/*": ["./src/*"],
|
||||
"@components/*":["./src/components/*"],
|
||||
"@views/*":["./src/views/*"],
|
||||
"@assets/*":["./src/assets/*"],
|
||||
}
|
||||
},
|
||||
"references": [
|
||||
|
||||
@@ -13,6 +13,7 @@ export default defineConfig({
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@components': fileURLToPath(new URL('./src/components', import.meta.url)),
|
||||
'@views': fileURLToPath(new URL('./src/views', import.meta.url)),
|
||||
'@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user