zone.d: fix creating resource record

Instead of relying on event "oninput" get the value of each record
values from the input element itself.

Also, convert type RR Type and MX Preferences to integer before passing
it to backend.

1 files changed, 35 insertions, 27 deletions

diff --git a/_www/zone.d/index.html b/_www/zone.d/index.html
index 77bfb8c..b8b3f46 100644
--- a/_www/zone.d/index.html
+++ b/_www/zone.d/index.html
@@ -50,13 +50,12 @@
 			.rr {
 				font-family: monospace;
 				width: 100%;
-				padding: 1em 0px;
 			}
 			.rr.header {
 				font-weight: bold;
 			}
 			.rr > .name {
-				width: 20em;
+				width: 12em;
 				display: inline-block;
 				word-wrap: break-word;
 			}
@@ -237,46 +236,41 @@
 
 				<div id="activeZone_form_default">
 					<div class="input">
-						<label> Name: </label>
-						<input class="name" oninput="updateNewRR('Name', this.value)" />
+						<label for="rr_name"> Name: </label>
+						<input id="rr_name" class="name" />
 						<span></span>
 					</div>
 					<div class="input">
-						<label> Value: </label>
-						<input oninput="updateNewRR('Value', this.value)" />
+						<label for="rr_value"> Value: </label>
+						<input id="rr_value" />
 					</div>
 				</div>
 
 				<div id="activeZone_form_ptr" style="display: none">
 					<div class="input">
-						<label> Name: </label>
-						<input oninput="updateNewRR('Name', this.value)" />
+						<label for="rr_ptr_name"> Name: </label>
+						<input id="rr_ptr_name" />
 					</div>
 					<div class="input">
-						<label> Value: </label>
-						<input class="name" oninput="updateNewRR('Value', this.value)" />
+						<label for="rr_ptr_value"> Value: </label>
+						<input id="rr_ptr_value" class="name" />
 						<span></span>
 					</div>
 				</div>
 
 				<div id="activeZone_form_mx" style="display: none">
 					<div class="input">
-						<label> Name: </label>
-						<input class="name" oninput="updateNewRR('Name', this.value)" />
+						<label for="rr_mx_name"> Name: </label>
+						<input id="rr_mx_name" class="name" />
 						<span></span>
 					</div>
 					<div class="input">
-						<label> Preference: </label>
-						<input
-							type="number"
-							min="1"
-							max="65535"
-							oninput="updateNewRR('Value.Preference', this.value)"
-						/>
+						<label for="rr_mx_preference"> Preference: </label>
+						<input id="rr_mx_preference" type="number" min="1" max="65535" />
 					</div>
 					<div class="input">
-						<label> Exchange: </label>
-						<input oninput="updateNewRR('Value.Exchange', this.value)" />
+						<label for="rr_mx_exchange"> Exchange: </label>
+						<input id="rr_mx_exchange" />
 					</div>
 				</div>
 
@@ -334,6 +328,24 @@
 			}
 
 			async function createRR() {
+				newRR.Type = parseInt(document.getElementById("rr_type").value)
+				switch (newRR.Type) {
+					case 12: // PTR
+						newRR.Name = document.getElementById("rr_ptr_name").value
+						newRR.Value = document.getElementById("rr_ptr_value").value
+						break
+					case 15: // MX
+						newRR.Name = document.getElementById("rr_mx_name").value
+						newRR.Value = {
+							Preference: parseInt(document.getElementById("rr_mx_preference").value),
+							Exchange: document.getElementById("rr_mx_exchange").value,
+						}
+						break
+					default:
+						newRR.Name = document.getElementById("rr_name").value
+						newRR.Value = document.getElementById("rr_value").value
+				}
+				console.log("createRR: ", newRR)
 				let res = await resc.ZoneFileRecordCreate(activeZone.Name, newRR)
 				if (res.code != 200) {
 					notifError(res.message)
@@ -362,7 +374,7 @@
 				let formPTR = document.getElementById("activeZone_form_ptr")
 				let formMX = document.getElementById("activeZone_form_mx")
 
-				newRR.Type = v
+				newRR.Type = parseInt(v)
 				newRR.Value = ""
 
 				if (v == 12) {
@@ -451,7 +463,7 @@
 									${resc.GetRRTypeName(rr.Type)}
 								</span>
 								<span class="value">
-									${rr.Value}
+									${JSON.stringify(rr.Value)}
 								</span>
 								<button onclick="deleteRR('${rr.Name}', ${idx})">
 									X
@@ -501,10 +513,6 @@
 				renderActiveZoneForm()
 			}
 
-			function updateNewRR(k, v) {
-				newRR[k] = v
-			}
-
 			function updateSOA(k, v) {
 				activeZone.SOA.Value[k] = v
 			}