Show recently added packages on second tab of load page (close #5)

master
Skylar Ittner 5 years ago
parent 569045661f
commit feeb39281d

@ -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
var searchboxVal = $(".package-list-searchbar input[type=search]").val();
if (searchboxVal != "") {
searchbar.clear();
searchbar.search(searchboxVal);
if (router.currentRoute.name == "list") {
var searchboxVal = $(".package-list-searchbar input[type=search]").val();
if (searchboxVal != "") {
searchbar.clear();
searchbar.search(searchboxVal);
}
}
}

@ -42,7 +42,36 @@ $("#addpackagebtn").click(function () {
}
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

@ -25,6 +25,16 @@ function getUndeliveredCount(address) {
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) {
switch (packagetype) {
case "package":
@ -76,37 +86,43 @@ function getMapIconForItems(items) {
return "multiple-items";
}
function addPackage(address, latitude, longitude, type) {
function addPackage(address, latitude, longitude, type, callback) {
var added = false;
if (typeof type == 'undefined') {
type = "package";
}
var packageID = uuidv4();
var coordsID = "";
for (var i = 0; i < packages.length; i++) {
if (packages[i].coords[0] == latitude && packages[i].coords[1] == longitude && packages[i].address == address) {
coordsID = packages[i].id;
packages[i].items.push({
address: address,
delivered: false,
type: type,
id: uuidv4()
id: packageID
});
added = true;
break;
}
}
if (!added) {
coordsID = uuidv4();
packages.push({
coords: [
latitude,
longitude
],
id: uuidv4(),
id: coordsID,
address: address,
items: [
{
address: address,
delivered: false,
type: type,
id: uuidv4()
id: packageID
}
]
});
@ -125,6 +141,13 @@ function addPackage(address, latitude, longitude, type) {
if (map != null) {
reloadMap();
}
if (typeof callback == 'function') {
callback({
coordsID: coordsID,
packageID: packageID
});
}
}
function markDelivered(id, delivered) {
@ -150,13 +173,13 @@ function markDelivered(id, delivered) {
localStorage.setItem("packages", JSON.stringify(packages));
}
function confirmDeletePackage(id) {
function confirmDeletePackage(package, callback) {
app.dialog.confirm(
"Delete package at " + packages[id].address + "?",
"Delete item at " + package.address + "?",
"Confirm",
function () {
// delete
deletePackage(id);
deletePackage(package.id, callback);
},
function () {
// 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 j = 0; j < packages[i].items.length; j++) {
if (packages[i].items[j].id == id) {
@ -176,6 +199,10 @@ function deletePackage(id) {
localStorage.setItem("packages", JSON.stringify(packages));
loadPackageList();
if (typeof callback == 'function') {
callback(id);
}
return;
}
}
@ -204,13 +231,13 @@ function countPackages() {
return count;
}
function addPackageByAddress(address, citystate, type) {
function addPackageByAddress(address, citystate, type, callback) {
$.getJSON(SETTINGS.geocodeapi, {
address: address + " " + citystate
}, function (resp) {
if (resp.status == "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 {
playSound("error");
app.dialog.confirm(
@ -218,9 +245,9 @@ function addPackageByAddress(address, citystate, type) {
"Accuracy Warning",
function (ok) {
if (resp.address.street == "") {
addPackage(address, resp.coords[0], resp.coords[1], type);
addPackage(address, resp.coords[0], resp.coords[1], type, callback);
} 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 id="no-packages-display" class="display-none text-align-center">
<img style="width: 60%; max-width: 300px;" src="assets/images/box-open-dashed.svg" />
<br />
<a href="/manage" class="button button-round button-fill margin-horizontal">Add a Package</a>
<div id="no-packages-display" class="block display-none text-align-center">
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
<div class="margin-top"><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 -->
</ul>

@ -22,65 +22,86 @@
</div>
</div>
<div class="page-content">
<div class="list no-margin-top">
<ul>
<li class="item-divider">Address</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Address Number</div>
<div class="item-input-wrap">
<input type="number" name="number" placeholder="1234">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Street</div>
<div class="item-input-wrap">
<input type="text" name="street" placeholder="Road Drive">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">City, State, ZIP</div>
<div class="item-input-wrap">
<input type="text" name="citystate" placeholder="City, ST, 12345" value="">
</div>
</div>
</li>
<li class="item-divider">Item Type</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="itemtype" value="package" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"><i class="fas fa-box"></i> Package</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="itemtype" value="letter" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"><i class="fas fa-envelope"></i> Letter</div>
</div>
</label>
</li>
<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 class="toolbar tabbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#add-tab" class="tab-link tab-link-active">Add</a>
<a href="#history-tab" class="tab-link">Recent</a>
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="add-tab" class="page-content tab tab-active">
<div class="list no-margin-top">
<ul>
<li class="item-divider">Address</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Address Number</div>
<div class="item-input-wrap">
<input type="number" name="number" placeholder="1234">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Street</div>
<div class="item-input-wrap">
<input type="text" name="street" placeholder="Road Drive">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">City, State, ZIP</div>
<div class="item-input-wrap">
<input type="text" name="citystate" placeholder="City, ST, 12345" value="">
</div>
</div>
</li>
<li class="item-divider">Item Type</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="itemtype" value="package" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"><i class="fas fa-box"></i> Package</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="itemtype" value="letter" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"><i class="fas fa-envelope"></i> Letter</div>
</div>
</label>
</li>
<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>

Loading…
Cancel
Save