310 lines
10 KiB
HTML
310 lines
10 KiB
HTML
{% extends "public.html" %} {% block page %}
|
|
<q-layout view="hHh Lpr lff">
|
|
<q-drawer v-model="drawer" side="left">
|
|
<q-toolbar class="bg-primary text-white shadow-2">
|
|
<q-toolbar-title>Settings</q-toolbar-title>
|
|
<q-btn flat round dense icon="close" @click="drawer = !drawer"></q-btn>
|
|
</q-toolbar>
|
|
<div>
|
|
<div v-if="account" class="bg-transparent q-ma-md">
|
|
<q-avatar size="56px" class="q-mb-sm">
|
|
<img
|
|
:src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'"
|
|
/>
|
|
</q-avatar>
|
|
{%raw%}
|
|
<div class="text-weight-bold">
|
|
{{ `${account.pubkey.slice(0, 5)}...${account.pubkey.slice(-5)}` }}
|
|
</div>
|
|
<div v-if="accountMetadata && accountMetadata.name">
|
|
{{ accountMetadata.name }}
|
|
</div>
|
|
{%endraw%}
|
|
<q-btn
|
|
label="Delete data"
|
|
class="q-mt-md"
|
|
color="primary"
|
|
@click="deleteAccount"
|
|
><q-tooltip>Delete account data</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
<div v-else class="q-pa-md">
|
|
<q-btn
|
|
label="Login"
|
|
class="q-mt-md"
|
|
color="primary"
|
|
@click="accountDialog.show = true"
|
|
><q-tooltip>Login or Create account</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
<q-separator></q-separator>
|
|
</div>
|
|
<div class="q-pa-md">
|
|
<q-list padding>
|
|
<q-expansion-item
|
|
expand-separator
|
|
icon="perm_identity"
|
|
label="Merchants"
|
|
caption="Add/Remove pubkeys"
|
|
>
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-input
|
|
filled
|
|
v-model="inputPubkey"
|
|
@keydown.enter="addPubkey(null)"
|
|
type="text"
|
|
label="Pubkey/Npub"
|
|
hint="Add merchants"
|
|
>
|
|
<q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
|
|
</q-input>
|
|
<q-list class="q-mt-md">
|
|
<q-item v-for="pub in Array.from(pubkeys)" :key="pub">
|
|
{%raw%}
|
|
<q-item-section avatar>
|
|
<q-avatar>
|
|
<img
|
|
v-if="profiles.get(pub) && profiles.get(pub)?.picture"
|
|
:src="profiles.get(pub).picture"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="/nostrmarket/static/images/blank-avatar.webp"
|
|
/>
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label
|
|
v-if="profiles.get(pub) && profiles.get(pub)?.name"
|
|
>{{ profiles.get(pub).name }}</q-item-label
|
|
>
|
|
<q-item-label v-else
|
|
>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
|
|
}}</q-item-label
|
|
>
|
|
<q-tooltip>{{ pub }}</q-tooltip>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-btn
|
|
class="gt-xs"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
round
|
|
icon="delete"
|
|
@click="removePubkey(pub)"
|
|
/>
|
|
</q-item-section>
|
|
{%endraw%}
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-expansion-item>
|
|
<q-expansion-item
|
|
expand-separator
|
|
icon="perm_identity"
|
|
label="Relays"
|
|
caption="Add/Remove relays"
|
|
>
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-input
|
|
filled
|
|
v-model="inputRelay"
|
|
@keydown.enter="addRelay"
|
|
type="text"
|
|
label="Relay URL"
|
|
hint="Add relays"
|
|
>
|
|
<q-btn @click="addRelay" dense flat icon="add"></q-btn>
|
|
</q-input>
|
|
<q-list dense class="q-mt-md">
|
|
<q-item v-for="url in Array.from(relays)" :key="url">
|
|
{%raw%}
|
|
<q-item-section>
|
|
<q-item-label>{{ url }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-btn
|
|
class="gt-xs"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
round
|
|
icon="delete"
|
|
@click="removeRelay(url)"
|
|
/>
|
|
</q-item-section>
|
|
{%endraw%}
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-expansion-item>
|
|
</q-list>
|
|
</div>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<div class="row q-mb-md">
|
|
<div class="col-12 q-gutter-y-md">
|
|
<q-toolbar>
|
|
<q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
|
|
{%raw%}
|
|
<q-toolbar-title style="text-transform: capitalize">
|
|
{{ activePage }}
|
|
</q-toolbar-title>
|
|
{%endraw%}
|
|
<q-space></q-space>
|
|
<q-btn
|
|
v-if="!activeStall"
|
|
color="primary"
|
|
label="Search"
|
|
icon="travel_explore"
|
|
@click="searchNostr = !searchNostr"
|
|
><q-tooltip>Search for products on Nostr</q-tooltip></q-btn
|
|
>
|
|
<q-input
|
|
class="q-ml-md"
|
|
standout
|
|
square
|
|
dense
|
|
outlined
|
|
clearable
|
|
v-model.trim="searchText"
|
|
label="Filter products"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon v-if="!searchText" name="search" />
|
|
</template>
|
|
</q-input>
|
|
</q-toolbar>
|
|
</div>
|
|
</div>
|
|
<customer-stall
|
|
v-if="!isLoading && activeStall"
|
|
:stall="stalls.find(stall => stall.id == activeStall)"
|
|
:products="filterProducts"
|
|
:product-detail="activeProduct"
|
|
:relays="relays"
|
|
:account="account"
|
|
@change-page="navigateTo"
|
|
></customer-stall>
|
|
<customer-market
|
|
v-else
|
|
:search-nostr="searchNostr"
|
|
:relays="relays"
|
|
:products="filterProducts"
|
|
@change-page="navigateTo"
|
|
@update-data="updateData"
|
|
></customer-market>
|
|
</q-page-container>
|
|
<!-- ACCOUNT DIALOG -->
|
|
<q-dialog v-model="accountDialog.show" persistent>
|
|
<q-card style="min-width: 350px">
|
|
<q-card-section class="row items-center q-pb-none">
|
|
<div class="text-h6">Account Setup</div>
|
|
<q-space></q-space>
|
|
<q-btn icon="close" flat round dense v-close-popup></q-btn>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<p>Type your Nostr private key or generate a new one.</p>
|
|
<small> You can also use a Nostr-capable extension. </small>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<q-input
|
|
dense
|
|
label="nsec/npub/hex"
|
|
v-model="accountDialog.data.key"
|
|
autofocus
|
|
@keyup.enter="createAccount"
|
|
:error="accountDialog.data.key && !isValidKey"
|
|
hint="Enter you private key (recommended) or public key"
|
|
></q-input>
|
|
|
|
<q-item tag="label">
|
|
<q-item-section avatar top>
|
|
<q-checkbox v-model="accountDialog.data.watchOnly"></q-checkbox>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Is this a Public Key?</q-item-label>
|
|
<q-item-label caption>
|
|
If not using an Nostr capable extension, you'll have to sign
|
|
events manually! Better to use a Private Key that you can delete
|
|
later, or just generate an ephemeral key pair to use in the
|
|
Marketplace!
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="text-primary">
|
|
<q-btn
|
|
v-if="hasExtension"
|
|
flat
|
|
label="Use Public Key from Extension"
|
|
@click="() => createAccount(true)"
|
|
></q-btn>
|
|
<q-btn
|
|
v-if="isValidKey"
|
|
label="Add key"
|
|
color="primary"
|
|
@click="() => createAccount()"
|
|
></q-btn>
|
|
<q-btn v-else flat label="Generate" @click="generateKeyPair"></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-layout>
|
|
{% endblock %} {% block scripts %}
|
|
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
|
|
|
|
<script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/product-card/product-card.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/customer-market/customer-market.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/customer-stall/customer-stall.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/product-detail/product-detail.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/shopping-cart/shopping-cart.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/chat-dialog/chat-dialog.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='js/market.js') }}"></script>
|
|
<style scoped>
|
|
.q-field__native span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chat-container {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
/*height: calc(100vh - 200px);*/
|
|
height: 70vh;
|
|
}
|
|
|
|
.chat-box {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
margin-left: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.chat-messages {
|
|
width: auto;
|
|
}
|
|
|
|
.chat-other {
|
|
}
|
|
|
|
.chat-input {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: end;
|
|
margin-top: 1rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|