rename endpoint and add more data
This commit is contained in:
Tiago vasconcelos
parent
93d61a7ac5
commit
bd4fd73417
1 changed files with 351 additions and 0 deletions
351
lnbits/extensions/diagonalley/templates/diagonalley/order.html
Normal file
351
lnbits/extensions/diagonalley/templates/diagonalley/order.html
Normal file
|
|
@ -0,0 +1,351 @@
|
|||
{% 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="index"
|
||||
v-for="(message, index) in messages"
|
||||
:name="message.pubkey == user.keys.publickey ? 'me' : 'merchant'"
|
||||
:text="[message.msg]"
|
||||
:sent="message.pubkey == user.keys.publickey ? true : false"
|
||||
:bg-color="message.pubkey == user.keys.publickey ? '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)" style="width: max-content">
|
||||
Public Key: {{ sliceKey(stall.publickey) }}
|
||||
<q-tooltip>Click to copy</q-tooltip>
|
||||
</p>
|
||||
{% endraw %}
|
||||
</q-card-section>
|
||||
<q-card-section v-if="user">
|
||||
<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="selectedOrder"
|
||||
:options="user.orders"
|
||||
label="Order"
|
||||
hint="Select an order from this merchant"
|
||||
@input="val => { changeOrder() }"
|
||||
></q-select>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
{% raw %}
|
||||
<q-item clickable :key="p.id" v-for="p in products">
|
||||
<q-item-section side>
|
||||
<span>{{p.quantity}} x </span>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="primary">
|
||||
<img size="sm" :src="p.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-list>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-separator></q-separator>
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
|
||||
quasi.
|
||||
</p>
|
||||
<div v-if="user?.keys" class="row">
|
||||
<div
|
||||
class="col-6"
|
||||
v-for="type in ['publickey', 'privatekey']"
|
||||
v-bind:key="type"
|
||||
>
|
||||
<div class="text-center q-mb-lg">
|
||||
{% raw %}
|
||||
<q-responsive :ratio="1" class="q-mx-xl">
|
||||
<qrcode
|
||||
:value="user.keys[type]"
|
||||
:options="{width: 250}"
|
||||
class="rounded-borders"
|
||||
></qrcode>
|
||||
<q-tooltip>{{ user.keys[type] }}</q-tooltip>
|
||||
</q-responsive>
|
||||
<p>{{ type == 'publickey' ? 'Public Key' : 'Private Key' }}</p>
|
||||
{% endraw %}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
const mapChatMsg = msg => {
|
||||
let obj = {}
|
||||
obj.timestamp = {
|
||||
msg: msg,
|
||||
pubkey: pubkey
|
||||
}
|
||||
return obj
|
||||
}
|
||||
Vue.component(VueQrcode.name, VueQrcode)
|
||||
new Vue({
|
||||
el: '#vue',
|
||||
mixins: [windowMixin],
|
||||
data: function () {
|
||||
return {
|
||||
newMessage: '',
|
||||
showMessages: false,
|
||||
messages: {},
|
||||
stall: null,
|
||||
selectedOrder: null,
|
||||
products: [],
|
||||
orders: [],
|
||||
user: null,
|
||||
// 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 = {
|
||||
msg: this.newMessage,
|
||||
pubkey: this.user.keys.publickey
|
||||
}
|
||||
ws.send(JSON.stringify(message))
|
||||
|
||||
this.clearMessage()
|
||||
},
|
||||
sliceKey(key) {
|
||||
if (!key) return ''
|
||||
return `${key.slice(0, 4)}...${key.slice(-4)}`
|
||||
},
|
||||
async generateKeys() {
|
||||
await LNbits.api
|
||||
.request('GET', '/diagonalley/api/v1/keys', null)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
let data = {
|
||||
keys: {
|
||||
privatekey: response.data.privkey,
|
||||
publickey: response.data.pubkey
|
||||
}
|
||||
}
|
||||
this.user = data
|
||||
return
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
})
|
||||
},
|
||||
async getMessages(room_name, all = false) {
|
||||
await LNbits.api
|
||||
.request(
|
||||
'GET',
|
||||
`/diagonalley/api/v1/chat/messages/${room_name}${
|
||||
all ? '?all_messages=true' : ''
|
||||
}`
|
||||
)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
response.data.reverse().map(m => {
|
||||
this.$set(this.messages, m.timestamp * 1000, {
|
||||
msg: m.msg,
|
||||
pubkey: m.pubkey
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
})
|
||||
},
|
||||
changeOrder() {
|
||||
console.log(this.selectedOrder)
|
||||
},
|
||||
startChat(room_name) {
|
||||
if (location.protocol == 'https:') {
|
||||
ws_scheme = 'wss://'
|
||||
} else {
|
||||
ws_scheme = 'ws://'
|
||||
}
|
||||
ws = new WebSocket(
|
||||
ws_scheme + location.host + '/diagonalley/ws/' + room_name
|
||||
)
|
||||
|
||||
function checkWebSocket(event) {
|
||||
if (ws.readyState === WebSocket.CLOSED) {
|
||||
console.log('WebSocket CLOSED: Reopening')
|
||||
ws = new WebSocket(
|
||||
ws_scheme + location.host + '/diagonalley/ws/' + room_name
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ws.onmessage = event => {
|
||||
let event_data = JSON.parse(event.data)
|
||||
|
||||
this.$set(this.messages, Date.now(), event_data)
|
||||
}
|
||||
|
||||
this.ws = ws
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.stall = JSON.parse('{{ stall | tojson }}')
|
||||
let order_details = JSON.parse('{{ order | tojson }}')
|
||||
let products = JSON.parse('{{ products | tojson }}')
|
||||
|
||||
let order_id = '{{ order_id }}'
|
||||
|
||||
let data = this.$q.localStorage.getItem(`lnbits.diagonalley.data`)
|
||||
|
||||
try {
|
||||
if (data) {
|
||||
this.user = data
|
||||
//add chat key (merchant pubkey) if not set
|
||||
if (!this.user.chats[`${order_id}`]) {
|
||||
this.$set(this.user.chats, order_id, [])
|
||||
}
|
||||
//this.$q.localStorage.set(`lnbits.diagonalley.data`, this.user)
|
||||
} else {
|
||||
// generate keys
|
||||
await this.generateKeys()
|
||||
// populate user data
|
||||
this.user.chats = {
|
||||
[`${order_id}`]: []
|
||||
}
|
||||
this.user.orders = []
|
||||
}
|
||||
|
||||
this.order_details = order_details
|
||||
this.products = order_details.map(o => {
|
||||
let product = products.find(p => p.id == o.product_id)
|
||||
return {
|
||||
quantity: o.quantity,
|
||||
name: product.product,
|
||||
image: product.image,
|
||||
price: product.price
|
||||
}
|
||||
})
|
||||
|
||||
this.user.orders = [...new Set([...this.user.orders, order_id])]
|
||||
this.selectedOrder = order_id
|
||||
|
||||
await this.getMessages(order_id)
|
||||
|
||||
this.$q.localStorage.set(`lnbits.diagonalley.data`, this.user)
|
||||
this.startChat(order_id)
|
||||
console.log(this.products)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
})
|
||||
</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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue