aravind/glink-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js ensured that location is obtained before submitting if geolink is activated

Browse Source
This commit is contained in:
Aravind142857
2023-06-13 01:06:18 -05:00
parent d873640075
commit 0d2619b9c0
3 changed files with 53 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/index.html
View File

@@ -7,29 +7,32 @@
<div id="root">
<h1>Link Shortener</h1>
<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>
<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">
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
<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>
<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>
<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">
<option value="" selected disabled hidden>Choose a radius for your geo link</option>
<option value="5">5 mi</option>
<option value="10">10 mi</option>
<option value="15">15 mi</option>
<option value="20">20 mi</option>
</select>
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
<br><br>
<input type="submit" id="button" value="Zip It!">
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
</form>
<hr>
<div>

42
public/src/index.js
View File

@@ -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");