feat: move logic to relay-details component

static/components/relay-details/relay-details.html

@@ -1 +1,23 @@
-<div>xxx</div>
+<div>
+  <div class="row items-center q-mt-md q-mb-lg">
+    <div class="col-6 q-pr-lg">
+      <q-btn
+        unelevated
+        color="secondary"
+        class="float-left"
+        @click="updateRelay()"
+        >Update Relay</q-btn
+      >
+    </div>
+    <div class="col-6">
+      <q-btn
+        unelevated
+        color="pink"
+        icon="cancel"
+        class="float-right"
+        @click="deleteRelay()"
+        >Delete Relay</q-btn
+      >
+    </div>
+  </div>
+</div>

static/components/relay-details/relay-details.js

@@ -4,7 +4,7 @@ async function relayDetails(path) {
     name: 'relay-details',
     template,
 
-    props: [],
+    props: ['relay-id', 'adminkey', 'inkey'],
     data: function () {
       return {
         items: [],
@@ -21,6 +21,25 @@ async function relayDetails(path) {
     methods: {
       satBtc(val, showUnit = true) {
         return satOrBtc(val, showUnit, this.satsDenominated)
+      },
+      deleteRelay: function () {
+        LNbits.utils
+          .confirmDialog(
+            'All data will be lost! Are you sure you want to delete this relay?'
+          )
+          .onOk(async () => {
+            try {
+              await LNbits.api.request(
+                'DELETE',
+                '/nostrrelay/api/v1/relay/' + this.relayId,
+                this.adminkey
+              )
+              this.$emit('relay-deleted', this.relayId)
+            } catch (error) {
+              console.warn(error)
+              LNbits.utils.notifyApiError(error)
+            }
+          })
       }
     },
 

static/js/index.js

@@ -35,6 +35,12 @@ const relays = async () => {
               label: 'ID',
               field: 'id'
             },
+            {
+              name: 'toggle',
+              align: 'left',
+              label: 'Active',
+              field: ''
+            },
             {
               name: 'name',
               align: 'left',
@@ -146,33 +152,17 @@ const relays = async () => {
         }
       },
 
-      deleteRelay: function (relayId) {
-        LNbits.utils
-          .confirmDialog(
-            'All data will be lost! Are you sure you want to delete this relay?'
-          )
-          .onOk(async () => {
-            try {
-              const response = await LNbits.api.request(
-                'DELETE',
-                '/nostrrelay/api/v1/relay/' + relayId,
-                this.g.user.wallets[0].adminkey
-              )
-
-              this.relayLinks = _.reject(this.relayLinks, function (obj) {
-                return obj.id === relayId
-              })
-            } catch (error) {
-              LNbits.utils.notifyApiError(error)
-            }
-          })
-      },
-
       sendFormDataRelay: async function () {
         console.log('### sendFormDataRelay')
         this.createRelay(this.formDialogRelay.data)
       },
 
+      handleRelayDeleted: function (relayId) {
+        this.relayLinks = _.reject(this.relayLinks, function (obj) {
+          return obj.id === relayId
+        })
+      },
+
       exportrelayCSV: function () {
         LNbits.utils.exportCSV(
           this.relaysTable.columns,