Skip to content
Snippets Groups Projects
Commit 9b1805f2 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Added more android offline support

parent 3718b4ba
No related branches found
No related tags found
1 merge request!13Offline funktionalitaet
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 1377
− 4260
View file @ 9b1805f2
This diff is collapsed.
package.json
+ 8
− 8
View file @ 9b1805f2
......@@ -10,16 +10,16 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
"jquery": "^3.4.1",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.15",
"popper.js": "^1.15.0",
"vue": "^2.6.10"
},
"dependencies": {
"osrm-text-instructions": "^0.13.1"
"osrm-text-instructions": "^0.13.3"
}
}
resources/assets/css/offline-module.css
+ 80
− 77
View file @ 9b1805f2
#offline-addon {
display: none;
display: none;
z-index: 20003;
position: absolute;
}
#offline-addon .auto-updates {
display: flex;
align-items: center;
border: 1px solid #dfdfdf;
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
border: 1px solid #dfdfdf;
border-left: 0;
border-right: 0;
}
#offline-addon .auto-updates > .option {
margin: 10px;
height: 20px;
margin: 10px;
height: 20px;
}
#offline-addon .auto-updates .text {
flex-grow: 1;
text-align: center;
padding: 10px 0;
border-left: 1px solid #dfdfdf;
flex-grow: 1;
text-align: center;
padding: 10px 0;
border-left: 1px solid #dfdfdf;
}
@media(max-width: 767px){
#offline-addon {
width: 100%;
}
@media (max-width: 767px) {
#offline-addon {
width: 100%;
}
}
#offline-addon .area-selection-info {
display: none;
font-weight: bold;
font-size: 11px;
display: none;
font-weight: bold;
font-size: 11px;
}
#offline-addon > #heading {
display:flex;
justify-content: space-between;
background-color: rgb(255,128,0);
display: flex;
justify-content: space-between;
background-color: rgb(255, 128, 0);
}
#offline-addon > #heading > .exit {
padding:7px;
color: white;
padding: 7px;
color: white;
}
#offline-addon .progress-bar {
min-width: 40px;
min-width: 40px;
}
#offline-addon > #heading > .logo {
align-self: center;
padding: 7px;
align-self: center;
padding: 7px;
}
#offline-addon .add-area {
text-align: center;
padding: 10px 20px;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px 20px;
border-top: 1px solid #e7e7e7;
}
#offline-addon .add-area a:visited {
color: #337ab7
color: #337ab7;
}
#offline-addon .downloaded-areas, #offline-addon .available-areas {
list-style-type: none;
margin-bottom: 0;
#offline-addon .downloaded-areas,
#offline-addon .available-areas {
list-style-type: none;
margin-bottom: 0;
}
#offline-addon .download-progress {
display: flex;
margin: 0 10px;
display: flex;
margin: 0 10px;
}
#offline-addon .download-progress > .progress {
flex-grow: 1;
flex-grow: 1;
}
#offline-addon .download-progress .abort {
margin: 0 10px;
color: red;
margin: 0 10px;
color: red;
}
#offline-addon .downloaded-areas > div.placeholder, #offline-addon .available-areas > div.placeholder {
text-align: center;
padding-bottom:5px;
#offline-addon .downloaded-areas > div.placeholder,
#offline-addon .available-areas > div.placeholder {
text-align: center;
padding-bottom: 5px;
}
#offline-addon .area{
text-align: left;
display: flex;
align-items: center;
padding: 5px;
#offline-addon .area {
text-align: left;
display: flex;
align-items: center;
padding: 5px;
}
#offline-addon .area > .texts {
flex-grow: 1;
flex-grow: 1;
}
#offline-addon .area > .texts > .name {
font-weight: bold;
font-weight: bold;
}
#offline-addon .area > .texts > .info {
display: flex;
color: #777;
display: flex;
color: #777;
}
#offline-addon .area > .texts > .info > .seperator {
font-weight: bold;
padding: 0 3px;
font-weight: bold;
padding: 0 3px;
}
#offline-addon .area > .remove {
cursor: pointer;
padding: 5px;
cursor: pointer;
padding: 5px;
}
#offline-addon .area > .remove > span {
font-size: 17px;
color: #777;
font-size: 17px;
color: #777;
}
#offline-addon .available-areas > div {
display: none;
display: none;
}
body > #selector {
width: 100%;
height: 100%;
position: absolute;
top: 0;
pointer-events: none;
display:none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
pointer-events: none;
display: none;
}
body > #selector-accept {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(255, 255, 255, .9);
padding: 10px;
border-radius: 15px;
border: 2px solid rgb(255,128,0);
color: green;
cursor: pointer;
display: none;
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 15px;
border: 2px solid rgb(255, 128, 0);
color: green;
cursor: pointer;
display: none;
}
body > #selector-accept > span {
font-size: 27px;
}
\ No newline at end of file
font-size: 27px;
}
resources/assets/js/OfflineModule.js
+ 215
− 243
View file @ 9b1805f2
const EXTRACT_BOX_COLOR = "#ffb8eb";
function OfflineModule(interactiveMap) {
this.areaSelectionText =
"Bewege die Karte, sodass das herunterzuladende Gebiet angezeigt wird und klicke rechts auf download.";
this.interactiveMap = interactiveMap;
this.areas = [];
this.vectorSource = new ol.source.Vector();
this.layer = new ol.layer.Vector({
source: this.vectorSource
});
this.interactiveMap.map.addLayer(this.layer);
this.initializeInterface();
this.addListeners();
this.status = "overview";
this.downloadedStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 2
}),
fill: new ol.style.Fill({
color: "rgba(0,255,0,.2)"
})
});
this.selectedStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "rgb(255,128,0)",
width: 2
}),
fill: new ol.style.Fill({
color: "rgba(255,128,0,.2)"
})
});
}
OfflineModule.prototype.loadDownloadedAreas = function() {
this.vectorSource.clear();
function androidHasFunction(functionName) {
return (
typeof android != "undefined" && typeof android[functionName] == "function"
);
}
if (
typeof android != "undefined" &&
typeof android.getDownloadedAreas == "function"
) {
// Show the user that we are now loading the areas
var downloadedAreas = android.getDownloadedAreas(); // JSON.parse(android.getDownloadedAreas());
downloadedAreas = JSON.parse(downloadedAreas);
if (Object.keys(downloadedAreas).length <= 0) {
OfflineModule.prototype.loadExtractList = function() {
// this.vectorSource.clear(); // TODO
if (androidHasFunction("getExtractList")) {
var extractListJSON = android.getExtractList();
var extracts = JSON.parse(extractListJSON);
if (extracts.length == 0) {
$("#offline-addon .no-areas").show();
return;
} else {
$("#offline-addon .auto-updates").show();
$("#offline-addon .no-areas").hide();
}
$.each(
downloadedAreas,
$.proxy(function(index, value) {
var bbox = value["bbox"];
var bboxPoints = [
[bbox[0], bbox[1]],
[bbox[2], bbox[1]],
[bbox[2], bbox[3]],
[bbox[0], bbox[3]]
];
var feature = this.addArea(bboxPoints, true);
var size = value["size"];
var unit = "B";
if (size > 1024) {
size /= 1024;
unit = "KB";
if (size > 1024) {
size /= 1024;
unit = "MB";
if (size > 1024) {
size /= 1024;
unit = "GB";
}
}
}
// Round the size to three digits
size = Math.ceil(size);
var date = new Date(value["last-modified"]);
var month = date.getMonth();
month += 1;
month = month < 10 ? "0" + month : month;
var day = date.getDate();
day = day < 10 ? "0" + day : day;
var lastModified = day + "." + month + "." + date.getFullYear();
var newItem = $(
'\
<div class="area" style="display: flex;align-items: center;text-align: center;font-weight: bold;font-size: 12px; border-bottom: 1px solid #dfdfdf">\
<div id="" style="padding: 0 10px;">\
<div class="size">' +
size +
" " +
unit +
'</div>\
<div class="last-modified">' +
lastModified +
'</div>\
</div>\
<div class="text" style="flex-grow: 1;">' +
index +
'</div>\
<div class="inspect-item" data-name="' +
index +
'" style="padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-search" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
<div class="rename" data-name="' +
index +
'" style="display: none; padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-pencil" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
<div class="remove-download" data-name="' +
index +
'" style="display: none; padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-trash" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
</div>'
);
var caller = this;
$(newItem).click(
$.proxy(function() {
this.focusDownloadedArea(feature, $(newItem));
}, this)
extracts.forEach(function(extract, index) {
this.drawBoundingBox(extract.boundingBox);
var sizeString = filesizeToString(extract.fileSize);
var lastModifiedString = dateToString(new Date(extract.lastModified));
extractDomElement = this.addExtractDomElement(
sizeString,
lastModifiedString,
index
);
extractDomElement.click(
$.proxy(function() {
this.focusDownloadedArea(extract.boundingBox, extractDomElement);
}, this)
);
var caller = this;
extractDomElement.find(".rename").click(function() {
var oldName = extractDomElement.find(".text").text();
var newName = prompt(
"Geben Sie einen neuen Namen für dieses Gebiet ein:"
);
$(newItem)
.find(".rename")
.click(function() {
var newName = prompt(
"Geben Sie einen neuen Namen für dieses Gebiet ein:"
);
var oldName = $(newItem)
.find(".text")
.text();
if (newName != null && android.renameArea(oldName, newName)) {
$("#offline-addon .exit").off();
$("#offline-addon .exit").click(function() {
caller.interactiveMap.switchModule("search");
});
$("#offline-addon .add-area").show("slow");
$(".downloaded-areas > .area").remove();
caller.loadDownloadedAreas();
}
if (newName != null && android.renameExtract(oldName, newName)) {
$("#offline-addon .exit").off();
$("#offline-addon .exit").click(function() {
caller.interactiveMap.switchModule("search");
});
$(newItem)
.find(".remove-download")
.click(function() {
var name = $(newItem)
.find(".text")
.text();
if (
confirm(
"Soll das ausgewählte Gebiet wirklich gelöscht werden?"
) &&
android.removeArea(name)
) {
$("#offline-addon .exit").off();
$("#offline-addon .exit").click(function() {
caller.interactiveMap.switchModule("search");
});
$("#offline-addon .add-area").show("slow");
$(".downloaded-areas > .area").remove();
caller.loadDownloadedAreas();
}
$("#offline-addon .add-area").show("slow");
$(".downloaded-areas > .area").remove();
caller.loadExtractList();
}
});
extractDomElement.find(".remove-download").click(function() {
var name = extractDomElement.find(".text").text();
if (
confirm("Soll das ausgewählte Gebiet wirklich gelöscht werden?") &&
android.removeExtract(name)
) {
$("#offline-addon .exit").off();
$("#offline-addon .exit").click(function() {
caller.interactiveMap.switchModule("search");
});
$(".downloaded-areas").append(newItem);
}, this)
);
$("#offline-addon .add-area").show("slow");
$(".downloaded-areas > .area").remove();
caller.loadExtractList();
}
});
$(".downloaded-areas").append(extractDomElement);
}, this);
} else {
$("#offline-addon .no-areas").show();
}
$("#offline-addon .loading-areas").hide();
};
OfflineModule.prototype.drawBoundingBox = function(boundingBox) {
var boundingBoxGeoJSON = [];
boundingBoxGeoJSON.push([boundingBox.minLon, boundingBox.minLat]);
boundingBoxGeoJSON.push([boundingBox.maxLon, boundingBox.minLat]);
boundingBoxGeoJSON.push([boundingBox.maxLon, boundingBox.maxLat]);
boundingBoxGeoJSON.push([boundingBox.minLon, boundingBox.maxLat]);
boundingBoxGeoJSON.push(boundingBoxGeoJSON[0]);
this.interactiveMap.map.addLayer({
id: "extractBox",
type: "fill",
layout: {},
paint: {
"fill-color": EXTRACT_BOX_COLOR, // TODO pick different color for each bounding box
"fill-opacity": 0.8
},
source: {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [boundingBoxGeoJSON]
}
}
}
});
};
function filesizeToString(filesize) {
var unit = "B";
if (filesize > 1024) {
filesize /= 1024;
unit = "KB";
if (filesize > 1024) {
filesize /= 1024;
unit = "MB";
if (filesize > 1024) {
filesize /= 1024;
unit = "GB";
}
}
}
return Number(filesize).toFixed(2) + " " + unit;
}
function dateToString(date) {
var month = date.getMonth();
month += 1;
month = month < 10 ? "0" + month : month;
var day = date.getDate();
day = day < 10 ? "0" + day : day;
var lastModified = day + "." + month + "." + date.getFullYear();
return lastModified;
}
OfflineModule.prototype.addExtractDomElement = function(
sizeString,
lastModifiedString,
index
) {
return $(
'\
<div class="area" style="display: flex;align-items: center;text-align: center;font-weight: bold;font-size: 12px; border-bottom: 1px solid #dfdfdf">\
<div id="" style="padding: 0 10px;">\
<div class="size">' +
sizeString +
'</div>\
<div class="last-modified">' +
lastModifiedString +
'</div>\
</div>\
<div class="text" style="flex-grow: 1;">' +
index +
'</div>\
<div class="inspect-item" data-name="' +
index +
'" style="padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-search" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
<div class="rename" data-name="' +
index +
'" style="display: none; padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-pencil" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
<div class="remove-download" data-name="' +
index +
'" style="display: none; padding: 0 20px;/* color: green; */font-size: 20px;">\
<span class="glyphicon glyphicon-trash" style="display: inline-block;"></span>\
<img src="/img/ajax-loader.gif" alt="loading" style="display: none;">\
</div>\
</div>'
);
};
OfflineModule.prototype.focusDownloadedArea = function(feature, element) {
var caller = this;
var name = $(element)
......@@ -241,51 +257,12 @@ OfflineModule.prototype.addListeners = function() {
caller.startAreaSelection();
});
$("#offline-addon .auto-updates input").change(function() {
var state = $(this).is(":checked");
if (typeof android != "undefined") {
var success = android.setProperty("auto-update", state);
if (!success) {
$(this).prop("checked", !state);
}
} else {
$(this).prop("checked", !state);
}
});
$("#start-download").off();
$("#start-download").click($.proxy(this.startDownload, this));
};
OfflineModule.prototype.addArea = function(area, downloaded) {
var style = null;
if (downloaded) {
style = this.downloadedStyle;
} else {
style = this.selectedStyle;
}
var coordinates = [];
$(area).each(
$.proxy(function(index, value) {
coordinates.push(
this.interactiveMap.map.transformToMapCoordinates(value)
);
}, this)
);
coordinates.push(coordinates[0]);
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([coordinates]),
name: "Selected Area"
});
feature.setStyle(style);
this.vectorSource.addFeature(feature);
return feature;
};
OfflineModule.prototype.removeArea = function(feature) {
this.vectorSource.removeFeature(feature);
// this.vectorSource.removeFeature(feature); // TODO
};
OfflineModule.prototype.startAreaSelection = function() {
......@@ -384,21 +361,21 @@ OfflineModule.prototype.addToDownloadedInterface = function(area) {
<div class="area downloaded" style="display: none;" id="area-' +
area.id +
'">\
<div class="texts">\
<div class="name">' +
<div class="texts">\
<div class="name">' +
area.name +
'</div>\
<div class="info">\
<div class="size">' +
<div class="info">\
<div class="size">' +
area.filesize +
'</div>\
<div class="seperator">·</div>\
<div class="date">' +
<div class="seperator">·</div>\
<div class="date">' +
area.date +
'</div>\
</div>\
</div>\
<div class="remove"><span class="glyphicon glyphicon-trash"></span></div>\
</div>\
</div>\
<div class="remove"><span class="glyphicon glyphicon-trash"></span></div>\
</div>'
);
var caller = this;
......@@ -423,21 +400,21 @@ OfflineModule.prototype.addToAvailableInterface = function(area) {
<div class="area available" style="display: none;" id="area-' +
area.id +
'">\
<div class="texts">\
<div class="name">' +
<div class="texts">\
<div class="name">' +
area.name +
'</div>\
<div class="info">\
<div class="size">' +
<div class="info">\
<div class="size">' +
area.filesize +
'</div>\
<div class="seperator">·</div>\
<div class="date">' +
<div class="seperator">·</div>\
<div class="date">' +
area.date +
'</div>\
</div>\
</div>\
<div class="remove"><span class="glyphicon glyphicon-download-alt"></span></div>\
</div>\
</div>\
<div class="remove"><span class="glyphicon glyphicon-download-alt"></span></div>\
</div>'
);
var caller = this;
......@@ -484,7 +461,7 @@ OfflineModule.prototype.startDownload = function() {
[data["bbox"][2], data["bbox"][3]],
[data["bbox"][0], data["bbox"][3]]
];
this.selectedAreaFeature = this.addArea(bboxPoints, false);
// this.selectedAreaFeature = this.addArea(bboxPoints, false); // TODO
// Show the downloading area
this.interactiveMap.map
.getView()
......@@ -493,18 +470,22 @@ OfflineModule.prototype.startDownload = function() {
duration: 900,
callback: $.proxy(function() {
// Now send the download command to the android app
if (typeof android != "undefined") {
if (androidHasFunction("downloadTilesInBounds")) {
var origBbox = data["original-bbox"];
var downloadUrl =
"/download/download-files/" +
origBbox[0] +
"/" +
origBbox[1] +
"/" +
origBbox[2] +
"/" +
origBbox[3];
var started = android.download(downloadUrl, JSON.stringify(data));
let minLon = origBbox[0]; // TODO korrekte Reihenfolge?
let maxLon = origBbox[2];
let minLat = origBbox[1];
let maxLat = origBbox[3];
let extractName = "extract"; // TODO
var started = android.downloadTilesInBounds(
minLon,
maxLon,
minLat,
maxLat,
extractName
);
if (started) {
$("#offline-addon .download-progress .abort").off();
$("#offline-addon .download-progress .abort").click(
......@@ -558,18 +539,20 @@ OfflineModule.prototype.updateDownloadStatus = function() {
return;
}
var total = android.getDownloadSize();
var downloaded = android.getDownloadStatus();
var downloadedPercentage = android.getDownloadPercentage();
var caller = this;
if (total != 0) {
var percent = Math.round((downloaded / total) * 100);
$("#offline-addon .progress-bar").attr("aria-valuemax", total);
$("#offline-addon .progress-bar").attr("aria-valuenow", downloaded);
$("#offline-addon .progress-bar").css("width", percent + "%");
if (downloadedPercentage != 1) {
$("#offline-addon .progress-bar").attr("aria-valuemax", 100);
$("#offline-addon .progress-bar").attr(
"aria-valuenow",
downloadedPercentage
);
$("#offline-addon .progress-bar").css("width", downloadedPercentage + "%");
$("#offline-addon .progress-bar").html(android.getDownloadStatusMessage());
if (
// TODO
android.getStage() != android.getMaxStage() ||
downloaded != total ||
downloadedPercentage != 1 ||
!android.isDownloadFinished()
) {
window.setTimeout($.proxy(this.updateDownloadStatus, this), 100);
......@@ -577,7 +560,7 @@ OfflineModule.prototype.updateDownloadStatus = function() {
this.downloading = null;
this.stopDownload(false);
$(".downloaded-areas > .area").remove();
this.loadDownloadedAreas();
this.loadExtractList();
return;
}
} else {
......@@ -590,26 +573,15 @@ OfflineModule.prototype.initializeInterface = function() {
$(".ol-zoom, .ol-zoomslider").hide("slow");
$("#offline-addon .no-areas").hide();
$("#offline-addon .loading-areas").show();
if (
typeof android != "undefined" &&
typeof android.getProperty == "function"
) {
var autoUpdates =
android.getProperty("auto-update").toLowerCase() == "true" ? true : false;
$("#offline-addon .auto-updates input").prop("checked", autoUpdates);
}
this.interactiveMap.reversePositionManager.setActive(false);
$("#offline-addon").show(
"slow",
$.proxy(function() {
this.loadDownloadedAreas();
this.loadExtractList();
}, this)
);
this.vectorSource = new ol.source.Vector();
this.layer = new ol.layer.Vector({
source: this.vectorSource
});
this.interactiveMap.map.addLayer(this.layer);
// this.interactiveMap.map.addLayer(this.layer); // TODO
};
OfflineModule.prototype.exit = function() {
......@@ -620,7 +592,7 @@ OfflineModule.prototype.exit = function() {
$("#offline-addon").hide("slow");
this.interactiveMap.map.removeLayer(this.layer);
this.layer = null;
this.vectorSource = null;
// this.vectorSource = null; // TODO
$("#offline-addon .exit").off();
$("#start-download").off();
......
resources/assets/js/SearchModule.js
+ 45
− 44
View file @ 9b1805f2
......@@ -6,7 +6,7 @@ function SearchModule(interactiveMap, query) {
// Add the Listener for the routing button
$("#start-navigation").show();
$("#start-navigation").click(
$.proxy(function () {
$.proxy(function() {
this.interactiveMap.switchModule("route-finding", {
waypoints: [],
vehicle: "car"
......@@ -37,39 +37,40 @@ function SearchModule(interactiveMap, query) {
}
}
SearchModule.prototype.initializeInterface = function () {
SearchModule.prototype.initializeInterface = function() {
$("#search-addon").show("slow");
};
SearchModule.prototype.addLogoClick = function () {
SearchModule.prototype.addLogoClick = function() {
$("div.logo").click(
$.proxy(function () {
$.proxy(function() {
this.interactiveMap.switchModule("search");
}, this)
);
};
SearchModule.prototype.removeLogoClick = function () {
SearchModule.prototype.removeLogoClick = function() {
$("div.logo").off();
};
SearchModule.prototype.addOptionsMenu = function () {
SearchModule.prototype.addOptionsMenu = function() {
var caller = this;
$("#search-addon #options").show("slow");
// If this is the App in the correct version we will show the Offline Module
if (
typeof android != "undefined" &&
typeof android.getVersionCode == "function" &&
android.getVersionCode() >= 13
(typeof android != "undefined" &&
typeof android.getVersionCode == "function" &&
android.getVersionCode() >= 13) ||
1 == 1
) {
$("#options > ul > li").click(function () {
$("#options > ul > li").click(function() {
caller.interactiveMap.switchModule("offline-karten");
});
} else {
$("#options > ul > li.offline-karten").hide();
}
$("#options > ul > li.hilfe").click(
$.proxy(function () {
$.proxy(function() {
$("#hilfe").show("slow");
$("#follow-location").hide();
$("#lock-location").hide();
......@@ -79,7 +80,7 @@ SearchModule.prototype.addOptionsMenu = function () {
}, this)
);
$("#hilfe .close").click(
$.proxy(function () {
$.proxy(function() {
$("#hilfe").hide("slow");
$("#follow-location").show();
$("#lock-location").show();
......@@ -88,22 +89,22 @@ SearchModule.prototype.addOptionsMenu = function () {
);
};
SearchModule.prototype.removeOptionsMenu = function () {
SearchModule.prototype.removeOptionsMenu = function() {
$("#options > ul > li").off();
$("#search-addon #options").hide("slow");
};
SearchModule.prototype.addSearchListeners = function () {
SearchModule.prototype.addSearchListeners = function() {
// When the searchfield got focussed
// Mainly just displays the history
$("#search-addon").focusin({ caller: this }, function (event) {
$("#search-addon").focusin({ caller: this }, function(event) {
event.data.caller.focusSearchInput();
});
$("#search-addon").focusout({ caller: this }, function (event) {
$("#search-addon").focusout({ caller: this }, function(event) {
event.data.caller.unfocusSearchInput();
});
$("#search").submit({ caller: this }, function (event) {
$("#search").submit({ caller: this }, function(event) {
try {
event.data.caller.startSearch();
} catch (e) {
......@@ -113,12 +114,12 @@ SearchModule.prototype.addSearchListeners = function () {
});
};
SearchModule.prototype.removeSearchListeners = function () {
SearchModule.prototype.removeSearchListeners = function() {
$("#search-addon").off();
$("#search").off();
};
SearchModule.prototype.startSearch = function (moveMap) {
SearchModule.prototype.startSearch = function(moveMap) {
this.query = $("#search input[name=q]").val();
var caller = this;
// Conditions for not executing the search
......@@ -155,7 +156,7 @@ SearchModule.prototype.startSearch = function (moveMap) {
this.searching = $.ajax({
url: url,
dataType: "json",
success: $.proxy(function (data) {
success: $.proxy(function(data) {
if (data.length > 0) {
if (typeof moveMap == "boolean")
this.results = new Results(
......@@ -189,14 +190,14 @@ SearchModule.prototype.startSearch = function (moveMap) {
placement: "bottom"
});
$("#search input[name=q]").tooltip("show");
window.setTimeout(function () {
window.setTimeout(function() {
$("#search input[name=q]").tooltip("destroy");
}, 3000);
}
this.unlockSearchFunctions();
}, this),
timeout: timeout * 1000,
error: $.proxy(function (jqxr) {
error: $.proxy(function(jqxr) {
console.log(jqxr);
// We encountered an error while trying to fetch the search results.
// It can be an abortion error in case the user clicked abort, or a timeout/connection error
......@@ -209,7 +210,7 @@ SearchModule.prototype.startSearch = function (moveMap) {
$("#search-addon .results .wait-for-search .no-internet").show("slow");
$("#search input[name=q]").val(this.query);
this.retrySearch = window.setTimeout(
$.proxy(function () {
$.proxy(function() {
this.retrySearch = undefined;
this.startSearch();
}, this),
......@@ -218,13 +219,13 @@ SearchModule.prototype.startSearch = function (moveMap) {
}
}, this)
}).always(
$.proxy(function () {
$.proxy(function() {
this.searching = undefined;
}, this)
);
};
SearchModule.prototype.lockSearchFunctions = function () {
SearchModule.prototype.lockSearchFunctions = function() {
if (
this.searchFunctionsLocked == undefined ||
this.searchFunctionsLocked == false
......@@ -246,7 +247,7 @@ SearchModule.prototype.lockSearchFunctions = function () {
'
);
$(cancelSearch).click(
$.proxy(function () {
$.proxy(function() {
console.log("aborting");
if (this.retrySearch != undefined) {
window.clearTimeout(this.retrySearch); // We retry fetching search results with a window.setTimeout() which needs to get cleared when we abort
......@@ -260,7 +261,7 @@ SearchModule.prototype.lockSearchFunctions = function () {
$("#search input[name=q]").after(cancelSearch);
}
};
SearchModule.prototype.unlockSearchFunctions = function () {
SearchModule.prototype.unlockSearchFunctions = function() {
if (
this.searchFunctionsLocked != undefined &&
this.searchFunctionsLocked == true
......@@ -279,7 +280,7 @@ SearchModule.prototype.unlockSearchFunctions = function () {
}
};
SearchModule.prototype.enableGps = function () {
SearchModule.prototype.enableGps = function() {
if (
typeof this.query == "undefined" &&
this.interactiveMap.updateMapPositionOnGps
......@@ -288,20 +289,20 @@ SearchModule.prototype.enableGps = function () {
this.interactiveMap.map.easeTo({
center: this.interactiveMap.GpsManager.location,
zoom: 12
})
});
}
};
SearchModule.prototype.disableGps = function () { };
SearchModule.prototype.disableGps = function() {};
SearchModule.prototype.focusSearchInput = function () {
SearchModule.prototype.focusSearchInput = function() {
// Add the Listener for the SearchBox
$("#search-addon input[name=q]").keyup(function () {
$("#search-addon input[name=q]").keyup(function() {
var value = $(this)
.val()
.toLowerCase();
// Each past search:
$("#search-addon .history-container .searches > .item").each(function (
$("#search-addon .history-container .searches > .item").each(function(
index,
item
) {
......@@ -318,20 +319,20 @@ SearchModule.prototype.focusSearchInput = function () {
});
};
SearchModule.prototype.unfocusSearchInput = function () {
SearchModule.prototype.unfocusSearchInput = function() {
// Add the Listener for the SearchBox
$("#search-addon input[name=q]").off();
$("#search-addon .history-container .item").hide();
};
SearchModule.prototype.addURLUpdater = function () {
SearchModule.prototype.addURLUpdater = function() {
// Add the moveend event to the map
this.urlUpdater = $.proxy(this.updateURL, this);
this.interactiveMap.map.on("moveend", this.urlUpdater);
$(window).on("popstate", $.proxy(this.popUrl, this));
};
SearchModule.prototype.updateURL = function () {
SearchModule.prototype.updateURL = function() {
// Register the Popstate Listener if not already done
var pos = this.interactiveMap.map.getCenter();
var zoom = this.interactiveMap.map.getZoom();
......@@ -382,7 +383,7 @@ SearchModule.prototype.updateURL = function () {
}
};
SearchModule.prototype.popUrl = function (e) {
SearchModule.prototype.popUrl = function(e) {
var state = e.originalEvent.state;
if (state != null) {
// We need to determine if the state was produced by the Route Finder
......@@ -423,23 +424,23 @@ SearchModule.prototype.popUrl = function (e) {
}
};
SearchModule.prototype.updatePastSearchContainer = function () {
SearchModule.prototype.updatePastSearchContainer = function() {
// Clear current Content
$("#search-addon .history-container > .searches").html("");
$.each(
this.searchHistory.results,
$.proxy(function (index, value) {
$.proxy(function(index, value) {
var item = $(
'\
<div class="item inactive">\
<div class="icon"><span class="glyphicon glyphicon-time"></span></div>\
<div class="search-query">' +
value.query +
"</div>\
value.query +
"</div>\
</div>"
);
$("#search-addon .history-container > .searches").append(item);
$(item).mousedown({ caller: this }, function (event) {
$(item).mousedown({ caller: this }, function(event) {
// Add the query to the Input Field and start a search
$("#search-addon input[name=q]").val(
$(this)
......@@ -454,7 +455,7 @@ SearchModule.prototype.updatePastSearchContainer = function () {
$("#search-addon .history-container > .searches > .inactive").hide();
};
SearchModule.prototype.removeURLUpdater = function () {
SearchModule.prototype.removeURLUpdater = function() {
// Add the moveend event to the map
if (typeof this.urlUpdater != "undefined") {
this.interactiveMap.map.off("moveend", this.urlUpdater);
......@@ -462,7 +463,7 @@ SearchModule.prototype.removeURLUpdater = function () {
$(window).off("popstate", $.proxy(this.popUrl, this));
};
SearchModule.prototype.exit = function () {
SearchModule.prototype.exit = function() {
if (this.results !== null && this.results !== undefined)
this.results.deleteSearch();
$("#popup-closer").click();
......
resources/assets/js/map.js
+ 41
− 33
View file @ 9b1805f2
function Map(type) { }
function Map(type) {}
function InteractiveMap(
long = 9.841943417968748,
......@@ -30,18 +30,21 @@ function InteractiveMap(
InteractiveMap.prototype = Object.create(Map.prototype);
InteractiveMap.prototype.constructor = InteractiveMap;
InteractiveMap.prototype.initMap = function () {
mapboxgl.setRTLTextPlugin('https://tileserver.metager.de/mapbox-gl-rtl-text.js');
InteractiveMap.prototype.initMap = function() {
mapboxgl.setRTLTextPlugin(
"https://tileserver.metager.de/mapbox-gl-rtl-text.js"
);
var map = new mapboxgl.Map({
container: 'map',
style: 'https://tileserver.metager.de/styles/osm-bright/style.json?optimize=true',
container: "map",
style:
"https://tileserver.metager.de/styles/osm-bright/style.json?optimize=true",
hash: false,
center: this.initPos,
zoom: this.initZoom,
scrollZoom: false
});
map.addControl(new mapboxgl.NavigationControl(), 'bottom-left');
map.addControl(new mapboxgl.ScaleControl(), 'bottom-right');
map.addControl(new mapboxgl.NavigationControl(), "bottom-left");
map.addControl(new mapboxgl.ScaleControl(), "bottom-right");
/**
* This is our custom scrollwheel function
......@@ -50,46 +53,48 @@ InteractiveMap.prototype.initMap = function () {
var caller = this;
var timeout = undefined;
var zoomChange = 0;
map.on("zoomend", function (event) {
map.on("zoomend", function(event) {
if (typeof event.scrollZoom == "boolean" && event.scrollZoom) {
if (typeof timeout != "undefined") {
clearTimeout(timeout);
timeout = undefined;
}
timeout = setTimeout(function () {
timeout = setTimeout(function() {
zoomChange = 0;
}, 100);
}
});
$(window).bind('wheel', function (event) {
$(window).bind("wheel", function(event) {
var delta = event.originalEvent.deltaY;
if (delta < 0) {
if (zoomChange >= 0)
zoomChange += .5;
else
zoomChange = .5;
if (zoomChange >= 0) zoomChange += 0.5;
else zoomChange = 0.5;
} else {
if (zoomChange <= 0)
zoomChange -= .5;
else
zoomChange = -.5;
if (zoomChange <= 0) zoomChange -= 0.5;
else zoomChange = -0.5;
}
var newZoom = Math.min(caller.map.getZoom() + zoomChange, 22);
newZoom = Math.max(1, newZoom);
map.easeTo({
zoom: newZoom,
around: map.unproject([event.originalEvent.clientX, event.originalEvent.clientY]),
}, { scrollZoom: true });
map.easeTo(
{
zoom: newZoom,
around: map.unproject([
event.originalEvent.clientX,
event.originalEvent.clientY
])
},
{ scrollZoom: true }
);
});
return map;
};
InteractiveMap.prototype.scrollZoomHandler = function (event) {
InteractiveMap.prototype.scrollZoomHandler = function(event) {
console.log(event);
}
};
InteractiveMap.prototype.switchModule = function (name, args) {
InteractiveMap.prototype.switchModule = function(name, args) {
if (this.module !== null) {
// Every Module must implement this method for deinitialization
this.module.exit();
......@@ -110,8 +115,7 @@ InteractiveMap.prototype.switchModule = function (name, args) {
case "navigatiion":
break;
case "offline-karten":
alert("Offline Karten wurden für Wartungsarbeiten deaktiviert. Sie stehen bald wieder zur Verfügung!");
//this.module = new OfflineModule(this);
this.module = new OfflineModule(this);
break;
case "navigation":
this.module = new NavigationModule(this, args);
......@@ -120,23 +124,27 @@ InteractiveMap.prototype.switchModule = function (name, args) {
}
};
InteractiveMap.prototype.removeDownloadedAreas = function () {
InteractiveMap.prototype.removeDownloadedAreas = function() {
/**
* Removes areas that might have been downloaded by our old app.
* This Feature will be reworked and we want to clean up before the new app comes
*/
if (typeof android != "undefined" &&
typeof android.getDownloadedAreas == "function") {
if (
typeof android != "undefined" &&
typeof android.getDownloadedAreas == "function"
) {
var downloadedAreas = android.getDownloadedAreas(); // JSON.parse(android.getDownloadedAreas());
downloadedAreas = JSON.parse(downloadedAreas);
if (Object.keys(downloadedAreas).length > 0) {
$.each(downloadedAreas, function (index, value) {
$.each(downloadedAreas, function(index, value) {
android.removeArea(index);
});
alert("Offline Karten wurden für Wartungsarbeiten deaktiviert. Sie stehen bald wieder zur Verfügung!");
alert(
"Offline Karten wurden für Wartungsarbeiten deaktiviert. Sie stehen bald wieder zur Verfügung!"
);
}
}
}
};
function StaticMap() {
Map.call(this);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment