js ensured that location is obtained before submitting if geolink is activated
This commit is contained in:
@@ -7,29 +7,32 @@
|
|||||||
<div id="root">
|
<div id="root">
|
||||||
<h1>Link Shortener</h1>
|
<h1>Link Shortener</h1>
|
||||||
<form id="form" action="/add" method="post" onsubmit="return validate()">
|
<form id="form" action="/add" method="post" onsubmit="return validate()">
|
||||||
<label for="url">URL:</label><span class="mandatory">*</span>
|
<label for="URL">URL:</label><span class="mandatory">*</span>
|
||||||
<input type="text" name="url" id="URL" value="https://example.com" required><br><br>
|
<input type="text" name="url" id="URL" value="https://example.com" required><br><br>
|
||||||
|
|
||||||
<label for="labels">GLink:</label><span class="mandatory">*</span>
|
<label for="labels">GLink:</label><span class="mandatory">*</span>
|
||||||
<label for="GLink" id="labels" class="glink">glink.zip/</label><input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite">
|
<label for="GLink" id="labels" class="glink">glink.zip/</label><input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite">
|
||||||
|
|
||||||
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
|
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
<label for="restricted">Geo-restricted?: </label><input type="checkbox" name="restricted" id="restricted">
|
<label for="restricted">Geo-restricted?: </label><input type="checkbox" name="restricted" id="restricted"><span id="loadingText" style="position: relative; left: 20px;"></span>
|
||||||
<br><br>
|
<br><br>
|
||||||
<label for="radiusSelect" hidden="hidden" id="radiusLabel">Radius: </label><span id="mandatory-radius"class="mandatory" hidden="hidden">*</span>
|
<label for="radiusSelect" hidden="hidden" id="radiusLabel">Radius: </label><span id="mandatory-radius" class="mandatory" hidden="hidden">*</span>
|
||||||
<select name="radiusSelect" id="radiusSelect" hidden="hidden" required>
|
<select name="radiusSelect" id="radiusSelect" hidden="hidden">
|
||||||
<option value="" selected disabled hidden>Choose a radius for your geo link</option>
|
<option value="" selected disabled hidden>Choose a radius for your geo link</option>
|
||||||
<option value="5">5 mi</option>
|
<option value="5">5 mi</option>
|
||||||
<option value="10">10 mi</option>
|
<option value="10">10 mi</option>
|
||||||
<option value="15">15 mi</option>
|
<option value="15">15 mi</option>
|
||||||
<option value="20">20 mi</option>
|
<option value="20">20 mi</option>
|
||||||
</select>
|
</select>
|
||||||
|
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<input type="submit" id="button" value="Zip It!">
|
<input type="submit" id="button" value="Zip It!">
|
||||||
<input type="hidden" name="latitude" id="latitude">
|
<input type="hidden" name="latitude" id="latitude">
|
||||||
<input type="hidden" name="longitude" id="longitude">
|
<input type="hidden" name="longitude" id="longitude">
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div>
|
||||||
|
@@ -1,7 +1,34 @@
|
|||||||
// const submit = document.getElementById("button");
|
// const submit = document.getElementById("button");
|
||||||
mycheckbox = document.getElementById("restricted");
|
mycheckbox = document.getElementById("restricted");
|
||||||
mycheckbox.addEventListener('change',checkboxCallback);
|
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) {
|
function checkboxCallback(event) {
|
||||||
const radiusLabel = document.getElementById("radiusLabel");
|
const radiusLabel = document.getElementById("radiusLabel");
|
||||||
const radiusSelect = document.getElementById("radiusSelect");
|
const radiusSelect = document.getElementById("radiusSelect");
|
||||||
@@ -10,11 +37,14 @@ function checkboxCallback(event) {
|
|||||||
radiusLabel.hidden = false;
|
radiusLabel.hidden = false;
|
||||||
mandatoryRadius.hidden = false;
|
mandatoryRadius.hidden = false;
|
||||||
radiusSelect.hidden = false;
|
radiusSelect.hidden = false;
|
||||||
|
radiusSelect.required = true;
|
||||||
|
valueRequested();
|
||||||
getLocation();
|
getLocation();
|
||||||
} else {
|
} else {
|
||||||
radiusLabel.hidden = true;
|
radiusLabel.hidden = true;
|
||||||
mandatoryRadius.hidden = true;
|
mandatoryRadius.hidden = true;
|
||||||
radiusSelect.hidden = true;
|
radiusSelect.hidden = true;
|
||||||
|
radiusSelect.required = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -28,10 +58,11 @@ function getLocation() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showPosition(position) {
|
function showPosition(position) {
|
||||||
|
console.log("Gotten positions");
|
||||||
console.log(position.coords.latitude);
|
console.log(position.coords.latitude);
|
||||||
console.log(position.coords.longitude);
|
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;
|
document.getElementById("longitude").value = position.coords.longitude;
|
||||||
console.log("done");
|
console.log("done");
|
||||||
}
|
}
|
||||||
@@ -39,6 +70,15 @@ function showPosition(position) {
|
|||||||
// submit.addEventListener('click', validate);
|
// submit.addEventListener('click', validate);
|
||||||
function validate() {
|
function validate() {
|
||||||
//e.preventDefault();
|
//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");
|
const url = document.getElementById("URL");
|
||||||
let glink = document.getElementById("GLink");
|
let glink = document.getElementById("GLink");
|
||||||
|
@@ -24,7 +24,6 @@ const GLINK_SIZE = 6;
|
|||||||
function getRandomGLink() {
|
function getRandomGLink() {
|
||||||
let glink = "";
|
let glink = "";
|
||||||
glink = newString(GLINK_SIZE);
|
glink = newString(GLINK_SIZE);
|
||||||
//console.log(glink);
|
|
||||||
validateLink(glink);
|
validateLink(glink);
|
||||||
return glink;
|
return glink;
|
||||||
}
|
}
|
||||||
@@ -90,6 +89,10 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)";
|
|||||||
app.post('/add', function(req, res) {
|
app.post('/add', function(req, res) {
|
||||||
let input_url = req.body.url;
|
let input_url = req.body.url;
|
||||||
let input_glink = req.body.glink;
|
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);
|
console.log("Received query " + input_url + " and " + input_glink);
|
||||||
let currID = nextId();
|
let currID = nextId();
|
||||||
if (input_glink === "") {
|
if (input_glink === "") {
|
||||||
|
Reference in New Issue
Block a user