From 0311c57e95e48db6136b4fdec3312771abf483a6 Mon Sep 17 00:00:00 2001
From: Shulhan <ms@kilabit.info>
Date: Sun, 24 Jan 2021 00:44:36 +0700
Subject: 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.
---
 _www/zone.d/index.html | 62 ++++++++++++++++++++++++++++----------------------
 1 file 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
 			}
-- 
cgit v1.3