trace + backup propertie

inertia/pages/DeviceDetail.vue

@@ -14,6 +14,51 @@ const { device, modelPaths, commands } = defineProps<{
 
 const isLoading = ref(false)
 const showDeleteConfirm = ref(false)
+const isTraced = ref(false)
+const tracingAction = ref(false)
+
+// Check if device is already traced
+async function checkTraceStatus() {
+  try {
+    const response = await fetch('/api/v1/tr069-trace')
+    if (response.ok) {
+      const data = await response.json()
+      const entries = data.entries || []
+      isTraced.value = entries.some((e: any) => e.deviceId === device.identifier)
+    }
+  } catch {
+    // Silently ignore
+  }
+}
+
+async function toggleTrace() {
+  tracingAction.value = true
+  try {
+    if (isTraced.value) {
+      const response = await fetch(`/api/v1/tr069-trace/${encodeURIComponent(device.identifier)}`, {
+        method: 'DELETE',
+      })
+      if (response.ok || response.status === 204) {
+        isTraced.value = false
+      }
+    } else {
+      const response = await fetch('/api/v1/tr069-trace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ deviceId: device.identifier }),
+      })
+      if (response.ok) {
+        isTraced.value = true
+      }
+    }
+  } catch {
+    // Silently ignore
+  } finally {
+    tracingAction.value = false
+  }
+}
+
+checkTraceStatus()
 
 function deleteDevice() {
   router.delete(`/devices/${encodeURIComponent(device.identifier)}`, {
@@ -328,6 +373,21 @@ function getPropertyValue(name: string): string {
               <button class="btn btn-outline-dark btn-sm" @click="openGetModelPopup" :disabled="isLoading">
                 {{ t('button.getModel') }}
               </button>
+              <button
+                class="btn btn-sm"
+                :class="isTraced ? 'btn-warning' : 'btn-outline-primary'"
+                :disabled="tracingAction"
+                @click="toggleTrace"
+              >
+                <svg v-if="!isTraced" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+                  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/>
+                </svg>
+                {{ tracingAction ? '…' : (isTraced ? 'Remove TR-069 monitoring' : 'Add to TR-069 monitoring') }}
+              </button>
               <button class="btn btn-outline-danger btn-sm ms-auto" @click="showDeleteConfirm = true">
                 Supprimer l'équipement
               </button>