feat: impove tool display

IFB-ElixirFr · Aug 22, 2023 · dd83697 · dd83697
1 parent efe4aeb
commit dd83697
Show file tree

Hide file tree

Showing 5 changed files with 5,033 additions and 11 deletions.
diff --git a/components/GithubBtn.vue b/components/GithubBtn.vue
@@ -11,7 +11,7 @@
         style="background-color: transparent !important"
       >
         <p class="ma-0">{{ config.public.repo_name }}</p>
-        <p class="text-caption ma-0">
+        <p class="text-caption ma-0" v-if="ghRelease">
           <v-icon>mdi-tag-outline</v-icon> {{ ghRelease.tag_name }}
           <v-icon>mdi-star-outline</v-icon> {{ ghValue.stargazers_count }}
           <v-icon>mdi-source-fork</v-icon> {{ ghValue.forks_count }}

diff --git a/components/content/Awk.vue b/components/content/Awk.vue
@@ -0,0 +1,128 @@
+<template>
+    <p class="text-h6">File content</p>
+    <p>
+      <b
+        ><v-icon>mdi-information</v-icon> This content will be written to the file
+        <code>data.txt</code></b
+      >
+    </p>
+    <div style="max-height: 200px; overflow-y: auto">
+      <div :id="idEditor" style="width: 100%; height: 200px">
+        {{ text }}
+      </div>
+    </div>
+
+    <p class="text-h6">Command</p>
+    <p>
+      <b
+        ><v-icon>mdi-information</v-icon> The file name must always be
+        <code>data.txt</code></b
+      >
+    </p>
+    <v-dialog v-model="dialog" width="75%">
+      <template v-slot:activator="{ props }">
+        <v-btn color="primary" v-bind="props" size="small" class="mb-4">
+          <v-icon>mdi-book</v-icon> Read man
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-text style="height: 90vh">
+          <iframe
+            src="/man/gawk.html"
+            frameborder="0"
+            style="height: 100%; width: 100%"
+          ></iframe>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <v-text-field
+      v-model="commandInput"
+      style="font-family: monospace, monospace !important"
+    ></v-text-field>
+    <v-btn class="mt-4" @click="runTool">Run tool </v-btn>
+    <p class="text-h6">Output</p>
+    <pre :id="idOutput">Await run click...</pre>
+    <v-card color="info">
+      <v-card-text v-if="noResult">
+        <v-icon>mdi-information</v-icon> No result
+      </v-card-text>
+    </v-card>
+  </template>
+
+    <script>
+  import Aioli from "@biowasm/aioli";
+  import ace from "ace-builds";
+  
+  export default {
+    props: {
+      text: String,
+      command: String,
+    },
+    setup(props) {
+      var id = new Date().valueOf();
+      var idEditor = "editorArea" + id;
+      var idOutput = "output" + id;
+  
+      const route = useRoute();
+      let tool = route.params.tool;
+  
+      return { idEditor, idOutput, tool };
+    },
+    data() {
+      return {
+        dialog: false,
+        editor: null,
+        commandInput: null,
+        noResult: false,
+      };
+    },
+    mounted() {
+      this.commandInput = this.command;
+      this.editor = ace.edit(this.idEditor, {
+        tabSize: 4,
+        // readOnly: this.readOnly,
+        autoScrollEditorIntoView: true,
+        maxLines: 50,
+        minLines: 1,
+      });
+    },
+    methods: {
+      async runTool() {
+        document.getElementById(this.idOutput).innerHTML = "Loading...";
+        this.noResult = false;
+  
+        const CLI = await new Aioli(["gawk/5.1.0"]);
+  
+        // Create sample file
+        var dataEditor = {
+          name: "data.txt",
+          data: this.editor.getValue(),
+        };
+        await CLI.mount(dataEditor);
+        console.log(this.commandInput);
+  
+        var temp = this.commandInput;
+        temp = temp.replace(this.tool, "").trim();
+        var params = this.parseFlags(temp)
+          //.map((d) => d.replaceAll('"', ""))
+          .map((d) => d.replaceAll("'", ""));
+        console.log(params);
+        const output = await CLI.exec("gawk", params);
+        if (output == "") {
+          this.noResult = true;
+        }
+        console.log(output);
+        document.getElementById(this.idOutput).innerHTML = output;
+      },
+      parseFlags(flags) {
+        // Source: https://stackoverflow.com/a/16261693
+        return flags.match(/(?:[^\s']+|'[^']*')+/g) || [];
+      },
+    },
+  };
+  </script>
+
+      <style>
+  </style>
diff --git a/components/content/Grep.vue b/components/content/Grep.vue
@@ -1,7 +1,10 @@
 <template>
   <p class="text-h6">File content</p>
   <p>
-    <b><v-icon>mdi-information</v-icon> This content will be written to the file <code>data.txt</code></b>
+    <b
+      ><v-icon>mdi-information</v-icon> This content will be written to the file
+      <code>data.txt</code></b
+    >
   </p>
   <div style="max-height: 200px; overflow-y: auto">
     <div :id="idEditor" style="width: 100%; height: 200px">
@@ -11,7 +14,15 @@
 
   <p class="text-h6">Command</p>
   <p>
-    <b><v-icon>mdi-information</v-icon> The file name must always be <code>data.txt</code></b>
+    <b
+      ><v-icon>mdi-information</v-icon> The file name must always be
+      <code>data.txt</code></b
+    >
+  </p>
+  <p>
+    <b
+      ><v-icon>mdi-information</v-icon> Use simple quote for write a text argument.</b
+    >
   </p>
   <v-dialog v-model="dialog" width="75%">
     <template v-slot:activator="{ props }">
@@ -99,9 +110,7 @@ export default {
 
       var temp = this.commandInput;
       temp = temp.replace(this.tool, "").trim();
-      var params = this.parseFlags(temp)
-        .map((d) => d.replaceAll('"', ""))
-        .map((d) => d.replaceAll("'", ""));
+      var params = this.parseFlags(temp).map((d) => d.replaceAll("'", ""));
       console.log(params);
       const output = await CLI.exec("grep", params);
       if (output == "") {
@@ -112,7 +121,7 @@ export default {
     },
     parseFlags(flags) {
       // Source: https://stackoverflow.com/a/16261693
-      return flags.match(/(?:[^\s"]+|"[^"]*")+/g) || [];
+      return flags.match(/(?:[^\s']+|'[^']*')+/g) || [];
     },
   },
 };

diff --git a/components/content/Sed.vue b/components/content/Sed.vue
@@ -19,6 +19,11 @@
       <code>data.txt</code></b
     >
   </p>
+  <p>
+    <b
+      ><v-icon>mdi-information</v-icon> Use simple quote for write a text argument.</b
+    >
+  </p>
   <v-dialog v-model="dialog" width="75%">
     <template v-slot:activator="{ props }">
       <v-btn color="primary" v-bind="props" size="small" class="mb-4">
@@ -112,9 +117,7 @@ export default {
 
       var temp = this.commandInput;
       temp = temp.replace(this.tool, "").trim();
-      var params = this.parseFlags(temp)
-        .map((d) => d.replaceAll('"', ""))
-        .map((d) => d.replaceAll("'", ""));
+      var params = this.parseFlags(temp).map((d) => d.replaceAll("'", ""));
       console.log(params);
       const output = await CLI.exec("sed", params);
       if (output == "") {
@@ -125,7 +128,7 @@ export default {
     },
     parseFlags(flags) {
       // Source: https://stackoverflow.com/a/16261693
-      return flags.match(/(?:[^\s"]+|"[^"]*")+/g) || [];
+      return flags.match(/(?:[^\s']+|'[^']*')+/g) || [];
     },
   },
 };