nostrrelay/static/components/relay-details/relay-details.html
2023-02-09 14:33:19 +02:00

530 lines
16 KiB
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="allowed" label="Allowed"></q-tab>
<q-tab name="blocked" label="Blocked"></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">Free storage:</div>
<div class="col-2 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.freeStorageValue"
type="number"
hint="Value"
min="0"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.freeStorageUnit"
type="text"
hint="Unit"
:options="storageUnits"
></q-select>
</div>
<div class="col-5">
<q-badge
v-if="relay.config.freeStorageValue == 0"
color="orange"
class="float-left q-mb-md"
><span>No free storage</span>
</q-badge>
</div>
</div>
<q-separator></q-separator>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Paid Plan:</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-badge
v-if="!relay.config.isPaidRelay && relay.config.freeStorageValue == 0"
color="orange"
class="float-left q-mb-md"
><span>No data will be stored, only broadcast</span>
</q-badge>
<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 && relay.config.wallet">
<div 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 class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Storage 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>
</div>
</q-tab-panel>
<q-tab-panel name="config">
<div v-if="relay">
<!-- <div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Free Storage:</div>
<div class="col-2 q-pr-lg">
<q-toggle
color="secodary"
v-model="relay.config.hasFreeStorage"
></q-toggle>
</div>
<div class="col-2 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.freeStorageAmount"
type="number"
min="0"
hint="Value"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.freeStorageXXX"
type="text"
hint="Unit"
:options="storageUnits"
></q-select>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtSecondsPast"
type="number"
hint="Seconds"
:options="fullStorageActions"
></q-select>
</div>
<div class="col-1 q-pb-md">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
NIP 22: Lower limit within which a relay will consider an
event's created_at to be acceptable.
</q-tooltip></q-icon
>
</div>
</div> -->
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Created At in Past:</div>
<div class="col-2 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.createdAtDaysPast"
type="number"
min="0"
hint="Days"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtHoursPast"
type="number"
hint="Hours"
:options="hours"
></q-select>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtMinutesPast"
type="number"
hint="Minutes"
:options="range60"
></q-select>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtSecondsPast"
type="number"
hint="Seconds"
:options="range60"
></q-select>
</div>
<div class="col-1 q-pb-md">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
NIP 22: Lower limit within which a relay will consider an
event's created_at to be acceptable.
</q-tooltip></q-icon
>
</div>
</div>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Created At in Future:</div>
<div class="col-2 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.createdAtDaysFuture"
type="number"
min="0"
hint="Days"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtHoursFuture"
type="number"
hint="Hours"
:options="hours"
></q-select>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtMinutesFuture"
type="number"
hint="Minutes"
:options="range60"
></q-select>
</div>
<div class="col-2 q-pr-lg">
<q-select
filled
dense
v-model="relay.config.createdAtSecondsFuture"
type="number"
hint="Seconds"
:options="range60"
></q-select>
</div>
<div class="col-1 q-pb-md">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
NIP 22: Upper limit within which a relay will consider an
event's created_at to be acceptable.
</q-tooltip></q-icon
>
</div>
</div>
<q-separator></q-separator>
<div class="row items-center no-wrap q-mb-md q-mt-md">
<div class="col-3 q-pr-lg">Full Storage Action:</div>
<div class="col-3 q-pr-lg">
<q-select
filled
dense
emit-value
v-model="relay.config.fullStorageAction"
type="text"
:options="fullStorageActions"
></q-select>
</div>
<div class="col-6">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
Action to be taken when the storage limit (if any) has been
reached.
</q-tooltip></q-icon
>
<q-badge
v-if="relay.config.limitPerFilter == 0"
color="green"
class="float-left"
><span>No Limit</span>
</q-badge>
</div>
</div>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Limit per filter:</div>
<div class="col-3 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.limitPerFilter"
type="number"
min="0"
></q-input>
</div>
<div class="col-6">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
Maximum number of events to be returned in the initial query
(default 1000)
</q-tooltip></q-icon
>
<q-badge
v-if="relay.config.limitPerFilter == 0"
color="green"
class="float-left"
><span>No Limit</span>
</q-badge>
</div>
</div>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Max Filters (per client):</div>
<div class="col-3 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.maxClientFilters"
type="number"
min="0"
></q-input>
</div>
<div class="col-6">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
Limit the number of filters that a client can have. Prevents
relay from being abused by clients with extremly high number of
fiters.
</q-tooltip></q-icon
>
<q-badge v-if="relay.config.maxClientFilters == 0" color="green"
><span>Unlimited Filters</span>
</q-badge>
</div>
</div>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Max events per second:</div>
<div class="col-3 q-pr-lg">
<q-input
filled
dense
v-model.trim="relay.config.maxEventsPerSecond"
type="number"
min="0"
></q-input>
</div>
<div class="col-6">
<q-icon name="info" class="cursor-pointer">
<q-tooltip>
Limits the rate at which events are accepted by the relay.
Prevent clients from clogging the relay.
</q-tooltip></q-icon
>
<q-badge v-if="relay.config.maxEventsPerSecond == 0" color="green"
><span>No Limit</span>
</q-badge>
</div>
</div>
</div>
</q-tab-panel>
<q-tab-panel name="allowed">
<div v-if="relay">
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Allowed Public Key</div>
<div class="col-7 q-pr-lg">
<q-input
filled
dense
v-model.trim="allowedPubkey"
type="text"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-btn
unelevated
color="secondary"
class="float-right"
@click="allowPublicKey()"
>Add</q-btn
>
</div>
</div>
<div
:key="p"
v-for="p in relay.config.allowedPublicKeys"
class="row q-mb-xs"
>
<div class="col-3 q-pr-lg"></div>
<div class="col-9 q-pr-lg">
{{p}}
<q-btn
size="sm"
unelevated
color="pink"
icon="cancel"
class="float-right"
@click="deleteAllowedPublicKey(p)"
></q-btn>
</div>
</div>
</div>
</q-tab-panel>
<q-tab-panel name="blocked">
<div v-if="relay">
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">Blocked Public Key</div>
<div class="col-7 q-pr-lg">
<q-input
filled
dense
v-model.trim="blockedPubkey"
type="text"
></q-input>
</div>
<div class="col-2 q-pr-lg">
<q-btn
unelevated
color="secondary"
class="float-right"
@click="blockPublicKey()"
>Add</q-btn
>
</div>
</div>
<div
:key="p"
v-for="p in relay.config.blockedPublicKeys"
class="row q-mb-xs"
>
<div class="col-3 q-pr-lg"></div>
<div class="col-9 q-pr-lg">
{{p}}
<q-btn
unelevated
size="sm"
color="pink"
icon="cancel"
class="float-right"
@click="deleteBlockedPublicKey(p)"
></q-btn>
</div>
</div>
</div>
</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>