feat: add basic UI
This commit is contained in:
Vlad Stan
parent
5a747361af
commit
298021d25a
6 changed files with 438 additions and 80 deletions
3
static/components/relay-details/relay-details.html
Normal file
3
static/components/relay-details/relay-details.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div>
|
||||||
|
xxx
|
||||||
|
</div>
|
||||||
31
static/components/relay-details/relay-details.js
Normal file
31
static/components/relay-details/relay-details.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
async function relayDetails(path) {
|
||||||
|
const template = await loadTemplateAsync(path)
|
||||||
|
Vue.component('relay-details', {
|
||||||
|
name: 'relay-details',
|
||||||
|
template,
|
||||||
|
|
||||||
|
props: [],
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
formDialogItem: {
|
||||||
|
show: false,
|
||||||
|
data: {
|
||||||
|
name: '',
|
||||||
|
description: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
satBtc(val, showUnit = true) {
|
||||||
|
return satOrBtc(val, showUnit, this.satsDenominated)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
created: async function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
172
static/js/index.js
Normal file
172
static/js/index.js
Normal file
|
|
@ -0,0 +1,172 @@
|
||||||
|
const relays = async () => {
|
||||||
|
Vue.component(VueQrcode.name, VueQrcode)
|
||||||
|
|
||||||
|
await relayDetails('static/components/relay-details/relay-details.html')
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#vue',
|
||||||
|
mixins: [windowMixin],
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
filter: '',
|
||||||
|
relayLinks: [],
|
||||||
|
formDialogRelay: {
|
||||||
|
show: false,
|
||||||
|
showAdvanced: false,
|
||||||
|
data: {
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
type: '',
|
||||||
|
amount: '',
|
||||||
|
wallet: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
relayTypes: [
|
||||||
|
{
|
||||||
|
id: 'rating',
|
||||||
|
label: 'Rating (rate one item from a list)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'poll',
|
||||||
|
label: 'Poll (choose one item from a list)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'likes',
|
||||||
|
label: 'Likes (like or dislike an item)'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
relaysTable: {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
align: 'left',
|
||||||
|
label: '',
|
||||||
|
field: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'name',
|
||||||
|
align: 'left',
|
||||||
|
label: 'Name',
|
||||||
|
field: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'description',
|
||||||
|
align: 'left',
|
||||||
|
label: 'Description',
|
||||||
|
field: 'description'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'type',
|
||||||
|
align: 'left',
|
||||||
|
label: 'Type',
|
||||||
|
field: 'type'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'amount',
|
||||||
|
align: 'left',
|
||||||
|
label: 'Amount',
|
||||||
|
field: 'amount'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
pagination: {
|
||||||
|
rowsPerPage: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDefaultRelayData: function () {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
type: this.relayTypes[0],
|
||||||
|
amount: '100',
|
||||||
|
wallet: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getRelayTypeLabel: function (relayType) {
|
||||||
|
const type = this.relayTypes.find(s => (s.id = relayType))
|
||||||
|
return type ? type.label : '?'
|
||||||
|
},
|
||||||
|
openCreateRelayDialog: function () {
|
||||||
|
this.formDialogRelay.data = this.getDefaultRelayData()
|
||||||
|
this.formDialogRelay.show = true
|
||||||
|
},
|
||||||
|
getRelays: async function () {
|
||||||
|
try {
|
||||||
|
const {data} = await LNbits.api.request(
|
||||||
|
'GET',
|
||||||
|
'/reviews/api/v1/survey',
|
||||||
|
this.g.user.wallets[0].inkey
|
||||||
|
)
|
||||||
|
this.relayLinks = data.map(c =>
|
||||||
|
mapRelay(
|
||||||
|
c,
|
||||||
|
this.relayLinks.find(old => old.id === c.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
console.log('### relayLinks', this.relayLinks)
|
||||||
|
} catch (error) {
|
||||||
|
console.log('### getRelays', error)
|
||||||
|
LNbits.utils.notifyApiError(error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createRelay: async function (data) {
|
||||||
|
try {
|
||||||
|
data.type = data.type.id
|
||||||
|
const resp = await LNbits.api.request(
|
||||||
|
'POST',
|
||||||
|
'/reviews/api/v1/survey',
|
||||||
|
this.g.user.wallets[0].adminkey,
|
||||||
|
data
|
||||||
|
)
|
||||||
|
|
||||||
|
this.relayLinks.unshift(mapRelay(resp.data))
|
||||||
|
this.formDialogRelay.show = false
|
||||||
|
} catch (error) {
|
||||||
|
LNbits.utils.notifyApiError(error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteRelay: function (relayId) {
|
||||||
|
LNbits.utils
|
||||||
|
.confirmDialog('Are you sure you want to delete this survet?')
|
||||||
|
.onOk(async () => {
|
||||||
|
try {
|
||||||
|
const response = await LNbits.api.request(
|
||||||
|
'DELETE',
|
||||||
|
'/reviews/api/v1/survey/' + relayId,
|
||||||
|
this.g.user.wallets[0].adminkey
|
||||||
|
)
|
||||||
|
|
||||||
|
this.relayLinks = _.reject(this.relayLinks, function (obj) {
|
||||||
|
return obj.id === relayId
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
LNbits.utils.notifyApiError(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
sendFormDataRelay: async function () {
|
||||||
|
console.log('### sendFormDataRelay')
|
||||||
|
this.createRelay(this.formDialogRelay.data)
|
||||||
|
},
|
||||||
|
|
||||||
|
exportrelayCSV: function () {
|
||||||
|
LNbits.utils.exportCSV(
|
||||||
|
this.relaysTable.columns,
|
||||||
|
this.relayLinks,
|
||||||
|
'relays'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: async function () {
|
||||||
|
await this.getRelays()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
relays()
|
||||||
26
static/js/utils.js
Normal file
26
static/js/utils.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
const mapRelay = (obj, oldObj = {}) => {
|
||||||
|
const relay = {...oldObj, ...obj}
|
||||||
|
|
||||||
|
relay.expanded = oldObj.expanded || false
|
||||||
|
|
||||||
|
return relay
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadTemplateAsync(path) {
|
||||||
|
const result = new Promise(resolve => {
|
||||||
|
const xhttp = new XMLHttpRequest()
|
||||||
|
|
||||||
|
xhttp.onreadystatechange = function () {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200) resolve(this.responseText)
|
||||||
|
|
||||||
|
if (this.status == 404) resolve(`<div>Page not found: ${path}</div>`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhttp.open('GET', path, true)
|
||||||
|
xhttp.send()
|
||||||
|
})
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
26
templates/nostrrelay/_api_docs.html
Normal file
26
templates/nostrrelay/_api_docs.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<p>
|
||||||
|
Nostr Relay<br />
|
||||||
|
<small>
|
||||||
|
Created by,
|
||||||
|
<a
|
||||||
|
class="text-secondary"
|
||||||
|
target="_blank"
|
||||||
|
style="color: unset"
|
||||||
|
href="https://github.com/motorina0"
|
||||||
|
>motorina0</a
|
||||||
|
></small
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<a
|
||||||
|
class="text-secondary"
|
||||||
|
target="_blank"
|
||||||
|
href="/docs#/nostrrelay"
|
||||||
|
class="text-white"
|
||||||
|
>Swagger REST API Documentation</a
|
||||||
|
>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
|
@ -1,27 +1,115 @@
|
||||||
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
|
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
|
||||||
%} {% block page %}
|
%} {% block page %}
|
||||||
<div class="row q-col-gutter-md">
|
<div class="row q-col-gutter-md">
|
||||||
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
|
<div class="col-12 col-md-7 q-gutter-y-md">
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<q-btn unelevated color="primary" @click="enableRelay"
|
{% raw %}
|
||||||
><div v-if="enabled">Disable relay</div>
|
<q-btn unelevated color="primary" @click="openCreateRelayDialog()"
|
||||||
<div v-else>Enable relay</div></q-btn
|
>New relay
|
||||||
>
|
</q-btn>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<h6>WebSocket Chat</h6>
|
<div class="row items-center no-wrap q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<h5 class="text-subtitle1 q-my-none">Relays</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="text" id="messageText" autocomplete="off" />
|
<div class="col q-pr-lg">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
dense
|
||||||
|
debounce="300"
|
||||||
|
v-model="filter"
|
||||||
|
placeholder="Search"
|
||||||
|
class="float-right"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search"></q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<q-btn outline color="grey" label="...">
|
||||||
|
<q-menu auto-close>
|
||||||
|
<q-list style="min-width: 100px">
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section @click="exportrelayCSV"
|
||||||
|
>Export to CSV</q-item-section
|
||||||
|
>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-table
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
:data="relayLinks"
|
||||||
|
row-key="id"
|
||||||
|
:columns="relaysTable.columns"
|
||||||
|
:pagination.sync="relaysTable.pagination"
|
||||||
|
:filter="filter"
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
size="sm"
|
||||||
|
color="accent"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="props.row.expanded= !props.row.expanded"
|
||||||
|
:icon="props.row.expanded? 'remove' : 'add'"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
|
||||||
<q-btn unelevated color="primary" @click="sendMessage()"
|
<q-td auto-width> {{props.row.name}} </q-td>
|
||||||
><div>Send</div>
|
<q-td key="description" :props="props" :class="">
|
||||||
</q-btn>
|
{{props.row.description}}
|
||||||
|
</q-td>
|
||||||
<ul id="messages"></ul>
|
<q-td key="type" :props="props" :class="">
|
||||||
|
<div>{{getRelayTypeLabel(props.row.type)}}</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="amount" :props="props" :class="">
|
||||||
|
<div>{{props.row.amount}}</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
<q-tr v-if="props.row.expanded" :props="props">
|
||||||
|
<q-td colspan="100%">
|
||||||
|
<div class="row items-center q-mt-md q-mb-lg">
|
||||||
|
<div class="col-2 q-pr-lg">ID:</div>
|
||||||
|
<div class="col-4 q-pr-lg">{{props.row.id}}</div>
|
||||||
|
<div class="col-6 q-pr-lg">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
color="pink"
|
||||||
|
icon="cancel"
|
||||||
|
class="float-right"
|
||||||
|
@click="deleteRelay(props.row.id)"
|
||||||
|
>Delete Relay</q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center q-mt-md q-mb-lg">
|
||||||
|
<div class="col-2 q-pr-lg"></div>
|
||||||
|
<div class="col-10 q-pr-lg">
|
||||||
|
<relay-items
|
||||||
|
:relay-id="props.row.id"
|
||||||
|
:adminkey="g.user.wallets[0].adminkey"
|
||||||
|
:inkey="g.user.wallets[0].inkey"
|
||||||
|
></relay-items>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
{% endraw %}
|
||||||
|
</q-table>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -30,79 +118,91 @@
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<h6 class="text-subtitle1 q-my-none">
|
<h6 class="text-subtitle1 q-my-none">
|
||||||
{{SITE_TITLE}} NostrRelay extension
|
{{SITE_TITLE}} Nostr Relay Extension
|
||||||
</h6>
|
</h6>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section>
|
<q-card-section class="q-pa-none">
|
||||||
<p>
|
<q-separator></q-separator>
|
||||||
Thiago's Point of Sale is a secure, mobile-ready, instant and
|
<q-list> {% include "nostrrelay/_api_docs.html" %} </q-list>
|
||||||
shareable point of sale terminal (PoS) for merchants. The PoS is
|
|
||||||
linked to your LNbits wallet but completely air-gapped so users can
|
|
||||||
ONLY create invoices. To share the NostrRelay hit the hash on the
|
|
||||||
terminal.
|
|
||||||
</p>
|
|
||||||
<small
|
|
||||||
>Created by
|
|
||||||
<a
|
|
||||||
class="text-secondary"
|
|
||||||
href="https://pypi.org/user/dcs/"
|
|
||||||
target="_blank"
|
|
||||||
>DCs</a
|
|
||||||
>,
|
|
||||||
<a
|
|
||||||
class="text-secondary"
|
|
||||||
href="https://github.com/benarc"
|
|
||||||
target="_blank"
|
|
||||||
>Ben Arc</a
|
|
||||||
>.</small
|
|
||||||
>
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<q-dialog v-model="formDialogRelay.show" position="top">
|
||||||
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||||
|
<q-form @submit="sendFormDataRelay" class="q-gutter-md">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
v-model.trim="formDialogRelay.data.name"
|
||||||
|
type="text"
|
||||||
|
label="*Name"
|
||||||
|
></q-input>
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
v-model.trim="formDialogRelay.data.description"
|
||||||
|
type="text"
|
||||||
|
label="Description"
|
||||||
|
></q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
v-model="formDialogRelay.data.type"
|
||||||
|
:options="relayTypes"
|
||||||
|
label="Relay Type"
|
||||||
|
class="q-mt-lg"
|
||||||
|
>
|
||||||
|
</q-select>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
v-model.trim="formDialogRelay.data.amount"
|
||||||
|
type="number"
|
||||||
|
label="*Amount (how many sats it costs to vote)"
|
||||||
|
></q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
v-model="formDialogRelay.data.wallet"
|
||||||
|
:options="g.user.walletOptions"
|
||||||
|
label="Wallet *"
|
||||||
|
>
|
||||||
|
</q-select>
|
||||||
|
<q-toggle
|
||||||
|
v-model="formDialogRelay.showAdvanced"
|
||||||
|
label="Show advanced options"
|
||||||
|
></q-toggle>
|
||||||
|
<div v-if="formDialogRelay.showAdvanced" class="row">
|
||||||
|
<div class="col">xxx</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-mt-lg">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
color="primary"
|
||||||
|
:disable="!formDialogRelay.data.name ||
|
||||||
|
!formDialogRelay.data.type ||
|
||||||
|
!formDialogRelay.data.wallet ||
|
||||||
|
!formDialogRelay.data.amount"
|
||||||
|
type="submit"
|
||||||
|
>Create Relay</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>
|
||||||
{% endblock %} {% block scripts %} {{ window_vars(user) }}
|
{% endblock %} {% block scripts %} {{ window_vars(user) }}
|
||||||
<script>
|
<script src="{{ url_for('nostrrelay_static', path='js/utils.js') }}"></script>
|
||||||
new Vue({
|
<script src="{{ url_for('nostrrelay_static', path='components/relay-details/relay-details.js') }}"></script>
|
||||||
el: '#vue',
|
<script src="{{ url_for('nostrrelay_static', path='js/index.js') }}"></script>
|
||||||
mixins: [windowMixin],
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
enabled: false,
|
|
||||||
ws: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
enableRelay: function () {
|
|
||||||
// var self = this
|
|
||||||
// LNbits.api
|
|
||||||
// .request(
|
|
||||||
// 'GET',
|
|
||||||
// '/nostrrelay/api/v1/nostrrelays?all_wallets=true',
|
|
||||||
// this.g.user.wallets[0].inkey
|
|
||||||
// )
|
|
||||||
// .then(function (response) {
|
|
||||||
// self.nostrrelays = response.data.map(function (obj) {
|
|
||||||
// return mapNostrRelay(obj)
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
this.enabled = !this.enabled
|
|
||||||
},
|
|
||||||
sendMessage: function (event) {
|
|
||||||
var input = document.getElementById('messageText')
|
|
||||||
this.ws.send(input.value)
|
|
||||||
input.value = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.ws = new WebSocket('ws://localhost:5000/nostrrelay/client')
|
|
||||||
this.ws.onmessage = function (event) {
|
|
||||||
var messages = document.getElementById('messages')
|
|
||||||
var message = document.createElement('li')
|
|
||||||
var content = document.createTextNode(event.data)
|
|
||||||
message.appendChild(content)
|
|
||||||
messages.appendChild(message)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue