Qortal/qortal-ui
1
0
Fork 1
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-11-01 21:27:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

added custom select input for port selection

Browse Source
This commit is contained in:
PhilReact
2023-09-17 22:57:25 -05:00
parent cb886e29e1
commit 28c58cb249
6 changed files with 801 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/language/us.json
View File

@@ -200,6 +200,8 @@
"snack3": "Successfully added and saved custom node",
"snack4": "Nodes successfully saved as",
"snack5": "Nodes successfully imported",
"snack6": "Successfully removed custom node",
"snack7": "Successfully edited custom node",
"exp1": "Export Private Master Key",
"exp2": "Export Master Key",
"exp3": "Export",

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

@@ -1,34 +1,46 @@
import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'
import { store } from '../store.js'
import { doAddNode, doSetNode, doLoadNodeConfig } 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 { LitElement, html, css } from 'lit';
import { connect } from 'pwa-helpers';
import { store } from '../store.js';
import {
doAddNode,
doSetNode,
doLoadNodeConfig,
doRemoveNode,
doEditNode,
} 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-button'
import '@material/mwc-select'
import '@material/mwc-textfield'
import '@material/mwc-icon'
import '@material/mwc-list/mwc-list-item.js'
import '@material/mwc-dialog';
import '@material/mwc-button';
import '@material/mwc-select';
import '@material/mwc-textfield';
import '@material/mwc-icon';
import '@material/mwc-list/mwc-list-item.js';
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) {
localStorage.setItem('qortalLanguage', 'us')
use('us')
localStorage.setItem('qortalLanguage', 'us');
use('us');
} else {
use(checkLanguage)
use(checkLanguage);
}
let settingsDialog
let settingsDialog;
class SettingsPage extends connect(store)(LitElement) {
static get properties() {
@@ -36,8 +48,10 @@ class SettingsPage extends connect(store)(LitElement) {
lastSelected: { type: Number },
nodeConfig: { type: Object },
theme: { type: String, reflect: true },
nodeIndex: { type: Number }
}
nodeIndex: { type: Number },e
isBeingEdited: { type: Boolean },
dropdownOpen: { type: Boolean },
};
}
static get styles() {
@@ -51,6 +65,7 @@ class SettingsPage extends connect(store)(LitElement) {
--mdc-dialog-min-width: 300px;
--mdc-dialog-max-width: 650px;
--mdc-dialog-max-height: 700px;
--mdc-list-item-text-width: 100%;
}
#main {
@@ -83,7 +98,9 @@ class SettingsPage extends connect(store)(LitElement) {
.buttongreen {
color: #03c851;
}
.buttonBlue {
color: #03a9f4;
}
.floatleft {
float: left;
}
@@ -91,49 +108,249 @@ class SettingsPage extends connect(store)(LitElement) {
.floatright {
float: right;
}
`
.list-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
#customSelect {
position: relative;
border: 1px solid #ccc;
cursor: pointer;
background: var(--plugback);
}
#customSelect .selected {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
#customSelect ul {
position: absolute;
top: 100%;
left: 0;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
display: none;
background: var(--plugback);
width: 100%;
box-sizing: border-box;
z-index: 10;
}
#customSelect ul.open {
display: block;
}
#customSelect ul li {
padding: 10px;
transition: 0.2s all;
}
#customSelect ul li:hover {
background-color: var(--graylight);
}
.selected-left-side{
display: flex;
align-items: center;
}
`;
}
constructor() {
super()
this.nodeConfig = {}
this.nodeIndex = localStorage.getItem('mySelectedNode')
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
super();
this.nodeConfig = {};
this.nodeIndex = localStorage.getItem('mySelectedNode');
this.theme = localStorage.getItem('qortalTheme')
? localStorage.getItem('qortalTheme')
: 'light';
this.isBeingEdited = false;
this.isBeingEditedIndex = null;
this.dropdownOpen = false;
}
render() {
console.log('this.dropdownOpen', this.dropdownOpen);
return html`
<mwc-dialog id="settingsDialog" opened=false>
<mwc-dialog id="settingsDialog" opened="false">
<div style="display: inline; text-align: center;">
<h1>${translate("settings.settings")}</h1>
<hr>
<h1>${translate('settings.settings')}</h1>
<hr />
</div>
<br>
<div style="min-height: 250px; min-width: 500px; box-sizing: border-box; position: relative;">
<mwc-select icon="link" id="nodeSelect" label="${translate("settings.nodeurl")}" index="${this.nodeIndex}" @selected="${(e) => this.nodeSelected(e)}" style="min-width: 130px; max-width:100%; width:100%;">
${this.nodeConfig.knownNodes.map((n, index) => html`
<mwc-list-item value="${index}">
<span class="name">${n.name}</span>
<span>${n.protocol + '://' + n.domain + ':' + n.port}</span>
</mwc-list-item>
`)}
</mwc-select>
<p style="margin-top: 30px; text-align: center;">${translate("settings.nodehint")}</p>
<br />
<div
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 class="selected">
<div class="selected-left-side">
<mwc-icon style="margin-right: 10px"
>link</mwc-icon
>
${
this.selectedItem
? html`
<div>
<span class="name"
>${this.selectedItem
.name}</span
>
<span
>${this.selectedItem
.protocol +
'://' +
this.selectedItem.domain +
':' +
this.selectedItem
.port}</span
>
</div>
`
: 'Please select an option'
}
</div>
<mwc-icon
>expand_more</mwc-icon
>
</div>
<ul class="${this.dropdownOpen ? 'open' : ''}">
${this.nodeConfig.knownNodes.map(
(n, index) => html`
<li
@click="${(e) =>
this.handleSelection(e, n, index)}"
>
<div class="list-parent">
<div>
<span class="name"
>${n.name}</span
>
<span
>${n.protocol +
'://' +
n.domain +
':' +
n.port}</span
>
</div>
<div>
<mwc-button
outlined
@click="${(e) => {
e.stopPropagation();
const currentValues =
this.nodeConfig
.knownNodes[
index
];
const dialog =
this.shadowRoot.querySelector(
'#addNodeDialog'
);
// Set the value for mwc-textfield elements
dialog.querySelector(
'#nameInput'
).value =
currentValues.name;
dialog.querySelector(
'#domainInput'
).value =
currentValues.domain;
dialog.querySelector(
'#portInput'
).value =
currentValues.port;
// Set the selected value for mwc-select
const protocolList =
dialog.querySelector(
'#protocolList'
);
const desiredProtocol =
currentValues.protocol;
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
>
</div>
</div>
</li>
`
)}
</ul>
</div>
<p style="margin-top: 30px; text-align: center;">
${translate('settings.nodehint')}
</p>
<center>
<mwc-button outlined @click="${() => this.shadowRoot.querySelector('#addNodeDialog').show()}"><mwc-icon class="buttongreen">add</mwc-icon>${translate("settings.addcustomnode")}</mwc-button>
<mwc-button
outlined
@click="${() => this.shadowRoot.querySelector('#addNodeDialog').show()}"
><mwc-icon class="buttongreen">add</mwc-icon
>${translate('settings.addcustomnode')}</mwc-button
>
</center>
<center>
<mwc-button outlined @click="${() => this.removeList()}"><mwc-icon class="buttonred">remove</mwc-icon>${translate("settings.deletecustomnode")}</mwc-button>
<mwc-button outlined @click="${() => this.removeList()}"
><mwc-icon class="buttonred">remove</mwc-icon
>${translate('settings.deletecustomnode')}</mwc-button
>
</center>
<br>
<div class="floatleft">${this.renderExportNodesListButton()}</div><div class="floatright">${this.renderImportNodesListButton()}</div>
<br><br>
<br />
<div class="floatleft">
${this.renderExportNodesListButton()}
</div>
<div style="min-height:100px; min-width: 300px; box-sizing: border-box; position: relative;">
<hr><br>
<div class="floatright">
${this.renderImportNodesListButton()}
</div>
<br /><br />
</div>
<div
style="min-height:100px; min-width: 300px; box-sizing: border-box; position: relative;"
>
<hr />
<br />
<center>
<div id="main">
<mwc-icon class="globe">language</mwc-icon>&nbsp;<language-selector></language-selector>
<mwc-icon class="globe">language</mwc-icon
>&nbsp;<language-selector></language-selector>
</div>
</center>
</div>
@@ -142,278 +359,419 @@ class SettingsPage extends connect(store)(LitElement) {
dialogAction="close"
class="red"
>
${translate("general.close")}
${translate('general.close')}
</mwc-button>
</mwc-dialog>
<mwc-dialog id="addNodeDialog">
<div style="text-align: center;">
<h2>${translate("settings.addcustomnode")}</h2>
<hr>
<h2>${translate('settings.addcustomnode')}</h2>
<hr />
</div>
<br>
<mwc-textfield id="nameInput" style="width:100%;" label="${translate("login.name")}"></mwc-textfield>
<br>
<mwc-select id="protocolList" style="width:100%;" label="${translate("settings.protocol")}">
<br />
<mwc-textfield
id="nameInput"
style="width:100%;"
label="${translate('login.name')}"
></mwc-textfield>
<br />
<mwc-select
id="protocolList"
style="width:100%;"
label="${translate('settings.protocol')}"
>
<mwc-list-item value="http">http</mwc-list-item>
<mwc-list-item value="https">https</mwc-list-item>
</mwc-select>
<br>
<mwc-textfield id="domainInput" style="width:100%;" label="${translate("settings.domain")}"></mwc-textfield>
<mwc-textfield id="portInput" style="width:100%;" label="${translate("settings.port")}"></mwc-textfield>
<br />
<mwc-textfield
id="domainInput"
style="width:100%;"
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
slot="primaryAction"
@click="${this.addNode}"
>
${translate("settings.addandsave")}
<mwc-button slot="primaryAction" @click="${this.addNode}">
${translate('settings.addandsave')}
</mwc-button>
</mwc-dialog>
<mwc-dialog id="importQortalNodesListDialog">
<div style="text-align:center">
<h2>${translate("settings.import")}</h2>
<hr>
<br>
<h2>${translate('settings.import')}</h2>
<hr />
<br />
</div>
<div style="min-height: 150px; min-width: 500px; box-sizing: border-box; position: relative;">
<frag-file-input accept=".nodes" @file-read-success="${(e) => this.importQortalNodesList(e.detail.result)}"></frag-file-input>
<h4 style="color: #F44336; text-align: center;">${translate("walletpage.wchange56")}</h4>
<h5 style="text-align: center;">${translate("settings.warning")}</h5>
<div
style="min-height: 150px; min-width: 500px; box-sizing: border-box; position: relative;"
>
<frag-file-input
accept=".nodes"handleBlur(event) {
if (!this.shadowRoot.querySelector("#customSelect").contains(event.relatedTarget)) {
this.dropdownOpen = false;
}
}
@file-read-success="${(e) => this.importQortalNodesList(e.detail.result)}"
></frag-file-input>
<h4 style="color: #F44336; text-align: center;">
${translate('walletpage.wchange56')}
</h4>
<h5 style="text-align: center;">
${translate('settings.warning')}
</h5>
</div>
<mwc-button
slot="primaryAction"
dialogAction="cancel"
class="red"
>
${translate("general.close")}
${translate('general.close')}
</mwc-button>
</mwc-dialog>
`
`;
}
firstUpdated() {
const checkNode = localStorage.getItem('mySelectedNode')
const checkNode = localStorage.getItem('mySelectedNode');
if (checkNode === null || checkNode.length === 0) {
localStorage.setItem('mySelectedNode', 0)
localStorage.setItem('mySelectedNode', 0);
} else {
}
}
toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
}
handleBlur(event) {
if (
!this.shadowRoot
.querySelector('#customSelect')
.contains(event.relatedTarget)
) {
this.dropdownOpen = false;
}
}
focusOnCustomSelect() {
const customSelect = this.shadowRoot.querySelector('#customSelect');
if (customSelect) {
customSelect.focus();
}
}
handleSelection(event, node, index) {
event.stopPropagation();
this.selectedItem = node;
this.dropdownOpen = false;
this.requestUpdate();
this.nodeSelected(index);
}
show() {
this.shadowRoot.getElementById('settingsDialog').show()
this.shadowRoot.getElementById('settingsDialog').show();
}
close() {
this.shadowRoot.getElementById('settingsDialog').close()
this.shadowRoot.getElementById('settingsDialog').close();
}
removeList() {
localStorage.removeItem("myQortalNodes")
localStorage.removeItem('myQortalNodes');
const obj1 = {
name: 'Local Node',
protocol: 'http',
domain: '127.0.0.1',
port: 12391,
enableManagement: true
}
enableManagement: true,
};
const obj2 = {
name: 'Local Testnet',
protocol: 'http',
domain: '127.0.0.1',
port: 62391,
enableManagement: true
}
enableManagement: true,
};
var renewNodes = [];
renewNodes.push(obj1,obj2)
localStorage.setItem('myQortalNodes', JSON.stringify(renewNodes))
renewNodes.push(obj1, obj2);
localStorage.setItem('myQortalNodes', JSON.stringify(renewNodes));
let snack1string = get("settings.snack1")
let snack1string = get('settings.snack1');
snackbar.add({
labelText: `${snack1string}`,
dismiss: true
})
dismiss: true,
});
localStorage.removeItem('mySelectedNode')
localStorage.setItem('mySelectedNode', 0)
localStorage.removeItem('mySelectedNode');
localStorage.setItem('mySelectedNode', 0);
store.dispatch(doLoadNodeConfig())
store.dispatch(doLoadNodeConfig());
}
nodeSelected(e) {
const selectedNodeIndex = this.shadowRoot.getElementById('nodeSelect').value
const selectedNode = this.nodeConfig.knownNodes[selectedNodeIndex]
const selectedNodeUrl = `${selectedNode.protocol + '://' + selectedNode.domain + ':' + selectedNode.port}`
nodeSelected(selectedNodeIndex) {
const selectedNode = this.nodeConfig.knownNodes[selectedNodeIndex];
const selectedNodeUrl = `${
selectedNode.protocol +
'://' +
selectedNode.domain +
':' +
selectedNode.port
}`;
const index = parseInt(selectedNodeIndex)
if (isNaN(index)) return
const index = parseInt(selectedNodeIndex);
if (isNaN(index)) return;
store.dispatch(doSetNode(selectedNodeIndex))
store.dispatch(doSetNode(selectedNodeIndex));
localStorage.removeItem('mySelectedNode')
localStorage.setItem('mySelectedNode', selectedNodeIndex)
localStorage.removeItem('mySelectedNode');
localStorage.setItem('mySelectedNode', selectedNodeIndex);
let snack2string = get("settings.snack2")
let snack2string = get('settings.snack2');
snackbar.add({
labelText: `${snack2string} : ${selectedNodeUrl}`,
dismiss: true
})
dismiss: true,
});
this.shadowRoot.querySelector('#settingsDialog').close()
// this.shadowRoot.querySelector('#settingsDialog').close();
}
addNode() {
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
addNode(e) {
e.stopPropagation();
if (this.isBeingEdited) {
this.editNode(this.isBeingEditedIndex);
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 (protocolList.length >= 4 && domainInput.length >= 3 && portInput.length >= 2) {
if (
protocolList.length >= 4 &&
domainInput.length >= 3 &&
portInput.length >= 2
) {
const nodeObject = {
name: nameInput,
protocol: protocolList,
domain: domainInput,
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) {
var savedNodes = [];
savedNodes.push(nodeObject);
localStorage.setItem('myQortalNodes', JSON.stringify(savedNodes))
localStorage.setItem(
'myQortalNodes',
JSON.stringify(savedNodes)
);
let snack3string = get("settings.snack3")
let snack3string = get('settings.snack3');
snackbar.add({
labelText: `${snack3string}`,
dismiss: true
})
dismiss: true,
});
this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('protocolList').value = ''
this.shadowRoot.getElementById('domainInput').value = ''
this.shadowRoot.getElementById('portInput').value = ''
this.shadowRoot.querySelector('#addNodeDialog').close()
this.shadowRoot.getElementById('nameInput').value = '';
this.shadowRoot.getElementById('protocolList').value = '';
this.shadowRoot.getElementById('domainInput').value = '';
this.shadowRoot.getElementById('portInput').value = '';
this.shadowRoot.querySelector('#addNodeDialog').close();
} else {
var stored = JSON.parse(localStorage.getItem('myQortalNodes'));
stored.push(nodeObject);
localStorage.setItem('myQortalNodes', JSON.stringify(stored));
let snack3string = get("settings.snack3")
let snack3string = get('settings.snack3');
snackbar.add({
labelText: `${snack3string}`,
dismiss: true
})
dismiss: true,
});
this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('protocolList').value = ''
this.shadowRoot.getElementById('domainInput').value = ''
this.shadowRoot.getElementById('portInput').value = ''
this.shadowRoot.getElementById('nameInput').value = '';
this.shadowRoot.getElementById('protocolList').value = '';
this.shadowRoot.getElementById('domainInput').value = '';
this.shadowRoot.getElementById('portInput').value = '';
this.shadowRoot.querySelector('#addNodeDialog').close()
this.shadowRoot.querySelector('#addNodeDialog').close();
}
}
}
removeNode(event, index) {
event.stopPropagation();
let stored = JSON.parse(localStorage.getItem('myQortalNodes'));
stored.splice(index, 1);
localStorage.setItem('myQortalNodes', JSON.stringify(stored));
store.dispatch(doRemoveNode(index));
let snack3string = get('settings.snack6');
snackbar.add({
labelText: `${snack3string}`,
dismiss: true,
});
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 (
protocolList.length >= 4 &&
domainInput.length >= 3 &&
portInput.length >= 2
) {
const nodeObject = {
name: nameInput,
protocol: protocolList,
domain: domainInput,
port: portInput,
enableManagement: true,
};
let stored = JSON.parse(localStorage.getItem('myQortalNodes'));
const copyStored = [...stored];
copyStored[index] = nodeObject;
localStorage.setItem('myQortalNodes', JSON.stringify(copyStored));
store.dispatch(doEditNode(index, nodeObject));
let snack3string = get('settings.snack7');
snackbar.add({
labelText: `${snack3string}`,
dismiss: true,
});
this.shadowRoot.getElementById('nameInput').value = '';
this.shadowRoot.getElementById('protocolList').value = '';
this.shadowRoot.getElementById('domainInput').value = '';
this.shadowRoot.getElementById('portInput').value = '';
this.isBeingEdited = false;
this.isBeingEditedIndex = null;
this.shadowRoot.querySelector('#addNodeDialog').close();
}
}
openImportNodesDialog() {
this.shadowRoot.querySelector("#importQortalNodesListDialog").show()
this.shadowRoot.querySelector('#importQortalNodesListDialog').show();
}
closeImportNodesDialog() {
this.shadowRoot.querySelector("#importQortalNodesListDialog").close()
this.shadowRoot.querySelector('#importQortalNodesListDialog').close();
}
renderExportNodesListButton() {
return html`
<mwc-button dense unelevated label="${translate("settings.export")}" @click="${() => this.exportQortalNodesList()}"></mwc-button>
`
<mwc-button
dense
unelevated
label="${translate('settings.export')}"
@click="${() => this.exportQortalNodesList()}"
></mwc-button>
`;
}
exportQortalNodesList() {
let nodelist = ""
const qortalNodesList = JSON.stringify(localStorage.getItem("myQortalNodes"))
const qortalNodesListSave = JSON.parse((qortalNodesList) || "[]")
const blob = new Blob([qortalNodesListSave], { type: 'text/plain;charset=utf-8' })
nodelist = "qortal.nodes"
this.saveFileToDisk(blob, nodelist)
let nodelist = '';
const qortalNodesList = JSON.stringify(
localStorage.getItem('myQortalNodes')
);
const qortalNodesListSave = JSON.parse(qortalNodesList || '[]');
const blob = new Blob([qortalNodesListSave], {
type: 'text/plain;charset=utf-8',
});
nodelist = 'qortal.nodes';
this.saveFileToDisk(blob, nodelist);
}
async saveFileToDisk(blob, fileName) {
try {
const fileHandle = await self.showSaveFilePicker({
suggestedName: fileName,
types: [{
description: "File",
}]
})
types: [
{
description: 'File',
},
],
});
const writeFile = async (fileHandle, contents) => {
const writable = await fileHandle.createWritable()
await writable.write(contents)
await writable.close()
}
writeFile(fileHandle, blob).then(() => console.log("FILE SAVED"))
let snack4string = get("settings.snack4")
const writable = await fileHandle.createWritable();
await writable.write(contents);
await writable.close();
};
writeFile(fileHandle, blob).then(() => console.log('FILE SAVED'));
let snack4string = get('settings.snack4');
snackbar.add({
labelText: `${snack4string} qortal.nodes`,
dismiss: true
})
dismiss: true,
});
} catch (error) {
if (error.name === 'AbortError') {
return
return;
}
FileSaver.saveAs(blob, fileName)
FileSaver.saveAs(blob, fileName);
}
}
renderImportNodesListButton() {
return html`
<mwc-button dense unelevated label="${translate("settings.import")}" @click="${() => this.openImportNodesDialog()}"></mwc-button>
`
<mwc-button
dense
unelevated
label="${translate('settings.import')}"
@click="${() => this.openImportNodesDialog()}"
></mwc-button>
`;
}
async importQortalNodesList(file) {
localStorage.removeItem("myQortalNodes")
const newItems = JSON.parse((file) || "[]")
localStorage.setItem("myQortalNodes", JSON.stringify(newItems))
this.shadowRoot.querySelector('#importQortalNodesListDialog').close()
localStorage.removeItem('myQortalNodes');
const newItems = JSON.parse(file || '[]');
localStorage.setItem('myQortalNodes', JSON.stringify(newItems));
this.shadowRoot.querySelector('#importQortalNodesListDialog').close();
let snack5string = get("settings.snack5")
let snack5string = get('settings.snack5');
snackbar.add({
labelText: `${snack5string}`,
dismiss: true
})
dismiss: true,
});
localStorage.removeItem('mySelectedNode')
localStorage.setItem('mySelectedNode', 0)
localStorage.removeItem('mySelectedNode');
localStorage.setItem('mySelectedNode', 0);
store.dispatch(doLoadNodeConfig())
store.dispatch(doLoadNodeConfig());
}
stateChanged(state) {
this.config = state.config
this.nodeConfig = state.app.nodeConfig
this.config = state.config;
this.nodeConfig = state.app.nodeConfig;
}
}
window.customElements.define('settings-page', SettingsPage)
window.customElements.define('settings-page', SettingsPage);
const settings = document.createElement('settings-page')
settingsDialog = document.body.appendChild(settings)
const settings = document.createElement('settings-page');
settingsDialog = document.body.appendChild(settings);
export default settingsDialog
export default settingsDialog;

24
core/src/redux/app/actions/node-config.js
View File

@@ -1,5 +1,5 @@
// Node Config Actions here...
import { LOAD_NODE_CONFIG, SET_NODE, ADD_NODE } from '../app-action-types.js'
import { LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, REMOVE_NODE, EDIT_NODE } from '../app-action-types.js'
import { UI_VERSION } from '../version.js'
const nodeConfigUrl = '/getConfig'
@@ -72,6 +72,16 @@ export const doAddNode = (nodeObject) => {
return dispatch(addNode(nodeObject))
}
}
export const doRemoveNode = (index) => {
return (dispatch, getState) => {
return dispatch(removeNode(index))
}
}
export const doEditNode = (index, nodeObject) => {
return (dispatch, getState) => {
return dispatch(editNode({index, nodeObject}))
}
}
const addNode = (payload) => {
return {
@@ -80,6 +90,18 @@ const addNode = (payload) => {
}
}
const editNode = (payload) => {
return {
type: EDIT_NODE,
payload
}
}
const removeNode = (payload) => {
return {
type: REMOVE_NODE,
payload
}
}
const obj1 = {
name: 'Local Node',
protocol: 'http',

2
core/src/redux/app/app-action-types.js
View File

@@ -12,6 +12,8 @@ export const UPDATE_NODE_STATUS = 'UPDATE_NODE_STATUS'
export const UPDATE_NODE_INFO = 'UPDATE_NODE_INFO'
export const SET_NODE = 'SET_NODE'
export const ADD_NODE = 'ADD_NODE'
export const EDIT_NODE = 'EDIT_NODE'
export const REMOVE_NODE = 'REMOVE_NODE'
export const LOAD_NODE_CONFIG = 'LOAD_NODE_CONFIG'
export const PAGE_URL = 'PAGE_URL'
export const CHAT_HEADS = 'CHAT_HEADS'

8
core/src/redux/app/app-reducer.js
View File

@@ -1,9 +1,9 @@
// Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS, IS_OPEN_DEV_DIALOG } from './app-action-types.js'
import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB, ADD_TAB_INFO, SET_TAB_NOTIFICATIONS, IS_OPEN_DEV_DIALOG, REMOVE_NODE, EDIT_NODE } from './app-action-types.js'
import { initWorkersReducer } from './reducers/init-workers.js'
import { loginReducer } from './reducers/login-reducer.js'
import { setNode, addNode } from './reducers/manage-node.js'
import { setNode, addNode, removeNode, editNode } from './reducers/manage-node.js'
import localForage from "localforage";
const chatLastSeen = localForage.createInstance({
name: "chat-last-seen",
@@ -120,6 +120,10 @@ export default (state = INITIAL_STATE, action) => {
return setNode(state, action)
case ADD_NODE:
return addNode(state, action)
case EDIT_NODE:
return editNode(state, action)
case REMOVE_NODE:
return removeNode(state, action)
case PAGE_URL:
return {
...state,

23
core/src/redux/app/reducers/manage-node.js
View File

@@ -20,3 +20,26 @@ export const addNode = (state, action) => {
}
}
}
export const editNode = (state, action) => {
const copyKnownNodes = [...state.nodeConfig.knownNodes]
copyKnownNodes[action.payload.index] = action.payload.nodeObject
return {
...state,
nodeConfig: {
...state.nodeConfig,
knownNodes: copyKnownNodes
}
}
}
export const removeNode = (state, action) => {
const copyKnownNodes = [...state.nodeConfig.knownNodes]
copyKnownNodes.splice(action.payload, 1);
return {
...state,
nodeConfig: {
...state.nodeConfig,
knownNodes: copyKnownNodes
}
}
}