Basic search

static/css/index.css

@@ -106,6 +106,10 @@ button {
 	cursor: pointer;
 }
 
+#search {
+	margin-bottom: 16px;
+}
+
 #records-tree {
 	white-space: nowrap;
 

static/js/dns.mjs

@@ -9,9 +9,20 @@ export class Application {
 		this.recordsTree = null
 		this.settingsIcon = null
 
+		this.searchFor = ''
+
 		this.renderFolders()
 		this.render()
 	}// }}}
+	filteredRecords() {// {{{
+		if (this.searchFor === '')
+			return this.records
+
+		const records = this.records.filter(r => {
+			return (r.name().includes(this.searchFor))
+		})
+		return records
+	}// }}}
 	parseRecords(recordsData) {// {{{
 		const records = recordsData.map(d => new Record(d))
 		return records
@@ -34,11 +45,11 @@ export class Application {
 		this.records.splice(i, 1)
 	}// }}}
 	renderFolders() {// {{{
-		this.records.sort(this.sortRecords)
-
+		const records = this.filteredRecords()
+		records.sort(this.sortRecords)
 
 		// rec: for example www.google.com
-		for (const rec of this.records) {
+		for (const rec of records) {
 			// com.google (reverse and remove wwww)
 			const labels = rec.labels().reverse().slice(0, -1)
 
@@ -98,9 +109,6 @@ export class Application {
 	}// }}}
 	render() {// {{{
 		if (this.recordsTree == null) {
-			this.recordsTree = document.createElement('div')
-			this.recordsTree.id = 'records-tree'
-
 			this.createIcon = document.createElement('img')
 			this.createIcon.id = 'create-icon'
 			this.createIcon.src = `/images/${_VERSION}/icon_create.svg`
@@ -111,6 +119,26 @@ export class Application {
 			this.settingsIcon.src = `/images/${_VERSION}/icon_settings.svg`
 			this.settingsIcon.addEventListener('click', () => new SettingsDialog(this).show())
 
+			const searchEl = document.createElement('div')
+			searchEl.id = 'search'
+			searchEl.innerHTML = `
+				<input type="text" class="search-for">
+				<button class="search">Search</button>
+			`
+			this.searchField = searchEl.querySelector('.search-for')
+			this.searchField.addEventListener('keydown', event => {
+				if (event.key == 'Enter')
+					this.search()
+			})
+			const search = searchEl.querySelector('button.search')
+			search.addEventListener('click', () => this.search())
+
+
+			this.recordsTree = document.createElement('div')
+			this.recordsTree.id = 'records-tree'
+
+
+			document.body.appendChild(searchEl)
 			document.body.appendChild(this.recordsTree)
 			document.body.appendChild(this.settingsIcon)
 			document.body.appendChild(this.createIcon)
@@ -167,6 +195,13 @@ export class Application {
 		else
 			document.body.classList.remove('boxed-folders')
 	}// }}}
+	search() {
+		this.searchFor = this.searchField.value.trim().toLowerCase()
+
+		this.cleanFolders()
+		this.renderFolders()
+		this.render()
+	}
 }
 
 class Folder {
@@ -262,9 +297,9 @@ class Folder {
 
 		// Records are refreshed.
 		if (this.records.length == 0)
-			this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'none')
+			this.divRecords.style.display = 'none'
 		else
-			this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block')
+			this.divRecords.style.display = ''
 
 		// Remove old ones
 		for (const recdiv of this.divRecords.children) {