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,

templates/nostrrelay/index.html

@@ -68,8 +68,8 @@
                 />
               </q-td>
 
-              <!-- <q-td key="id" :props="props"> {{props.row.id}} </q-td> -->
+              <q-td key="id" :props="props"> {{props.row.id}} </q-td>
-              <q-td key="id" :props="props">
+              <q-td key="toggle" :props="props">
                 <q-toggle
                   size="sm"
                   color="secodary"
@@ -90,26 +90,13 @@
             </q-tr>
             <q-tr v-if="props.row.expanded" :props="props">
               <q-td colspan="100%">
-                <div class="row items-center q-mt-md q-mb-lg">
+                <div class="row items-center q-mb-lg">
-                  <div class="col-6 q-pr-lg"></div>
+                  <div class="col-12">
-                  <div class="col-6 q-pr-lg">
-                    <q-btn
-                      unelevated
-                      color="pink"
-                      icon="cancel"
-                      class="float-right"
-                      @click="deleteRelay(props.row.id)"
-                      >Delete Relay</q-btn
-                    >
-                  </div>
-                </div>
-                <div class="row items-center q-mt-md q-mb-lg">
-                  <div class="col-2 q-pr-lg"></div>
-                  <div class="col-10 q-pr-lg">
                     <relay-details
                       :relay-id="props.row.id"
                       :adminkey="g.user.wallets[0].adminkey"
                       :inkey="g.user.wallets[0].inkey"
+                      @relay-deleted="handleRelayDeleted"
                     ></relay-details>
                   </div>
                 </div>