From 3fe4984026b0d75a290d1f746996f51b0757065e Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 7 Feb 2023 14:29:46 +0200
Subject: [PATCH] feat: add tabs for relay

---
 .../relay-details/relay-details.html          | 61 ++++++++++++-------
 .../components/relay-details/relay-details.js |  2 +-
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/static/components/relay-details/relay-details.html b/static/components/relay-details/relay-details.html
index 87b61ee..827b545 100644
--- a/static/components/relay-details/relay-details.html
+++ b/static/components/relay-details/relay-details.html
@@ -1,23 +1,42 @@
 <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>
+  <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
+    <q-tab name="info" label="Relay Info"></q-tab>
+    <q-tab name="payment" label="Payment"></q-tab>
+    <q-tab name="config" label="Config"></q-tab>
+    <q-tab name="access" label="Access Control"></q-tab>
+  </q-tabs>
+  <q-tab-panels v-model="tab">
+    <q-tab-panel name="info">
+      <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>
+    </q-tab-panel>
+    <q-tab-panel name="payment">
+      <span>yyyy</span>
+    </q-tab-panel>
+    <q-tab-panel name="config">
+      <span>zzz</span>
+    </q-tab-panel>
+    <q-tab-panel name="access">
+      <span>qqq</span>
+    </q-tab-panel>
+  </q-tab-panels>
 </div>
diff --git a/static/components/relay-details/relay-details.js b/static/components/relay-details/relay-details.js
index 1ea2b7d..19df2b6 100644
--- a/static/components/relay-details/relay-details.js
+++ b/static/components/relay-details/relay-details.js
@@ -7,7 +7,7 @@ async function relayDetails(path) {
     props: ['relay-id', 'adminkey', 'inkey'],
     data: function () {
       return {
-        items: [],
+        tab: 'info',
         formDialogItem: {
           show: false,
           data: {