Delete records

static/js/dns.mjs

@@ -29,6 +29,10 @@ export class Application {
 			this.cleanFolders(folder)
 		})
 	}// }}}
+	deleteRecord(id) {// {{{
+		const i = this.records.findIndex(rec => rec.id() == id)
+		this.records.splice(i, 1)
+	}// }}}
 	renderFolders() {// {{{
 		this.records.sort(this.sortRecords)
 
@@ -236,7 +240,8 @@ class Folder {
 					<div class="header">FQDN</div>
 					<div class="header">Type</div>
 					<div class="header">Value</div>
-					<div class="header last">TTL</div>
+					<div class="header">TTL</div>
+					<div class="header last">Actions</div>
 				</div>
 			`
 			this.divSubfolders = this.div.querySelector('.subfolders')
@@ -259,6 +264,17 @@ class Folder {
 		else
 			this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block')
 
+		// Remove old ones
+		console.log(`removing records from ${this.name()}`)
+		for (const recdiv of this.divRecords.children) {
+			if (recdiv?.classList?.contains('fqdn')) {
+				const rec = this.records.find(r => r.id() == recdiv.dataset.record_id)
+				if (!rec)
+					this.divRecords.querySelectorAll(`[data-record_id="${recdiv.dataset.record_id}"]`)
+						.forEach(el => el.remove())
+			}
+		}
+
 		for (const rec of Array.from(this.records))
 			this.divRecords.append(...rec.render())
 
@@ -285,6 +301,7 @@ class Record {
 		this.divType = null
 		this.divValue = null
 		this.divTTL = null
+		this.divActions = null
 	}// }}}
 
 	id() {// {{{
@@ -347,24 +364,24 @@ class Record {
 			this.divType = document.createElement('div')
 			this.divValue = document.createElement('div')
 			this.divTTL = document.createElement('div')
+			this.divActions = document.createElement('div')
 
 			this.imgIcon.innerHTML = `<img src="/images/${_VERSION}/icon_record.svg">`
-			this.imgIcon.classList.add("record-icon")
+			this.imgIcon.classList.add("record-icon");
+
+			[this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL, this.divActions]
+				.forEach(div => {
+					div.addEventListener('mouseenter', () => this.mouseEnter())
+					div.addEventListener('mouseleave', () => this.mouseLeave())
+					div.dataset.record_id = this.id()
+				})
+			this.divType.classList.add(this.type())
 
 			this.divFQDN.classList.add('fqdn')
 			this.divType.classList.add('type')
-			this.divType.classList.add(this.type())
 			this.divValue.classList.add('value')
 			this.divTTL.classList.add('ttl')
-
-			this.divFQDN.addEventListener('mouseenter', ()=>this.mouseEnter())
-			this.divFQDN.addEventListener('mouseleave', ()=>this.mouseLeave())
-			this.divType.addEventListener('mouseenter', ()=>this.mouseEnter())
-			this.divType.addEventListener('mouseleave', ()=>this.mouseLeave())
-			this.divValue.addEventListener('mouseenter', ()=>this.mouseEnter())
-			this.divValue.addEventListener('mouseleave', ()=>this.mouseLeave())
-			this.divTTL.addEventListener('mouseenter', ()=>this.mouseEnter())
-			this.divTTL.addEventListener('mouseleave', ()=>this.mouseLeave())
+			this.divActions.classList.add('actions')
 
 			this.divType.innerHTML = `<div></div>`
 			this.divFQDN.innerHTML = `
@@ -372,6 +389,9 @@ class Record {
 				<span class="first-label"></span>
 				<span class="rest-label"></span>
 			`
+			this.divActions.innerHTML = `
+				<img class="delete" src="/images/${_VERSION}/icon_delete.svg">
+			`
 
 			this.divFQDN.addEventListener('click', event => {
 				if (event.shiftKey)
@@ -387,6 +407,7 @@ class Record {
 			})
 			this.divType.addEventListener('click', () => this.edit())
 			this.divTTL.addEventListener('click', () => this.edit())
+			this.divActions.querySelector('.delete').addEventListener('click', () => this.delete())
 		}
 
 		// FQDN is updated.
@@ -404,20 +425,22 @@ class Record {
 		this.divValue.innerText = this.value()
 		this.divTTL.innerText = this.ttl()
 
-		return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL]
+		return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL, this.divActions]
 	}// }}}
-	mouseEnter() {
+	mouseEnter() {// {{{
 		this.divFQDN.classList.add('mouse-over')
 		this.divType.classList.add('mouse-over')
 		this.divValue.classList.add('mouse-over')
 		this.divTTL.classList.add('mouse-over')
-	}
-	mouseLeave() {
+		this.divActions.classList.add('mouse-over')
+	}// }}}
+	mouseLeave() {// {{{
 		this.divFQDN.classList.remove('mouse-over')
 		this.divType.classList.remove('mouse-over')
 		this.divValue.classList.remove('mouse-over')
 		this.divTTL.classList.remove('mouse-over')
-	}
+		this.divActions.classList.remove('mouse-over')
+	}// }}}
 
 	save() {// {{{
 		const created = (this.id() == '')
@@ -456,6 +479,23 @@ class Record {
 				}
 			})
 	}// }}}
+	delete() {// {{{
+		if (!confirm(`Are you sure you want to delete ${this.name()}?`))
+			return
+
+		fetch(`/record/delete/${this.id()}`)
+			.then(data => data.json())
+			.then(json => {
+				if (!json.OK) {
+					alert(json.Error)
+					return
+				}
+				_app.deleteRecord(this.id())
+				_app.cleanFolders()
+				_app.renderFolders()
+				_app.render()
+			})
+	}// }}}
 
 	openParentFolders(folder) {// {{{
 		if (folder === undefined)