marketplace html skeleton

lnbits/extensions/diagonalley/templates/diagonalley/index.html

@@ -1818,7 +1818,7 @@
         this.getProducts()
         this.getZones()
         this.getOrders()
-        this.getMarkets() // NOT YET IMPLEMENTED
+        this.getMarkets()
         this.customerKeys = [
           'cb4c0164fe03fcdadcbfb4f76611c71620790944c24f21a1cd119395cdedfe1b',
           'a9c17358a6dc4ceb3bb4d883eb87967a66b3453a0f3199f0b1c8eef8070c6a07'

lnbits/extensions/diagonalley/templates/diagonalley/market.html

@@ -0,0 +1,419 @@
+{% extends "public.html" %} {% block page %}
+<div class="row q-mb-md">
+  <div class="col-12 q-gutter-y-md">
+    <q-toolbar class="row">
+      <div class="col">
+        <q-toolbar-title> {{ market.name }} </q-toolbar-title>
+      </div>
+      <div class="col q-mx-md">
+        <q-input
+          class="float-left full-width q-ml-md"
+          standout
+          square
+          dense
+          outlined
+          clearable
+          v-model.trim="searchText"
+          label="Search for products"
+        >
+          <template v-slot:append>
+            <q-icon v-if="!searchText" name="search" />
+          </template>
+        </q-input>
+      </div>
+      <q-btn dense round flat icon="shopping_cart">
+        {% raw %}
+        <q-badge v-if="cart.size" color="red" class="text-bold" floating>
+          {{ cart.size }}
+        </q-badge>
+        {% endraw %}
+        <q-menu auto-close v-if="cart.size">
+          <q-list style="min-width: 100px">
+            {% raw %}
+            <q-item clickable :key="p.id" v-for="p in cartMenu">
+              <q-item-section side>
+                <span>{{p.quantity}} x </span>
+              </q-item-section>
+              <q-item-section avatar>
+                <q-avatar color="primary">
+                  <img
+                    size="sm"
+                    :src="products.find(f => f.id == p.id).image"
+                  />
+                </q-avatar>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>{{ p.name }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section side>
+                <span> {{p.price}} sats</span>
+              </q-item-section>
+            </q-item>
+            {% endraw %}
+            <q-separator />
+          </q-list>
+          <div class="q-pa-md q-gutter-md">
+            <q-btn
+              color="primary"
+              icon-right="checkout"
+              label="Checkout"
+              @click="checkoutDialog.show = true"
+            />
+          </div>
+        </q-menu>
+      </q-btn>
+    </q-toolbar>
+  </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 in filterProducts"
+    :key="item.id"
+  >
+    <q-card class="card--product">
+      {% raw %}
+      <q-img
+        :src="item.image ? item.image : '/diagonalley/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.quantity < 1"
+          color="primary"
+          icon="shopping_cart"
+          size="lg"
+          style="
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(-50%, -50%);
+          "
+          @click="addToCart(item)"
+          ><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.product }}
+          </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-green-8 text-weight-bolder">
+            {{ stall.name }}
+          </div> -->
+          <span class="text-h6">{{ item.price }} sats</span
+          ><span class="q-ml-sm text-grey-6"
+            >BTC {{ (item.price / 1e8).toFixed(8) }}</span
+          >
+          <span
+            class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
+            >{{item.quantity}} left</span
+          >
+        </div>
+        <div v-if="item.categories" class="text-subtitle1">
+          <q-chip v-for="cat in item.categories.split(',')" 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>
+        <q-btn
+          flat
+          class="text-weight-bold text-capitalize"
+          dense
+          color="primary"
+        >
+          View details
+        </q-btn>
+      </q-card-actions>
+      {% endraw %}
+    </q-card>
+  </div>
+  <!-- CHECKOUT DIALOG -->
+  <q-dialog v-model="checkoutDialog.show" position="top">
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <q-form @submit="placeOrder" class="q-gutter-md">
+        <q-input
+          filled
+          dense
+          v-model.trim="checkoutDialog.data.username"
+          label="Name *optional"
+        ></q-input>
+        <q-input
+          filled
+          dense
+          v-model.trim="checkoutDialog.data.address"
+          label="Address"
+        ></q-input>
+        <!-- <q-input
+          filled
+          dense
+          v-model.trim="checkoutDialog.data.address_2"
+          label="Address (line 2)"
+        ></q-input> -->
+        <q-input
+          v-model="checkoutDialog.data.email"
+          filled
+          dense
+          type="email"
+          label="Email"
+        ></q-input>
+        <p>Select the shipping zone:</p>
+        <div class="row q-mt-lg">
+          <q-option-group
+            :options="stall.zones"
+            type="radio"
+            emit-value
+            v-model="checkoutDialog.data.shippingzone"
+          />
+        </div>
+        <div class="row q-mt-lg">
+          {% raw %} Total: {{ finalCost }} {% endraw %}
+        </div>
+        <div class="row q-mt-lg">
+          <q-btn
+            unelevated
+            color="primary"
+            :disable="checkoutDialog.data.address == null
+              || checkoutDialog.data.email == null
+              || checkoutDialog.data.shippingzone == null"
+            type="submit"
+            >Checkout</q-btn
+          >
+          <q-btn
+            v-close-popup
+            flat
+            @click="checkoutDialog = {show: false, data: {}}"
+            color="grey"
+            class="q-ml-auto"
+            >Cancel</q-btn
+          >
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!-- INVOICE DIALOG -->
+  <q-dialog
+    v-model="qrCodeDialog.show"
+    position="top"
+    @hide="closeQrCodeDialog"
+  >
+    <q-card
+      v-if="!qrCodeDialog.data.payment_request"
+      class="q-pa-lg q-pt-xl lnbits__dialog-card"
+    >
+    </q-card>
+    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <div class="text-center q-mb-lg">
+        <a :href="'lightning:' + qrCodeDialog.data.payment_request">
+          <q-responsive :ratio="1" class="q-mx-xl">
+            <qrcode
+              :value="qrCodeDialog.data.payment_request"
+              :options="{width: 340}"
+              class="rounded-borders"
+            ></qrcode>
+          </q-responsive>
+        </a>
+      </div>
+      <div class="row q-mt-lg">
+        <q-btn
+          outline
+          color="grey"
+          @click="copyText(qrCodeDialog.data.payment_request)"
+          >Copy invoice</q-btn
+        >
+        <q-btn
+          @click="closeQrCodeDialog"
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          >Close</q-btn
+        >
+      </div>
+    </q-card>
+  </q-dialog>
+</div>
+{% endblock %} {% block scripts %}
+<script>
+  Vue.component(VueQrcode.name, VueQrcode)
+  new Vue({
+    el: '#vue',
+    mixins: [windowMixin],
+    data: function () {
+      return {
+        stall: null,
+        products: [],
+        searchText: null,
+        cart: {
+          total: 0,
+          size: 0,
+          products: new Map()
+        },
+        cartMenu: [],
+        checkoutDialog: {
+          show: false,
+          data: {}
+        },
+        qrCodeDialog: {
+          data: {
+            payment_request: null
+          },
+          show: false
+        }
+      }
+    },
+    computed: {
+      filterProducts() {
+        if (!this.searchText || this.searchText.length < 2) return this.products
+        return this.products.filter(p => {
+          return (
+            p.product.includes(this.searchText) ||
+            p.description.includes(this.searchText) ||
+            p.categories.includes(this.searchText)
+          )
+        })
+      },
+      finalCost() {
+        if (!this.checkoutDialog.data.shippingzone) return this.cart.total
+
+        let zoneCost = this.stall.zones.find(
+          z => z.value == this.checkoutDialog.data.shippingzone
+        )
+
+        return this.cart.total + zoneCost.cost
+      }
+    },
+    methods: {
+      closeQrCodeDialog() {
+        this.qrCodeDialog.dismissMsg()
+        this.qrCodeDialog.show = false
+      },
+      resetCart() {
+        this.cart = {
+          total: 0,
+          size: 0,
+          products: new Map()
+        }
+      },
+      addToCart(item) {
+        let prod = this.cart.products
+        if (prod.has(item.id)) {
+          let qty = prod.get(item.id).quantity
+          prod.set(item.id, {
+            ...prod.get(item.id),
+            quantity: qty + 1
+          })
+        } else {
+          prod.set(item.id, {
+            name: item.product,
+            quantity: 1,
+            price: item.price
+          })
+        }
+        this.cart.products = prod
+        this.updateCart(item.price)
+      },
+      removeFromCart() {},
+      updateCart(price) {
+        this.cart.total += price
+        this.cart.size++
+        this.cartMenu = Array.from(this.cart.products, item => {
+          return {id: item[0], ...item[1]}
+        })
+        console.log(this.cartMenu, this.cart)
+      },
+      placeOrder() {
+        let dialog = this.checkoutDialog.data
+        let data = {
+          ...this.checkoutDialog.data,
+          wallet: this.stall.wallet,
+          total: this.finalCost,
+          products: Array.from(this.cart.products, p => {
+            return {product_id: p[0], quantity: p[1].quantity}
+          })
+        }
+        LNbits.api
+          .request('POST', '/diagonalley/api/v1/orders', null, data)
+          .then(res => {
+            this.checkoutDialog = {show: false, data: {}}
+
+            return res.data
+          })
+          .then(data => {
+            this.qrCodeDialog.data = data
+            this.qrCodeDialog.show = true
+
+            this.qrCodeDialog.dismissMsg = this.$q.notify({
+              timeout: 0,
+              message: 'Waiting for payment...'
+            })
+            return data
+          })
+          .then(data => {
+            this.qrCodeDialog.paymentChecker = setInterval(() => {
+              LNbits.api
+                .request(
+                  'GET',
+                  `/diagonalley/api/v1/orders/payments/${this.qrCodeDialog.data.payment_hash}`
+                )
+                .then(res => {
+                  if (res.data.paid) {
+                    this.$q.notify({
+                      type: 'positive',
+                      message: 'Sats received, thanks!',
+                      icon: 'thumb_up'
+                    })
+                    clearInterval(this.qrCodeDialog.paymentChecker)
+                    this.resetCart()
+                    this.closeQrCodeDialog()
+                  }
+                })
+                .catch(error => {
+                  console.error(error)
+                  LNbits.utils.notifyApiError(error)
+                })
+            }, 3000)
+          })
+          .catch(error => {
+            console.error(error)
+            LNbits.utils.notifyApiError(error)
+          })
+      }
+    },
+    created() {
+      this.stall = JSON.parse('{{ stalls | tojson }}')
+      this.products = JSON.parse('{{ products | tojson }}')
+
+      console.log(this.stall, this.products)
+    }
+  })
+</script>
+<style scoped>
+  .card--product {
+  }
+</style>
+{% endblock %}

