add visual highlight to matching search query substrings,

add missing aria-label for search input,
fix missing network add icon

css/style.css

@@ -1,6 +1,7 @@
 :root {
 	--negative-color: #f00;
 	--positive-color: #0f0;
+	--highlight-color: yellow;
 	--lightbg-text-color: black;
 	--main-bg-color: #404040;
 	--main-text-color: white;

images/actions/network/add.svg

@@ -0,0 +1 @@
+<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>

index.html

@@ -61,9 +61,9 @@
 					<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 						<form id="vm-search" role="search" class="flex row nowrap">
 							<img src="images/static/search.svg" alt="Search VMs">
-							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;">
+							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
 						</form>
-						<button type="button" id="instance-add" class="w3-button" aria-label="Create New Instance">
+						<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
 							<span class="large" style="margin: 0;">Create Instance</span>
 							<img class="small" style="height: 1lh; width: 1lh;" src="images/actions/instance/add.svg" alt="Create New Instance">
 						</button>

scripts/index.js

@@ -38,9 +38,9 @@ async function getInstances () {
 }
 
 async function populateInstances () {
-	const searchQuery = document.querySelector("#search").value;
+	const searchQuery = document.querySelector("#search").value || null;
 	let criteria;
-	if (searchQuery === "") {
+	if (!searchQuery) {
 		criteria = (a, b) => {
 			return (a.vmid > b.vmid) ? 1 : -1;
 		};
@@ -64,11 +64,11 @@ async function populateInstances () {
 		};
 	}
 	instances.sort(criteria);
-	// console.log(instances)
 	const instanceContainer = document.querySelector("#instance-container");
 	instanceContainer.innerHTML = "";
 	for (let i = 0; i < instances.length; i++) {
 		const newInstance = document.createElement("instance-card");
+		instances[i].searchQuery = searchQuery;
 		newInstance.data = instances[i];
 		instanceContainer.append(newInstance);
 	}

scripts/instance.js

@@ -53,7 +53,8 @@ class InstanceCard extends HTMLElement {
 			status: this.status,
 			vmid: this.status,
 			name: this.name,
-			node: this.node
+			node: this.node,
+			searchQuery: this.searchQuery
 		};
 	}
 
@@ -66,6 +67,7 @@ class InstanceCard extends HTMLElement {
 		this.vmid = data.vmid;
 		this.name = data.name;
 		this.node = data.node;
+		this.searchQuery = data.searchQuery;
 		this.update();
 	}
 
@@ -74,7 +76,16 @@ class InstanceCard extends HTMLElement {
 		vmidParagraph.innerText = this.vmid;
 
 		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
+		if (this.searchQuery) {
+			const nameParts = this.name.split(this.searchQuery);
+			nameParagraph.innerHTML += `<span>${nameParts[0]}</span>`;
+			for (let i = 1; i < nameParts.length; i++) {
+				nameParagraph.innerHTML += `<span style="color: var(--lightbg-text-color); background-color: var(--highlight-color);">${this.searchQuery}</span><span>${nameParts[i]}</span>`;
+			}
+		}
+		else {
 			nameParagraph.innerText = this.name ? this.name : "";
+		}
 
 		const typeParagraph = this.shadowRoot.querySelector("#instance-type");
 		typeParagraph.innerText = this.type;

settings.html

@@ -61,7 +61,7 @@
 						<fieldset>
 							<legend>App Sync Frequency</legend>
 							<div class="input-grid" style="grid-template-columns: auto auto 1fr;">
-								<p>Sync every</p><input aria-label="Sync Rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
+								<p>Sync every</p><input aria-label="sync rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
 							</div>
 						</fieldset>
 					</div>