From 336b13ef2d01aa4289b441855618e3bc455d1916 Mon Sep 17 00:00:00 2001
From: stuzer05 <stuzer05@stuzer.link>
Date: Mon, 4 Dec 2023 11:58:44 +0200
Subject: [PATCH] Add url encode/decode tool

---
 src/components/Sidebar.vue    |  1 +
 src/router/index.js           |  5 ++++
 src/views/UrlEncodeDecode.vue | 52 +++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/views/UrlEncodeDecode.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 06cdfd3..d624521 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -34,6 +34,7 @@ export default {
         'str_sort_lines': 'Str sort lines',
         'str_to_lower_upper': 'Str to lower/upper',
         'str_remove_duplicate_lines': 'Str remove duplicate lines',
+        'url_encode_decode': 'URL encode/decode',
       },
       'SQL': {
         'sql_split_in': 'SQL split IN',
diff --git a/src/router/index.js b/src/router/index.js
index 07c1359..31adb45 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,11 @@ const router = createRouter({
 			name: 'fix_ru_en_keyboard',
 			component: () => import('../views/FixRuEnKeyboard.vue'),
 		},
+		{
+			path: '/url_encode_decode',
+			name: 'url_encode_decode',
+			component: () => import('../views/UrlEncodeDecode.vue'),
+		},
 
 		/**
 		 * SQL manipulation
diff --git a/src/views/UrlEncodeDecode.vue b/src/views/UrlEncodeDecode.vue
new file mode 100644
index 0000000..be9c8c2
--- /dev/null
+++ b/src/views/UrlEncodeDecode.vue
@@ -0,0 +1,52 @@
+<template>
+  <h2 class="tool-title">URL encode/decode</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="encode_mode_encode" value="encode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_encode">endode</label><br>
+      <input id="encode_mode_decode" value="decode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_decode">decode</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        encodeMode: 'decode',
+      },
+    };
+  },
+  computed: {
+    toolResult() {
+      switch (this.toolData.encodeMode) {
+        case 'encode':
+          return this.toolData.data.split('\n').map(encodeURIComponent).join('\n');
+        case 'decode':
+          return this.toolData.data.split('\n').map(decodeURIComponent).join('\n');
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file