#12 Add table to mediawiki table tool (#13)

Closes #12

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

src/components/Sidebar.vue

@@ -28,6 +28,7 @@ export default {
       'General': {
         'home': 'Home',
         'explain_crontab': 'Explain crontab',
+        'table_to_mediawiki_table': 'Table to Mediawiki table',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -16,6 +16,11 @@ const router = createRouter({
 			name: 'explain_crontab',
 			component: () => import('../views/ExplainCrontab.vue'),
 		},
+		{
+			path: '/table_to_mediawiki_table',
+			name: 'table_to_mediawiki_table',
+			component: () => import('../views/TableToMediawikiTable.vue'),
+		},
 
 		/**
 		 * String manipulation

src/views/TableToMediawikiTable.vue

@@ -0,0 +1,59 @@
+<template>
+  <h2 class="tool-title">Fix ru-en keyboard</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data (paste from excel)</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import { unproxy } from "@/utils/unproxy";
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: '',
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    result() {
+      let output = '{| class="wikitable"\n';
+
+      const rows = unproxy(this.toolData.data).split('\n');
+      for (let i = 0; i < rows.length; i++) {
+        const cells = rows[i].split('\t');
+        output += '|-\n';
+
+        for (let j = 0; j < cells.length; j++) {
+          output += i === 0 ? '! ' : '| ';
+          output += cells[j].trim() + '\n';
+        }
+      }
+
+      output += '|}';
+
+      this.toolResult = output;
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>