diff --git a/public/index.html b/public/index.html index e481a3c..17bc20d 100644 --- a/public/index.html +++ b/public/index.html @@ -7,29 +7,32 @@

Link Shortener

- * + *

* - +

- +

- - +

+ +

diff --git a/public/src/index.js b/public/src/index.js index bf9d0ec..4f5753d 100644 --- a/public/src/index.js +++ b/public/src/index.js @@ -1,7 +1,34 @@ // const submit = document.getElementById("button"); mycheckbox = document.getElementById("restricted"); mycheckbox.addEventListener('change',checkboxCallback); +window.onload = function() { + if (mycheckbox.checked) { + document.getElementById("radiusLabel").hidden = false; + document.getElementById("mandatory-radius").hidden = false; + var radiusSelect = document.getElementById("radiusSelect"); + radiusSelect.hidden = false; + radiusSelect.required = true; + } +} + +var lat = document.getElementById("latitude"); +lat.setValue = function(newValue) { + this.value = newValue; + valueReceived(); +} + +function valueReceived() { + let load = document.getElementById("loadingText"); + load.innerHTML = "Location retrieved"; + load.style.color = "green"; +} +function valueRequested() { + let load = document.getElementById("loadingText"); + load.innerHTML = "Location requested. Please wait..."; + load.style.color = "red"; + +} function checkboxCallback(event) { const radiusLabel = document.getElementById("radiusLabel"); const radiusSelect = document.getElementById("radiusSelect"); @@ -10,11 +37,14 @@ function checkboxCallback(event) { radiusLabel.hidden = false; mandatoryRadius.hidden = false; radiusSelect.hidden = false; + radiusSelect.required = true; + valueRequested(); getLocation(); } else { radiusLabel.hidden = true; mandatoryRadius.hidden = true; radiusSelect.hidden = true; + radiusSelect.required = false; } } @@ -28,10 +58,11 @@ function getLocation() { } function showPosition(position) { + console.log("Gotten positions"); console.log(position.coords.latitude); console.log(position.coords.longitude); - document.getElementById("latitude").value = position.coords.latitude; + document.getElementById("latitude").setValue(position.coords.latitude); document.getElementById("longitude").value = position.coords.longitude; console.log("done"); } @@ -39,6 +70,15 @@ function showPosition(position) { // submit.addEventListener('click', validate); function validate() { //e.preventDefault(); + const checked = document.getElementById("restricted"); + if (checked.checked) { + const lat = document.getElementById("latitude"); + const long = document.getElementById("longitude"); + if (lat.value === "" || long.value === "") { + /* wait */ + return false + } + } const url = document.getElementById("URL"); let glink = document.getElementById("GLink"); diff --git a/result.js b/result.js index 1361536..6de0c5d 100644 --- a/result.js +++ b/result.js @@ -24,7 +24,6 @@ const GLINK_SIZE = 6; function getRandomGLink() { let glink = ""; glink = newString(GLINK_SIZE); - //console.log(glink); validateLink(glink); return glink; } @@ -90,6 +89,10 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)"; app.post('/add', function(req, res) { let input_url = req.body.url; let input_glink = req.body.glink; + let input_checkbox = req.body.restricted; + let input_radius = req.body.radiusSelect; + let input_latitude = req.body.latitude; + let input_longitude = req.body.longitude; console.log("Received query " + input_url + " and " + input_glink); let currID = nextId(); if (input_glink === "") {