chat page

lnbits/extensions/diagonalley/templates/diagonalley/chat.html

@@ -0,0 +1,194 @@
+{% extends "public.html" %} {% block page %}
+<div class="row q-col-gutter-md flex">
+  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
+    <q-card>
+      <div class="chat-container q-pa-md">
+        <div class="chat-box">
+          <!-- <p v-if="Object.keys(messages).length === 0">No messages yet</p> -->
+          <div class="chat-messages">
+            <q-chat-message
+              :key="key"
+              v-for="(message, key) in messages"
+              :name="message.from == 'me' ? 'me' : 'merchant'"
+              :text="[message.text]"
+              :sent="message.from == 'me' ? true : false"
+              :bg-color="message.from == 'me' ? 'white' : 'light-green-2'"
+            />
+          </div>
+        </div>
+        <q-form @submit="sendMessage" class="full-width chat-input">
+          <q-input
+            ref="newMessage"
+            v-model="newMessage"
+            placeholder="Message"
+            class="full-width"
+            dense
+            outlined
+          >
+            <template>
+              <q-btn
+                round
+                dense
+                flat
+                type="submit"
+                icon="send"
+                color="primary"
+              />
+            </template>
+          </q-input>
+        </q-form>
+      </div>
+    </q-card>
+  </div>
+  <div class="col-12 col-md-5 col-lg-6 q-gutter-y-md">
+    <q-card>
+      <q-card-section>
+        {% raw %}
+        <h6 class="text-subtitle1 q-my-none">{{ stall.name }}</h6>
+        <p @click="copyText(stall.publickey)">
+          Public Key: {{ sliceKey(stall.publickey) }}
+          <q-tooltip>{{ stall.publickey }}</q-tooltip>
+        </p>
+        {% endraw %}
+        <q-form @submit="" class="q-gutter-md">
+          <q-select
+            filled
+            dense
+            emit-value
+            v-model="model"
+            :options="mockMerch"
+            label="Merchant"
+            hint="Select a merchant you've opened an order to"
+          ></q-select>
+          <br />
+          <q-select
+            filled
+            dense
+            emit-value
+            v-model="model"
+            :options="mockOrder"
+            label="Order"
+            hint="Select an order from this merchant"
+            :disabled="!this.model"
+          ></q-select>
+        </q-form>
+      </q-card-section>
+      <q-card-section>
+        <q-separator></q-separator>
+        <p>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
+          quasi.
+        </p>
+        <div class="text-center q-mb-lg">
+          <a :href="'lightning:'">
+            <q-responsive :ratio="1" class="q-mx-xl">
+              <qrcode
+                :value="cb4c0164fe03fcdadcbfb4f76611c71620790944c24f21a1cd119395cdedfe1b"
+                :options="{width: 340}"
+                class="rounded-borders"
+              ></qrcode>
+            </q-responsive>
+          </a>
+        </div>
+        <p>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
+          quasi.
+        </p>
+      </q-card-section>
+      <q-card-section>
+        <q-separator></q-separator>
+        <div class="row q-mt-lg">
+          <q-btn outline color="grey" @click=""
+            >Backup keys
+            <q-tooltip>Download your keys</q-tooltip>
+          </q-btn>
+          <q-btn @click="" v-close-popup flat color="grey" class="q-ml-auto"
+            >Delete data
+            <q-tooltip>Delete all data from browser</q-tooltip>
+          </q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</div>
+{% endblock %} {% block scripts %}
+<script>
+  Vue.component(VueQrcode.name, VueQrcode)
+  new Vue({
+    el: '#vue',
+    mixins: [windowMixin],
+    data: function () {
+      return {
+        newMessage: '',
+        showMessages: false,
+        messages: {},
+        stall: null,
+        orders: [],
+        // Mock data
+        model: null,
+        mockMerch: ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'],
+        mockOrder: ['1', '2', '3']
+      }
+    },
+    computed: {},
+    methods: {
+      clearMessage() {
+        this.newMessage = ''
+        this.$refs.newMessage.focus()
+      },
+      sendMessage() {
+        let message = {
+          key: Date.now(),
+          text: this.newMessage,
+          from: 'me'
+        }
+        this.$set(this.messages, message.key, message)
+
+        this.clearMessage()
+      },
+      sliceKey(key) {
+        if (!key) return ''
+        return `${key.slice(0, 4)}...${key.slice(-4)}`
+      }
+    },
+    created() {
+      let stall = JSON.parse('{{ stall | tojson }}')
+      let orders = JSON.parse('{{ orders | tojson }}')
+
+      this.stall = stall
+      this.orders = orders
+      console.log(stall)
+      console.log(orders)
+    }
+  })
+</script>
+<style scoped>
+  .chat-container {
+    position: relative;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    height: calc(100vh - 133px);
+  }
+
+  .chat-box {
+    display: flex;
+    flex-direction: column-reverse;
+    padding: 1rem;
+    overflow-y: auto;
+  }
+
+  .chat-messages {
+    width: auto;
+  }
+
+  .chat-other {
+  }
+
+  .chat-input {
+    position: relative;
+    display: flex;
+    align-items: end;
+    margin-top: 1rem;
+  }
+</style>
+{% endblock %}