New template (#121)

html/script.html

@@ -0,0 +1,89 @@
+<script lang="text/javascript">
+  let host = "{{ .Host }}";
+  let jsonObj = "{{ .JSON }}";
+  let data = JSON.parse(jsonObj);
+  let tool = "curl";
+  let commandBox, widgetBox, compositePath, commandStr;
+  let path
+  let ipQuery, portQuery
+  let ipCheckBox, portCheckBox, portInput
+  let ip = ''
+
+  window.onload = (event) => {
+     commandBox = document.getElementById('command');
+     widgetBox = document.getElementById('output');
+     ipCheckBox = document.getElementById('ipCheckBox')
+     portCheckBox = document.getElementById('portCheckBox')
+     portInput = document.getElementById('portInput')
+     reset()
+     setcommdStr()
+     changeInput("ip")
+  }
+
+  function reset() {
+    path = '';
+    ipQuery = '';
+    portQuery = '';
+  }
+
+  function setcommdStr() {
+    compositePath = `${path}${portQuery}${ipQuery}`;
+    commandStr = `${tool} ${host}/${compositePath}`;
+    commandBox.innerText = commandStr;
+  }
+
+  function changeInput(input, button) {
+    path = input
+    portQuery = ""
+    portInput.classList.add("hidden");
+    switch(path) {
+      case "json":
+        output.innerText = jsonObj
+        break
+      case "country-iso":
+        output.innerText = data["country_iso"]
+        break
+      case "port":
+        portInput.classList.remove("hidden");
+        path = "port";
+        output.innerText = "{}";
+        let currentPort = document.querySelector("#portInput").value;
+        updatePort(currentPort);
+        break
+      case "ip":
+        output.innerText = data["ip"]
+        path = ""
+        break
+      default:
+        output.innerText = data[path]
+    }
+    setcommdStr();
+
+    // set button selected
+    if (button) {
+      allButtons = document.querySelectorAll(('button.selected'));
+      allButtons.forEach((btn) => {btn.classList.remove("selected")})
+
+      button.classList.add("selected");
+    }
+  }
+
+  function navigate(event) {
+    console.log("navigate", compositePath)
+    window.location = compositePath
+    event.preventDefault()
+  }
+
+  function updatePort(value) {
+    port = value
+    portQuery = `/${port}`
+    setcommdStr()
+  }
+
+  function updateIP(value) {
+    ip = value
+    ipQuery = `?ip=${ip}`;
+    setcommdStr()
+    changeInput("ip", null)
+  }
+</script>