lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

routing done

Browse source
This commit is contained in:
Tiago Vasconcelos 2023-03-03 16:53:35 +00:00
parent 8af6abedbe
commit 64ed5795b8
9 changed files with 78 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/components/customer-market/customer-market.html
View file

@ -10,7 +10,7 @@
v-for="(item, idx) in products"
:key="idx"
>
<product-card :product="item" @change-page="change-page"></product-card>
<product-card :product="item" @change-page="changePageM"></product-card>
</div>
</div>
</div>

6
static/components/customer-market/customer-market.js
View file

@ -8,7 +8,11 @@ async function customerMarket(path) {
data: function () {
return {}
},
methods: {},
methods: {
changePageM(page, opts) {
this.$emit('change-page', page, opts)
}
},
created() {}
})
}

93
static/components/customer-stall/customer-stall.html
View file

@ -10,94 +10,25 @@
<q-breadcrumbs-el :label="stall.name" icon="widgets"></q-breadcrumbs-el>
</q-breadcrumbs>
<q-toolbar-title></q-toolbar-title>
<q-btn dense round flat icon="shopping_cart" class="q-ml-md"></q-btn>
<shopping-cart></shopping-cart>
</q-toolbar>
<product-detail v-if="productDetail" :product="mock"></product-detail>
<div class="row">
<product-detail
class="col-12"
v-if="productDetail && product"
:product="product"
></product-detail>
<div class="col-12 q-my-lg">
<q-separator></q-separator>
</div>
</div>
<div class="row q-col-gutter-md">
<div
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
v-for="(item, idx) in products"
:key="idx"
>
<q-card class="card--product">
<q-img
:src="item.image ? item.image : '/nostrmarket/static/images/placeholder.png'"
alt="Product Image"
loading="lazy"
spinner-color="white"
fit="contain"
height="300px"
></q-img>
<q-card-section class="q-pb-xs q-pt-md">
<q-btn
round
:disabled="item.amount < 1"
color="primary"
icon="shopping_cart"
size="lg"
style="
position: absolute;
top: 0;
right: 0;
transform: translate(-50%, -50%);
"
@click=""
><q-tooltip> Add to cart </q-tooltip></q-btn
>
<div class="row no-wrap items-center">
<div class="col text-subtitle2 ellipsis-2-lines">
{{ item.name }}
</div>
</div>
<!-- <q-rating v-model="stars" color="orange" :max="5" readonly size="17px"></q-rating> -->
</q-card-section>
<q-card-section class="q-py-sm">
<div>
<div class="text-caption text-weight-bolder">
{{ item.stallName }}
</div>
<span v-if="item.currency == 'sat'">
<span class="text-h6">{{ item.price }} sats</span
><span class="q-ml-sm text-grey-6"
>BTC {{ (item.price / 1e8).toFixed(8) }}</span
>
</span>
<span v-else>
<span class="text-h6">{{ item.formatedPrice }}</span>
<span v-if="exchangeRates" class="q-ml-sm text-grey-6"
>({{ item.priceInSats }} sats)</span
>
</span>
<span
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
>{{ item.amount }} left</span
>
</div>
<div v-if="item.categories" class="text-subtitle1">
<q-chip v-for="(cat, i) in item.categories" :key="i" dense
>{{cat}}</q-chip
>
</div>
<div
class="text-caption text-grey ellipsis-2-lines"
style="min-height: 40px"
>
<p v-if="item.description">{{ item.description }}</p>
</div>
</q-card-section>
<q-separator></q-separator>
<q-card-actions>
<span>Stall: {{ item.stallName }}</span>
<div class="q-ml-auto">
<q-btn flat dense>See product</q-btn>
</div>
</q-card-actions>
</q-card>
<product-card :product="item" @change-page="changePageS"></product-card>
</div>
</div>
</div>

44
static/components/customer-stall/customer-stall.js
View file

