bugfixes bruh 👽

src/components/ACommand.vue

@@ -1,5 +1,25 @@
 <template>
-  <div class="px-4 py-5 sm:px-6  divide-y">
+  <div class="text-xl text-center">
+      artisan
+      <span class="px-2 text-purple-700">
+         {{command_obj.command}}
+      </span>
+    <span
+        v-for="arg in command_obj.arguments"
+        :key="arg"
+        class="px-2 text-green-600"
+    >
+          {{arg}}
+      </span>
+    <span
+        v-for="option in command_obj.options"
+        :key="option"
+        class="px-2 text-blue-600"
+    >
+          {{option}} {{(option.value) ? option.value : ''}}
+      </span>
+  </div>
+  <div class="px-4 py-5 sm:px-6  divide-y overflow-y-scroll max-h-full mb-2">
     <div class="mb-2">
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         {{ command.name }}
@@ -8,9 +28,9 @@
         {{ command.description }}
       </p>
     </div>
-    <div class=" divide-y">
+    <div class="mb-4 divide-y">
       <div class="sm:col-span-6 py-4"
-           v-for="arg, i in command.definition.arguments" :key="i">
+           v-for="(arg, i) in command.definition.arguments" :key="i">
         <label :for="arg.name"
                class=" block text-md font-medium text-blue-gray-900">
           {{ arg.name }}
@@ -35,6 +55,47 @@
                  class="flex-1 block w-full min-w-0 border-blue-gray-300 rounded-none rounded-r-md text-blue-gray-900 sm:text-sm focus:ring-blue-500 focus:border-blue-500">
         </div>
       </div>
+
+      <div class="sm:col-span-6 py-4"
+           v-for="(arg, i) in command.definition.options" :key="i">
+        <label :for="arg.name"
+               class=" block text-md font-medium text-blue-gray-900">
+          {{ arg.name }}
+          <span
+              class="relative text-xs left-2 bottom-2 font-xs" :class="(arg.is_required) ? 'text-red-500' : 'text-gray-500'"
+          >
+          {{ arg.is_required ? "*Required." : "Not required." }}
+        </span>
+        </label>
+        <p>
+          {{ arg.description }} <br/>
+        </p>
+        <div v-if="arg.accept_value === true" class="mt-1 flex rounded-md shadow-sm">
+                        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-blue-gray-300 bg-blue-gray-50 text-blue-gray-500 sm:text-sm">
+                          {{ arg.name }}
+                        </span>
+          <input type="text" :name="arg.name" :id="arg.name"
+                 :v-model="options[arg.name]"
+                 @change="option_update"
+                 @keyup="option_update"
+                 class="flex-1 block w-full min-w-0 border-blue-gray-300 rounded-none rounded-r-md text-blue-gray-900 sm:text-sm focus:ring-blue-500 focus:border-blue-500">
+        </div>
+        <div v-else class="mt-1 flex rounded-md py-2">
+          <Switch
+
+              v-model="options[arg.name]"
+              :id="arg.name"
+              @click="option_check"
+              :class="[options[arg.name] ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
+            <span class="sr-only">Use setting</span>
+            <span aria-hidden="true" :class="[options[arg.name] ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
+          </Switch>
+          <span class="inline-flex items-center px-3 text-blue-gray-500 sm:text-sm">
+            {{ arg.name }}
+          </span>
+        </div>
+      </div>
+
       <button
           @click="execute_command"
            class="inline-flex justify-self-center items-center my-2 ml-auto mr-0 px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -45,25 +106,59 @@
         />
       </button>
     </div>
-
   </div>
 
+
 </template>
 
 <script>
+
 import { LightningBoltIcon } from '@heroicons/vue/outline'
