Auto apply filter when JavaScript is available

cmd/mycolog/templates.go

@@ -26,7 +26,7 @@ var tmpls = make(map[string]*template.Template)
 func init() {
 	tmplMap := map[string][]string{
 		"intro":         {"base", "overview", "intro"},
-		"list":          {"base", "overview", "list"},
+		"list":          {"base", "auto_apply_filter", "overview", "list"},
 		"error":         {"base", "error"},
 		"add":           {"base", "register_change_script", "add"},
 		"details":       {"base", "register_change_script", "details"},

cmd/mycolog/tmpl/auto_apply_filter.html

@@ -0,0 +1,11 @@
+{{define "script"}}
+<script>
+	document.addEventListener('DOMContentLoaded', function() {
+		document.getElementById('applyFilter').style.display = 'none';
+	});
+
+	function applyFilter() {
+		document.getElementById('filter').submit();
+	}
+</script>
+{{end}}

cmd/mycolog/tmpl/list.html

@@ -61,27 +61,28 @@
 {{if .MycSelected}}{{$typeName    = "mycelium"}}{{end}}
 {{if .SpawnSelected}}{{$typeName  = "spawn"}}{{end}}
 {{if .GrowSelected}}{{$typeName   = "grows"}}{{end}}
-<form class="pure-form pure-form-stacked filter">
+<form id="filter" class="pure-form pure-form-stacked filter">
 	{{if gt (len .KnownSpecies) 1}}
 	<label for="species">Species</label>
-	<select name="species" id="species" autocomplete="off">
+	<select name="species" id="species" autocomplete="off"
+		onchange="applyFilter()">
 		<option>any</option>
 		{{range .KnownSpecies -}}
 		<option{{if eq $.WantedSpecies .}} selected{{end}}>{{.}}</option>
 		{{- end}}
 	</select>
 	{{end}}
 	<label for="gone" class="pure-checkbox">
-		<input type="checkbox" name="gone" id="gone"
+		<input type="checkbox" name="gone" id="gone" onchange="applyFilter()"
 			autocomplete="off" {{if .ShowGone}} checked{{end}}/>
 		List gone {{$typeName}}
 	</label>
 	{{if .MycSelected}}<label for="old" class="pure-checkbox">
-		<input type="checkbox" name="old" id="old"
+		<input type="checkbox" name="old" id="old" onchange="applyFilter()"
 			autocomplete="off" {{if .ShowOld}} checked{{end}}/>
 		List {{$typeName}} older than 30 days
 	</label>{{end}}
-	<button type="submit" class="pure-button pure-button-primary">
+	<button id="applyFilter" type="submit" class="pure-button pure-button-primary">
 		Apply filters
 	</button>
 </form>