#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/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>