Show recently added packages on second tab of load page (close #5)
This commit is contained in:
parent
569045661f
commit
feeb39281d
2
www/assets/images/history-dashed.svg
Normal file
2
www/assets/images/history-dashed.svg
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg class="svg-inline--fa fa-history fa-w-16" aria-hidden="true" data-icon="history" data-prefix="far" focusable="false" role="img" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 255.532c.252 136.64-111.182 248.372-247.822 248.468-64.014.045-122.373-24.163-166.394-63.942-5.097-4.606-5.3-12.543-.443-17.4l16.96-16.96c4.529-4.529 11.776-4.659 16.555-.395C158.208 436.843 204.848 456 256 456c110.549 0 200-89.468 200-200 0-110.549-89.468-200-200-200-55.52 0-105.708 22.574-141.923 59.043l49.091 48.413c7.641 7.535 2.305 20.544-8.426 20.544H26.412c-6.627 0-12-5.373-12-12V45.443c0-10.651 12.843-16.023 20.426-8.544l45.097 44.474C124.866 36.067 187.15 8 256 8c136.811 0 247.747 110.781 248 247.532zm-167.058 90.173l14.116-19.409c3.898-5.36 2.713-12.865-2.647-16.763L280 259.778V116c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v168.222l88.179 64.13c5.36 3.897 12.865 2.712 16.763-2.647z" fill="none" stroke="#9e9e9e" stroke-dasharray="5,5" stroke-width="10"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -141,10 +141,12 @@ function loadPackageList(sortType) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// If there was a search open when the reload was triggered
|
// If there was a search open when the reload was triggered
|
||||||
var searchboxVal = $(".package-list-searchbar input[type=search]").val();
|
if (router.currentRoute.name == "list") {
|
||||||
if (searchboxVal != "") {
|
var searchboxVal = $(".package-list-searchbar input[type=search]").val();
|
||||||
searchbar.clear();
|
if (searchboxVal != "") {
|
||||||
searchbar.search(searchboxVal);
|
searchbar.clear();
|
||||||
|
searchbar.search(searchboxVal);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -42,7 +42,36 @@ $("#addpackagebtn").click(function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var address = ($("input[name=number]").val() + " " + $("input[name=street]").val()).toUpperCase();
|
var address = ($("input[name=number]").val() + " " + $("input[name=street]").val()).toUpperCase();
|
||||||
addPackageByAddress(address, $("input[name=citystate]").val().toUpperCase(), $("input[name=itemtype]:checked").val());
|
$("#no-history").addClass("display-none");
|
||||||
|
addPackageByAddress(address, $("input[name=citystate]").val().toUpperCase(), $("input[name=itemtype]:checked").val(), function (ids) {
|
||||||
|
var packageObj = getPackage(ids.packageID);
|
||||||
|
$("#historylist").prepend('<li class="history-list-item item-content" data-package="' + ids.packageID + '">'
|
||||||
|
+ ' <div class="item-media">'
|
||||||
|
+ ' <i class="icon ' + getIconForType(packageObj.type) + '"></i>'
|
||||||
|
+ ' </div>'
|
||||||
|
+ ' <div class="item-inner">'
|
||||||
|
+ ' <div class="item-title">'
|
||||||
|
+ ' ' + packageObj.address
|
||||||
|
+ ' </div>'
|
||||||
|
+ ' </div>'
|
||||||
|
+ '</li>');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove any pre-existing click handlers from the history list,
|
||||||
|
// otherwise the user will see a number of confirm prompts equal to the number
|
||||||
|
// of times they've opened the manage page
|
||||||
|
$(".view-main").off("click", "#historylist .history-list-item");
|
||||||
|
|
||||||
|
$(".view-main").on("click", "#historylist .history-list-item", function () {
|
||||||
|
console.log("Asking to delete ", $(this).data("package"));
|
||||||
|
confirmDeletePackage(getPackage($(this).data("package")), function (id) {
|
||||||
|
console.log("Removing history item", id);
|
||||||
|
$('#historylist .history-list-item[data-package="' + id + '"]').remove();
|
||||||
|
if ($('#historylist .history-list-item').length == 0) {
|
||||||
|
$("#no-history").removeClass("display-none");
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Restore user's last entered city/state combo
|
// Restore user's last entered city/state combo
|
||||||
|
|||||||
@ -25,6 +25,16 @@ function getUndeliveredCount(address) {
|
|||||||
return undelivered;
|
return undelivered;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getPackage(packageid) {
|
||||||
|
for (var i = 0; i < packages.length; i++) {
|
||||||
|
for (var j = 0; j < packages[i].items.length; j++) {
|
||||||
|
if (packages[i].items[j].id == packageid) {
|
||||||
|
return packages[i].items[j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function getIconForType(packagetype) {
|
function getIconForType(packagetype) {
|
||||||
switch (packagetype) {
|
switch (packagetype) {
|
||||||
case "package":
|
case "package":
|
||||||
@ -76,37 +86,43 @@ function getMapIconForItems(items) {
|
|||||||
return "multiple-items";
|
return "multiple-items";
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPackage(address, latitude, longitude, type) {
|
function addPackage(address, latitude, longitude, type, callback) {
|
||||||
var added = false;
|
var added = false;
|
||||||
if (typeof type == 'undefined') {
|
if (typeof type == 'undefined') {
|
||||||
type = "package";
|
type = "package";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var packageID = uuidv4();
|
||||||
|
var coordsID = "";
|
||||||
|
|
||||||
for (var i = 0; i < packages.length; i++) {
|
for (var i = 0; i < packages.length; i++) {
|
||||||
if (packages[i].coords[0] == latitude && packages[i].coords[1] == longitude && packages[i].address == address) {
|
if (packages[i].coords[0] == latitude && packages[i].coords[1] == longitude && packages[i].address == address) {
|
||||||
|
coordsID = packages[i].id;
|
||||||
packages[i].items.push({
|
packages[i].items.push({
|
||||||
address: address,
|
address: address,
|
||||||
delivered: false,
|
delivered: false,
|
||||||
type: type,
|
type: type,
|
||||||
id: uuidv4()
|
id: packageID
|
||||||
});
|
});
|
||||||
added = true;
|
added = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!added) {
|
if (!added) {
|
||||||
|
coordsID = uuidv4();
|
||||||
packages.push({
|
packages.push({
|
||||||
coords: [
|
coords: [
|
||||||
latitude,
|
latitude,
|
||||||
longitude
|
longitude
|
||||||
],
|
],
|
||||||
id: uuidv4(),
|
id: coordsID,
|
||||||
address: address,
|
address: address,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
address: address,
|
address: address,
|
||||||
delivered: false,
|
delivered: false,
|
||||||
type: type,
|
type: type,
|
||||||
id: uuidv4()
|
id: packageID
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
@ -125,6 +141,13 @@ function addPackage(address, latitude, longitude, type) {
|
|||||||
if (map != null) {
|
if (map != null) {
|
||||||
reloadMap();
|
reloadMap();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (typeof callback == 'function') {
|
||||||
|
callback({
|
||||||
|
coordsID: coordsID,
|
||||||
|
packageID: packageID
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function markDelivered(id, delivered) {
|
function markDelivered(id, delivered) {
|
||||||
@ -150,13 +173,13 @@ function markDelivered(id, delivered) {
|
|||||||
localStorage.setItem("packages", JSON.stringify(packages));
|
localStorage.setItem("packages", JSON.stringify(packages));
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmDeletePackage(id) {
|
function confirmDeletePackage(package, callback) {
|
||||||
app.dialog.confirm(
|
app.dialog.confirm(
|
||||||
"Delete package at " + packages[id].address + "?",
|
"Delete item at " + package.address + "?",
|
||||||
"Confirm",
|
"Confirm",
|
||||||
function () {
|
function () {
|
||||||
// delete
|
// delete
|
||||||
deletePackage(id);
|
deletePackage(package.id, callback);
|
||||||
},
|
},
|
||||||
function () {
|
function () {
|
||||||
// cancel
|
// cancel
|
||||||
@ -164,7 +187,7 @@ function confirmDeletePackage(id) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function deletePackage(id) {
|
function deletePackage(id, callback) {
|
||||||
for (var i = 0; i < packages.length; i++) {
|
for (var i = 0; i < packages.length; i++) {
|
||||||
for (var j = 0; j < packages[i].items.length; j++) {
|
for (var j = 0; j < packages[i].items.length; j++) {
|
||||||
if (packages[i].items[j].id == id) {
|
if (packages[i].items[j].id == id) {
|
||||||
@ -176,6 +199,10 @@ function deletePackage(id) {
|
|||||||
|
|
||||||
localStorage.setItem("packages", JSON.stringify(packages));
|
localStorage.setItem("packages", JSON.stringify(packages));
|
||||||
loadPackageList();
|
loadPackageList();
|
||||||
|
|
||||||
|
if (typeof callback == 'function') {
|
||||||
|
callback(id);
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -204,13 +231,13 @@ function countPackages() {
|
|||||||
return count;
|
return count;
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPackageByAddress(address, citystate, type) {
|
function addPackageByAddress(address, citystate, type, callback) {
|
||||||
$.getJSON(SETTINGS.geocodeapi, {
|
$.getJSON(SETTINGS.geocodeapi, {
|
||||||
address: address + " " + citystate
|
address: address + " " + citystate
|
||||||
}, function (resp) {
|
}, function (resp) {
|
||||||
if (resp.status == "OK") {
|
if (resp.status == "OK") {
|
||||||
if (resp.accuracy.ok) {
|
if (resp.accuracy.ok) {
|
||||||
addPackage(resp.address.street, resp.coords[0], resp.coords[1], type);
|
addPackage(resp.address.street, resp.coords[0], resp.coords[1], type, callback);
|
||||||
} else {
|
} else {
|
||||||
playSound("error");
|
playSound("error");
|
||||||
app.dialog.confirm(
|
app.dialog.confirm(
|
||||||
@ -218,9 +245,9 @@ function addPackageByAddress(address, citystate, type) {
|
|||||||
"Accuracy Warning",
|
"Accuracy Warning",
|
||||||
function (ok) {
|
function (ok) {
|
||||||
if (resp.address.street == "") {
|
if (resp.address.street == "") {
|
||||||
addPackage(address, resp.coords[0], resp.coords[1], type);
|
addPackage(address, resp.coords[0], resp.coords[1], type, callback);
|
||||||
} else {
|
} else {
|
||||||
addPackage(resp.address.street, resp.coords[0], resp.coords[1], type);
|
addPackage(resp.address.street, resp.coords[0], resp.coords[1], type, callback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -40,12 +40,11 @@
|
|||||||
|
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
|
|
||||||
<div id="no-packages-display" class="display-none text-align-center">
|
<div id="no-packages-display" class="block display-none text-align-center">
|
||||||
<img style="width: 60%; max-width: 300px;" src="assets/images/box-open-dashed.svg" />
|
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
|
||||||
<br />
|
<div class="margin-top"><a href="/manage" class="button button-round button-fill margin-horizontal">Add a Package</a></div>
|
||||||
<a href="/manage" class="button button-round button-fill margin-horizontal">Add a Package</a>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="list no-hairlines tablet-inset" id="addresslist" style="margin-top: 0;">
|
<ul class="list no-hairlines tablet-inset no-margin-top" id="addresslist">
|
||||||
<!-- Packages go here -->
|
<!-- Packages go here -->
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|||||||
@ -22,65 +22,86 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="page-content">
|
<div class="toolbar tabbar toolbar-bottom">
|
||||||
<div class="list no-margin-top">
|
<div class="toolbar-inner">
|
||||||
<ul>
|
<a href="#add-tab" class="tab-link tab-link-active">Add</a>
|
||||||
<li class="item-divider">Address</li>
|
<a href="#history-tab" class="tab-link">Recent</a>
|
||||||
<li class="item-content item-input">
|
</div>
|
||||||
<div class="item-inner">
|
</div>
|
||||||
<div class="item-title item-label">Address Number</div>
|
|
||||||
<div class="item-input-wrap">
|
<div class="tabs-swipeable-wrap">
|
||||||
<input type="number" name="number" placeholder="1234">
|
<div class="tabs">
|
||||||
<span class="input-clear-button"></span>
|
<div id="add-tab" class="page-content tab tab-active">
|
||||||
</div>
|
<div class="list no-margin-top">
|
||||||
</div>
|
<ul>
|
||||||
</li>
|
<li class="item-divider">Address</li>
|
||||||
<li class="item-content item-input">
|
<li class="item-content item-input">
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title item-label">Street</div>
|
<div class="item-title item-label">Address Number</div>
|
||||||
<div class="item-input-wrap">
|
<div class="item-input-wrap">
|
||||||
<input type="text" name="street" placeholder="Road Drive">
|
<input type="number" name="number" placeholder="1234">
|
||||||
<span class="input-clear-button"></span>
|
<span class="input-clear-button"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="item-content item-input">
|
<li class="item-content item-input">
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title item-label">City, State, ZIP</div>
|
<div class="item-title item-label">Street</div>
|
||||||
<div class="item-input-wrap">
|
<div class="item-input-wrap">
|
||||||
<input type="text" name="citystate" placeholder="City, ST, 12345" value="">
|
<input type="text" name="street" placeholder="Road Drive">
|
||||||
</div>
|
<span class="input-clear-button"></span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="item-divider">Item Type</li>
|
</li>
|
||||||
<li>
|
<li class="item-content item-input">
|
||||||
<label class="item-radio item-content">
|
<div class="item-inner">
|
||||||
<input type="radio" name="itemtype" value="package" checked />
|
<div class="item-title item-label">City, State, ZIP</div>
|
||||||
<i class="icon icon-radio"></i>
|
<div class="item-input-wrap">
|
||||||
<div class="item-inner">
|
<input type="text" name="citystate" placeholder="City, ST, 12345" value="">
|
||||||
<div class="item-title"><i class="fas fa-box"></i> Package</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</li>
|
||||||
</li>
|
<li class="item-divider">Item Type</li>
|
||||||
<li>
|
<li>
|
||||||
<label class="item-radio item-content">
|
<label class="item-radio item-content">
|
||||||
<input type="radio" name="itemtype" value="letter" />
|
<input type="radio" name="itemtype" value="package" checked />
|
||||||
<i class="icon icon-radio"></i>
|
<i class="icon icon-radio"></i>
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title"><i class="fas fa-envelope"></i> Letter</div>
|
<div class="item-title"><i class="fas fa-box"></i> Package</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label class="item-radio item-content">
|
<label class="item-radio item-content">
|
||||||
<input type="radio" name="itemtype" value="express" />
|
<input type="radio" name="itemtype" value="letter" />
|
||||||
<i class="icon icon-radio"></i>
|
<i class="icon icon-radio"></i>
|
||||||
<div class="item-inner">
|
<div class="item-inner">
|
||||||
<div class="item-title"><i class="fas fa-shipping-fast"></i> Express</div>
|
<div class="item-title"><i class="fas fa-envelope"></i> Letter</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li>
|
||||||
|
<label class="item-radio item-content">
|
||||||
|
<input type="radio" name="itemtype" value="express" />
|
||||||
|
<i class="icon icon-radio"></i>
|
||||||
|
<div class="item-inner">
|
||||||
|
<div class="item-title"><i class="fas fa-shipping-fast"></i> Express</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="history-tab" class="page-content tab">
|
||||||
|
<div class="block text-align-center" id="no-history">
|
||||||
|
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
|
||||||
|
<div class="margin-top">No recently added items! Swipe <i class="fas fa-arrow-left"></i> to add some.</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
|
||||||
|
<!-- Packages go here -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user