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

<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 v-if="relay">
        <div class="row items-center no-wrap q-mb-md">
          <div class="col-3 q-pr-lg">Name:</div>
          <div class="col-6 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.name"
              type="text"
            ></q-input>
          </div>
          <div class="col-3"></div>
        </div>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col-3 q-pr-lg">Description:</div>
          <div class="col-6 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.description"
              type="text"
            ></q-input>
          </div>
          <div class="col-3"></div>
        </div>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col-3 q-pr-lg">Relay Public Key:</div>
          <div class="col-6 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.pubkey"
              type="text"
            ></q-input>
          </div>
          <div class="col-3"></div>
        </div>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col-3 q-pr-lg">Contact:</div>
          <div class="col-6 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.contact"
              type="text"
            ></q-input>
          </div>
          <div class="col-3"></div>
        </div>
      </div>
    </q-tab-panel>
    <q-tab-panel name="payment">
      <div v-if="relay">
        <div class="row items-center no-wrap q-mb-md">
          <div class="col-3 q-pr-lg">Require Payment:</div>
          <div class="col-3 q-pr-lg">
            <q-toggle
              color="secodary"
              v-model="relay.config.isPaidRelay"
              @input="togglePaidRelay"
            ></q-toggle>
          </div>
          <div class="col-6">
            <q-select
              v-if="relay.config.isPaidRelay"
              filled
              dense
              emit-value
              v-model="relay.config.wallet"
              :options="walletOptions"
              label="Wallet *"
            >
            </q-select>
          </div>
        </div>
        <div
          v-if="relay.config.isPaidRelay"
          class="row items-center no-wrap q-mb-md"
        >
          <div class="col-3 q-pr-lg">Cost to join (sats):</div>
          <div class="col-3 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.config.costToJoin"
              type="number"
              min="0"
            ></q-input>
          </div>
          <div class="col-6">
            <q-badge
              v-if="relay.config.costToJoin == 0"
              color="green"
              class="float-left"
              ><span>Free to join</span>
            </q-badge>
          </div>
        </div>
        <div
          v-if="relay.config.isPaidRelay"
          class="row items-center no-wrap q-mb-md"
        >
          <div class="col-3 q-pr-lg">Cost per Kilo Byte (sats):</div>
          <div class="col-3 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.config.storageCostPerKb"
              type="number"
              min="0"
            ></q-input>
          </div>
          <div class="col-6">
            <q-badge
              v-if="relay.config.storageCostPerKb == 0"
              color="green"
              class="float-left"
              ><span>Unlimited storage</span>
            </q-badge>
          </div>
        </div>
        <div
          v-if="relay.config.isPaidRelay && relay.config.storageCostPerKb == 0"
          class="row items-center no-wrap q-mb-md"
        >
          <div class="col-3 q-pr-lg">Free storage (kb):</div>
          <div class="col-3 q-pr-lg">
            <q-input
              filled
              dense
              v-model.trim="relay.config.freeStorage"
              type="number"
              min="0"
            ></q-input>
          </div>
          <div class="col-6">
            <q-badge
              v-if="relay.config.freeStorage == 0"
              color="orange"
              class="float-left"
              ><span>No free storage</span>
            </q-badge>
          </div>
        </div>
      </div>
    </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 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>