feat(web): add select all/none for columns

Continued the work started with pull request jef#183
lambia · Dec 10, 2021 · 7af8132 · 7af8132
1 parent 72140be
commit 7af8132
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/web/index.html b/web/index.html
@@ -2,6 +2,11 @@
 <html>
 	<head>
 		<title>streetmerchant control</title>
+		<style>
+			table th {
+				cursor: pointer;
+			}
+		</style>
 		<script type="text/javascript">
 			let config;
 			let brands;
@@ -135,15 +140,26 @@
 
 				await loadScreenshots();
 			}
+
+			function selectAll(element, columnId) {
+				const list = document.querySelectorAll("#"+columnId+" input");
+				const checked = [...list].filter( el => el.checked ).length;
+				const newValue = (checked==list.length) ? false : true;
+
+				for (const htmlElement of list) {
+					htmlElement.checked = newValue;
+				}
+			}
+
 		</script>
 	</head>
 	<body onload="loadInitial();">
 		<table>
 			<tr>
-				<th>Stores</th>
-				<th>Brands</th>
-				<th>Series</th>
-				<th>Models</th>
+				<th onclick="selectAll(this, 'storeList');">Stores</th>
+				<th onclick="selectAll(this, 'brandList');">Brands</th>
+				<th onclick="selectAll(this, 'seriesList');">Series</th>
+				<th onclick="selectAll(this, 'modelList');">Models</th>
 			</tr>
 			<tr>
 				<td valign="top" id="storeList"></td>