aiolabs/nostrmarket
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 1 Packages Wiki Activity Actions

fixup: ui

Browse source
This commit is contained in:
Arc 2025-12-24 05:32:27 +00:00
parent 053dcd1785
commit a2931d675a
4 changed files with 210 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/components/stall-list.js
View file

@ -74,6 +74,9 @@ window.app.component('stall-list', {
} }
}, },
methods: { methods: {
emitStallCount: function () {
this.$emit('stalls-updated', this.stalls.length)
},
sendStallFormData: async function () { sendStallFormData: async function () {
const stallData = { const stallData = {
name: this.stallDialog.data.name, name: this.stallDialog.data.name,
@ -101,6 +104,7 @@ window.app.component('stall-list', {
) )
this.stallDialog.show = false this.stallDialog.show = false
this.stalls.unshift(data) this.stalls.unshift(data)
this.emitStallCount()
this.$q.notify({ this.$q.notify({
type: 'positive', type: 'positive',
message: 'Stall created!' message: 'Stall created!'
@ -120,6 +124,7 @@ window.app.component('stall-list', {
) )
this.stallDialog.show = false this.stallDialog.show = false
this.stalls.unshift(data) this.stalls.unshift(data)
this.emitStallCount()
this.$q.notify({ this.$q.notify({
type: 'positive', type: 'positive',
message: 'Stall restored!' message: 'Stall restored!'
@ -151,6 +156,7 @@ window.app.component('stall-list', {
if (index !== -1) { if (index !== -1) {
this.stalls.splice(index, 1, data) this.stalls.splice(index, 1, data)
} }
this.emitStallCount()
this.$q.notify({ this.$q.notify({
type: 'positive', type: 'positive',
message: 'Stall updated!' message: 'Stall updated!'
@ -168,6 +174,7 @@ window.app.component('stall-list', {
) )
this.stalls = this.stalls.filter(s => s.id !== stall.id) this.stalls = this.stalls.filter(s => s.id !== stall.id)
this.pendingStalls = this.pendingStalls.filter(s => s.id !== stall.id) this.pendingStalls = this.pendingStalls.filter(s => s.id !== stall.id)
this.emitStallCount()
this.$q.notify({ this.$q.notify({
type: 'positive', type: 'positive',
message: 'Stall deleted' message: 'Stall deleted'
@ -291,6 +298,7 @@ window.app.component('stall-list', {
}, },
created: async function () { created: async function () {
this.stalls = await this.getStalls() this.stalls = await this.getStalls()
this.emitStallCount()
this.currencies = this.getCurrencies() this.currencies = this.getCurrencies()
this.zoneOptions = await this.getZones() this.zoneOptions = await this.getZones()
} }

3
static/js/index.js
View file

@ -12,6 +12,7 @@ window.app = Vue.createApp({
activeChatCustomer: '', activeChatCustomer: '',
orderPubkey: null, orderPubkey: null,
showKeys: false, showKeys: false,
stallCount: 0,
importKeyDialog: { importKeyDialog: {
show: false, show: false,
data: { data: {
@ -114,6 +115,7 @@ window.app = Vue.createApp({
this.shippingZones = [] this.shippingZones = []
this.activeChatCustomer = '' this.activeChatCustomer = ''
this.showKeys = false this.showKeys = false
this.stallCount = 0
}, },
createMerchant: async function (privateKey) { createMerchant: async function (privateKey) {
try { try {
@ -378,7 +380,6 @@ window.app = Vue.createApp({
}, },
goToOrders: function (stallId) { goToOrders: function (stallId) {
this.selectedStallFilter = stallId this.selectedStallFilter = stallId
this.activeTab = 'orders'
} }
}, },
created: async function () { created: async function () {

48
templates/nostrmarket/components/merchant-tab.html
View file

@ -28,19 +28,6 @@
></span> ></span>
</div> </div>
</div> </div>
<div v-if="isAdmin" class="col-12 col-sm-auto q-ml-sm-auto">
<q-btn
label="Restart Nostr Connection"
color="grey"
outline
size="sm"
@click="restartNostrConnection"
>
<q-tooltip>
Restart the connection to the nostrclient extension
</q-tooltip>
</q-btn>
</div>
</div> </div>
<div v-if="showKeys" class="q-mt-md"> <div v-if="showKeys" class="q-mt-md">
<div class="row q-mb-md"> <div class="row q-mb-md">
@ -65,40 +52,5 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-4">
<q-card flat bordered>
<q-card-section>
<h6 class="text-subtitle1 q-my-none">Nostr Market Extension</h6>
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator></q-separator>
<q-list>
<q-expansion-item group="api" dense icon="info" label="About">
<q-card>
<q-card-section>
A decentralized marketplace powered by Nostr and Lightning
Network. Create stalls, add products, and start selling with
Bitcoin.
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item
group="api"
dense
icon="link"
label="Market Client"
>
<q-card>
<q-card-section>
<a :href="marketClientUrl" target="_blank"
>Open Market Client</a
>
</q-card-section>
</q-card>
</q-expansion-item>
</q-list>
</q-card-section>
</q-card>
</div>
</div> </div>
</div> </div>

402
templates/nostrmarket/index.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %} %} {% block page %}
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-12"> <div class="col-12 col-md-7 q-gutter-y-md">
<div v-if="merchant && merchant.id"> <div v-if="merchant && merchant.id">
<q-card> <q-card>
<div class="row items-center no-wrap"> <div class="row items-center no-wrap">
@ -36,106 +36,7 @@
icon="inventory_2" icon="inventory_2"
style="min-width: 120px" style="min-width: 120px"
></q-tab> ></q-tab>
<q-tab
name="messages"
label="Messages"
icon="chat"
style="min-width: 120px"
></q-tab>
<q-tab
name="orders"
label="Orders"
icon="receipt"
style="min-width: 120px"
></q-tab>
</q-tabs> </q-tabs>
<div class="col-auto q-mr-md">
<q-btn-dropdown
color="primary"
label="Publish"
icon="publish"
unelevated
>
<q-list>
<q-item clickable v-close-popup @click="publishNip15">
<q-item-section avatar>
<q-icon name="store" />
</q-item-section>
<q-item-section>
<q-item-label>Publish NIP-15</q-item-label>
<q-item-label caption
>Publish stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="sell" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Publish NIP-99</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="refreshNip15">
<q-item-section avatar>
<q-icon name="refresh" />
</q-item-section>
<q-item-section>
<q-item-label>Refresh NIP-15 from Nostr</q-item-label>
<q-item-label caption
>Sync stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="refresh" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Refresh NIP-99 from Nostr</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="deleteNip15">
<q-item-section avatar>
<q-icon name="delete_forever" color="negative" />
</q-item-section>
<q-item-section>
<q-item-label class="text-negative"
>Delete NIP-15 from Nostr</q-item-label
>
<q-item-label caption
>Remove stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="delete_forever" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Delete NIP-99 from Nostr</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div> </div>
<q-separator></q-separator> <q-separator></q-separator>
@ -177,6 +78,7 @@
@customer-selected-for-order="customerSelectedForOrder" @customer-selected-for-order="customerSelectedForOrder"
@go-to-products="goToProducts" @go-to-products="goToProducts"
@go-to-orders="goToOrders" @go-to-orders="goToOrders"
@stalls-updated="stallCount = $event"
></stall-list> ></stall-list>
</q-tab-panel> </q-tab-panel>
@ -191,31 +93,23 @@
</q-tab-panel> </q-tab-panel>
<!-- Messages Tab --> <!-- Messages Tab -->
<q-tab-panel name="messages">
<direct-messages
ref="directMessagesRef"
:inkey="g.user.wallets[0].inkey"
:adminkey="g.user.wallets[0].adminkey"
:active-chat-customer="activeChatCustomer"
:merchant-id="merchant.id"
@customer-selected="filterOrdersForCustomer"
@order-selected="showOrderDetails"
>
</direct-messages>
</q-tab-panel>
<!-- Orders Tab -->
<q-tab-panel name="orders">
<order-list
ref="orderListRef"
:adminkey="g.user.wallets[0].adminkey"
:inkey="g.user.wallets[0].inkey"
:customer-pubkey-filter="orderPubkey"
@customer-selected="customerSelectedForOrder"
></order-list>
</q-tab-panel>
</q-tab-panels> </q-tab-panels>
</q-card> </q-card>
<q-card class="q-mt-md">
<q-card-section>
<div class="text-h6">Orders</div>
</q-card-section>
<q-separator></q-separator>
<q-card-section class="q-pt-none">
<order-list
ref="orderListRef"
:adminkey="g.user.wallets[0].adminkey"
:inkey="g.user.wallets[0].inkey"
:customer-pubkey-filter="orderPubkey"
@customer-selected="customerSelectedForOrder"
></order-list>
</q-card-section>
</q-card>
</div> </div>
<q-card v-else> <q-card v-else>
<q-card-section> <q-card-section>
@ -278,90 +172,194 @@
<div v-if="g.user.admin" class="col-12 q-mb-lg"> <div v-if="g.user.admin" class="col-12 q-mb-lg">
<q-card> <q-card>
<q-card-section class="q-pa-md"> <q-card-section class="q-pa-md">
<q-btn-dropdown <div class="row items-center no-wrap q-col-gutter-sm">
:color="nostrStatusColor" <div class="col">
:label="nostrStatusLabel" <q-btn-dropdown
icon="sync" :color="nostrStatusColor"
split :label="nostrStatusLabel"
@click="restartNostrConnection" icon="sync"
> split
<q-list> @click="restartNostrConnection"
<q-item clickable v-close-popup @click="restartNostrConnection"> >
<q-item-section avatar> <q-list>
<q-icon name="refresh" color="primary"></q-icon> <q-item clickable v-close-popup @click="restartNostrConnection">
</q-item-section> <q-item-section avatar>
<q-item-section> <q-icon name="refresh" color="primary"></q-icon>
<q-item-label>Restart Connection</q-item-label> </q-item-section>
<q-item-label caption> <q-item-section>
Reconnect to the nostrclient extension <q-item-label>Restart Connection</q-item-label>
</q-item-label> <q-item-label caption>
</q-item-section> Reconnect to the nostrclient extension
</q-item> </q-item-label>
<q-item clickable v-close-popup @click="checkNostrStatus(true)"> </q-item-section>
<q-item-section avatar> </q-item>
<q-icon name="wifi_find" color="primary"></q-icon> <q-item clickable v-close-popup @click="checkNostrStatus(true)">
</q-item-section> <q-item-section avatar>
<q-item-section> <q-icon name="wifi_find" color="primary"></q-icon>
<q-item-label>Check Status</q-item-label> </q-item-section>
<q-item-label caption> <q-item-section>
Check connection to nostrclient <q-item-label>Check Status</q-item-label>
</q-item-label> <q-item-label caption>
</q-item-section> Check connection to nostrclient
</q-item> </q-item-label>
<q-separator></q-separator> </q-item-section>
<q-item> </q-item>
<q-item-section> <q-separator></q-separator>
<q-item-label caption> <q-item>
<strong>Status:</strong> <q-item-section>
<q-badge <q-item-label caption>
:color="nostrStatus.connected ? 'green' : 'red'" <strong>Status:</strong>
class="q-ml-xs" <q-badge
v-text="nostrStatus.connected ? 'Connected' : 'Disconnected'" :color="nostrStatus.connected ? 'green' : 'red'"
></q-badge> class="q-ml-xs"
</q-item-label> v-text="nostrStatus.connected ? 'Connected' : 'Disconnected'"
<q-item-label ></q-badge>
v-if="nostrStatus.relays_total > 0" </q-item-label>
caption <q-item-label
class="q-mt-xs" v-if="nostrStatus.relays_total > 0"
> caption
<strong>Relays:</strong>&nbsp; class="q-mt-xs"
<span v-text="nostrStatus.relays_connected"></span> >
of <strong>Relays:</strong>&nbsp;
<span v-text="nostrStatus.relays_total"></span> <span v-text="nostrStatus.relays_connected"></span>
connected of
</q-item-label> <span v-text="nostrStatus.relays_total"></span>
<q-item-label connected
v-if="nostrStatus.error" </q-item-label>
caption <q-item-label
class="text-negative q-mt-xs" v-if="nostrStatus.error"
v-text="nostrStatus.error" caption
></q-item-label> class="text-negative q-mt-xs"
</q-item-section> v-text="nostrStatus.error"
</q-item> ></q-item-label>
</q-list> </q-item-section>
</q-btn-dropdown> </q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="col-auto">
<div class="inline-block">
<q-btn-dropdown
color="primary"
label="Publish"
icon="publish"
unelevated
:disable="stallCount === 0"
>
<q-list>
<q-item clickable v-close-popup @click="publishNip15">
<q-item-section avatar>
<q-icon name="store" />
</q-item-section>
<q-item-section>
<q-item-label>Publish NIP-15</q-item-label>
<q-item-label caption
>Publish stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="sell" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Publish NIP-99</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="refreshNip15">
<q-item-section avatar>
<q-icon name="refresh" />
</q-item-section>
<q-item-section>
<q-item-label>Refresh NIP-15 from Nostr</q-item-label>
<q-item-label caption
>Sync stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="refresh" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Refresh NIP-99 from Nostr</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="deleteNip15">
<q-item-section avatar>
<q-icon name="delete_forever" color="negative" />
</q-item-section>
<q-item-section>
<q-item-label class="text-negative"
>Delete NIP-15 from Nostr</q-item-label
>
<q-item-label caption
>Remove stalls and products</q-item-label
>
</q-item-section>
</q-item>
<q-item disable>
<q-item-section avatar>
<q-icon name="delete_forever" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-grey"
>Delete NIP-99 from Nostr</q-item-label
>
<q-item-label caption
>Classified listings (coming soon)</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-tooltip v-if="stallCount === 0">
First create a stall and add products.
</q-tooltip>
</div>
</div>
</div>
</q-card-section> </q-card-section>
</q-card> </q-card>
</div> </div>
<div class="col-12"> <div class="col-12">
<q-card> <q-card>
<q-img <q-expansion-item
src="/nostrmarket/static/market/images/nostr-cover.png" icon="info"
:ratio="3" label="Details"
fit="cover" header-class="text-grey"
></q-img> expand-separator
<q-card-section> >
<div class="text-h6 q-mb-sm">Nostr Market</div> <q-img
<div class="text-body2 text-grey"> src="/nostrmarket/static/market/images/nostr-cover.png"
A decentralized marketplace extension for LNbits implementing the :ratio="3"
NIP-15 protocol. Create stalls, list products, and accept Lightning fit="cover"
payments while communicating with customers via encrypted Nostr ></q-img>
direct messages. <q-card-section>
</div> <div class="text-h6 q-mb-sm">Nostr Market</div>
</q-card-section> <div class="text-body2 text-grey">
<q-card-section class="q-pa-none"> A decentralized marketplace extension for LNbits implementing the
<q-list> {% include "nostrmarket/_api_docs.html" %} </q-list> NIP-15 protocol. Create stalls, list products, and accept Lightning
</q-card-section> payments while communicating with customers via encrypted Nostr
direct messages.
</div>
</q-card-section>
<q-card-section class="q-pa-none">
<q-list> {% include "nostrmarket/_api_docs.html" %} </q-list>
</q-card-section>
</q-expansion-item>
</q-card> </q-card>
</div> </div>
<div v-if="merchant && merchant.id" class="col-12"> <div v-if="merchant && merchant.id" class="col-12">