Records update

static/js/dns.mjs

@@ -212,7 +212,7 @@ class Folder {
 		// Records are refreshed.
 		this.divRecords.replaceChildren()
 		for (const rec of Array.from(this.records))
-			this.divRecords.append(...rec.toElements())
+			this.divRecords.append(...rec.render())
 
 		return this.div
 	}// }}}
@@ -228,6 +228,7 @@ class Record {
 		this.divValue = null
 		this.divSeparator = null
 	}// }}}
+
 	id() {// {{{
 		return this.data['.id']
 	}// }}}
@@ -247,18 +248,12 @@ class Record {
 		return this.data.Type.toUpperCase()
 	}// }}}
 	value() {// {{{
-		switch (this.type()) {
-			case 'A':
-			case 'AAAA':
-				return this.data.Address
-
-			case 'CNAME':
-				return this.data.CNAME
-		}
+		return this.data.ParsedValue
 	}// }}}
 	labels() {// {{{
 		return this.name().split('.')
 	}// }}}
+
 	copy(el, text) {// {{{
 		el.classList.add('copy')
 		navigator.clipboard.writeText(text)
@@ -267,24 +262,10 @@ class Record {
 	edit() {// {{{
 		new RecordDialog(this).show()
 	}// }}}
-	set(key, value) {
-		if (key != 'Value') {
-			this.data[key] = value
-			return
-		}
-
-		switch(this.data.type.toUpperCase()) {
-			case 'A':
-			case 'AAAA':
-				this.data.Address = value
-				break
-
-			case 'CNAME':
-				this.data.CNAME = value
-				break
-		}
-	}
-	toElements() {// {{{
+	set(key, value) {// {{{
+		this.data[key] = value
+	}// }}}
+	render() {// {{{
 		if (this.divFQDN === null) {
 			this.imgIcon = document.createElement('img')
 			this.divFQDN = document.createElement('div')
@@ -323,17 +304,30 @@ class Record {
 
 		return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divSeparator]
 	}// }}}
+	save() {// {{{
+		fetch('/record/save', {
+			method: 'POST',
+			body: JSON.stringify(this.data),
+		})
+			.then(data => data.json())
+			.then(json => {
+				if (!json.OK) {
+					alert(json.Error)
+					return
+				}
+			})
+	}// }}}
 }
 
 class RecordDialog {
-	constructor(record) {
+	constructor(record) {// {{{
 		this.record = record
-	}
+	}// }}}
 
-	show() {
-		const dlg = document.createElement('dialog')
-		dlg.id = "record-dialog"
-		dlg.innerHTML = `
+	show() {// {{{
+		this.dlg = document.createElement('dialog')
+		this.dlg.id = "record-dialog"
+		this.dlg.innerHTML = `
 			<div>Name</div>
 			<input type="text" class="name">
 
@@ -356,23 +350,33 @@ class RecordDialog {
 			</div>
 		`
 
-		dlg.querySelector('.name').value = this.record.name()
-		dlg.querySelector('.type').value = this.record.type()
-		dlg.querySelector('.value').value = this.record.value()
-		dlg.querySelector('.ttl').value = this.record.ttl()
+		this.dlg.querySelector('.name').value = this.record.name()
+		this.dlg.querySelector('.type').value = this.record.type()
+		this.dlg.querySelector('.value').value = this.record.value()
+		this.dlg.querySelector('.ttl').value = this.record.ttl();
 
-		dlg.querySelector('.save').addEventListener('click', ()=>this.save())
-		dlg.querySelector('.close').addEventListener('click', ()=>dlg.close())
+		['.name', '.type', '.value', '.ttl'].forEach(v =>
+			this.dlg.querySelector(v).addEventListener('keydown', event => this.enterKeyHandler(event))
+		)
 
-		dlg.addEventListener('close', ()=>dlg.remove())
-		document.body.appendChild(dlg)
-		dlg.showModal()
-	}
+		this.dlg.querySelector('.save').addEventListener('click', () => this.save())
+		this.dlg.querySelector('.close').addEventListener('click', () => this.dlg.close())
 
-	save() {
-		this.record.set('Name', dlg.querySelector('.name').value)
-		this.record.set('Type', dlg.querySelector('.type').value)
-		this.record.set('Value', dlg.querySelector('.value').value)
-		this.record.set('TTL', dlg.querySelector('.ttl').value)
-	}
+		this.dlg.addEventListener('close', () => this.dlg.remove())
+		document.body.appendChild(this.dlg)
+		this.dlg.showModal()
+	}// }}}
+	enterKeyHandler(event) {// {{{
+		if (event.key == "Enter")
+			this.save()
+	}// }}}
+	save() {// {{{
+		this.record.set('Name', this.dlg.querySelector('.name').value)
+		this.record.set('Type', this.dlg.querySelector('.type').value)
+		this.record.set('ParsedValue', this.dlg.querySelector('.value').value)
+		this.record.set('TTL', this.dlg.querySelector('.ttl').value)
+		this.record.render()
+		this.record.save()
+		this.dlg.close()
+	}// }}}
 }