Put Drop and Send map into popup, add "how it works" info

master
Skylar Ittner 3 years ago
parent b826373a78
commit e706449da2

@ -29,7 +29,6 @@ Framework7 and FontAwesome both have a .fab class
}
.theme-dark .page {
/* TODO: make this dark */
background-color: black;
background-image: url(../images/background-transparent.svg);
background-repeat: no-repeat;
@ -44,12 +43,18 @@ Framework7 and FontAwesome both have a .fab class
.list.transparent ul li.item-divider {
background-color: rgba(255,255,255,0.5);
}
.popup {
background-color: rgba(255,255,255,0.95);
}
.theme-dark .list.transparent ul {
background-color: rgba(0,0,0,0.65);
}
.theme-dark .list.transparent ul li.item-divider {
background-color: rgba(0,0,0,0.5);
}
.theme-dark .popup {
background-color: rgba(0,0,0,0.95);
}
.navbar, .navbar-bg {
background-color: #d0f2fc;
@ -202,4 +207,31 @@ Framework7 and FontAwesome both have a .fab class
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: var(--f7-page-bg-color);
}
.list.basic-list li {
padding-top: calc(var(--f7-list-item-min-height) / 4);
padding-bottom: calc(var(--f7-list-item-min-height) / 4);
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
}
.list.basic-list ul ul {
padding-left: 1em;
}
.list.basic-list li:not(:last-child):after {
content: '';
position: absolute;
background-color: var(--f7-list-item-border-color);
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}

@ -65,4 +65,77 @@ $("#app").on("click", "#pickupCodeManualEntryBtn", function () {
}, function (cancel) {
}, "");
});
$("#app").on("popup:open", "#dasLocationMapPopup", function () {
if (dropboxMap == null) {
var mapboxel = document.getElementById("mapbox-dropboxes");
dropboxMap = new MapControl(mapboxel, true);
dropboxMap.reloadMap();
dropboxMap.mapObj.on('load', function () {
dropboxMap.mapObj.jumpTo({center: [-112.005, 46.589], zoom: 8});
dropboxMap.loadIcon("./assets/images/dropbox-icon.png", "dropbox", function () {
apirequest(SETTINGS.apis.dropandsendlocations, {}, function (data) {
dropboxMap.loadMarkersFromGeoJson(data, "dropbox", "dropbox");
dropboxMap.mapObj.on('click', 'marker-layer-dropbox', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.name;
var type = e.features[0].properties.type;
var info = e.features[0].properties.info;
var hours = e.features[0].properties.hours;
var geolink = "geo:" + (Math.round(coordinates[1] * 1000000) / 1000000) + "," + (Math.round(coordinates[0] * 1000000) / 1000000);
var typedesc = "<i class='fas fa-question-circle'></i> Unknown package size limits";
switch (type) {
case "micro":
typedesc = "<i class='fas fa-envelope'></i> Fits envelopes";
break;
case "mini":
typedesc = "<i class='fas fa-mail-bulk'></i> Fits large envelopes and small packages";
break;
case "standard":
typedesc = "<i class='fas fa-box-alt'></i> Fits up to medium-size packages";
break;
case "large":
typedesc = "<i class='fas fa-boxes-alt'></i> Fits most packages";
break;
case "business":
typedesc = "<i class='fas fa-store-alt'></i> Shipping location, accepts any size package";
break;
}
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<b>" + name + "</b><br>" + typedesc
+ "<br><b>Hours:</b><br>" + hours
+ "<br><b>More Info:</b><br>" + info
+ "<br><a class=\"button button-fill button-small\" href=\"" + geolink + "\"><i class=\"fas fa-location-circle\"></i> Directions</a>")
.addTo(dropboxMap.mapObj);
});
dropboxMap.mapObj.on('mouseenter', 'marker-layer-dropbox', function () {
dropboxMap.mapObj.getCanvas().style.cursor = 'pointer';
});
dropboxMap.mapObj.on('mouseleave', 'marker-layer-dropbox', function () {
dropboxMap.mapObj.getCanvas().style.cursor = '';
});
dropboxMap.animateMapIn(46.589, -112.005, 9, 0);
}, function (error) {
}, "GET");
});
});
}
});
$("#app").on("popup:open", "#dasHowItWorksPopup", function () {
// Put user's account number in the instructions
if (inStorage("phonenumber") && inStorage("accountkey")) {
$("#dasHowItWorksAccountNumber").text(" (yours is " + getStorage("phonenumber") + ")");
}
});

@ -63,9 +63,11 @@ router.on("pageInit", function (pagedata) {
* @returns {undefined}
*/
function handleBackButton() {
// Close map sheet if it's open
// Close sheet if it's open
if ($(".sheet-modal").hasClass("modal-in")) {
app.sheet.close();
} else if ($(".popup").hasClass("modal-in")) {
app.popup.close();
} else if ($(".searchbar-enabled")[0]) {
app.searchbar.disable();
} else if (scanningBarcode) {

@ -133,7 +133,7 @@
<h3>Update Account</h3>
</div>
<div class="list no-hairlines">
<ul id="accountupdateform">
<ul id="accountupdateform" style="background: transparent;">
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Name</div>

@ -24,22 +24,38 @@
<div class="list transparent no-hairlines no-margin-top-sm tablet-inset elevation-tablet media-list">
<ul>
<li class="padding">
Use one of our Drop and Send package drop locations to send mail,
packages, and more. No lines, no appointment, no postage, no label
printing, no problem!
Use one of our Drop and Send package drop boxes for easier shipping,
and say goodbye to standing in line at the post office. Use your choice of
USPS, UPS, or FedEx (or let us pick the cheapest), purchase shipping
insurance, and more!
</li>
<li class="item-divider">Step 1: Find a Location</li>
<li>
<div class="mapbox" style="width: 100%; min-height: 300px; max-height: 800px; height: 50vh;" id="mapbox-dropboxes"></div>
<div class="item-content item-link hapticbtn popup-open" data-popup="#dasHowItWorksPopup">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><i class="fas fa-question-circle"></i> How It Works</div>
</div>
<div class="item-text">Learn how Drop and Send works when sending a package.</div>
</div>
</div>
</li>
<li>
<div class="item-content item-link hapticbtn popup-open" data-popup="#dasLocationMapPopup">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><i class="fas fa-map-marked"></i> Locations</div>
</div>
<div class="item-text">Find a nearby Drop and Send location to use.</div>
</div>
</div>
</li>
<li class="item-divider">Step 2: Request Pickup</li>
<li>
<div class="item-content item-link hapticbtn" id="pickupCodeQRScanBtn">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title"><i class="fas fa-qrcode"></i> Scan Pickup Code</div>
</div>
<div class="item-text">Scan the pickup code and we'll come get your package.</div>
<div class="item-text">Scan a Pickup Code on a drop box and we'll come get your package.</div>
</div>
</div>
</li>
@ -49,15 +65,81 @@
<div class="item-title-row">
<div class="item-title"><i class="fas fa-keyboard"></i> Type Location Number</div>
</div>
<div class="item-text">Type the location number and we'll come get your package.</div>
<div class="item-text">Type the location number on the drop box and we'll come get your package.</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title-row">
</div>
<div class="item-text">By using Drop and Send you agree to the <a onclick="openBrowser('https://helena.express/das/terms')">terms of service</a>.</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
By using Drop and Send you agree to the <a onclick="openBrowser('https://helena.express/das/terms')">terms of service</a>.
</div>
</div>
</div>
<div class="popup" id="dasLocationMapPopup">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link popup-close" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Close</span>
</a>
</div>
<div class="title">Drop and Send Locations</div>
</div>
</div>
<div class="mapbox" style="width: 100%; height: 100%;" id="mapbox-dropboxes"></div>
</div>
<div class="popup" id="dasHowItWorksPopup">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link popup-close" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Close</span>
</a>
</div>
<div class="title">How It Works</div>
</div>
</div>
<div style="overflow-y: auto; height: calc(95% - calc(var(--f7-navbar-height) + var(--f7-safe-area-top)));">
<div class="list basic-list no-margin no-hairlines">
<ul>
<li>
<i class="fad fa-map-marked"></i> Use this app to find the closest Drop and Send package drop box.
</li>
<li>
<i class="fad fa-edit"></i> Fill out a provided label with your account number<span id="dasHowItWorksAccountNumber"></span>, to and from addresses, and any extra options like speed and insurance. Put the label on your package.
<ul>
<li>
<i class="fad fa-globe-europe"></i> If your package is going to a military APO/FPO address, or is going to another country, fill out and attach a customs form too.
</li>
<li>
<i class="fad fa-info-circle"></i> If your package already has a prepaid shipping label, or it's too small for a full-size label, just add your account number to the package. Small labels are provided and will be removed by us before we ship your package.
</li>
</ul>
</li>
<li>
<i class="far fa-qrcode"></i> Scan the Pickup Code (or type the location number) on the drop box to alert us there's a package to send.
</li>
<li>
<i class="fad fa-box-alt"></i> Place your package inside the secure drop box.
</li>
<li>
<i class="fad fa-receipt"></i> Wait for an emailed receipt from us with the tracking code. Your credit card is automatically billed for the cost of shipping.
</li>
</ul>
</div>
</div>
</div>

@ -5,7 +5,7 @@
*/
var routes = [
{
{
path: '/welcome',
templateUrl: './pages/welcome.html',
name: 'welcome',
@ -132,68 +132,8 @@ var routes = [
name: 'dropandsend',
templateUrl: './pages/dropandsend.html',
on: {
pageAfterIn: function () {
var mapboxel = document.getElementById("mapbox-dropboxes");
dropboxMap = new MapControl(mapboxel, true);
dropboxMap.reloadMap();
dropboxMap.mapObj.on('load', function () {
dropboxMap.mapObj.jumpTo({center: [-112.005, 46.589], zoom: 8});
dropboxMap.loadIcon("./assets/images/dropbox-icon.png", "dropbox", function () {
apirequest(SETTINGS.apis.dropandsendlocations, {}, function (data) {
dropboxMap.loadMarkersFromGeoJson(data, "dropbox", "dropbox");
dropboxMap.mapObj.on('click', 'marker-layer-dropbox', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.name;
var type = e.features[0].properties.type;
var info = e.features[0].properties.info;
var hours = e.features[0].properties.hours;
var geolink = "geo:" + (Math.round(coordinates[1] * 1000000) / 1000000) + "," + (Math.round(coordinates[0] * 1000000) / 1000000);
var typedesc = "<i class='fas fa-question-circle'></i> Unknown package size limits";
switch (type) {
case "micro":
typedesc = "<i class='fas fa-envelope'></i> Fits envelopes";
break;
case "mini":
typedesc = "<i class='fas fa-mail-bulk'></i> Fits large envelopes and small packages";
break;
case "standard":
typedesc = "<i class='fas fa-box-alt'></i> Fits up to medium-size packages";
break;
case "large":
typedesc = "<i class='fas fa-boxes-alt'></i> Fits most packages";
break;
case "business":
typedesc = "<i class='fas fa-store-alt'></i> Shipping location, accepts any size package";
break;
}
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<b>" + name + "</b><br>" + typedesc
+ "<br><b>Hours:</b><br>" + hours
+ "<br><b>More Info:</b><br>" + info
+ "<br><a class=\"button button-fill button-small\" href=\"" + geolink + "\"><i class=\"fas fa-location-circle\"></i> Directions</a>")
.addTo(dropboxMap.mapObj);
});
dropboxMap.mapObj.on('mouseenter', 'marker-layer-dropbox', function () {
dropboxMap.mapObj.getCanvas().style.cursor = 'pointer';
});
dropboxMap.mapObj.on('mouseleave', 'marker-layer-dropbox', function () {
dropboxMap.mapObj.getCanvas().style.cursor = '';
});
dropboxMap.animateMapIn(46.589, -112.005, 9, 0);
}, function (error) {
}, "GET");
});
});
pageAfterOut: function () {
dropboxMap = null;
}
}
},

Loading…
Cancel
Save