Implemented adding/renaming of areas and sections

views/pages/configuration.gotmpl

@@ -1,16 +1,71 @@
 {{ define "page" }}
+	<script type="text/javascript">
+		function newArea() {
+			let name = prompt("Area name")
+			if (name === null)
+				return
+
+			if (name.trim() == '') {
+				alert("Name can't be empty")
+				return
+			}
+
+			location.href = `/area/new/${name.trim()}`
+		}
+		function renameArea(id, name) {
+			const newName = prompt('Rename area', name)
+			if (newName === null)
+				return
+
+			if (newName.trim() == '') {
+				alert("Name can't be empty")
+				return
+			}
+			location.href = `/area/rename/${id}/${newName.trim()}`
+		}
+
+		function newSection(areaID) {
+			let name = prompt("Section name")
+			if (name === null)
+				return
+
+			if (name.trim() == '') {
+				alert("Name can't be empty")
+				return
+			}
+
+			location.href = `/section/new/${areaID}/${name.trim()}`
+		}
+		function renameSection(id, name) {
+			const newName = prompt('Rename section', name)
+			if (newName === null)
+				return
+
+			if (newName.trim() == '') {
+				alert("Name can't be empty")
+				return
+			}
+			location.href = `/section/rename/${id}/${newName.trim()}`
+		}
+	</script>
 
 	{{ block "page_label" . }}{{end}}
 
 	<h1>Areas</h1>
 
+	<a href="#" onclick="newArea()">Create</a>
+
 	<div id="areas">
 		{{ range .Data.Areas }}
 		<div class="area">
-			<div class="name">{{ .Name }}</div>
+			<div class="name" onclick="renameArea({{ .ID }}, {{ .Name }})">{{ .Name }}</div>
+
+			<div style="margin: 8px 16px">
+				<a href="#" onclick="newSection({{ .ID }})">Create</a>
+			</div>
 			{{ range .SortedSections }}
 			<div class="section">
-				<div class="name">{{ .Name }}</div>
+				<div class="name" onclick="renameSection({{ .ID }}, {{ .Name }})">{{ .Name }}</div>
 			</div>
 			{{ end }}
 		</div>

views/pages/problems.gotmpl

@@ -9,6 +9,8 @@
 	
 	{{ block "page_label" . }}{{end}}
 
+	<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
+
 	<div id="problems-list">
 		<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Current</h2></div>
 		
@@ -29,8 +31,6 @@
 		{{ end }}
 	</div>
 
-	<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
-
 	<div id="acknowledged-list" class="hidden">
 		<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Acknowledged</h2></div>
 		<div class="header">Trigger</div>