forked from Netsyms/PackageHelper
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
5.2 KiB
HTML
131 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>PackageNotice</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css" />
|
|
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
|
|
|
|
<div class="container">
|
|
<div class="row mt-3">
|
|
<div class="col-md-4">
|
|
<div class="card mt-2">
|
|
<div class="card-body">
|
|
<input class="form-control" type="number" name="number" placeholder="House Number" />
|
|
<input class="form-control" type="text" name="street" placeholder="Street" />
|
|
<br />
|
|
Helena, MT
|
|
<div class="btn btn-block btn-success btn-sm mt-3" id="addpackagebtn"><i class="fas fa-plus"></i> Add</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-body">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">
|
|
<i class="fas fa-map-marker-alt"></i> <i class="fas fa-bell"></i>
|
|
</div>
|
|
</div>
|
|
<input class="form-control" type="number" id="alertdistance" value="100" />
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
meters
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-group list-group-flush" id="addresslist">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card mt-md-2" style="height: 90vh;">
|
|
<div id="mapbox" style="width: 100%; height: 100%; background-color: #e8e5d8;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="node_modules/leaflet/dist/leaflet.js"></script>
|
|
<script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
|
|
<script src="assets/js/map_leaflet.js"></script>
|
|
<script src="assets/js/map.js"></script>
|
|
|
|
<script>
|
|
var geocodeapi = "https://apis.netsyms.net/packagenotice/geocode.php";
|
|
|
|
var packages = [];
|
|
</script>
|
|
|
|
<script>
|
|
var alertsound = new Audio('assets/alert.mp3');
|
|
$("#addpackagebtn").click(function () {
|
|
var address = ($("input[name=number]").val() + " " + $("input[name=street]").val()).toUpperCase();
|
|
$.getJSON(geocodeapi, {
|
|
address: address + " Helena, MT"
|
|
}, function (resp) {
|
|
if (resp.status == "OK") {
|
|
packages.push({
|
|
"address": address,
|
|
"coords": [
|
|
resp.coords[0],
|
|
resp.coords[1]
|
|
]
|
|
});
|
|
localStorage.setItem("packages", JSON.stringify(packages));
|
|
renderPackages();
|
|
} else {
|
|
alert("Error: ".resp.message);
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#addresslist").on("click", ".list-group-item", function () {
|
|
if (typeof packages[$(this).data("packageid")].delivered == "undefined") {
|
|
packages[$(this).data("packageid")].delivered = true;
|
|
} else if (packages[$(this).data("packageid")].delivered == false) {
|
|
packages[$(this).data("packageid")].delivered = true;
|
|
} else {
|
|
var conf = confirm("Really mark as undelivered?");
|
|
if (conf) {
|
|
packages[$(this).data("packageid")].delivered = false;
|
|
}
|
|
}
|
|
localStorage.setItem("packages", JSON.stringify(packages));
|
|
renderPackages();
|
|
});
|
|
|
|
$("#addresslist").on("mousedown", ".list-group-item", function (e) {
|
|
if (e.button == 2) {
|
|
var conf = confirm("Really delete package?");
|
|
if (conf) {
|
|
packages.splice($(this).data("packageid"), 1);
|
|
localStorage.setItem("packages", JSON.stringify(packages));
|
|
renderPackages();
|
|
}
|
|
}
|
|
});
|
|
|
|
function renderPackages() {
|
|
$("#addresslist").html("");
|
|
for (var i = 0; i < packages.length; i++) {
|
|
color = "";
|
|
if (packages[i].delivered == true) {
|
|
color = "text-light bg-success";
|
|
}
|
|
$("#addresslist").append('<div class="list-group-item ' + color + '" data-packageid="' + i + '" data-latitude="' + packages[i].coords[0] + '" data-longitude="' + packages[i].coords[1] + '"><b>' + packages[i].address + '</b> <span class="distance">... m</span><br />' + packages[i].coords[0] + ', ' + packages[i].coords[1] + '</div>');
|
|
}
|
|
map.updatePackageLayer(packages);
|
|
}
|
|
|
|
if (localStorage.getItem("packages") != null) {
|
|
packages = JSON.parse(localStorage.getItem("packages"));
|
|
|
|
renderPackages();
|
|
}
|
|
</script> |