From 80a5d26dce583e1b10d104dde9554576dadb85a5 Mon Sep 17 00:00:00 2001
From: benarc <ben@arc.wales>
Date: Thu, 3 Feb 2022 21:19:24 +0000
Subject: [PATCH] Message ui working

---
 .../extensions/diagonalley/static/js/index.js | 83 ++++++++++++-------
 .../templates/diagonalley/index.html          | 47 ++++++-----
 2 files changed, 78 insertions(+), 52 deletions(-)

diff --git a/lnbits/extensions/diagonalley/static/js/index.js b/lnbits/extensions/diagonalley/static/js/index.js
index 1a25edaaf..af81db2ab 100644
--- a/lnbits/extensions/diagonalley/static/js/index.js
+++ b/lnbits/extensions/diagonalley/static/js/index.js
@@ -2,7 +2,24 @@
 
 Vue.component(VueQrcode.name, VueQrcode)
 
-const pica = window.pica()
+//const pica = window.pica()
+
+var mapStalls = obj => {
+  obj._data = _.clone(obj)
+  return obj
+}
+var mapProducts = obj => {
+  obj._data = _.clone(obj)
+  return obj
+}
+var mapZone = obj => {
+  obj._data = _.clone(obj)
+  return obj
+}
+var mapOrders = obj => {
+  obj._data = _.clone(obj)
+  return obj
+}
 
 new Vue({
   el: '#vue',
@@ -13,6 +30,9 @@ new Vue({
       orders: [],
       stalls: [],
       zones: [],
+      customerKeys: [],
+      customerKey: '',
+      customerMessages: {},
       shippedModel: false,
       shippingZoneOptions: [
         'Australia',
@@ -64,7 +84,8 @@ new Vue({
         'Groceries (Food and Drink)',
         'Technology (Phones and Computers)',
         'Home (furniture and accessories)',
-        'Gifts (flowers, cards, etc)'
+        'Gifts (flowers, cards, etc)',
+        'Adult'
       ],
       relayOptions: [
         'wss://nostr-relay.herokuapp.com/ws',
@@ -244,6 +265,17 @@ new Vue({
     }
   },
   methods: {
+    ////////////////////////////////////////
+    ///////////SUPPORT MESSAGES/////////////
+    ////////////////////////////////////////
+    getMessages: function (customerKey) {
+      var self = this
+      console.log('fuck')
+      messages = []
+      messages.push(['in', 'blah blah'])
+      messages.push(['out', 'blah blah'])
+      self.customerMessages = messages
+    },
     ////////////////////////////////////////
     ////////////////STALLS//////////////////
     ////////////////////////////////////////
@@ -256,10 +288,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.stalls = response.data.map(function (obj) {
-            console.log(obj)
-            return mapDiagonAlley(obj)
-          })
+          self.stalls.push(mapStalls(response.data))
         })
     },
     openStallUpdateDialog: function (linkId) {
@@ -302,7 +331,7 @@ new Vue({
           self.stalls = _.reject(self.stalls, function (obj) {
             return obj.id == data.id
           })
-          self.stalls.push(mapDiagonAlley(response.data))
+          self.stalls.push(mapStalls(response.data))
           self.stallDialog.show = false
           self.stallDialog.data = {}
           data = {}
@@ -323,7 +352,7 @@ new Vue({
           data
         )
         .then(function (response) {
-          self.stalls.push(mapDiagonAlley(response.data))
+          self.stalls.push(mapStalls(response.data))
           self.stallDialog.show = false
           self.stallDialog.data = {}
           data = {}
@@ -371,9 +400,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.products = response.data.map(function (obj) {
-            return mapDiagonAlley(obj)
-          })
+          self.products.push(mapProducts(response.data))
         })
     },
     openProductUpdateDialog: function (linkId) {
@@ -450,7 +477,7 @@ new Vue({
           self.products = _.reject(self.products, function (obj) {
             return obj.id == data.id
           })
-          self.products.push(mapDiagonAlley(response.data))
+          self.products.push(mapProducts(response.data))
           self.productDialog.show = false
           self.productDialog.data = {}
         })
@@ -470,7 +497,7 @@ new Vue({
           data
         )
         .then(function (response) {
-          self.products.push(mapDiagonAlley(response.data))
+          self.products.push(mapProducts(response.data))
           self.productDialog.show = false
           self.productDialog.data = {}
         })
@@ -517,9 +544,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.zones = response.data.map(function (obj) {
-            return mapDiagonAlley(obj)
-          })
+          self.zones.push(mapZone(response.data))
         })
     },
     openZoneUpdateDialog: function (linkId) {
@@ -559,7 +584,7 @@ new Vue({
           self.zones = _.reject(self.zones, function (obj) {
             return obj.id == data.id
           })
-          self.zones.push(mapDiagonAlley(response.data))
+          self.zones.push(mapZone(response.data))
           self.zoneDialog.show = false
           self.zoneDialog.data = {}
           data = {}
@@ -580,7 +605,7 @@ new Vue({
           data
         )
         .then(function (response) {
-          self.zones.push(mapDiagonAlley(response.data))
+          self.zones.push(mapZone(response.data))
           self.zoneDialog.show = false
           self.zoneDialog.data = {}
           data = {}
@@ -628,9 +653,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.shops = response.data.map(function (obj) {
-            return mapDiagonAlley(obj)
-          })
+          self.shops.push(mapShops(response.data))
         })
     },
     openShopUpdateDialog: function (linkId) {
@@ -670,7 +693,7 @@ new Vue({
           self.shops = _.reject(self.shops, function (obj) {
             return obj.id == data.id
           })
-          self.shops.push(mapDiagonAlley(response.data))
+          self.shops.push(mapShops(response.data))
           self.shopDialog.show = false
           self.shopDialog.data = {}
           data = {}
@@ -692,7 +715,7 @@ new Vue({
           data
         )
         .then(function (response) {
-          self.shops.push(mapDiagonAlley(response.data))
+          self.shops.push(mapShops(response.data))
           self.shopDialog.show = false
           self.shopDialog.data = {}
           data = {}
@@ -740,9 +763,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.orders = response.data.map(function (obj) {
-            return mapDiagonAlley(obj)
-          })
+          self.orders.push(mapOrders(response.data))
         })
     },
     createOrder: function () {
@@ -763,7 +784,7 @@ new Vue({
           data
         )
         .then(function (response) {
-          self.orders.push(mapDiagonAlley(response.data))
+          self.orders.push(mapOrders(response.data))
           self.orderDialog.show = false
           self.orderDialog.data = {}
         })
@@ -804,9 +825,7 @@ new Vue({
           this.g.user.wallets[0].inkey
         )
         .then(function (response) {
-          self.orders = response.data.map(function (obj) {
-            return mapDiagonAlley(obj)
-          })
+          self.orders.push(mapOrders(response.data))
         })
     },
     exportOrdersCSV: function () {
@@ -819,6 +838,10 @@ new Vue({
       this.getProducts()
       this.getZones()
       this.getOrders()
+      this.customerKeys = [
+        'cb4c0164fe03fcdadcbfb4f76611c71620790944c24f21a1cd119395cdedfe1b',
+        'a9c17358a6dc4ceb3bb4d883eb87967a66b3453a0f3199f0b1c8eef8070c6a07'
+      ]
     }
   }
 })
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/index.html b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
index 98405f6de..a89c8b5e2 100644
--- a/lnbits/extensions/diagonalley/templates/diagonalley/index.html
+++ b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
@@ -594,34 +594,37 @@
     </q-card>
     <q-card>
       <q-card-section>
-        <h6 class="text-subtitle1 q-my-none">Messages (example)</h6>
+        <h6 class="text-subtitle1 q-my-none">Messages</h6>
       </q-card-section>
       <q-card-section class="q-pa-none" >
         <q-separator></q-separator>
 
-        <div class="row q-pa-md">
-          <div class="col-4">
-            <q-btn outline color="primary" size="md" style="height: 90px; width:90%"
-              >OrderID:87h87h<br/>KJBIBYBUYBUF90898....</q-btn
-            >
-            <q-btn outline color="primary" size="md" style="height: 90px; width:90%"
-              >OrderID:NIUHB7<br/>79867KJGJHGVFYFV....</q-btn
-            >
+        <div class="column q-ma-md q-pb-lg" 
+         style="height: 350px">
+          <div class="col q-pb-md">
+            <q-select v-model="customerKey" style="width: 80%;"
+        :options="customerKeys" label="Customers" @input="getMessages(customerKey)"></q-select>
           </div>
-          <div class="col-8">
-            <div style="height: 350px">
-            <q-chat-message
-              :text="['I have not received my Welsh Cakes']"
-              sent
-            ></q-chat-message>
-            <q-chat-message
-              :text="['Yep, its Brexit. They are stuck in customs. We will have to wait it out. I can offer a full refund?']"
-            ></q-chat-message>
+          <div class="col-8 q-px-md">
+            <div v-for="message in customerMessages">
+              <q-chat-message
+                v-if="message[0] == 'out'"
+                :text="[message[1]]"
+                sent
+              ></q-chat-message>
+              <q-chat-message
+                v-else
+                :text="[message[1]]"
+              ></q-chat-message>
+          </div>
+          </div>
+          <div class="col on-right	" style="width: 90%">
+            <q-input >
+              <template v-slot:after>
+                <q-btn round dense flat icon="send" />
+              </template>
+            </q-input>
           </div>
-            <q-input ><template v-slot:after>
-              <q-btn round dense flat icon="send" />
-            </template></q-input>
-            
         </div>
       </q-card-section>
     </q-card>