add inbound and outbound connections
bat
3 years ago
parent
3f39582900
commit
c2c9ec6a80
@ -0,0 +1,128 @@
|
||||
export class ConnectionEdit extends HTMLElement {
|
||||
textEn = {
|
||||
page: 'Page',
|
||||
access: 'Access',
|
||||
read: 'read',
|
||||
readWrite: 'read and write',
|
||||
doesntExist: "Error: The page doesn't exist",
|
||||
samePage: "Error: Cannot connect to same page",
|
||||
alreadyConnected: "Error: This page is already connected",
|
||||
}
|
||||
|
||||
textEs = {
|
||||
page: 'Página',
|
||||
access: 'Accesso',
|
||||
read: 'leer',
|
||||
readWrite: 'leer y escribir',
|
||||
doesntExist: 'Error: La página no existe',
|
||||
samePage: "Error: no se puede conectar a la misma página",
|
||||
alreadyConnected: "Error: esta página ya está conectada",
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({mode: 'open'})
|
||||
this.language = navigator.language
|
||||
const pageLabel = document.createElement('label')
|
||||
pageLabel.innerText = this.text.page
|
||||
this.pageInput = document.createElement('input')
|
||||
const accessLabel = document.createElement('label')
|
||||
accessLabel.innerText = this.text.access
|
||||
this.accessSelect = document.createElement('select')
|
||||
const wrap = document.createElement('div')
|
||||
wrap.append(this.accessSelect)
|
||||
const opts = ['read', 'readWrite'].map(value => {
|
||||
const el = document.createElement('option')
|
||||
el.value = value
|
||||
el.innerText = this.text[value]
|
||||
return el
|
||||
})
|
||||
this.accessSelect.append(...opts)
|
||||
this.accessSelect.value = 'read'
|
||||
const fields = document.createElement('div')
|
||||
fields.classList.add('fields')
|
||||
fields.append(
|
||||
pageLabel,
|
||||
this.pageInput,
|
||||
accessLabel,
|
||||
wrap,
|
||||
)
|
||||
this.shadowRoot.append(
|
||||
fields,
|
||||
)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.fields {
|
||||
display: grid;
|
||||
grid-template-columns: fit-content(50%) 1fr;
|
||||
gap: 5px 10px;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
`
|
||||
this.shadowRoot.append(style)
|
||||
}
|
||||
|
||||
display() {
|
||||
|
||||
}
|
||||
|
||||
get data() {
|
||||
return {
|
||||
networkAccess: this.netSelect.value,
|
||||
}
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
this.netText.innerText = JSON.stringify(value)
|
||||
this.netSelect.value = value.networkAccess ?? 'local'
|
||||
this.display()
|
||||
}
|
||||
|
||||
set error(error) {
|
||||
this._error = error
|
||||
if (error === undefined) {
|
||||
if (this.errorEl) {
|
||||
this.errorEl.remove()
|
||||
this.errorEl = undefined
|
||||
}
|
||||
} else {
|
||||
if (!this.errorEl) {
|
||||
this.errorEl = document.createElement('p')
|
||||
this.errorEl.classList.add('error')
|
||||
this.shadowRoot.append(this.errorEl)
|
||||
}
|
||||
this.errorEl.innerText = this.text[error]
|
||||
}
|
||||
}
|
||||
|
||||
get error() {
|
||||
return this._error
|
||||
}
|
||||
|
||||
get language() {
|
||||
return this._language
|
||||
}
|
||||
|
||||
set language(language) {
|
||||
this._language = language
|
||||
this.text = this.langEs ? this.textEs : this.textEn
|
||||
}
|
||||
|
||||
get langEs() {
|
||||
return /^es\b/.test(this.language)
|
||||
}
|
||||
|
||||
get lang() {
|
||||
return this.language.split('-')[0]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,126 @@
|
||||
export class Connections extends HTMLElement {
|
||||
textEn = {
|
||||
add: 'Add connection',
|
||||
cancel: 'Cancel',
|
||||
}
|
||||
|
||||
textEs = {
|
||||
add: 'Añadir conexión',
|
||||
cancel: 'Cancelar',
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({mode: 'open'})
|
||||
this.language = navigator.language
|
||||
this.content = document.createElement('div')
|
||||
const bGroup = document.createElement(
|
||||
'm-forms-button-group'
|
||||
)
|
||||
bGroup.addPrimary(this.text.add, () => {
|
||||
this.add()
|
||||
})
|
||||
this.shadowRoot.append(
|
||||
this.content,
|
||||
bGroup,
|
||||
)
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const style = document.createElement('style')
|
||||
style.textContent = `
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
m-dialog::part(footer) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
`
|
||||
this.shadowRoot.append(style)
|
||||
}
|
||||
|
||||
add() {
|
||||
const dialog = document.createElement('m-dialog')
|
||||
dialog.top = 180
|
||||
const edit = document.createElement(
|
||||
'm-settings-connection-edit'
|
||||
)
|
||||
dialog.bodyEl.append(edit)
|
||||
const bGroup = document.createElement(
|
||||
'm-forms-button-group'
|
||||
)
|
||||
bGroup.addPrimary(this.text.add, () => {
|
||||
const path = edit.pageInput.value
|
||||
const access = edit.accessSelect.value
|
||||
const exists = localStorage.getItem(path)
|
||||
if (!exists) {
|
||||
edit.error = 'doesntExist'
|
||||
return
|
||||
} else if (path === this.path) {
|
||||
edit.error = 'samePage'
|
||||
return
|
||||
} else if (path in this.data) {
|
||||
edit.error = 'alreadyConnected'
|
||||
return
|
||||
}
|
||||
this.data = {
|
||||
...this.data,
|
||||
[path]: access,
|
||||
}
|
||||
dialog.close()
|
||||
})
|
||||
bGroup.addCancel(this.text.cancel, () => {
|
||||
dialog.close()
|
||||
})
|
||||
dialog.footerEl.appendChild(bGroup)
|
||||
this.shadowRoot.append(dialog)
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
display() {
|
||||
const entries = Object.entries(this.data)
|
||||
const content = entries.map(([path, access]) => {
|
||||
const el = document.createElement('div')
|
||||
el.innerText = `${path}: ${access}`
|
||||
return el
|
||||
})
|
||||
this.content.replaceChildren(...content)
|
||||
}
|
||||
|
||||
set type(value) {
|
||||
this._type = value
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this._type
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this._data
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
this._data = value
|
||||
this.display()
|
||||
}
|
||||
|
||||
get language() {
|
||||
return this._language
|
||||
}
|
||||
|
||||
set language(language) {
|
||||
this._language = language
|
||||
this.text = this.langEs ? this.textEs : this.textEn
|
||||
}
|
||||
|
||||
get langEs() {
|
||||
return /^es\b/.test(this.language)
|
||||
}
|
||||
|
||||
get lang() {
|
||||
return this.language.split('-')[0]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue