Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Add help menus (close #29)

Browse Source
This commit is contained in:
Skylar Ittner 2019-12-29 19:36:00 -07:00
parent a0cbb0dbe5
commit 7d39c12fce
7 changed files with 159 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
www/assets/css/app.css
View File

@ -19,6 +19,17 @@ Framework7 and FontAwesome both have a .fab class
line-height: var(--f7-line-height);
}
/*
* Material icons are too big and disrupt the flow of text
*/
.block .material-icons {
font-size: var(--f7-block-font-size);
}
.material-icons-intext .material-icons {
font-size: var(--f7-block-font-size);
}
#mapbox .package-marker {
width: 25px;
height: 25px;

18
www/assets/js/settings.js
View File

@ -7,7 +7,6 @@
$('.item-content[data-setting=darktheme] .toggle input').on("change", function () {
var checked = $(this).prop('checked');
console.log(checked);
localStorage.setItem("darktheme", checked);
if (localStorage.getItem("darktheme") == "true") {
@ -17,6 +16,11 @@ $('.item-content[data-setting=darktheme] .toggle input').on("change", function (
}
});
$('.item-content[data-setting=showhelp] .toggle input').on("change", function () {
var checked = $(this).prop('checked');
localStorage.setItem("show_help", checked);
});
$('.item-link[data-setting=units] select').on("change", function () {
localStorage.setItem("units", $('.item-link[data-setting=units] select').val());
});
@ -27,21 +31,20 @@ $('.item-link[data-setting=trackzoom] select').on("change", function () {
$('.item-content[data-setting=wakelock] .toggle input').on("change", function () {
var checked = $(this).prop('checked');
console.log(checked);
localStorage.setItem("wakelock", checked);
if (platform_type == "cordova") {
if (localStorage.getItem("wakelock") == "true") {
window.powerManagement.acquire(function () {
console.log('Wakelock acquired');
console.log("Info", 'Wakelock acquired');
}, function () {
console.log('Failed to acquire wakelock');
console.log("Warn", 'Failed to acquire wakelock');
});
} else {
window.powerManagement.release(function () {
console.log('Wakelock released');
console.log("Info", 'Wakelock released');
}, function () {
console.log('Failed to release wakelock');
console.log("Warn", 'Failed to release wakelock');
});
}
} else {
@ -73,13 +76,12 @@ $('.item-content[data-setting=alertinterval] .range-slider').on('range:changed',
$('.item-link[data-setting=mapsource] select').on("change", function () {
localStorage.setItem("mapsource", $('.item-link[data-setting=mapsource] select').val());
// Re-init map to load new style
reloadMap();
});
$('.item-content[data-setting=maptype] .toggle input').on("change", function () {
var checked = $(this).prop('checked');
console.log(checked);
localStorage.setItem("maptype", checked ? "leaflet" : "mapbox");
maptype = checked ? "leaflet" : "mapbox";

52
www/pages/help/list.html
View File

@ -18,33 +18,39 @@
</div>
<div class="page-content">
<div class="block-title">Manage Items</div>
<div class="block">
<p>
Swipe <i class="fas fa-arrow-right"></i> left-to-right on a list entry
to show the actions you can take.
These actions are marking the item as delivered/undelivered, or
navigating to its location with your device's default maps app.
</p>
Swipe <i class="fas fa-arrow-right"></i> left-to-right on a list entry
to show the actions you can take.
These actions are marking the item as delivered/undelivered, or
navigating to its location with your device's default maps app.
<br />
Swipe <i class="fas fa-arrow-left"></i> right-to-left on a list entry
and tap
<span class="button button-small display-inline button-fill color-red text-color-white"><i class="material-icons">delete</i> Delete</span> to remove it.
</div>
<p>
Swipe <i class="fas fa-arrow-left"></i> right-to-left on a list entry
and tap <i class="material-icons">delete</i> Delete to remove it.
</p>
<div class="block-title">Clear the List</div>
<div class="block">
Tap the <span class="color-red text-color-primary"><i class="material-icons">delete</i></span>
button to remove all items from the list. This cannot be undone, so it's
a good idea to do it at the end of the day or in the morning before you start.
Note that clearing the list does not affect the address autofill.
</div>
<p>
Tap the <i class="material-icons">search</i> button to open a search
box. Type in this box to hide any list entries that don't contain your
input.
</p>
<div class="block-title">Search</div>
<div class="block">
Tap the <i class="material-icons text-color-primary">search</i> button to open a search
box. Type in this box to hide any list entries that don't contain your
search query.
</div>
<p>
Tap the <i class="material-icons">sort</i> button to sort the list.
</p>
<p>
Tap the <span class="color-red"><i class="material-icons">delete</i></span> button to remove all
items from the list.
</p>
<div class="block-title">Sort Items</div>
<div class="block">
Tap the <i class="material-icons text-color-primary">sort</i> button to sort
the list. You can sort by distance from your current
location, alphabetically by street name, and numerically by
address number.
</div>
</div>
</div>

69
www/pages/help/map.html Normal file
View File

@ -0,0 +1,69 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="panel panel-right panel-cover">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Help</div>
<div class="right">
<a class="link panel-close">
<span>Close</span>
</a>
</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Manage Items</div>
<div class="block">
Tap on an icon to see the item(s) at that location.
Tap on an item to toggle it between delivered and
undelivered. If two or more addresses are very close
together, their items will be grouped under one icon.
</div>
<div class="block-title">Move the Map</div>
<div class="block">
Pinch with two fingers or scroll with a mouse to zoom
in and out. You can also double-tap to zoom in.
Drag with one finger or a mouse to move (pan) the map.
<br />
If you prefer, tap or click
<span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-plus"></i></span>
and
<span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-minus"></i></span>
to zoom in and out.
</div>
<div class="block-title">Follow Location</div>
<div class="block">
Tap
<span class="button button-small display-inline button-fill color-white text-color-black"><i class='material-icons'>my_location</i></span>
or
<span class="button button-small display-inline button-fill color-white text-color-black"><i class='far fa-compass'></i></span>
to show your current
location on the map as a blue dot. The map will follow
the dot until you zoom or move the map. If the dot goes
off the edge of the map, press the button again to
re-center the map. Pressing the button when the dot is
visible will hide the dot and stop the map from
following your location.
</div>
<div class="block-title">Get Directions</div>
<div class="block">
<span class="text-color-primary"><i class="material-icons">directions</i></span> will open your
default map/navigation app with the item location set as
the destination. This is useful if you're having
trouble finding the location.
</div>
</div>
</div>
</div>
</div>

4
www/pages/list.html
View File

@ -24,10 +24,12 @@
<a class="link text-color-red" onclick="confirmDeleteAllPackages()">
<i class="icon material-icons">delete</i>
</a>
{{#if show_help}}
<a class="link" href="/help/list">
<i class="icon material-icons">help</i>
</a>
{{/if}}
</div>
<form class="searchbar searchbar-expandable package-list-searchbar">
<div class="searchbar-inner">

6
www/pages/map.html
View File

@ -15,9 +15,11 @@
</div>
<div class="title">Map</div>
<div class="right">
<a class="link" onclick="reloadMap()">
<i class="material-icons">refresh</i>
{{#if show_help}}
<a class="link" href="/help/map">
<i class="icon material-icons">help</i>
</a>
{{/if}}
</div>
</div>
</div>

39
www/routes.js
View File

@ -4,6 +4,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
var show_help = function () {
return localStorage.getItem("show_help") != "false";
}
var routes = [
{
path: '/home',
@ -27,13 +31,14 @@ var routes = [
},
{
path: '/manage',
name: 'manage',
templateUrl: './pages/manage.html',
options: {
context: {
show_help: show_help,
itemtypes: SETTINGS.itemtypes
}
},
name: 'manage',
on: {
pageAfterIn: function () {
app.autocomplete.create({
@ -56,8 +61,13 @@ var routes = [
},
{
path: '/list',
templateUrl: './pages/list.html',
name: 'list',
templateUrl: './pages/list.html',
options: {
context: {
show_help: show_help
}
},
on: {
pageAfterIn: function () {
loadPackageList();
@ -74,14 +84,17 @@ var routes = [
}
});
}
},
keepAlive: true
}
},
{
path: '/map',
url: './pages/map.html',
templateUrl: './pages/map.html',
name: 'map',
keepAlive: true,
options: {
context: {
show_help: show_help
}
},
on: {
pageAfterIn: function () {
reloadMap();
@ -191,6 +204,12 @@ var routes = [
panel: {
url: './pages/help/list.html'
}
},
{
path: '/map',
panel: {
url: './pages/help/map.html'
}
}
]
},
@ -240,6 +259,14 @@ var routes = [
checked: localStorage.getItem("darktheme") == "true",
onclick: ""
},
{
setting: "showhelp",
title: "Show help",
text: "Show the <span class=material-icons-intext><i class=material-icons>help</i></span> icons",
toggle: true,
checked: localStorage.getItem("show_help") != "false",
onclick: ""
},
{
setting: "versions",
title: "PackageHelper app v" + app_version,