122 lines
3.4 KiB
HTML
122 lines
3.4 KiB
HTML
<div>
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<h6 class="text-subtitle1 q-my-none">Messages</h6>
|
|
</div>
|
|
<div class="col-4">
|
|
<q-badge v-if="unreadMessages" color="green"
|
|
><span v-text="unreadMessages"></span> new</q-badge
|
|
>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-btn
|
|
v-if="activePublicKey"
|
|
@click="showClientOrders"
|
|
unelevated
|
|
outline
|
|
class="float-right"
|
|
>Client Orders</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<q-select
|
|
v-model="activePublicKey"
|
|
:options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
|
|
label="Select Customer"
|
|
emit-value
|
|
@input="selectActiveCustomer()"
|
|
>
|
|
</q-select>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-btn
|
|
label="Add"
|
|
color="green"
|
|
class="float-right q-mt-md"
|
|
@click="showAddPublicKey = true"
|
|
>
|
|
<q-tooltip>
|
|
Add a public key to chat with
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="chat-container" ref="chatCard">
|
|
<div class="chat-box">
|
|
<div class="chat-messages" style="height: 45vh">
|
|
<q-chat-message
|
|
v-for="(dm, index) in messages"
|
|
:key="index"
|
|
:name="dm.incoming ? 'customer': 'me'"
|
|
:text="[dm.message]"
|
|
:sent="!dm.incoming"
|
|
:bg-color="dm.incoming ? 'white' : 'light-green-2'"
|
|
:class="'chat-mesage-index-'+index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-card-section>
|
|
<q-form @submit="sendDirectMesage" 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>
|
|
</q-card-section>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
<div>
|
|
<q-dialog v-model="showAddPublicKey" position="top">
|
|
<q-card class="q-pa-lg q-pt-xl" style="width: 500px">
|
|
<q-form @submit="addPublicKey" class="q-gutter-md">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="newPublicKey"
|
|
label="Public Key (hex or nsec)"
|
|
></q-input>
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
unelevated
|
|
color="primary"
|
|
:disable="!newPublicKey"
|
|
type="submit"
|
|
>Add</q-btn
|
|
>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</div>
|