Added base64 and URL encoders/decoders

Reviewed-on: #250
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-committed-by: widlam <mikolaj.widla@gmail.com>

Frontend/src/components/encoder/EncodeUriButtonComponent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+
+
+const props = defineProps(
+    {
+        operation: {type:String,required:true},
+        code: {type: String, required: true}
+    }
+)
+
+const emit = defineEmits([
+    'update:result'
+])
+
+function encode(){
+
+    switch(props.operation.toLowerCase()){
+
+        case "encode":{
+            emit('update:result', encodeURI(props.code) )
+            break;
+        }
+        case "decode":{
+            emit('update:result', decodeURI(props.code) )
+            break;
+        }
+    }
+}
+
+
+</script>
+
+<template>
+    <button @click="encode()" class="tool-button">{{ props.operation }}</button>
+</template>

Frontend/src/components/encoder/EncoderButtonComponent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+
+const props = defineProps(
+    {
+        encodeType: {type:String,required:true},
+        code: {type: String, required: true}
+    }
+)
+
+const emit = defineEmits([
+    'update:result',
+    'image:show'
+])
+
+function convert(){
+    console.log("works")
+    switch(props.encodeType.toLowerCase()){
+        case "base64":{
+            emit('update:result', btoa(props.code) )
+            break;
+        }
+        case "text":{
+            emit('update:result', atob(props.code) )
+            break;
+        }
+        case "image":{
+            emit('image:show', props.code )
+            break;
+        }
+    }
+}
+
+
+</script>
+
+<template>
+    <button @click="convert()" class="tool-button">{{ props.encodeType }}</button>
+</template>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -48,6 +48,12 @@ onMounted( () => {
                     <SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
                 </sidebar-menu-element-component>
 
+                <sidebar-menu-element-component category-name="Encoder">
+                    <SidebarToolLinkComponent path-to="/encoder/base64" element-content="Base64" />
+                    <SidebarToolLinkComponent path-to="/encoder/url" element-content="URL" />
+                </sidebar-menu-element-component>
+
+
             </div>
             <FooterComponent></FooterComponent>
         </div>

Frontend/src/router/index.ts

@@ -12,6 +12,9 @@ const xsdTool = import("@views/XSDView.vue")
 const xpathTool = import("@views/XPathView.vue")
 const xqueryTool = import("@views/XQueryView.vue")
 
+const base64Encoder = import("@views/Base64EncoderView.vue")
+const urlEncoder = import("@views/UrlEncoderView.vue")
+
 const routes = [
   {
     path: '/',
@@ -57,6 +60,16 @@ const routes = [
     path: '/rest/mock',
     name: 'restmock',
     component: () => restMock
+  },
+  {
+    path: '/encoder/base64',
+    name: 'base64encoder',
+    component: () => base64Encoder
+  },
+  {
+    path: '/encoder/url',
+    name: 'urlEncoder',
+    component: () => urlEncoder
   }
 ]
 

Frontend/src/views/Base64EncoderView.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
+import { ref } from 'vue';
+
+
+const data : any = ref("")
+const imageData = ref("")
+const DoshowImage = ref(false)
+const inputImage = ref();
+
+function setTextFieldValue(newData: string) {
+    data.value = newData.toString()
+    DoshowImage.value = false;
+}
+
+function showImage(newImage : string){
+    imageData.value = "data:image/jpeg;base64,"+newImage
+    DoshowImage.value = true;
+}
+
+function convertImageToBase64(file : any){
+    console.log(inputImage)
+    const reader = new FileReader()
+    reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
+    reader.readAsDataURL(file.target.files[0])
+}
+
+function clear(){
+    data.value = ""
+    imageData.value = ""
+    DoshowImage.value = false;
+    inputImage.value.value = null
+}
+
+</script>
+
+<template>
+    <div id="layoutFull" class="w-full h-full flex">
+        <div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
+        <div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
+            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
+            <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
+            <button class="tool-button" @click="clear()">Clear</button>
+        </div>
+        <div id="codeEditor" class="w-4/5 h-1/3 ml-6  flex flex-col">
+            <label class="dark:text-white text-center w-full">Base64</label>
+            <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
+        </div>
+        <div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
+            <input id="imageLoader" ref="inputImage" class="block file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" type="file" @change="convertImageToBase64" />
+        </div>
+    </div>
+    <div id="separator" class="bg-black h-full w-1" ></div>
+    
+    <div id="layoutRight" class=" ml-6 w-2/5">
+        <div v-on="DoshowImage">
+            <img :src="imageData"/>
+        </div>
+        
+    </div>
+</div>
+    
+</template>

Frontend/src/views/UrlEncoderView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import EncodeUriButton from '@components/encoder/EncodeUriButtonComponent.vue'
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+
+
+const uri = ref("")
+
+function setTextFieldValue(newVal : string){
+    console.log(newVal)
+    uri.value = newVal
+}
+
+function clear(){
+    uri.value = "";
+}
+</script>
+
+<template>
+    <div class="flex flex-col w-full h-full gap-4" id="layout">
+        <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">URI Encoder</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <button class="tool-button" @click="clear()">Clear</button>
+                <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Encode" />
+                <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Decode" />  
+            </div>
+        </div>
+        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="uri" :config="{disabled:false,language:'uri'}" />
+    </div>
+</template>