AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Keep last connected node after new start

Browse Source
This commit is contained in:
AlphaX-Projects 2023-10-21 10:06:16 +02:00
parent cfba544bbf
commit 8767cfdcca
1 changed files with 270 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

647
core/src/functional-components/settings-page.js
View File

@ -1,46 +1,34 @@
import { LitElement, html, css } from 'lit'; import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'; import { connect } from 'pwa-helpers'
import { store } from '../store.js'; import { store } from '../store.js'
import { import { doAddNode, doSetNode, doLoadNodeConfig, doRemoveNode, doEditNode } from '../redux/app/app-actions.js'
doAddNode, import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
doSetNode, import snackbar from './snackbar.js'
doLoadNodeConfig, import '../components/language-selector.js'
doRemoveNode, import '../custom-elements/frag-file-input.js'
doEditNode, import FileSaver from 'file-saver'
} from '../redux/app/app-actions.js';
import {
use,
get,
translate,
translateUnsafeHTML,
registerTranslateConfig,
} from 'lit-translate';
import snackbar from './snackbar.js';
import '../components/language-selector.js';
import '../custom-elements/frag-file-input.js';
import FileSaver from 'file-saver';
import '@material/mwc-dialog'; import '@material/mwc-dialog'
import '@material/mwc-button'; import '@material/mwc-button'
import '@material/mwc-select'; import '@material/mwc-select'
import '@material/mwc-textfield'; import '@material/mwc-textfield'
import '@material/mwc-icon'; import '@material/mwc-icon'
import '@material/mwc-list/mwc-list-item.js'; import '@material/mwc-list/mwc-list-item.js'
registerTranslateConfig({ registerTranslateConfig({
loader: (lang) => fetch(`/language/${lang}.json`).then((res) => res.json()), loader: (lang) => fetch(`/language/${lang}.json`).then((res) => res.json())
}); })
const checkLanguage = localStorage.getItem('qortalLanguage'); const checkLanguage = localStorage.getItem('qortalLanguage')
if (checkLanguage === null || checkLanguage.length === 0) { if (checkLanguage === null || checkLanguage.length === 0) {
localStorage.setItem('qortalLanguage', 'us'); localStorage.setItem('qortalLanguage', 'us')
use('us'); use('us')
} else { } else {
use(checkLanguage); use(checkLanguage)
} }
let settingsDialog; let settingsDialog
class SettingsPage extends connect(store)(LitElement) { class SettingsPage extends connect(store)(LitElement) {
static get properties() { static get properties() {
@ -50,8 +38,8 @@ class SettingsPage extends connect(store)(LitElement) {
theme: { type: String, reflect: true }, theme: { type: String, reflect: true },
nodeIndex: { type: Number }, nodeIndex: { type: Number },
isBeingEdited: { type: Boolean }, isBeingEdited: { type: Boolean },
dropdownOpen: { type: Boolean }, dropdownOpen: { type: Boolean }
}; }
} }
static get styles() { static get styles() {
@ -98,9 +86,11 @@ class SettingsPage extends connect(store)(LitElement) {
.buttongreen { .buttongreen {
color: #03c851; color: #03c851;
} }
.buttonBlue {
color: #03a9f4; .buttonBlue {
} color: #03a9f4;
}
.floatleft { .floatleft {
float: left; float: left;
} }
@ -108,24 +98,26 @@ class SettingsPage extends connect(store)(LitElement) {
.floatright { .floatright {
float: right; float: right;
} }
.list-parent { .list-parent {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
#customSelect { #customSelect {
position: relative; position: relative;
border: 1px solid #ccc; border: 1px solid #ccc;
cursor: pointer; cursor: pointer;
background: var(--plugback); background: var(--plugback);
} }
#customSelect .selected { #customSelect .selected {
padding: 10px; padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
#customSelect ul { #customSelect ul {
@ -149,32 +141,32 @@ class SettingsPage extends connect(store)(LitElement) {
#customSelect ul li { #customSelect ul li {
padding: 10px; padding: 10px;
transition: 0.2s all; transition: 0.2s all;
} }
#customSelect ul li:hover { #customSelect ul li:hover {
background-color: var(--graylight); background-color: var(--graylight);
} }
.selected-left-side{
display: flex; .selected-left-side {
align-items: center; display: flex;
} align-items: center;
`; }
`
} }
constructor() { constructor() {
super(); super()
this.nodeConfig = {}; this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
this.nodeIndex = localStorage.getItem('mySelectedNode'); this.nodeConfig = {}
this.theme = localStorage.getItem('qortalTheme') this.nodeIndex = localStorage.getItem('mySelectedNode')
? localStorage.getItem('qortalTheme') this.isBeingEdited = false
: 'light'; this.isBeingEditedIndex = null
this.isBeingEdited = false; this.dropdownOpen = false
this.isBeingEditedIndex = null;
this.dropdownOpen = false;
} }
render() { render() {
this.nodeSelectedOnNewStart()
return html` return html`
<mwc-dialog id="settingsDialog" opened="false"> <mwc-dialog id="settingsDialog" opened="false">
<div style="display: inline; text-align: center;"> <div style="display: inline; text-align: center;">
@ -182,129 +174,58 @@ class SettingsPage extends connect(store)(LitElement) {
<hr /> <hr />
</div> </div>
<br /> <br />
<div <div style="min-height: 250px; min-width: 500px; box-sizing: border-box; position: relative;">
style="min-height: 250px; min-width: 500px; box-sizing: border-box; position: relative;" <div id="customSelect" @click="${this.toggleDropdown}" @blur="${this.handleBlur}" tabindex="0">
>
<div id="customSelect" @click="${this.toggleDropdown}" @blur="${
this.handleBlur
}" tabindex="0">
<div class="selected"> <div class="selected">
<div class="selected-left-side"> <div class="selected-left-side">
<mwc-icon style="margin-right: 10px" <mwc-icon style="margin-right: 10px">link</mwc-icon>
>link</mwc-icon ${this.selectedItem ? html
> `
<div>
${ <span class="name">${this.selectedItem.name}</span>
this.selectedItem <span>${this.selectedItem.protocol + '://' + this.selectedItem.domain + ':' + this.selectedItem.port}</span>
? html` </div>
<div> ` : html`${translate('settings.selectnode')}`
<span class="name"
>${this.selectedItem
.name}</span
>
<span
>${this.selectedItem
.protocol +
'://' +
this.selectedItem.domain +
':' +
this.selectedItem
.port}</span
>
</div>
`
: 'Please select an option'
} }
</div> </div>
<mwc-icon <mwc-icon>expand_more</mwc-icon>
>expand_more</mwc-icon
>
</div> </div>
<ul class="${this.dropdownOpen ? 'open' : ''}"> <ul class="${this.dropdownOpen ? 'open' : ''}">
${this.nodeConfig.knownNodes.map( ${this.nodeConfig.knownNodes.map(
(n, index) => html` (n, index) => html`
<li <li @click="${(e) => this.handleSelection(e, n, index)}">
@click="${(e) =>
this.handleSelection(e, n, index)}"
>
<div class="list-parent"> <div class="list-parent">
<div> <div>
<span class="name" <span class="name">${n.name}</span>
>${n.name}</span <span>${n.protocol + '://' + n.domain + ':' + n.port}</span>
>
<span
>${n.protocol +
'://' +
n.domain +
':' +
n.port}</span
>
</div> </div>
<div> <div>
<mwc-button <mwc-button
outlined outlined
@click="${(e) => { @click="${(e) => {
e.stopPropagation(); e.stopPropagation();
const currentValues = const currentValues = this.nodeConfig.knownNodes[index]
this.nodeConfig const dialog = this.shadowRoot.querySelector('#addNodeDialog')
.knownNodes[
index
];
const dialog =
this.shadowRoot.querySelector(
'#addNodeDialog'
);
// Set the value for mwc-textfield elements // Set the value for mwc-textfield elements
dialog.querySelector( dialog.querySelector('#nameInput').value = currentValues.name
'#nameInput' dialog.querySelector('#domainInput').value = currentValues.domain
).value = dialog.querySelector('#portInput').value = currentValues.port
currentValues.name;
dialog.querySelector(
'#domainInput'
).value =
currentValues.domain;
dialog.querySelector(
'#portInput'
).value =
currentValues.port;
// Set the selected value for mwc-select // Set the selected value for mwc-select
const protocolList = const protocolList = dialog.querySelector('#protocolList')
dialog.querySelector( const desiredProtocol = currentValues.protocol
'#protocolList' protocolList.value = desiredProtocol
); this.isBeingEdited = true
const desiredProtocol = this.isBeingEditedIndex = index
currentValues.protocol; this.shadowRoot.querySelector('#addNodeDialog').show()
protocolList.value =
desiredProtocol;
this.isBeingEdited = true;
this.isBeingEditedIndex =
index;
this.shadowRoot
.querySelector(
'#addNodeDialog'
)
.show();
}}" }}"
><mwc-icon class="buttonBlue"
>edit</mwc-icon
></mwc-button
>
<mwc-button
outlined
@click="${(e) =>
this.removeNode(
e,
index
)}"
><mwc-icon class="buttonred"
>remove</mwc-icon
></mwc-button
> >
<mwc-icon class="buttonBlue">edit</mwc-icon>
</mwc-button>
<mwc-button outlined @click="${(e) => this.removeNode(e, index)}">
<mwc-icon class="buttonred">remove</mwc-icon>
</mwc-button>
</div> </div>
</div> </div>
</li> </li>
@ -312,9 +233,6 @@ class SettingsPage extends connect(store)(LitElement) {
)} )}
</ul> </ul>
</div> </div>
<p style="margin-top: 30px; text-align: center;"> <p style="margin-top: 30px; text-align: center;">
${translate('settings.nodehint')} ${translate('settings.nodehint')}
</p> </p>
@ -323,14 +241,15 @@ class SettingsPage extends connect(store)(LitElement) {
outlined outlined
@click="${() => this.shadowRoot.querySelector('#addNodeDialog').show()}" @click="${() => this.shadowRoot.querySelector('#addNodeDialog').show()}"
><mwc-icon class="buttongreen">add</mwc-icon ><mwc-icon class="buttongreen">add</mwc-icon
>${translate('settings.addcustomnode')}</mwc-button
> >
${translate('settings.addcustomnode')}
</mwc-button>
</center> </center>
<center> <center>
<mwc-button outlined @click="${() => this.removeList()}" <mwc-button outlined @click="${() => this.removeList()}">
><mwc-icon class="buttonred">remove</mwc-icon <mwc-icon class="buttonred">remove</mwc-icon>
>${translate('settings.deletecustomnode')}</mwc-button ${translate('settings.deletecustomnode')}
> </mwc-button>
</center> </center>
<br /> <br />
<div class="floatleft"> <div class="floatleft">
@ -341,9 +260,7 @@ class SettingsPage extends connect(store)(LitElement) {
</div> </div>
<br /><br /> <br /><br />
</div> </div>
<div <div style="min-height:100px; min-width: 300px; box-sizing: border-box; position: relative;">
style="min-height:100px; min-width: 300px; box-sizing: border-box; position: relative;"
>
<hr /> <hr />
<br /> <br />
<center> <center>
@ -353,11 +270,7 @@ class SettingsPage extends connect(store)(LitElement) {
</div> </div>
</center> </center>
</div> </div>
<mwc-button <mwc-button slot="primaryAction" dialogAction="close" class="red">
slot="primaryAction"
dialogAction="close"
class="red"
>
${translate('general.close')} ${translate('general.close')}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
@ -368,36 +281,16 @@ class SettingsPage extends connect(store)(LitElement) {
<hr /> <hr />
</div> </div>
<br /> <br />
<mwc-textfield <mwc-textfield id="nameInput" style="width:100%;" label="${translate('login.name')}"></mwc-textfield>
id="nameInput"
style="width:100%;"
label="${translate('login.name')}"
></mwc-textfield>
<br /> <br />
<mwc-select <mwc-select id="protocolList" style="width:100%;" label="${translate('settings.protocol')}">
id="protocolList"
style="width:100%;"
label="${translate('settings.protocol')}"
>
<mwc-list-item value="http">http</mwc-list-item> <mwc-list-item value="http">http</mwc-list-item>
<mwc-list-item value="https">https</mwc-list-item> <mwc-list-item value="https">https</mwc-list-item>
</mwc-select> </mwc-select>
<br /> <br />
<mwc-textfield <mwc-textfield id="domainInput" style="width:100%;" label="${translate('settings.domain')}"></mwc-textfield>
id="domainInput" <mwc-textfield id="portInput" style="width:100%;" label="${translate('settings.port')}"></mwc-textfield>
style="width:100%;" <mwc-button slot="secondaryAction" dialogAction="close" class="red">
label="${translate('settings.domain')}"
></mwc-textfield>
<mwc-textfield
id="portInput"
style="width:100%;"
label="${translate('settings.port')}"
></mwc-textfield>
<mwc-button
slot="secondaryAction"
dialogAction="close"
class="red"
>
${translate('general.close')} ${translate('general.close')}
</mwc-button> </mwc-button>
<mwc-button slot="primaryAction" @click="${this.addNode}"> <mwc-button slot="primaryAction" @click="${this.addNode}">
@ -411,17 +304,16 @@ class SettingsPage extends connect(store)(LitElement) {
<hr /> <hr />
<br /> <br />
</div> </div>
<div <div style="min-height: 150px; min-width: 500px; box-sizing: border-box; position: relative;">
style="min-height: 150px; min-width: 500px; box-sizing: border-box; position: relative;" <frag-file-input accept=".nodes"handleBlur(event)
> {
<frag-file-input if (!this.shadowRoot.querySelector("#customSelect").contains(event.relatedTarget)) {
accept=".nodes"handleBlur(event) { this.dropdownOpen = false
if (!this.shadowRoot.querySelector("#customSelect").contains(event.relatedTarget)) { }
this.dropdownOpen = false; }
}
}
@file-read-success="${(e) => this.importQortalNodesList(e.detail.result)}" @file-read-success="${(e) => this.importQortalNodesList(e.detail.result)}"
></frag-file-input> >
</frag-file-input>
<h4 style="color: #F44336; text-align: center;"> <h4 style="color: #F44336; text-align: center;">
${translate('walletpage.wchange56')} ${translate('walletpage.wchange56')}
</h4> </h4>
@ -429,255 +321,257 @@ class SettingsPage extends connect(store)(LitElement) {
${translate('settings.warning')} ${translate('settings.warning')}
</h5> </h5>
</div> </div>
<mwc-button <mwc-button slot="primaryAction" dialogAction="cancel" class="red">
slot="primaryAction"
dialogAction="cancel"
class="red"
>
${translate('general.close')} ${translate('general.close')}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
`; `
} }
firstUpdated() { firstUpdated() {
const checkNode = localStorage.getItem('mySelectedNode'); const checkNode = localStorage.getItem('mySelectedNode')
if (checkNode === null || checkNode.length === 0) { if (checkNode === null || checkNode.length === 0) {
localStorage.setItem('mySelectedNode', 0); localStorage.setItem('mySelectedNode', 0);
} else { } else {
this.handleSelectionOnNewStart(checkNode)
} }
} }
handleSelectionOnNewStart(index) {
this.localSavedNodes = JSON.parse(localStorage.getItem('myQortalNodes'))
this.dropdownOpen = false
this.selectedItem = this.localSavedNodes[index]
this.requestUpdate()
}
nodeSelectedOnNewStart() {
const selectedNodeIndexOnNewStart = localStorage.getItem('mySelectedNode')
this.catchSavedNodes = JSON.parse(localStorage.getItem('myQortalNodes'))
const selectedNodeOnNewStart = this.catchSavedNodes[selectedNodeIndexOnNewStart]
const selectedNameOnNewStart = `${selectedNodeOnNewStart.name}`
const selectedNodeUrlOnNewStart = `${selectedNodeOnNewStart.protocol + '://' + selectedNodeOnNewStart.domain +':' + selectedNodeOnNewStart.port}`
const index = parseInt(selectedNodeIndexOnNewStart)
if (isNaN(index)) return
const snack0string = get('settings.snack2')
snackbar.add({
labelText: `${snack0string} : ${selectedNameOnNewStart} ${selectedNodeUrlOnNewStart}`,
dismiss: true
})
}
toggleDropdown() { toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen; this.dropdownOpen = !this.dropdownOpen
} }
handleBlur(event) { handleBlur(event) {
if ( if (!this.shadowRoot.querySelector('#customSelect').contains(event.relatedTarget)) {
!this.shadowRoot this.dropdownOpen = false
.querySelector('#customSelect')
.contains(event.relatedTarget)
) {
this.dropdownOpen = false;
} }
} }
focusOnCustomSelect() { focusOnCustomSelect() {
const customSelect = this.shadowRoot.querySelector('#customSelect'); const customSelect = this.shadowRoot.querySelector('#customSelect')
if (customSelect) { if (customSelect) {
customSelect.focus(); customSelect.focus()
} }
} }
handleSelection(event, node, index) { handleSelection(event, node, index) {
event.stopPropagation(); event.stopPropagation()
this.selectedItem = node; this.selectedItem = node
this.dropdownOpen = false; this.dropdownOpen = false
this.requestUpdate(); this.requestUpdate()
this.nodeSelected(index); this.nodeSelected(index)
localStorage.setItem('mySelectedNode', index)
} }
show() { show() {
this.shadowRoot.getElementById('settingsDialog').show(); this.shadowRoot.getElementById('settingsDialog').show()
} }
close() { close() {
this.shadowRoot.getElementById('settingsDialog').close(); this.shadowRoot.getElementById('settingsDialog').close()
} }
removeList() { removeList() {
localStorage.removeItem('myQortalNodes'); localStorage.removeItem('myQortalNodes')
const obj1 = { const obj1 = {
name: 'Local Node', name: 'Local Node',
protocol: 'http', protocol: 'http',
domain: '127.0.0.1', domain: '127.0.0.1',
port: 12391, port: 12391,
enableManagement: true, enableManagement: true
}; }
const obj2 = { const obj2 = {
name: 'Local Testnet', name: 'Local Testnet',
protocol: 'http', protocol: 'http',
domain: '127.0.0.1', domain: '127.0.0.1',
port: 62391, port: 62391,
enableManagement: true, enableManagement: true
}; }
var renewNodes = []; var renewNodes = []
renewNodes.push(obj1, obj2); renewNodes.push(obj1, obj2)
localStorage.setItem('myQortalNodes', JSON.stringify(renewNodes)); localStorage.setItem('myQortalNodes', JSON.stringify(renewNodes))
let snack1string = get('settings.snack1'); let snack1string = get('settings.snack1')
snackbar.add({ snackbar.add({
labelText: `${snack1string}`, labelText: `${snack1string}`,
dismiss: true, dismiss: true
}); })
localStorage.removeItem('mySelectedNode'); localStorage.removeItem('mySelectedNode')
localStorage.setItem('mySelectedNode', 0); localStorage.setItem('mySelectedNode', 0)
store.dispatch(doLoadNodeConfig()); store.dispatch(doLoadNodeConfig())
} }
nodeSelected(selectedNodeIndex) { nodeSelected(selectedNodeIndex) {
const selectedNode = this.nodeConfig.knownNodes[selectedNodeIndex]; const selectedNode = this.nodeConfig.knownNodes[selectedNodeIndex]
const selectedNodeUrl = `${ const selectedName = `${selectedNode.name}`
selectedNode.protocol + const selectedNodeUrl = `${selectedNode.protocol + '://' + selectedNode.domain +':' + selectedNode.port}`
'://' +
selectedNode.domain +
':' +
selectedNode.port
}`;
const index = parseInt(selectedNodeIndex); const index = parseInt(selectedNodeIndex)
if (isNaN(index)) return; if (isNaN(index)) return
store.dispatch(doSetNode(selectedNodeIndex)); store.dispatch(doSetNode(selectedNodeIndex))
localStorage.removeItem('mySelectedNode'); localStorage.removeItem('mySelectedNode');
localStorage.setItem('mySelectedNode', selectedNodeIndex); localStorage.setItem('mySelectedNode', selectedNodeIndex)
let snack2string = get('settings.snack2'); let snack2string = get('settings.snack2')
snackbar.add({ snackbar.add({
labelText: `${snack2string} : ${selectedNodeUrl}`, labelText: `${snack2string} : ${selectedName} ${selectedNodeUrl}`,
dismiss: true, dismiss: true
}); })
// this.shadowRoot.querySelector('#settingsDialog').close();
} }
addNode(e) { addNode(e) {
e.stopPropagation(); e.stopPropagation()
if (this.isBeingEdited) { if (this.isBeingEdited) {
this.editNode(this.isBeingEditedIndex); this.editNode(this.isBeingEditedIndex)
return; return
} }
const nameInput = this.shadowRoot.getElementById('nameInput').value;
const protocolList =
this.shadowRoot.getElementById('protocolList').value;
const domainInput = this.shadowRoot.getElementById('domainInput').value;
const portInput = this.shadowRoot.getElementById('portInput').value;
if ( const nameInput = this.shadowRoot.getElementById('nameInput').value
protocolList.length >= 4 && const protocolList = this.shadowRoot.getElementById('protocolList').value
domainInput.length >= 3 && const domainInput = this.shadowRoot.getElementById('domainInput').value
portInput.length >= 2 const portInput = this.shadowRoot.getElementById('portInput').value
) {
if (protocolList.length >= 4 && domainInput.length >= 3 && portInput.length >= 2) {
const nodeObject = { const nodeObject = {
name: nameInput, name: nameInput,
protocol: protocolList, protocol: protocolList,
domain: domainInput, domain: domainInput,
port: portInput, port: portInput,
enableManagement: true, enableManagement: true
}; }
store.dispatch(doAddNode(nodeObject)); store.dispatch(doAddNode(nodeObject))
const haveNodes = JSON.parse(localStorage.getItem('myQortalNodes')); const haveNodes = JSON.parse(localStorage.getItem('myQortalNodes'))
if (haveNodes === null || haveNodes.length === 0) { if (haveNodes === null || haveNodes.length === 0) {
var savedNodes = []; var savedNodes = []
savedNodes.push(nodeObject); savedNodes.push(nodeObject)
localStorage.setItem( localStorage.setItem('myQortalNodes', JSON.stringify(savedNodes))
'myQortalNodes',
JSON.stringify(savedNodes)
);
let snack3string = get('settings.snack3'); let snack3string = get('settings.snack3')
snackbar.add({ snackbar.add({
labelText: `${snack3string}`, labelText: `${snack3string}`,
dismiss: true, dismiss: true
}); })
this.shadowRoot.getElementById('nameInput').value = ''; this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('protocolList').value = ''; this.shadowRoot.getElementById('protocolList').value = ''
this.shadowRoot.getElementById('domainInput').value = ''; this.shadowRoot.getElementById('domainInput').value = ''
this.shadowRoot.getElementById('portInput').value = ''; this.shadowRoot.getElementById('portInput').value = ''
this.shadowRoot.querySelector('#addNodeDialog').close(); this.shadowRoot.querySelector('#addNodeDialog').close()
} else { } else {
var stored = JSON.parse(localStorage.getItem('myQortalNodes')); var stored = JSON.parse(localStorage.getItem('myQortalNodes'))
stored.push(nodeObject); stored.push(nodeObject)
localStorage.setItem('myQortalNodes', JSON.stringify(stored)); localStorage.setItem('myQortalNodes', JSON.stringify(stored))
let snack3string = get('settings.snack3'); let snack3string = get('settings.snack3');
snackbar.add({ snackbar.add({
labelText: `${snack3string}`, labelText: `${snack3string}`,
dismiss: true, dismiss: true
}); })
this.shadowRoot.getElementById('nameInput').value = ''; this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('protocolList').value = ''; this.shadowRoot.getElementById('protocolList').value = ''
this.shadowRoot.getElementById('domainInput').value = ''; this.shadowRoot.getElementById('domainInput').value = ''
this.shadowRoot.getElementById('portInput').value = ''; this.shadowRoot.getElementById('portInput').value = ''
this.shadowRoot.querySelector('#addNodeDialog').close(); this.shadowRoot.querySelector('#addNodeDialog').close()
} }
} }
} }
removeNode(event, index) { removeNode(event, index) {
event.stopPropagation(); event.stopPropagation()
let stored = JSON.parse(localStorage.getItem('myQortalNodes')); let stored = JSON.parse(localStorage.getItem('myQortalNodes'))
stored.splice(index, 1); stored.splice(index, 1)
localStorage.setItem('myQortalNodes', JSON.stringify(stored)); localStorage.setItem('myQortalNodes', JSON.stringify(stored))
store.dispatch(doRemoveNode(index)); store.dispatch(doRemoveNode(index));
let snack3string = get('settings.snack6'); let snack3string = get('settings.snack6')
snackbar.add({ snackbar.add({
labelText: `${snack3string}`, labelText: `${snack3string}`,
dismiss: true, dismiss: true
}); })
this.shadowRoot.querySelector('#addNodeDialog').close(); this.shadowRoot.querySelector('#addNodeDialog').close()
} }
editNode(index) {
const nameInput = this.shadowRoot.getElementById('nameInput').value;
const protocolList =
this.shadowRoot.getElementById('protocolList').value;
const domainInput = this.shadowRoot.getElementById('domainInput').value;
const portInput = this.shadowRoot.getElementById('portInput').value;
if ( editNode(index) {
protocolList.length >= 4 && const nameInput = this.shadowRoot.getElementById('nameInput').value
domainInput.length >= 3 && const protocolList = this.shadowRoot.getElementById('protocolList').value
portInput.length >= 2 const domainInput = this.shadowRoot.getElementById('domainInput').value
) { const portInput = this.shadowRoot.getElementById('portInput').value
if (protocolList.length >= 4 && domainInput.length >= 3 && portInput.length >= 2) {
const nodeObject = { const nodeObject = {
name: nameInput, name: nameInput,
protocol: protocolList, protocol: protocolList,
domain: domainInput, domain: domainInput,
port: portInput, port: portInput,
enableManagement: true, enableManagement: true,
}; }
let stored = JSON.parse(localStorage.getItem('myQortalNodes')); let stored = JSON.parse(localStorage.getItem('myQortalNodes'))
const copyStored = [...stored]; const copyStored = [...stored]
copyStored[index] = nodeObject; copyStored[index] = nodeObject
localStorage.setItem('myQortalNodes', JSON.stringify(copyStored)); localStorage.setItem('myQortalNodes', JSON.stringify(copyStored))
store.dispatch(doEditNode(index, nodeObject)); store.dispatch(doEditNode(index, nodeObject))
let snack3string = get('settings.snack7'); let snack3string = get('settings.snack7')
snackbar.add({ snackbar.add({
labelText: `${snack3string}`, labelText: `${snack3string}`,
dismiss: true, dismiss: true
}); })
this.shadowRoot.getElementById('nameInput').value = ''; this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('protocolList').value = ''; this.shadowRoot.getElementById('protocolList').value = ''
this.shadowRoot.getElementById('domainInput').value = ''; this.shadowRoot.getElementById('domainInput').value = ''
this.shadowRoot.getElementById('portInput').value = ''; this.shadowRoot.getElementById('portInput').value = ''
this.isBeingEdited = false; this.isBeingEdited = false
this.isBeingEditedIndex = null; this.isBeingEditedIndex = null
this.shadowRoot.querySelector('#addNodeDialog').close(); this.shadowRoot.querySelector('#addNodeDialog').close()
} }
} }
openImportNodesDialog() { openImportNodesDialog() {
this.shadowRoot.querySelector('#importQortalNodesListDialog').show(); this.shadowRoot.querySelector('#importQortalNodesListDialog').show()
} }
closeImportNodesDialog() { closeImportNodesDialog() {
this.shadowRoot.querySelector('#importQortalNodesListDialog').close(); this.shadowRoot.querySelector('#importQortalNodesListDialog').close()
} }
renderExportNodesListButton() { renderExportNodesListButton() {
@ -687,8 +581,9 @@ class SettingsPage extends connect(store)(LitElement) {
unelevated unelevated
label="${translate('settings.export')}" label="${translate('settings.export')}"
@click="${() => this.exportQortalNodesList()}" @click="${() => this.exportQortalNodesList()}"
></mwc-button> >
`; </mwc-button>
`
} }
exportQortalNodesList() { exportQortalNodesList() {
@ -696,40 +591,38 @@ class SettingsPage extends connect(store)(LitElement) {
const qortalNodesList = JSON.stringify( const qortalNodesList = JSON.stringify(
localStorage.getItem('myQortalNodes') localStorage.getItem('myQortalNodes')
); );
const qortalNodesListSave = JSON.parse(qortalNodesList || '[]'); const qortalNodesListSave = JSON.parse(qortalNodesList || '[]')
const blob = new Blob([qortalNodesListSave], { const blob = new Blob([qortalNodesListSave], {
type: 'text/plain;charset=utf-8', type: 'text/plain;charset=utf-8',
}); });
nodelist = 'qortal.nodes'; nodelist = 'qortal.nodes'
this.saveFileToDisk(blob, nodelist); this.saveFileToDisk(blob, nodelist)
} }
async saveFileToDisk(blob, fileName) { async saveFileToDisk(blob, fileName) {
try { try {
const fileHandle = await self.showSaveFilePicker({ const fileHandle = await self.showSaveFilePicker({
suggestedName: fileName, suggestedName: fileName,
types: [ types: [{
{ description: 'File'
description: 'File', }],
}, })
],
});
const writeFile = async (fileHandle, contents) => { const writeFile = async (fileHandle, contents) => {
const writable = await fileHandle.createWritable(); const writable = await fileHandle.createWritable()
await writable.write(contents); await writable.write(contents)
await writable.close(); await writable.close()
}; };
writeFile(fileHandle, blob).then(() => console.log('FILE SAVED')); writeFile(fileHandle, blob).then(() => console.log('FILE SAVED'));
let snack4string = get('settings.snack4'); let snack4string = get('settings.snack4')
snackbar.add({ snackbar.add({
labelText: `${snack4string} qortal.nodes`, labelText: `${snack4string} qortal.nodes`,
dismiss: true, dismiss: true
}); })
} catch (error) { } catch (error) {
if (error.name === 'AbortError') { if (error.name === 'AbortError') {
return; return
} }
FileSaver.saveAs(blob, fileName); FileSaver.saveAs(blob, fileName)
} }
} }
@ -741,25 +634,25 @@ class SettingsPage extends connect(store)(LitElement) {
label="${translate('settings.import')}" label="${translate('settings.import')}"
@click="${() => this.openImportNodesDialog()}" @click="${() => this.openImportNodesDialog()}"
></mwc-button> ></mwc-button>
`; `
} }
async importQortalNodesList(file) { async importQortalNodesList(file) {
localStorage.removeItem('myQortalNodes'); localStorage.removeItem('myQortalNodes')
const newItems = JSON.parse(file || '[]'); const newItems = JSON.parse(file || '[]')
localStorage.setItem('myQortalNodes', JSON.stringify(newItems)); localStorage.setItem('myQortalNodes', JSON.stringify(newItems))
this.shadowRoot.querySelector('#importQortalNodesListDialog').close(); this.shadowRoot.querySelector('#importQortalNodesListDialog').close()
let snack5string = get('settings.snack5'); let snack5string = get('settings.snack5')
snackbar.add({ snackbar.add({
labelText: `${snack5string}`, labelText: `${snack5string}`,
dismiss: true, dismiss: true,
}); });
localStorage.removeItem('mySelectedNode'); localStorage.removeItem('mySelectedNode')
localStorage.setItem('mySelectedNode', 0); localStorage.setItem('mySelectedNode', 0)
store.dispatch(doLoadNodeConfig()); store.dispatch(doLoadNodeConfig())
} }
stateChanged(state) { stateChanged(state) {
@ -768,9 +661,9 @@ class SettingsPage extends connect(store)(LitElement) {
} }
} }
window.customElements.define('settings-page', SettingsPage); window.customElements.define('settings-page', SettingsPage)
const settings = document.createElement('settings-page'); const settings = document.createElement('settings-page')
settingsDialog = document.body.appendChild(settings); settingsDialog = document.body.appendChild(settings)
export default settingsDialog; export default settingsDialog