239 lines
No EOL
11 KiB
HTML
239 lines
No EOL
11 KiB
HTML
{% extends "public.html" %} {% block page %}
|
|
<q-layout view="lHh Lpr lff">
|
|
<q-page-container class="q-mr-md">
|
|
<div class="row q-mb-sm">
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
|
|
<div class="row q-mb-md q-pa-none">
|
|
<q-toolbar class="col-lg-1 col-md-1 col-sm-0 q-pl-none">
|
|
<q-avatar rounded size="64px" class="q-ma-none q-pa-none gt-sm">
|
|
<img :src="logoImage">
|
|
</q-avatar>
|
|
</q-toolbar>
|
|
<q-toolbar class="col-lg-6 col-md-5 col-sm-12 auto-width">
|
|
<q-input class="rounded-pill" style="width:100%;" rounded 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>
|
|
<q-toolbar class="col-lg-5 col-md-6 col-sm-12 q-ma-none">
|
|
<div class="float-right">
|
|
<q-btn color="gray" icon="travel_explore" flat size="lg"
|
|
@click="setActivePage('search-nostr')"><q-tooltip>Search
|
|
for products on Nostr</q-tooltip></q-btn>
|
|
<q-btn color="gray" icon="settings" flat size="lg" @click="setActivePage('market-config')"><q-tooltip>
|
|
Settings</q-tooltip></q-btn>
|
|
<q-btn v-if="account" @click="setActivePage('user-config')" color="gray" icon="perm_identity" flat
|
|
size="lg"><q-tooltip>User
|
|
User Config</q-tooltip></q-btn>
|
|
<q-btn v-else @click="accountDialog.show = true" color="gray" icon="person_add" flat
|
|
size="lg"><q-tooltip>User
|
|
Login</q-tooltip></q-btn>
|
|
<q-btn @click="setActivePage('user-chat')" color="gray" icon="chat" flat
|
|
size="lg"><q-tooltip>Chat</q-tooltip></q-btn>
|
|
<q-btn @click="setActivePage('customer-orders')" color="gray" icon="receipt_long" flat
|
|
size="lg"><q-tooltip>Orders</q-tooltip></q-btn>
|
|
<q-btn color="gray" icon="shopping_cart" dense round flat size="lg"
|
|
@click="setActivePage('shopping-cart-list')">
|
|
<q-tooltip>Shopping Cart</q-tooltip>
|
|
|
|
<q-badge v-if="allCartsItemCount" color="secondary" floating>
|
|
<span v-text="allCartsItemCount"></span>
|
|
</q-badge>
|
|
</q-btn>
|
|
</div>
|
|
|
|
</q-toolbar>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
</div>
|
|
<div class="row q-mb-sm">
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
<div class="col-lg-8 col-md-10 col-sm-12">
|
|
|
|
<div v-if="products?.length" class="gt-sm">
|
|
<q-virtual-scroll :items="allCategories" virtual-scroll-horizontal>
|
|
<template v-slot="{ item, index }">
|
|
<q-chip :key="index" :color="item.selected ? 'grey': ''" class="cursor-pointer q-mb-md">
|
|
<span v-text="item.category" @click="toggleCategoryFilter(item.category)"></span>
|
|
<q-badge @click="toggleCategoryFilter(item.category)" rounded class="q-ml-sm" color="secondary"> <span
|
|
v-text="item.count"></span></q-badge>
|
|
</q-chip>
|
|
</template>
|
|
</q-virtual-scroll>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
</div>
|
|
|
|
<div class="row q-mb-sm">
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
|
|
<q-banner class="row q-pa-none q-mb-lg gt-sm shadow-2">
|
|
<q-img v-if="bannerImage" :src="bannerImage" class="rounded-borders"
|
|
style="width: 100%; height: 250px" cover></q-img>
|
|
</q-banner>
|
|
<div>
|
|
<q-breadcrumbs class="cursor">
|
|
<q-breadcrumbs-el :label="'Market'" icon="home" @click="navigateTo('market')" class="cursor-pointer">
|
|
<q-checkbox v-model="groupByStall" v-if="activePage === 'market'" class="q-pl-md float-right" size="xs"
|
|
val="xs" label="Group by stalls"></q-checkbox>
|
|
|
|
</q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'customer-stall'" :label="stallName"
|
|
@click="navigateTo('stall', {stall: activeStall})" icon="storefront"
|
|
class="cursor-pointer"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'customer-stall' && activeProduct" :label="productName"
|
|
class="cursor-pointer" icon="widgets"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'shopping-cart-list'" label="Shoping Cart"
|
|
icon="shopping_cart"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'customer-orders'" label="Orders"
|
|
icon="receipt_long"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'market-config'" label="Settings" icon="settings"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'user-config'" label="User Config"
|
|
icon="perm_identity"></q-breadcrumbs-el>
|
|
<q-breadcrumbs-el v-if="activePage === 'user-chat'" label="User Chat" icon="chat"></q-breadcrumbs-el>
|
|
</q-breadcrumbs>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
|
|
</div>
|
|
|
|
<div class="row q-mb-md">
|
|
<div class="col-lg-2 col-md-1 col-sm-0"></div>
|
|
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
|
|
<q-separator class="q-mt-sm q-mb-md"></q-separator>
|
|
|
|
<market-config v-if="activePage === 'market-config'" :merchants="merchants" @add-merchant="addMerchant"
|
|
@remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay" @remove-relay="removeRelay"
|
|
:config="configData" @ui-config-update="updateUiConfig"></market-config>
|
|
|
|
<user-config v-else-if="activePage === 'user-config'"></user-config>
|
|
|
|
<user-chat v-else-if="activePage === 'user-chat'"></user-chat>
|
|
|
|
<shopping-cart-list v-else-if="activePage === 'shopping-cart-list'" :carts="shoppingCarts"
|
|
@add-to-cart="addProductToCart" @remove-from-cart="removeProductFromCart" @remove-cart="removeCart"
|
|
@checkout-cart="checkoutStallCart"></shopping-cart-list>
|
|
|
|
<shopping-cart-checkout v-else-if="activePage === 'shopping-cart-checkout'" :cart="checkoutCart"
|
|
:stall="checkoutStall" :customer-pubkey="account?.pubkey" @login-required="openAccountDialog"
|
|
@place-order="placeOrder" @change-page="navigateTo"></shopping-cart-checkout>
|
|
|
|
<customer-orders v-else-if="activePage === 'customer-orders'" :orders="orders" :products="products"
|
|
:stalls="stalls" :merchants="merchants" @show-invoice="showInvoiceQr"></customer-orders>
|
|
|
|
<customer-stall v-else-if="activePage === 'customer-stall'"
|
|
:stall="stalls.find(stall => stall.id == activeStall)" :products="filterProducts"
|
|
:stall-products="products.filter(p => p.stall_id == activeStall)" :product-detail="activeProduct"
|
|
:relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"
|
|
@login-dialog="openAccountDialog" @change-page="navigateTo" @add-to-cart="addProductToCart"></customer-stall>
|
|
|
|
<div v-else>
|
|
<customer-stall-list v-if="groupByStall" :stalls="filterStalls"
|
|
@change-page="navigateTo"></customer-stall-list>
|
|
|
|
<customer-market v-else :search-nostr="searchNostr" :relays="relays" :filtered-products="filterProducts"
|
|
:search-text="searchText" :filter-categories="filterCategories" @change-page="navigateTo"
|
|
@update-data="updateData" @add-to-cart="addProductToCart"></customer-market>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
|
|
</div>
|
|
</q-page-container>
|
|
|
|
<!-- END CHECKOUT DIALOG -->
|
|
<!-- INVOICE DIALOG -->
|
|
<q-dialog v-model="qrCodeDialog.show" position="top">
|
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
|
<div class="text-center q-mb-lg">
|
|
<div v-if="qrCodeDialog.data.message" class="q-my-lg">
|
|
<strong><span v-text="qrCodeDialog.data.message"></span> </strong>
|
|
</div>
|
|
<a v-else :href="'lightning:' + qrCodeDialog.data?.payment_request">
|
|
<q-responsive v-if="qrCodeDialog.data.payment_request" :ratio="1" class="q-mx-xl">
|
|
<qrcode :value="qrCodeDialog.data.payment_request" :options="{width: 340}" class="rounded-borders"></qrcode>
|
|
</q-responsive>
|
|
<div v-else>
|
|
<q-spinner color="primary" size="2.55em"></q-spinner>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
<div class="row q-mt-lg">
|
|
<q-btn v-if="qrCodeDialog.data.payment_request" outline color="grey"
|
|
@click="copyText(qrCodeDialog.data.payment_request)">Copy invoice</q-btn>
|
|
<q-btn flat v-close-popup color="grey" class="q-ml-auto">Close</q-btn>
|
|
</div>
|
|
</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/customer-stall-list/customer-stall-list.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/shopping-cart-list/shopping-cart-list.js') }}"></script>
|
|
<script
|
|
src="{{ url_for('nostrmarket_static', path='components/shopping-cart-checkout/shopping-cart-checkout.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/customer-orders/customer-orders.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/chat-dialog/chat-dialog.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/market-config/market-config.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/user-config/user-config.js') }}"></script>
|
|
<script src="{{ url_for('nostrmarket_static', path='components/user-chat/user-chat.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;
|
|
}
|
|
|
|
.q-item__label--caption {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %} |