opensignalbox-interface 0.1.0__py3-none-any.whl

opensignalbox/interface/web_ui/src/views/adapters/modbus/ModbusAdapterView.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuery } from '@tanstack/vue-query'
+import { ChevronLeft, Pencil, Trash2 } from 'lucide-vue-next'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import axios from 'axios'
+
+const route = useRoute()
+const router = useRouter()
+
+const adapterQuery = useQuery({
+  queryKey: ['adapter', route.params.name],
+  queryFn: async () => {
+    const url = location.origin + `/api/adapters/modbus/${route.params.name}`
+    const response = await fetch(url)
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    return response.json()
+  },
+  enabled: computed(() => Boolean(route.params.name)),
+  refetchInterval: 1000, // Refresh every 1 second
+})
+
+async function deleteAdapter() {
+  if (!adapterQuery.data?.value || !confirm('Are you sure you want to delete this adapter?')) {
+    return
+  }
+
+  try {
+    const response = await fetch(`${location.origin}/api/adapters/modbus/${route.params.name}`, {
+      method: 'DELETE'
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    router.push('/')
+  } catch (error) {
+    console.error('Failed to delete adapter:', error)
+    alert('Failed to delete adapter')
+  }
+}
+
+function editAdapter() {
+  router.push(`/adapters/edit/modbus/${route.params.name}`)
+}
+
+async function connectAdapter() {
+    try {
+        await axios.put(`${location.origin}/api/adapters/${route.params.name}/connect`)
+    } catch (error) {
+        console.error('Failed to connect adapter:', error)
+        alert('Failed to connect adapter')
+    }
+}
+
+async function disconnectAdapter() {
+    try {
+        await axios.put(`${location.origin}/api/adapters/${route.params.name}/disconnect`)
+    } catch (error) {
+        console.error('Failed to disconnect adapter:', error)
+        alert('Failed to disconnect adapter')
+    }
+}
+
+async function enableAdapter() {
+    try {
+        await axios.put(`${location.origin}/api/adapters/${route.params.name}/enable`)
+    } catch (error) {
+        console.error('Failed to enable adapter:', error)
+        alert('Failed to enable adapter')
+    }
+}
+
+async function disableAdapter() {
+    try {
+        await axios.put(`${location.origin}/api/adapters/${route.params.name}/disable`)
+    } catch (error) {
+        console.error('Failed to disable adapter:', error)
+        alert('Failed to disable adapter')
+    }
+}
+
+onMounted(() => {
+  if (!route.params.name) {
+    router.push('/')
+  }
+})
+</script>
+
+<template>
+    <div class="w-full">
+        <p v-if="adapterQuery.isLoading.value">Loading..</p>
+        <div v-else-if="adapterQuery.data?.value" class="space-y-6">
+            <!-- Header -->
+            <div class="flex items-center gap-4">
+                <Button type="button" variant="outline" size="icon" class="h-7 w-7" @click.prevent="$router.back()">
+                    <ChevronLeft class="h-4 w-4" />
+                    <span class="sr-only">Back</span>
+                </Button>
+                <h1 class="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
+                    {{ adapterQuery.data.value.userName || adapterQuery.data.value.systemName }}
+                </h1>
+                <div class="flex items-center gap-2 ml-auto">
+                    <Button type="button" variant="outline" size="sm" @click="editAdapter">
+                        <Pencil class="h-4 w-4 mr-2" />
+                        Edit
+                    </Button>
+                    <Button type="button" variant="destructive" size="sm" @click="deleteAdapter">
+                        <Trash2 class="h-4 w-4 mr-2" />
+                        Delete
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Main content grid -->
+            <div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:grid-cols-2">
+                <!-- Live Status Card -->
+                <Card class="col-span-2 md:col-span-1">
+                    <CardHeader>
+                        <CardTitle>Live Status</CardTitle>
+                        <CardDescription>
+                            Current interface status and controls. Click to toggle.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="flex flex-col lg:flex-row gap-6">
+                            <!-- Status Indicators -->
+                            <div class="flex flex-col gap-4 flex-1">
+                                <div class="grid grid-cols-2 gap-4">
+                                    <!-- Connection Status -->
+                                    <div class="flex flex-col items-center p-4 border rounded-lg">
+                                        <h4 class="font-medium text-sm text-muted-foreground mb-2">Connection</h4>
+                                        <Badge variant="outline" :class="{
+                                            'bg-green-100 text-green-800 border-green-300': adapterQuery.data.value.isConnected,
+                                            'bg-red-100 text-red-800 border-red-300': !adapterQuery.data.value.isConnected
+                                        }">
+                                            {{ adapterQuery.data.value.isConnected ? 'Connected' : 'Disconnected' }}
+                                        </Badge>                                        
+                                        <Button 
+                                        type="button" 
+                                        variant="default"
+                                        :disabled="!adapterQuery.data.value.enabled"
+                                        size="sm" 
+                                        class="w-full mt-2"
+                                        v-if="!adapterQuery.data.value.isConnected"
+                                        @click="connectAdapter"
+                                    >
+                                        {{ adapterQuery.data.value.enabled ? 'Connect' : 'Enable to Connect' }}
+                                    </Button>
+                                    <Button 
+                                        type="button" 
+                                        variant="outline" 
+                                        size="sm" 
+                                        class="w-full mt-2"
+                                        v-if="adapterQuery.data.value.isConnected"
+                                        @click="disconnectAdapter"
+                                    >
+                                        Disconnect
+                                    </Button>
+                                    </div>
+
+                                    <!-- Enabled Status -->
+                                    <div class="flex flex-col items-center p-4 border rounded-lg">
+                                        <h4 class="font-medium text-sm text-muted-foreground mb-2">State</h4>
+                                        <Badge variant="outline" :class="{
+                                            'bg-green-100 text-green-800 border-green-300': adapterQuery.data.value.enabled,
+                                            'bg-red-100 text-red-800 border-red-300': !adapterQuery.data.value.enabled
+                                        }">
+                                            {{ adapterQuery.data.value.enabled ? 'Enabled' : 'Disabled' }}
+                                        </Badge>
+                                        <Button 
+                                            type="button" 
+                                            variant="default" 
+                                            size="sm" 
+                                            class="w-full mt-2"
+                                            v-if="!adapterQuery.data.value.enabled"
+                                            @click="enableAdapter"
+                                        >
+                                            Enable
+                                        </Button>
+                                        <Button 
+                                            type="button" 
+                                            variant="destructive" 
+                                            size="sm" 
+                                            class="w-full mt-2"
+                                            v-if="adapterQuery.data.value.enabled"
+                                            @click="disableAdapter"
+                                        >
+                                            Disable
+                                        </Button>
+                                    </div>
+
+                                </div>
+                                
+                                <!-- Error Message Display -->
+                                <div v-if="adapterQuery.data.value.error" class="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                                    <h5 class="font-medium text-yellow-800 mb-1">Error Details:</h5>
+                                    <p class="text-sm text-yellow-700">{{ adapterQuery.data.value.error }}</p>
+                                </div>
+                                <div v-else class="p-3 bg-green-50 border border-green-200 rounded-lg">
+                                    <h5 class="font-medium text-green-800 mb-1">No Errors</h5>
+                                    <p class="text-sm text-green-700">The interface is functioning normally.</p>
+                                </div>
+                            </div>
+
+                        </div>
+                    </CardContent>
+                </Card>
+                <!-- General Details -->
+                <Card>
+                    <CardHeader>
+                        <CardTitle>General Details</CardTitle>
+                        <CardDescription>
+                            Basic adapter information
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="grid gap-4">
+                            <div class="grid gap-2">
+                                <Label>System Name</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.systemName }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>User Name</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.userName || 'Not set' }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>Description</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.description || 'No description' }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>Enabled?</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.enabled ? 'Yes' : 'No' }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>Connection Type</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.isNetwork ? 'Network (TCP)' : 'Serial (RTU)' }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>{{ adapterQuery.data.value.isNetwork ? 'IP Address' : 'Serial Port' }}</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.isNetwork ? adapterQuery.data.value.address : adapterQuery.data.value.serialPort }}</div>
+                            </div>
+                            <div v-if="adapterQuery.data.value.isNetwork" class="grid gap-2">
+                                <Label>TCP Port</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.networkPort }}</div>
+                            </div>
+                            <div class="grid gap-2">
+                                <Label>Baud Rate</Label>
+                                <div class="text-sm">{{ adapterQuery.data.value.baud }}</div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+        <div v-else-if="adapterQuery.isError.value" class="text-center text-destructive">
+            Failed to load adapter: {{ adapterQuery.error?.value?.message }}
+        </div>
+    </div>
+</template>