Added accordion panels for commands

console/src/App.vue

@@ -14,8 +14,10 @@ import CommandsWidget from "./components/dashboard/CommandsWidget.vue";
     <div class="layout-container">
         <AppTopbar />
         <div class="layout-grid">
+            <div class="layout-grid-row">
                 <PropertiesWidget device-id="example-gps-fedora" />
                 <CommandsWidget device-id="example-gps-fedora" />
+            </div>
             <StatsWidget />
             <!-- <div class="layout-grid-row">
                 <SalesTrendWidget />

console/src/components/dashboard/CommandsWidget.vue

@@ -2,6 +2,11 @@
 import { ref, reactive, watch, onMounted } from 'vue'
 import MQTTService from '../../services/mqtt.js'
 
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+
 const props = defineProps({
   deviceId: String
 })
@@ -24,6 +29,7 @@ function updateCommand(device, name, field, value) {
         commandMap[name] = {
         name,
         description: '',
+        schema: '',
         input: ''
         }
   }
@@ -36,7 +42,7 @@ function sendCommand(cmd) {
 
   const topic = `device/${props.deviceId}/command/${cmd.name}`
 
-  mqtt2.publish(topic, JSON.stringify(cmd.input))
+  mqtt2.publish(topic, cmd.input || '{}')
 }
 
 watch(() => props.deviceId, () => {
@@ -61,6 +67,9 @@ onMounted(() => {
     if (field === 'description') {
       updateCommand(device, command, 'description', payload)
     }
+    if (field === 'schema') {
+      updateCommand(device, command, 'schema', payload)
+    }
 
   })
 
@@ -81,22 +90,28 @@ onMounted(() => {
         </template>
       <template #empty> No commands available.</template>
       <template #list="slotProps">
-        <div
+        <Accordion>
+
+            <AccordionPanel
             v-for="cmd in slotProps.items"
             :key="cmd.name"
-          class="p-card p-mb-3"
+            :value="cmd.name"
-          style="padding:1rem"
             >
 
-          <h3>{{ cmd.name }}</h3>
+            <AccordionHeader>
-
+                <div class="command-header">
-          <p>{{ cmd.description }}</p>
+                <span class="command-name">{{ cmd.name }}</span>
+                <span class="command-desc">{{ cmd.description }}</span>
+                </div>
+            </AccordionHeader>
+            <AccordionContent>
+                <div class="command-body">
 
                     <Textarea
                     v-model="cmd.input"
-            rows="3"
+                    rows="4"
                     style="width:100%"
-            placeholder="JSON arguments..."
+                    :placeholder="cmd.schema || 'JSON arguments...'"
                     />
 
                     <Button
@@ -107,8 +122,35 @@ onMounted(() => {
                     />
 
                 </div>
+            </AccordionContent>
 
+            </AccordionPanel>
+
+        </Accordion>
         </template>
     </DataView>
 </div>
 </template>
+
+<style scoped>
+
+.command-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.command-name {
+  font-weight: 600;
+}
+
+.command-desc {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.command-body {
+  padding-top: 0.5rem;
+}
+
+</style>