Prefs managing mostly done
This commit is contained in:
Magnus Åhall
parent
81d02b82dc
commit
74851b9c4d
6 changed files with 344 additions and 51 deletions
|
|
@ -5,28 +5,279 @@ export class N2PagePreferences extends CustomHTMLElement {
|
|||
static {// {{{
|
||||
this.tmpl = document.createElement('template')
|
||||
this.tmpl.innerHTML = `
|
||||
<style>
|
||||
.el-sets {
|
||||
display: grid;
|
||||
grid-template-columns: min-content;
|
||||
grid-gap: 32px;
|
||||
}
|
||||
|
||||
:host > div {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dev-pref-set {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<h1>Preferences</h1>
|
||||
|
||||
<div>Changes preferences to not download images or files on the device doesn't remove the already downloaded data.</div>
|
||||
|
||||
<div class="dev-pref-set">
|
||||
<div>Device preference set</div>
|
||||
<select data-el="dev-preference-set"></select>
|
||||
</div>
|
||||
|
||||
<div data-el="sets"></div>
|
||||
|
||||
<button data-el="new-set">New set</button>
|
||||
<button data-el="save" disabled>Save</button>
|
||||
`
|
||||
}// }}}
|
||||
constructor() {// {{{
|
||||
super()
|
||||
window._mbus.subscribe('SHOW_PAGE', event => {
|
||||
if (event.detail.data?.page == 'preferences')
|
||||
super(true)
|
||||
this.sets = []
|
||||
|
||||
this.elNewSet.addEventListener('click', () => this.newSet())
|
||||
this.elSave.addEventListener('click', () => this.save())
|
||||
this.elDevPreferenceSet.addEventListener('change', event=>this.changePreferenceSet(event))
|
||||
|
||||
window._mbus.subscribe('SHOW_PAGE', async event => {
|
||||
if (event.detail.data?.page == 'preferences') {
|
||||
this.sets = await this.getPreferenceSets()
|
||||
this.render()
|
||||
}
|
||||
})
|
||||
|
||||
window._mbus.subscribe('PREFERENCE_SET_MODIFIED', () => this.preferencesModified())
|
||||
window._mbus.subscribe('PREFERENCE_SET_DELETE', event => this.preferencesDelete(event.detail.data.set))
|
||||
}// }}}
|
||||
sortSets(a, b) {// {{{
|
||||
if (a.name == 'default') return -1
|
||||
if (b.name == 'default') return 1
|
||||
|
||||
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
|
||||
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
|
||||
|
||||
return 0
|
||||
}// }}}
|
||||
async render() {// {{{
|
||||
try {
|
||||
this.sets.sort(this.sortSets)
|
||||
this.elSets.replaceChildren(...this.sets)
|
||||
|
||||
const setNames = this.sets.entries().map(([i, set]) => {
|
||||
const optn = document.createElement('option')
|
||||
optn.innerText = set.name
|
||||
return optn
|
||||
})
|
||||
this.elDevPreferenceSet.replaceChildren(...setNames)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert(e.message)
|
||||
}
|
||||
}// }}}
|
||||
async getPreferenceSets() {// {{{
|
||||
const userData = localStorage.getItem('user')
|
||||
if (userData === null)
|
||||
throw new Error('Could not find user in localStorage')
|
||||
|
||||
const user = JSON.parse(userData)
|
||||
const prefsData = user.Preferences
|
||||
|
||||
if (prefsData === undefined)
|
||||
throw new Error('User object is missing preferences')
|
||||
|
||||
if (!prefsData.hasOwnProperty('default'))
|
||||
throw new Error('The "default" preferences set is missing')
|
||||
|
||||
return Object.keys(prefsData).map(name => new N2PreferenceSet(name, prefsData[name]))
|
||||
}// }}}
|
||||
async retrieveServerPreferences() {// {{{
|
||||
try {
|
||||
API.query('GET', '/user/preferences')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert(`Error retrieving preferences: ${e.message}`)
|
||||
}
|
||||
}// }}}
|
||||
changePreferenceSet(event) {// {{{
|
||||
this.preferencesModified()
|
||||
}// }}}
|
||||
newSet() {// {{{
|
||||
let name = prompt("Name for new preference set")
|
||||
if (!name)
|
||||
return
|
||||
|
||||
name = name.trim()
|
||||
if (name === '')
|
||||
return
|
||||
|
||||
if (name == 'default') {
|
||||
alert(`Name can't be "default".`)
|
||||
return
|
||||
}
|
||||
|
||||
const exists = this.sets.some(s => s.name.toLowerCase() == name.toLowerCase())
|
||||
if (exists) {
|
||||
alert(`Set with name "${name}" already exist.`)
|
||||
return
|
||||
}
|
||||
|
||||
this.sets.push(new N2PreferenceSet(name, {}))
|
||||
this.preferencesModified()
|
||||
this.render()
|
||||
}// }}}
|
||||
preferencesModified() {// {{{
|
||||
this.elSave.removeAttribute('disabled')
|
||||
}// }}}
|
||||
preferencesDelete(deleteSet) {// {{{
|
||||
if (deleteSet.name == 'default') {
|
||||
alert("Can't delete the default set.")
|
||||
return
|
||||
}
|
||||
|
||||
if (!confirm(`Confirm deleting "${deleteSet.name}"`))
|
||||
return
|
||||
|
||||
this.sets = this.sets.filter(set => {
|
||||
return !(set.name === deleteSet.name)
|
||||
})
|
||||
|
||||
this.preferencesModified()
|
||||
this.render()
|
||||
}// }}}
|
||||
async save() {// {{{
|
||||
try {
|
||||
let newPrefs = {}
|
||||
this.sets.forEach(s => {
|
||||
const setState = s.getState()
|
||||
newPrefs[setState.name] = setState.state
|
||||
})
|
||||
|
||||
// Throws exception on both HTTP and application errors.
|
||||
await API.query('POST', '/user/preferences', newPrefs)
|
||||
|
||||
const userData = localStorage.getItem('user')
|
||||
const user = JSON.parse(userData)
|
||||
user.Preferences = newPrefs
|
||||
localStorage.setItem('user', JSON.stringify(user))
|
||||
localStorage.setItem('device_preference_set', this.elDevPreferenceSet.value)
|
||||
_mbus.dispatch('DEVICE_PREFERENCE_SET_UPDATED')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
alert(e.message)
|
||||
} finally {
|
||||
this.elSave.setAttribute('disabled', true)
|
||||
}
|
||||
|
||||
}// }}}
|
||||
getPreferences() {
|
||||
API.query('GET', '/user/preferences')
|
||||
}
|
||||
}
|
||||
customElements.define('n2-pagepreferences', N2PagePreferences)
|
||||
|
||||
// Preferences is a set of preferences, of which there can be many named.
|
||||
class Preferences {
|
||||
constructor(name, data) {
|
||||
export class N2PreferenceSet extends CustomHTMLElement {
|
||||
static {// {{{
|
||||
this.tmpl = document.createElement('template')
|
||||
this.tmpl.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
border: 1px solid var(--line-color);
|
||||
padding: 16px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
grid-gap: 8px 16px;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
.header {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
|
||||
.el-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 32px;
|
||||
cursor: pointer;
|
||||
color: var(--color1);
|
||||
}
|
||||
|
||||
.el-delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="header">
|
||||
<div data-el="name"></div>
|
||||
<div data-el="delete">✘</div>
|
||||
</div>
|
||||
|
||||
<div><label for="download-images">Download images on device</label></div>
|
||||
<input data-field="download-images" type="checkbox" id="download-images">
|
||||
|
||||
<div><label for="download-files">Download files on device</label></div>
|
||||
<input data-field="download-files" type="checkbox" id="download-files">
|
||||
`
|
||||
}// }}}
|
||||
constructor(name, data) {// {{{
|
||||
super(true)
|
||||
this.name = name
|
||||
this.data = data
|
||||
}
|
||||
this.render()
|
||||
|
||||
// Enable the save button when settings are modified.
|
||||
this.allFields().forEach(f =>
|
||||
f.addEventListener('input', () => _mbus.dispatch('PREFERENCE_SET_MODIFIED'))
|
||||
)
|
||||
|
||||
this.elName.addEventListener('click', () => this.updateName())
|
||||
this.elDelete.addEventListener('click', () => this.deleteSet())
|
||||
}// }}}
|
||||
updateName() {// {{{
|
||||
if (this.name == 'default') {
|
||||
alert('Can not change name of the default profile.')
|
||||
return
|
||||
}
|
||||
|
||||
const name = prompt("Change name", this.name)
|
||||
if (!name)
|
||||
return
|
||||
|
||||
this.name = name
|
||||
this.render()
|
||||
_mbus.dispatch('PREFERENCE_SET_MODIFIED')
|
||||
}// }}}
|
||||
deleteSet() {// {{{
|
||||
_mbus.dispatch('PREFERENCE_SET_DELETE', { set: this })
|
||||
}// }}}
|
||||
render() {// {{{
|
||||
this.elName.innerText = this.name
|
||||
|
||||
this.fieldDownloadImages.checked = this.data.DownloadImages
|
||||
this.fieldDownloadFiles.checked = this.data.DownloadFiles
|
||||
}// }}}
|
||||
getState() {// {{{
|
||||
const name = this.name.trim()
|
||||
if (name === '')
|
||||
throw new Error('Name can not be empty.')
|
||||
|
||||
return {
|
||||
name: this.name.trim(),
|
||||
state: this.fieldValues(),
|
||||
}
|
||||
}// }}}
|
||||
}
|
||||
customElements.define('n2-preferenceset', N2PreferenceSet)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue