frontend: components: Shows devices as available or connected

ping-viewer-next-frontend/src/components/utils/ConnectionManager.vue

@@ -53,7 +53,7 @@
               <template v-slot:append>
                 <div class="d-flex align-center gap-2">
                   <v-btn variant="elevated" class="rounded-lg -mb-1" :color="getStatusColor(device.status)" size="small">
-                    {{ device.status }}
+                    {{ getStatusLabel(device.status) }}
                   </v-btn>
 
                   <v-menu location="start" offset="5">
@@ -327,16 +327,27 @@ const connectionTypes = [
 const getStatusColor = (status) => {
   switch (status) {
     case 'ContinuousMode':
-      return 'success';
     case 'Running':
-      return 'info';
+      return 'success';
     case 'Error':
       return 'error';
     default:
       return 'warning';
   }
 };
 
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+    case 'Running':
+      return 'Connected';
+    case 'Error':
+      return 'Error';
+    default:
+      return 'Available';
+  }
+};
+
 const toggleManualCreate = () => {
   showManualCreate.value = !showManualCreate.value;
 };

ping-viewer-next-frontend/src/components/utils/DeviceCard.vue

@@ -33,7 +33,7 @@
         <div class="text-sm">
           <strong>Status:</strong>
           <v-chip :color="getStatusColor(device.status)" size="small" class="ml-2">
-            {{ device.status }}
+            {{ getStatusLabel(device.status) }}
           </v-chip>
         </div>
       </div>
@@ -80,13 +80,24 @@ const emit = defineEmits(['click', 'dblclick', 'toggle']);
 const getStatusColor = (status) => {
   const statusColors = {
     Running: 'success',
-    Stopped: 'error',
-    ContinuousMode: 'info',
+    ContinuousMode: 'success',
     Error: 'error',
   };
   return statusColors[status] || 'warning';
 };
 
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+    case 'Running':
+      return 'Connected';
+    case 'Error':
+      return 'Error';
+    default:
+      return 'Available';
+  }
+};
+
 const handleClick = (event) => {
   if (props.clickable) {
     emit('click', event);

ping-viewer-next-frontend/src/components/utils/DeviceManager.vue

@@ -89,7 +89,7 @@
 							</td>
 							<td>
 								<v-chip :color="getStatusColor(device.status)" size="small">
-									{{ device.status }}
+									{{ getStatusLabel(device.status) }}
 								</v-chip>
 							</td>
 							<td>
@@ -285,16 +285,27 @@ const newDevice = ref({
 const getStatusColor = (status) => {
   switch (status) {
     case 'ContinuousMode':
-      return 'success';
     case 'Running':
-      return 'info';
+      return 'success';
     case 'Error':
       return 'error';
     default:
       return 'warning';
   }
 };
 
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+    case 'Running':
+      return 'Connected';
+    case 'Error':
+      return 'Error';
+    default:
+      return 'Available';
+  }
+};
+
 const fetchDevices = async () => {
   try {
     const response = await fetch(`${props.serverUrl}/device_manager/request`, {

ping-viewer-next-frontend/src/components/views/DevicesView.vue

@@ -27,7 +27,7 @@
               <span class="text-gray-400 ml-2">{{ selectedDevice.id }}</span>
             </div>
             <v-chip :color="getStatusColor(selectedDevice.status)" size="small">
-              {{ selectedDevice.status }}
+              {{ getStatusLabel(selectedDevice.status) }}
             </v-chip>
           </div>
         </div>
@@ -107,16 +107,27 @@ const containerStyle = computed(() => ({
 const getStatusColor = (status) => {
   switch (status) {
     case 'ContinuousMode':
-      return 'success';
     case 'Running':
-      return 'info';
+      return 'success';
     case 'Error':
       return 'error';
     default:
       return 'warning';
   }
 };
 
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'ContinuousMode':
+    case 'Running':
+      return 'Connected';
+    case 'Error':
+      return 'Error';
+    default:
+      return 'Available';
+  }
+};
+
 const selectDevice = async (device) => {
   isComponentReady.value = false;
   selectedDevice.value = device;