Show 'add yield' button when JavaScript is available

cmd/mycolog/templates.go

@@ -29,7 +29,7 @@ func init() {
 		"list":          {"base", "auto_apply_filter", "overview", "list"},
 		"error":         {"base", "error"},
 		"add":           {"base", "register_change_script", "add"},
-		"details":       {"base", "register_change_script", "details"},
+		"details":       {"base", "register_change_script", "add_yield_script", "details"},
 		"delete":        {"base", "delete"},
 		"changeSpecies": {"base", "register_change_script", "change_species"},
 	}

cmd/mycolog/tmpl/add_yield_script.html

@@ -0,0 +1,67 @@
+{{define "script2"}}
+<script>
+	document.addEventListener('DOMContentLoaded', function() {
+		var addYieldHTML = `
+			<div class="pure-u-1-5 pure-u-md-1-8">
+				<label for="addYieldBtn">&nbsp;</label>
+				<input type="button" id="addYieldBtn" class="pure-button"
+					onclick="addYield()" value="➕">
+			</div>`;
+		var addYieldDialogHTML = `
+			<dialog id="addYieldDialog">
+				<form class="pure-form pure-form-stacked" method="dialog"
+					onsubmit="finishAddingYield()">
+					<fieldset>
+						<label for="newYield">Additional Yield in Grams</label>
+						<input type="number" step="any" min="0" id="newYield"
+							autocomplet="off"/>
+						<span class="pure-form-message" id="addYieldExplanation"></span>
+						<button type="button" class="pure-button" onclick="abortAddingYield()">
+							Abort
+						</button>
+						<button type="submit" class="pure-button pure-button-primary">
+							Add Yield
+						</button>
+					</fieldset>
+				</form>
+			</dialog>`;
+
+		var yield = document.getElementById('yield');
+		yield.className = 'pure-u-2-5 pure-u-md-1-4';
+		yield.insertAdjacentHTML('afterend', addYieldHTML);
+
+		document.body.insertAdjacentHTML('beforeend', addYieldDialogHTML);
+
+		var yieldComment = document.getElementById('yieldComment');
+		yieldComment.className = 'pure-u-2-5 pure-u-md-5-8';
+	});
+
+	function addYield() {
+		var yield = document.getElementById('yieldInput');
+		var prev = parseFloat(yield.value) || 0;
+		var explanation = document.getElementById('addYieldExplanation');
+		explanation.textContent = `This will be added to the existing ${prev}\xa0g.`;
+		document.getElementById('addYieldDialog').showModal();
+	}
+
+	function abortAddingYield() {
+		document.getElementById('addYieldDialog').close();
+	}
+
+	function finishAddingYield() {
+		var newYield = document.getElementById('newYield');
+		var newYieldFloat = parseFloat(newYield.value);
+		if (!isNaN(newYieldFloat) && isFinite(newYield.value)) {
+			var yield = document.getElementById('yieldInput');
+			var prev = parseFloat(yield.value) || 0;
+			// The additional parseFloat removes trailing zeros:
+			yield.value = parseFloat((prev + newYieldFloat).toFixed(3));
+			newYield.value = '';
+			registerChange();
+		} else {
+			alert('Could not add yield!');
+		}
+		document.getElementById('addYieldDialog').close();
+	}
+</script>
+{{end}}

cmd/mycolog/tmpl/base.html

@@ -11,5 +11,7 @@
 {{template "body" .}}
 {{define "script"}}{{/* Empty fallback. */}}{{end}}
 {{template "script"}}
+{{define "script2"}}{{/* Empty fallback. */}}{{end}}
+{{template "script2"}}
 </body>
 </html>

cmd/mycolog/tmpl/details.html

@@ -58,13 +58,13 @@ <h1>{{$typeName}} {{.Token}}</h1>
 				</textarea>
 				{{- if .Grow}}
 				<div class="pure-g">
-					<div class="pure-u-1-3 pure-u-md-1-4">
+					<div id="yield" class="pure-u-1-3 pure-u-md-1-4">
 						<label for="yield">Yield in Grams</label>
-						<input type="number" step="any" min="0" class="pure-u-23-24"
-							autocomplete="off" onchange="registerChange()"
+						<input type="number" step="any" min="0" id="yieldInput"
+							class="pure-u-23-24" autocomplete="off" onchange="registerChange()"
 							name="yield" value="{{with .Yield}}{{.}}{{end}}"/>
 					</div>
-					<div class="pure-u-2-3 pure-u-md-3-4">
+					<div id="yieldComment" class="pure-u-2-3 pure-u-md-3-4">
 						<label for="yieldComment">Remark</label>
 						<input type="text" name="yieldComment" onchange="registerChange()"
 							class="pure-u-1" autocomplete="off" value="{{.YieldComment}}"