#7 Make URL query viewer tool (#8)

Closes #7

Reviewed-on: #8
Co-authored-by: stuzer05 <stuzer05@stuzer.link>
Co-committed-by: stuzer05 <stuzer05@stuzer.link>

src/assets/app.scss

@@ -6,9 +6,10 @@
 /**
  * Components
  */
-input[type=text], input[type=number], textarea {
+input[type=text], input[type=number], input[type=url], textarea {
 	@apply appearance-none border leading-tight focus:outline-none;
 	font-family: monospace;
+	padding: 2px;
 }
 
 input:disabled, textarea:disabled {

src/components/Sidebar.vue

@@ -36,6 +36,7 @@ export default {
         'str_to_lower_upper': 'Str to lower/upper',
         'str_remove_duplicate_lines': 'Str remove duplicate lines',
         'url_encode_decode': 'URL encode/decode',
+        'url_query_viewer': 'URL query viewer',
       },
       'PHP': {
         'str_to_php_array': 'Str to PHP array',

src/router/index.js

@@ -60,6 +60,11 @@ const router = createRouter({
 			name: 'url_encode_decode',
 			component: () => import('../views/UrlEncodeDecode.vue'),
 		},
+		{
+			path: '/url_query_viewer',
+			name: 'url_query_viewer',
+			component: () => import('../views/UrlQueryViewer.vue'),
+		},
 
 		/**
 		 * JSON manipulation

src/views/UrlQueryViewer.vue

@@ -0,0 +1,90 @@
+<template>
+  <h2 class="tool-title">URL query viewer</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <input id="data" v-model="toolData.data" v-on:keyup="result" type="url">
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <table>
+      <tbody>
+        <tr v-for="row in toolData.queryParts">
+          <td><input :value="row.key" style="width: 100%;" type="text" readonly></td>
+          <td><input :value="row.value" style="width: 100%;" type="text" readonly></td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="!toolData.queryParts.length">invalid url</p>
+  </div>
+</template>
+
+<script>
+function isValidUrl(string) {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        queryParts: [],
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      // Reset
+      this.toolData.queryParts = [];
+
+      // Check url
+      if (!isValidUrl(this.toolData.data)) {
+        return;
+      }
+
+      const urlParams = new URLSearchParams(this.toolData.data);
+
+      // Parse query
+      const queryParams = [];
+      for (let [key, value] of urlParams) {
+        // Fix first param starts with main url part
+        if (key.indexOf('?') !== -1) {
+          key = key.split('?')[1];
+        }
+
+        queryParams.push({
+          key: key,
+          value: value,
+        });
+      }
+      this.toolData.queryParts = queryParams.sort((a, b) => {
+        return a.key.localeCompare(b.key);
+      })
+
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+table tr:nth-child(even) input {
+  background-color: #fbfbfb;
+}
+table tr:nth-child(odd) input {
+  background-color: #eee;
+}
+</style>