add stall page

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

@@ -506,6 +506,7 @@
           {% raw %}
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width></q-th>
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 {{ col.label }}
               </q-th>
@@ -514,6 +515,19 @@
           </template>
           <template v-slot:body="props">
             <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  unelevated
+                  dense
+                  size="xs"
+                  icon="storefront"
+                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  type="a"
+                  :href="'/diagonalley/' + props.row.id"
+                  target="_blank"
+                ></q-btn>
+                <q-tooltip> Link to pass to stall relay </q-tooltip>
+              </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 {{ col.value }}
               </q-td>
@@ -1163,8 +1177,8 @@ new Vue({
       image.src = blobURL
       image.onload = async () => {
         let canvas = document.createElement('canvas')
-        canvas.setAttribute('width', 100)
+        canvas.setAttribute('width', 760)
-        canvas.setAttribute('height', 100)
+        canvas.setAttribute('height', 490)
         await pica.resize(image, canvas, {
           quality: 0,
           alpha: true,
@@ -1493,7 +1507,7 @@ new Vue({
       LNbits.api
         .request(
           'GET',
-          '/diagonalley/api/v1/orders?all_wallets',
+          '/diagonalley/api/v1/orders?all_wallets=true',
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {

lnbits/extensions/diagonalley/templates/diagonalley/stall.html

@@ -1,4 +1,128 @@
-<pre id="json"></pre>
+{% extends "public.html" %} {% block page %}
+<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
+  <div class="q-pa-md row items-start q-gutter-md">
+    <template>
+      <q-card class="cursor-pointer" v-for="item in products" :key="item.id">
+        <q-img
+          src="https://miipublications.com.my/wp-content/uploads/2019/10/shop-online-760x490.jpg"
+        ></q-img>
+
+        <q-card-section class="q-pb-xs q-pt-md">
+          <!--<q-btn-->
+          <!--fab-->
+          <!--color="primary"-->
+          <!--icon="shopping_cart"-->
+          <!--class="absolute"-->
+          <!--style="top: 0; right: 12px; transform: translateY(-50%);"-->
+          <!--&gt;</q-btn>-->
+
+          <div class="row no-wrap items-center">
+            <div class="col text-subtitle2 ellipsis-2-lines text-grey-10">
+              Benling C200-BLK Smartwatch (Black Strap Free Size)
+            </div>
+            <div
+              class="col-auto text-grey text-caption q-pt-md row no-wrap items-center"
+            >
+              <!--<q-icon name="place"></q-icon>-->
+              <!--250 ft-->
+            </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">
+              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="text-subtitle1">-->
+          <!--$・Italian, Cafe-->
+          <!--</div>-->
+          <!--<div class="text-caption text-grey">-->
+          <!--Small plates, salads & sandwiches in an intimate setting.-->
+          <!--</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>
+      </q-card>
+    </template>
+  </div>
+</div>
+<!-- <div class="row q-col-gutter-md">
+  <div class="col-6 col-md-4 col-lg-3" v-for="item in products" :key="item.id">
+    <q-card class="my-card">
+      {% raw %}
+      <q-card-section>
+        <img
+          v-if="item.image"
+          :src="item.image"
+          alt="Product Image"
+          loading="lazy"
+          spinner-color="white"
+          fit="cover"
+        />
+      </q-card-section>
+
+      <q-card-section>
+        <div class="text-h6">{{ item.product }}</div>
+        <div class="text-subtitle2">{{ item.description }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none"> {{ lorem }} </q-card-section>
+      {% endraw %}
+    </q-card>
+  </div>
+</div> -->
+{% endblock %} {% block scripts %}
+<script>
+  Vue.component(VueQrcode.name, VueQrcode)
+  new Vue({
+    el: '#vue',
+    mixins: [windowMixin],
+    data: function () {
+      return {
+        products: []
+      }
+    },
+    methods: {},
+    created() {
+      this.products = JSON.parse('{{ products | tojson }}')
+      console.log(this.products)
+    }
+  })
+</script>
+{% endblock %}
+<style scoped>
+  .my-card {
+    width: 100%;
+    max-width: 300px;
+  }
+</style>
+
+<!-- <pre id="json"></pre>
 
 <script>
   document.getElementById('json').innerHTML = JSON.stringify(
@@ -6,4 +130,4 @@
     null,
     2
   )
-</script>
+</script> -->

lnbits/extensions/diagonalley/views.py

@@ -3,14 +3,13 @@ from http import HTTPStatus
 from fastapi import Request
 from fastapi.params import Depends
 from fastapi.templating import Jinja2Templates
-from starlette.exceptions import HTTPException
-from starlette.responses import HTMLResponse
-
 from lnbits.core.models import User
 from lnbits.decorators import check_user_exists  # type: ignore
 from lnbits.extensions.diagonalley import diagonalley_ext, diagonalley_renderer
+from starlette.exceptions import HTTPException
+from starlette.responses import HTMLResponse
 
-from .crud import get_diagonalley_products
+from .crud import get_diagonalley_products, get_diagonalley_stall
 
 templates = Jinja2Templates(directory="templates")
 
@@ -24,17 +23,18 @@ async def index(request: Request, user: User = Depends(check_user_exists)):
 
 @diagonalley_ext.get("/{stall_id}", response_class=HTMLResponse)
 async def display(request: Request, stall_id):
-    product = await get_diagonalley_products(stall_id)
+    stall = await get_diagonalley_stall(stall_id)
+    products = await get_diagonalley_products(stall_id)
 
-    if not product:
+    if not stall:
         raise HTTPException(
             status_code=HTTPStatus.NOT_FOUND, detail="Stall does not exist."
         )
     return diagonalley_renderer().TemplateResponse(
         "diagonalley/stall.html",
         {
-            "stall": [
+            "request": request,
-                product.dict() for product in await get_diagonalley_products(stall_id)
+            "stall": stall.dict(),
-            ]
+            "products": [product.dict() for product in products]
         },
     )