improve and finish basic UI.

lnbits/extensions/lnurlp/templates/lnurlp/index.html

@@ -133,7 +133,7 @@
     </q-card>
   </div>
 
-  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
+  <q-dialog v-model="formDialog.show" @hide="closeFormDialog">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="sendFormData" class="q-gutter-md">
         <q-select

lnbits/extensions/offlineshop/lnurl.py

@@ -15,6 +15,9 @@ async def lnurl_response(item_id):
     if not item:
         return jsonify({"status": "ERROR", "reason": "Item not found."})
 
+    if not item.enabled:
+        return jsonify({"status": "ERROR", "reason": "Item disabled."})
+
     rate = await get_fiat_rate(item.unit) if item.unit != "sat" else 1
     price_msat = item.price * 1000 * rate
 

lnbits/extensions/offlineshop/static/js/index.js

@@ -26,24 +26,31 @@ new Vue({
     }
   },
   methods: {
-    async imageAdded(file) {
+    openNewDialog() {
+      this.itemDialog.show = true
+      this.itemDialog.data = {...defaultItemData}
+    },
+    openUpdateDialog(itemId) {
+      this.itemDialog.show = true
+      let item = this.offlineshop.items.find(item => item.id === itemId)
+      this.itemDialog.data = item
+    },
+    imageAdded(file) {
+      let blobURL = URL.createObjectURL(file)
       let image = new Image()
-      image.src = URL.createObjectURL(file)
+      image.src = blobURL
-      let canvas = document.getElementById('uploading-image')
       image.onload = async () => {
+        let canvas = document.createElement('canvas')
         canvas.setAttribute('width', 300)
         canvas.setAttribute('height', 300)
         await pica.resize(image, canvas)
         this.itemDialog.data.image = canvas.toDataURL()
+        this.itemDialog = {...this.itemDialog}
       }
     },
     imageCleared() {
       this.itemDialog.data.image = null
-      let canvas = document.getElementById('uploading-image')
+      this.itemDialog = {...this.itemDialog}
-      canvas.setAttribute('height', 0)
-      canvas.setAttribute('width', 0)
-      let ctx = canvas.getContext('2d')
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
     },
     disabledAddItemButton() {
       return (
@@ -73,34 +80,44 @@ new Vue({
           LNbits.utils.notifyApiError(err)
         })
     },
-    addItem() {
+    async sendItem() {
-      let {name, image, description, price, unit} = this.itemDialog.data
+      let {id, name, image, description, price, unit} = this.itemDialog.data
+      const data = {
+        name,
+        description,
+        image,
+        price,
+        unit
+      }
 
-      LNbits.api
+      try {
-        .request(
+        if (id) {
-          'POST',
+          await LNbits.api.request(
-          '/offlineshop/api/v1/offlineshop/items',
+            'PUT',
-          this.selectedWallet.inkey,
+            '/offlineshop/api/v1/offlineshop/items/' + id,
-          {
+            this.selectedWallet.inkey,
-            name,
+            data
-            description,
+          )
-            image,
+        } else {
-            price,
+          await LNbits.api.request(
-            unit
+            'POST',
-          }
+            '/offlineshop/api/v1/offlineshop/items',
-        )
+            this.selectedWallet.inkey,
-        .then(response => {
+            data
+          )
           this.$q.notify({
             message: `Item '${this.itemDialog.data.name}' added.`,
             timeout: 700
           })
-          this.loadShop()
+        }
-          this.itemsDialog.show = false
+      } catch (err) {
-          this.itemsDialog.data = {...defaultItemData}
+        LNbits.utils.notifyApiError(err)
-        })
+        return
-        .catch(err => {
+      }
-          LNbits.utils.notifyApiError(err)
+
-        })
+      this.loadShop()
+      this.itemDialog.show = false
+      this.itemDialog.data = {...defaultItemData}
     },
     toggleItem(itemId) {
       let item = this.offlineshop.items.find(item => item.id === itemId)

lnbits/extensions/offlineshop/templates/offlineshop/index.html

@@ -9,10 +9,7 @@
             <h5 class="text-subtitle1 q-my-none">Items</h5>
           </div>
           <div class="col q-ml-lg">
-            <q-btn
+            <q-btn unelevated color="deep-purple" @click="openNewDialog()"
-              unelevated
-              color="deep-purple"
-              @click="itemDialog.show = true"
               >Add new item</q-btn
             >
           </div>
@@ -51,20 +48,27 @@
                   target="_blank"
                 ></q-btn>
               </q-td>
-              <q-td auto-width>{{ props.row.name }}</q-td>
+              <q-td auto-width class="text-center">{{ props.row.name }}</q-td>
               <q-td auto-width> {{ props.row.description }} </q-td>
-              <q-td class="text-right" auto-width>
+              <q-td class="text-center" auto-width>
-                <q-img
+                <img
                   v-if="props.row.image"
                   :src="props.row.image"
-                  :ratio="1"
+                  style="height: 1.5em"
-                  style="height: 1em"
                 />
               </q-td>
               <q-td class="text-center" auto-width>
                 {{ props.row.price }} {{ props.row.unit }}
               </q-td>
               <q-td auto-width>
+                <q-btn
+                  flat
+                  dense
+                  size="xs"
+                  @click="openUpdateDialog(props.row.id)"
+                  icon="edit"
+                  color="light-blue"
+                ></q-btn>
                 <q-btn
                   unelevated
                   dense
@@ -113,10 +117,10 @@
     </q-card>
   </div>
 
-  <q-dialog v-model="itemDialog.show" position="top">
+  <q-dialog v-model="itemDialog.show">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-card-section>
-        <q-form @submit="addItem" class="q-gutter-md">
+        <q-form @submit="sendItem" class="q-gutter-md">
           <q-input
             filled
             dense
@@ -136,12 +140,15 @@
             dense
             capture="environment"
             accept="image/jpeg, image/png"
-            :max-file-size="1048576"
+            :max-file-size="3*1024**2"
             label="Small image (optional)"
             clearable
             @input="imageAdded"
             @clear="imageCleared"
           >
+            <template v-if="itemDialog.data.image" v-slot:before>
+              <img style="height: 1em" :src="itemDialog.data.image" />
+            </template>
             <template v-if="itemDialog.data.image" v-slot:append>
               <q-icon
                 name="cancel"
@@ -150,7 +157,6 @@
               />
             </template>
           </q-file>
-          <canvas id="uploading-image"></canvas>
           <q-input
             filled
             dense
@@ -175,8 +181,10 @@
                 color="deep-purple"
                 :disable="disabledAddItemButton()"
                 type="submit"
-                >Add item</q-btn
               >
+                {% raw %}{{ itemDialog.data.id ? 'Update' : 'Add' }}{% endraw %}
+                Item
+              </q-btn>
             </div>
             <div class="col q-ml-lg">
               <q-btn v-close-popup flat color="grey" class="q-ml-auto"