+import { Switch } from '@headlessui/vue'
+
 export default {
   name: "Command",
   props: ['command'],
   components: {
-    LightningBoltIcon
+    LightningBoltIcon,
+    Switch,
   },
   data()  {
     return {
       arguments: {},
+      options: {}
     }
   },
   computed: {
+    command_obj() {
+      let parsed = this.command.usage.toString().split(` `).slice(1);
+      for (const arg in this.arguments) {
+        parsed = parsed.map((v) => {
+          if (v.includes(`<${arg}>`)) {
+            return this.arguments[arg].value
+          } else {
+            return v;
+          }
+        })
+      }
+      parsed = parsed.filter((v,i) => {
+        return v !== this.command.usage.toString().split(` `).slice(1)[i]
+      })
+      let options = [];
+      for (const option in this.options) {
+        if(this.options[option] !== undefined && this.options[option].value !== undefined) {
+            options.push(`${option}=${this.options[option].value}`)
+          } else {
+            if (this.options[option])
+              options.push(option)
+          }
+        }
+      return {
+        command: this.command.usage.toString().split(` `)[0],
+        arguments: parsed,
+        options
+      }
+    }
   },
   methods: {
     argument_update(e) {
@@ -73,11 +168,28 @@ export default {
       this.arguments[e.target.id].value = e.target.value
 
     },
+    option_update(e) {
+      if( this.options[e.target.id] === true ) {
+        // this.options(e.target.id);
+        this.options[e.target.id] = false;
+        delete this.options[e.target.id]
+      } else {
+        if (!this.options[e.target.id]) {
+          this.options[e.target.id] = new Object();
+        }
+        this.options[e.target.id].value = e.target.value
+      }
+    },
+    option_check(e) {
+      if (this.options[e.target.id] === false) {
+        this.options.splice(e.target.id, e.target.id)
+      }
+    },
     execute_command() {
       let parsed = this.command.usage.toString().split(` `).slice(1);
       for (const arg in this.arguments) {
         parsed = parsed.map((v) => {
-          if (v.includes(arg)) {
+          if (v.includes(`<${arg}>`)) {
             return this.arguments[arg].value
           } else {
             return v;
@@ -88,6 +200,14 @@ export default {
         return v !== this.command.usage.toString().split(` `).slice(1)[i]
       })
       parsed.unshift(this.command.usage.toString().split(` `)[0])
+      for (const option in this.options) {
+        if(this.options[option].value) {
+          parsed.push(`${option}=${this.options[option].value}`)
+        } else {
+          if (this.options[option])
+          parsed.push(option)
+        }
+      }
       this.$emit('exec', parsed)
     }
   },
@@ -96,6 +216,7 @@ export default {
   watch: {
     command: function() {
       this.arguments = {}
+      this.options = {}
     }
   }
 }

src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Interpreter2.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Interpreter.vue')
   },
   {
     path: '/preferences',

src/store/index.js

@@ -43,6 +43,10 @@ export default createStore({
         },
         commands: {},
         sorted_commands: [],
+        ssh_env: {
+            commands: [],
+            env: []
+        }
   },
   mutations: {
       set_php_path(state, payload) {

src/views/Commands.vue

@@ -101,6 +101,7 @@ import { mapState } from "vuex";
 import {sync} from 'execa';
 import Modal from "../components/Modal";
 import ACommand from "../components/ACommand";
+
 export default {
   name: "Commands",
   components: {

src/views/Home.vue

@@ -3,8 +3,8 @@
     <div class="bg-white shadow mx-auto overflow-hidden sm:rounded-lg">
       <div class="px-8 py-8 sm:px-6 divide-y divide-dotted">
         <div>
-          <h1 class="text-4xl font-bold">
-            Hey <span class="font-gochi"> {{user.name}} </span>
+          <h1 class="text-4xl font-bold text-center">
+            Hey <span class="font-gochi"> {{user.name}}. </span>
           </h1>
         </div>
         <div class="py-4">
@@ -23,17 +23,31 @@
             Add
             <button
                 @click="openLink"
-                to="stinker.php"
                 class="inline-flex items-center px-1 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
               this helper function
             </button>
             to launch Stinker from runtime with an object you want to play with.
           </p>
 
           <CodeBlock>
-            {{`tinker($anything);`}}
+            {{`//base64_encode(serialize($anything)); \n tinker($anything); `}}
           </CodeBlock>
         </div>
+
+        <div class="text-center pt-4 my-auto">
+          Usage: <span
+            class="inline-flex items-center px-1 py-0.5 rounded-l-full rounded-r-0 text-sm font-medium bg-blue-100 text-blue-800">
+              stinker://open</span>
+          <span
+              class="inline-flex items-center px-1 py-0.5 text-sm font-medium bg-yellow-100 text-yellow-800">
+              ?
+            </span>
+          <span
+              class="inline-flex items-center  px-1 py-0.5 rounded-r-full rounded-l-0 text-sm font-medium bg-purple-100 text-purple-800">
+              {base64_string}
+            </span>
+        </div>
+
       </div>
     </div>
   </div>