From e66089e4c71174846d3300d31f01059c6f762705 Mon Sep 17 00:00:00 2001
From: Micky <60691199+AliMickey@users.noreply.github.com>
Date: Sat, 28 Dec 2024 14:57:31 +1100
Subject: [PATCH] improve command filtering and handling

---
 CONFIGURATION.md          |  6 +++---
 app/static/js/main.js     | 14 ++++++++++++++
 app/templates/footer.html |  4 ++--
 app/templates/index.html  | 27 +++++++++++++--------------
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/CONFIGURATION.md b/CONFIGURATION.md
index 1021568..06937c2 100644
--- a/CONFIGURATION.md
+++ b/CONFIGURATION.md
@@ -43,7 +43,7 @@ webhook:
 ping:
   display_name: "Ping"
   format: "ping -{ip_version} -c 4 {target}"
-  description: "Test network connectivity"
+  description: "Performs ping with 4 ICMP requests to target"
   field:
     type: "text"
     placeholder: "Enter IP address or hostname"
@@ -51,7 +51,7 @@ ping:
 traceroute:
   display_name: "Traceroute"
   format: "traceroute -{ip_version} {target}"
-  description: "Trace network path to destination"
+  description: "Performs traceroute to target"
   field:
     type: "text"
     placeholder: "Enter IP address or hostname"
@@ -59,7 +59,7 @@ traceroute:
 mtr:
   display_name: "MTR"
   format: "mtr -{ip_version} -r {target}"
-  description: "Trace network path with stats"
+  description: "Performs MTR to target"
   field:
     type: "text"
     placeholder: "Enter IP address or hostname"
diff --git a/app/static/js/main.js b/app/static/js/main.js
index b48dfdc..feec0e5 100644
--- a/app/static/js/main.js
+++ b/app/static/js/main.js
@@ -30,7 +30,13 @@ const app = Vue.createApp({
                 if (!newVal) {
                     this.resetCommandState();
                 }
+                // Check if the current command is valid for the new device
+                const validCommands = this.currentDevice?.commands || [];
+                if (!validCommands.includes(this.selectedCommand)) {
+                    this.selectedCommand = ''; // Reset command if invalid
+                }
             },
+            
             immediate: true
         },
         selectedCommand: {
@@ -49,6 +55,14 @@ const app = Vue.createApp({
             }));
         },
 
+        filteredCommands() {
+            if (!this.currentDevice) return [];
+            return this.currentDevice.commands.map(commandKey => ({
+                key: commandKey,
+                ...this.commands[commandKey]
+            }));
+        },
+
         showIpVersionSelector() {
             if (!this.targetIp) return true;
 
diff --git a/app/templates/footer.html b/app/templates/footer.html
index 45a22b3..8321bd0 100644
--- a/app/templates/footer.html
+++ b/app/templates/footer.html
@@ -4,7 +4,7 @@
             <div class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
                 <div class="flex items-center">
                     <span class="text-sm text-gray-600 dark:text-gray-400">
-                        {{ site.footer.text }} - v1.0.0
+                        {{ site.footer.text }} - v1.0.1
                     </span>
                 </div>
 
@@ -121,7 +121,7 @@
                     </button>
                 </div>
                 <div class="space-y-4">
-                    {% for command in commands %}
+                    {% for command in commands.values() %}
                         <div class="border-b border-gray-200 dark:border-gray-700 last:border-0 pb-4 last:pb-0">
                             <h4 class="font-medium text-gray-900 dark:text-white mb-2">
                                 <p class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-3 py-1.5 rounded-lg text-sm font-mono">
diff --git a/app/templates/index.html b/app/templates/index.html
index cb8f2c1..c08786c 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -64,21 +64,20 @@
                             leave-to-class="transform opacity-0 scale-95 -translate-y-2">
                             <div v-if="isOpen"
                                 class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-lg py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                                {% for command_key, command in commands.items() %}
-                                    <div @click.stop.prevent="selectCommand('{{ command_key }}')"
-                                        :class="['cursor-pointer select-none relative py-2 pl-3 pr-9 transition-all duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white',
-                                                selectedCommand === '{{ command_key }}' ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300']">
-                                        <div class="flex items-center">
-                                            <span class="block truncate font-medium">{{ command.display_name }}</span>
-                                        </div>
-                                        <span v-if="selectedCommand === '{{ command_key }}'"
-                                            class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-600 dark:text-gray-400">
-                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-                                            </svg>
-                                        </span>
+                                <div v-for="command in filteredCommands" :key="command.key"
+                                    @click.stop.prevent="selectCommand(command.key)"
+                                    :class="['cursor-pointer select-none relative py-2 pl-3 pr-9 transition-all duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white',
+                                            selectedCommand === command.key ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300']">
+                                    <div class="flex items-center">
+                                        <span class="block truncate font-medium">${command.display_name}</span>
                                     </div>
-                                {% endfor %}
+                                    <span v-if="selectedCommand === command.key"
+                                        class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-600 dark:text-gray-400">
+                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </span>
+                                </div>
                             </div>
                         </transition>
                     </div>