Added encoders

Frontend/src/views/UrlEncoderView.vue

@@ -0,0 +1,33 @@
+<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>