lnbits/extensions/diagonalley/views.py

@@ -13,6 +13,8 @@ from lnbits.extensions.diagonalley import diagonalley_ext, diagonalley_renderer
 
 from ...core.crud import get_wallet
 from .crud import (
+    get_diagonalley_market,
+    get_diagonalley_market_stalls,
     get_diagonalley_products,
     get_diagonalley_stall,
     get_diagonalley_zone,
@@ -59,20 +61,25 @@ async def display(request: Request, stall_id):
     )
 
 
-# @diagonalley_ext.get("/market/{market_id}", response_class=HTMLResponse)
-# async def display(request: Request, stall_id):
-#     stalls = await get_diagonalley_stall(stall_id)
-#     products = await get_diagonalley_products(stall_id)
+@diagonalley_ext.get("/market/{market_id}", response_class=HTMLResponse)
+async def display(request: Request, market_id):
+    market = await get_diagonalley_market(market_id)
     
-#     if not stall:
-#         raise HTTPException(
-#             status_code=HTTPStatus.NOT_FOUND, detail="Stall does not exist."
-#         )
-#     return diagonalley_renderer().TemplateResponse(
-#         "diagonalley/stall.html",
-#         {
-#             "request": request,
-#             "stall": stall.dict(),
-#             "products": [product.dict() for product in products]
-#         },
-#     )
+    if not market:
+        raise HTTPException(
+            status_code=HTTPStatus.NOT_FOUND, detail="Marketplace doesn't exist."
+        )
+    
+    stalls = await get_diagonalley_market_stalls(market_id)
+    stalls_ids = [stall.id for stall in stalls]
+    products = [product.dict() for product in await get_diagonalley_products(stalls_ids)]
+
+    return diagonalley_renderer().TemplateResponse(
+        "diagonalley/market.html",
+        {
+            "request": request,
+            "market": market,
+            "stalls": [stall.dict() for stall in stalls],
+            "products": products
+        },
+    )