@ -1,34 +1,32 @@
async function customerStall(path) {
const template = await loadTemplateAsync(path)
const mock = {
stall: '4M8j9KKGzUckHgb4C3pKCv',
name: 'product 1',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus commodo. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Cras ornare arcu dui vivamus. Risus pretium quam vulputate dignissim suspendisse in est ante in. Faucibus in ornare quam viverra orci sagittis eu volutpat odio.',
amount: 100,
price: '10',
images: ['https://i.imgur.com/cEfpEjq.jpeg'],
id: ['RyMbE9Hdwk9X333JKtkkNS'],
categories: ['crafts', 'robots'],
currency: 'EUR',
stallName: 'stall 1',
formatedPrice: '€10.00',
priceInSats: 0
}
Vue.component('customer-stall', {
name: 'customer-stall',
template,
props: ['stall', 'products', 'exchange-rates', 'product-detail'],
props: [
'stall',
'products',
'exchange-rates',
'product-detail',
'change-page'
],
data: function () {
return {
mock: mock
return {}
},
computed: {
product() {
if (this.productDetail) {
return this.products.find(p => p.id == this.productDetail)
}
}
},
methods: {},
created() {
console.log(this.stall)
console.log(this.products)
}
methods: {
changePageS(page, opts) {
this.$emit('change-page', page, opts)
}
},
created() {}
})
}

1
static/components/product-card/product-card.html
View file

@ -52,6 +52,7 @@
<q-card-actions>
<span>Stall: {{ product.stallName }}</span>
<span>{{ $parent.activeStall }}</span>
<div class="q-ml-auto">
<q-btn
flat

2
static/components/product-card/product-card.js
View file

@ -4,7 +4,7 @@ async function productCard(path) {
name: 'product-card',
template,
props: ['product'],
props: ['product', 'change-page'],
data: function () {
return {}
},

118
static/components/product-detail/product-detail.html
View file

@ -2,6 +2,7 @@
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
<div class="q-pa-md">
<q-carousel
v-if="product.images"
swipeable
animated
v-model="slide"
@ -48,19 +49,6 @@
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
>{{ product.amount > 0 ? 'In stock.' : 'Out of stock.' }}</span
>
<!-- <div class="text-caption text-weight-bolder q-mt-sm">
Special Price
</div>
<span class="text-h6">₹3,149</span
><span
class="q-ml-sm text-grey-6"
style="text-decoration: line-through"
>₹3,699</span
>
<span
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
>20% off</span
> -->
</div>
<div class="q-mt-md">
<q-btn
@ -78,110 +66,6 @@
</div>
</div>
<!-- RATING TO BE DONE -->
<div
class="col-lg-5 col-md-5 col-sm-12 col-xs-12 q-mt-md q-pt-xs q-pl-lg"
>
<div class="text-subtitle2">Customer rating</div>
<div class="text-h3">4.2</div>
<div>
<q-rating
v-model="rating_point"
max="5"
size="2em"
color="orange"
icon="star_border"
icon-selected="star"
icon-half="star_half"
no-dimming
readonly
/>
</div>
<div class="text-subtitle2 text-grey-8">(357 reviews)</div>
<div class="text-subtitle2 text-grey-10 q-mt-sm">
93% would recommend to a friend
</div>
<q-list dense bordered padding class="no-border q-mt-lg q-pr-xl">
<q-item style="padding-left: 0 !important" v-ripple>
<span class="text-subtitle2 q-mr-xs">5</span>
<q-icon name="star" size="1.5em" color="orange"></q-icon>
<q-linear-progress
class="q-ml-sm q-mr-sm"
style="margin-top: 5px"
size="13px"
:value="0.9"
/>
<span
style="margin-top: 2px"
class="text-caption text-weight-bold text-grey-8"
>273</span
>
</q-item>
<q-item style="padding-left: 0 !important" v-ripple>
<span class="text-subtitle2 q-mr-xs">4</span>
<q-icon name="star" size="1.5em" color="orange"></q-icon>
<q-linear-progress
class="q-ml-sm q-mr-sm"
style="margin-top: 5px"
size="13px"
:value="0.6"
/>
<span
style="margin-top: 2px"
class="text-caption text-weight-bold text-grey-8"
>&nbsp;&nbsp;69</span
>
</q-item>
<q-item style="padding-left: 0 !important" v-ripple>
<span class="text-subtitle2 q-mr-xs">3</span>
<q-icon name="star" size="1.5em" color="orange"></q-icon>
<q-linear-progress
class="q-ml-sm q-mr-sm"
style="margin-top: 5px"
size="13px"
:value="0.1"
/>
<span
style="margin-top: 2px"
class="text-caption text-weight-bold text-grey-8"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</span
>
</q-item>
<q-item style="padding-left: 0 !important" v-ripple>
<span class="text-subtitle2 q-mr-xs">2</span>
<q-icon name="star" size="1.5em" color="orange"></q-icon>
<q-linear-progress
class="q-ml-sm q-mr-sm"
style="margin-top: 5px"
size="13px"
:value="0.1"
/>
<span
style="margin-top: 2px"
class="text-caption text-weight-bold text-grey-8"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</span
>
</q-item>
<q-item style="padding-left: 0 !important" v-ripple>
<span class="text-subtitle2 q-mr-xs">1</span>
<q-icon name="star" size="1.5em" color="orange"></q-icon>
<q-linear-progress
class="q-ml-sm q-mr-sm"
style="margin-top: 5px"
size="13px"
:value="0.1"
/>
<span
style="margin-top: 2px"
class="text-caption text-weight-bold text-grey-8"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</span
>
</q-item>
</q-list>
</div>
</div>
</div>
<div class="col-12 q-mb-lg">
<q-separator></q-separator>
</div>
</div>