TO CREATE A NEW LOCATION:
Zoom into the map, click on the pin marker tool (left), then find on the map the location of your survey and click on it. This should put a pin on the map. Please give the new location a unique descriptive name and save, e.g. Portsea Pier, Steeles Rocks, Frankston Pier, Brighton Baths
" + self.notes() + '
' + message + ''; - } -} \ No newline at end of file diff --git a/grails-app/assets/javascripts/knockout-custom-bindings.js b/grails-app/assets/javascripts/knockout-custom-bindings.js index 05b91c8a7..8c02359af 100644 --- a/grails-app/assets/javascripts/knockout-custom-bindings.js +++ b/grails-app/assets/javascripts/knockout-custom-bindings.js @@ -701,11 +701,10 @@ ko.bindingHandlers.ticks = { ko.bindingHandlers.fileUploadNoImage = { init: function (element, options) { - + var dropzone = $(element).parent(); var defaults = {autoUpload: true}; var settings = { - pasteZone: null, - dropZone: null + pasteZone: null, dropZone: dropzone }; $.extend(settings, defaults, options()); $(element).fileupload(settings).on('fileuploadadd', function (e, data) { diff --git a/grails-app/assets/javascripts/offline-list.js b/grails-app/assets/javascripts/offline-list.js new file mode 100644 index 000000000..931f59ae4 --- /dev/null +++ b/grails-app/assets/javascripts/offline-list.js @@ -0,0 +1,477 @@ +function ActivitiesViewModel (config) { + var self = this; + var projectActivityId = config.projectActivityId; + var projectId = config.projectId, + calledFromContext = projectActivityId === undefined ? "global" : "survey", + cancelOfflineCheck; + self.activities = ko.observableArray(); + self.pagination = new PaginationViewModel({}, self); + self.online = ko.observable(true); + self.disableUpload = ko.computed(function () { + return self.activities().length === 0 || !self.online(); + }); + // check if any activity is uploading + self.isUploading = ko.computed(function () { + var activities = self.activities(); + for (var i = 0; i < activities.length; i++) { + if (activities[i].uploading()) { + return true; + } + } + }); + + + self.init = function() { + document.addEventListener("online", function() { + self.online(true); + }); + document.addEventListener("offline", function() { + self.online(false); + }); + + cancelOfflineCheck = checkOfflineForIntervalAndTriggerEvents(); + } + + self.load = function(offset) { + if (projectActivityId) { + return self.getActivitiesOfProjectActivity(self.pagination.resultsPerPage() ,offset); + } + else if (projectId) { + return self.getActivitiesForProject(self.pagination.resultsPerPage(), offset); + } + else { + return self.getAllActivities(self.pagination.resultsPerPage(), offset); + } + }; + + self.refreshPage = function (offset) { + self.load(offset); + } + + self.getAllActivities = function(max, offset) { + return entities.offlineGetAllActivities(max, offset).then(function(result) { + var activities = result.data.activities, + total = result.data.total, + container = []; + + activities.forEach(function(activity) { + container.push(new ActivityViewModel(activity, self)); + }); + + self.activities(container); + self.pagination.loadOffset(offset, total); + }); + } + + self.getActivitiesForProject = function(max, offset) { + return entities.offlineGetActivitiesForProject(projectId, max, offset).then(function(result) { + var activities = result.data.activities, + total = result.data.total, + container = []; + + activities.forEach(function(activity) { + container.push(new ActivityViewModel(activity, self)); + }); + + self.activities(container); + self.pagination.loadOffset(offset, total); + }); + } + + self.getActivitiesOfProjectActivity = function(max, offset) { + return entities.getActivitiesForProjectActivity(projectActivityId, max, offset).then(function(result) { + var activities = result.data.activities, + total = result.data.total, + container = []; + + activities.forEach(function(activity) { + container.push(new ActivityViewModel(activity, self)); + }); + + self.activities(container); + self.pagination.loadPagination(offset, total); + }); + } + + self.uploadAllHandler = function() { + var activities = self.activities(), + index = 0; + + self.uploadAnActivity(activities, index); + } + + self.uploadAnActivity = function (activities, index) { + if (index < activities.length) { + activities[index].upload().then(function () { + self.uploadAnActivity(activities, index + 1); + }, function (error) { + console.error(error); + self.uploadAnActivity(activities, index + 1); + }); + } else { + // calling load with offset 0 will load the next batch of activities since current batch of activities are + // deleted from db. + if (self.pagination.totalResults() !== 0) + self.load(0).then(self.uploadAllHandler, function (error) { + console.error("Error loading next page of activities" + error); + }); + } + } + + /** + * Soft delete an activity from list + * @param activity + */ + self.remove = function(activity) { + self.activities.remove(activity); + } + + self.transients = { + addActivityUrl: function() { + return fcConfig.addActivityUrl + "/" + projectActivityId + "?context=" + calledFromContext; + }, + isProjectActivity: !!projectActivityId + } + + self.init(); + self.pagination.first(); +}; + +function ActivityViewModel (activity, parent) { + const IMAGE_DELETED_STATUS = 'deleted' + var self = this, images, loadPromise, + calledFromContext = getParameters().projectActivityId === undefined ? "global" : "survey"; + self.activityId = activity.activityId; + self.projectId = activity.projectId; + self.projectActivityId = activity.projectActivityId; + self.featureImage = ko.observable(); + self.species = ko.observableArray(); + self.surveyDate = ko.observable().extend({simpleDate: false}); + self.uploading = ko.observable(false); + self.disableUpload = ko.computed(function () { + return self.uploading() || !parent.online(); + }); + self.metaModel; + self.imageViewModels = []; + self.transients = { + viewActivityUrl: function() { + return fcConfig.activityViewUrl + "/" + self.projectActivityId + "?projectId=" + self.projectId + "&activityId=" + self.activityId + "&context=" + calledFromContext; + }, + editActivityUrl: function() { + return fcConfig.activityEditUrl + "/" + self.projectActivityId + "?unpublished=true&projectId=" + self.projectId + "&activityId=" + self.activityId + "&context=" + calledFromContext; + } + } + + self.load = function() { + loadPromise = entities.offlineGetMetaModel(activity.type).done(function(result) { + var metaModel = result.data, + imageViewModel, surveyDate; + self.metaModel = new MetaModel(metaModel); + self.species(self.metaModel.getDataForType("species", activity)); + surveyDate = self.metaModel.getDataForType("date", activity) + surveyDate = surveyDate && surveyDate[0] + if (surveyDate) { + self.surveyDate(surveyDate); + } + + self.imageViewModels = []; + images = self.metaModel.getDataForType("image", activity); + if (images && images.length > 0) { + images.forEach(function(image) { + imageViewModel = new ImageViewModel(image, true); + self.imageViewModels.push(imageViewModel); + if (!self.featureImage()) { + self.featureImage(imageViewModel); + } + }); + } + }); + } + + self.upload = function() { + var promises = [], + deferred = $.Deferred(), + forceOnline = false; + isOffline().then(function () { + alert("You are offline. Please connect to the internet and try again."); + deferred.reject(); + }, function () { + loadPromise.then(function (){ + try { + self.uploading(true); + promises.push(self.uploadImages()); + promises.push(self.uploadSite().then(self.updateActivityWithSiteId).then(self.saveAsNewSite)); + $.when.apply($, promises).then(function (imagesToDelete, oldSitesToDelete) { + self.saveActivityToDB().then(self.uploadActivity).then(self.deleteActivityFromDB).then(self.removeMeFromList).then(async function () { + self.uploading(false); + await self.deleteImages(imagesToDelete); + await self.deleteOldSite(oldSitesToDelete); + deferred.resolve({data: {activityId: activity.activityId}}); + }); + }, function (error) { + self.saveActivityToDB().then(function () { + self.uploading(false); + deferred.reject({ + data: {activityId: activity.activityId}, + message: "There was an error uploading activity", + error: error + }); + }); + }); + } + catch (error) { + console.error(error); + deferred.reject(); + alert("There was an error uploading activity"); + } + }, function () { + deferred.reject(); + alert("There was an error fetching metadata for activity"); + }); + }); + + return deferred.promise(); + } + + /** + * Hard delete an activity from the database + */ + self.deleteActivity = function() { + bootbox.confirm("This operation cannot be reversed. Are you sure you want to delete this activity?", function (result) { + if (result) { + self.uploading(true); + images = images || []; + var documentIds = images.map(image => image.documentId); + self.deleteImages({data:documentIds}).then(self.deleteSite).then(self.deleteActivityById).then(function (){ + parent.refreshPage(0); + }).then(function () { + self.uploading(false); + }, function () { + self.uploading(false); + }); + } + }) + } + + self.deleteSite = function () { + return entities.deleteSites([activity.siteId]); + } + + self.deleteActivityById = function () { + return self.deleteActivityFromDB({data: {oldActivityId: activity.activityId}}); + } + + self.removeMeFromList = function() { + parent.remove(self); + } + + self.uploadActivity = function() { + var oldActivityId = self.activityId; + if (entities.utils.isDexieEntityId(activity.activityId)) { + activity.activityId = undefined; + } + + var toSave = JSON.stringify(activity), + deferred = $.Deferred(), + url = fcConfig.bioActivityUpdate + "?pActivityId=" + activity.projectActivityId, + ajaxRequestParams = { + url: url, + type: 'POST', + data: toSave, + contentType: 'application/json', + success: function success(data) { + if (data && data.resp && data.resp.activityId) { + deferred.resolve({data: {oldActivityId: oldActivityId, activityId: data.resp.activityId }}); + } + else { + deferred.reject({data: {oldActivityId: oldActivityId, error: data.errors || data.error}}); + } + }, + error: function (jqXHR, status, error) { + deferred.reject({data: {activity: activity.activityId, error: error}}) + } + }; + + $.ajax(ajaxRequestParams); + return deferred.promise(); + } + + self.saveActivityToDB = function() { + return entities.saveActivity(activity); + } + + self.deleteActivityFromDB = function(result) { + var activityId = result.data.oldActivityId; + return entities.deleteActivities([activityId]); + } + + self.updateActivityWithSiteId = function(result) { + var siteId = result.data.siteId; + activity.siteId = siteId; + var sourceNames = self.metaModel.getNamesForDataType("geoMap"); + self.metaModel.updateDataForSources(sourceNames, activity, siteId); + return result; + } + + self.saveAsNewSite = function(result) { + var site = result.data.site; + if (site && isUuid(site.siteId)) { + entities.saveSite(site); + } + + return result; + } + + self.deleteOldSite = function(result) { + var siteId = result.data.oldSiteId; + if(entities.utils.isDexieEntityId(siteId)) { + return entities.deleteSites([siteId]); + } + else { + return $.Deferred().resolve(result); + } + } + + self.uploadSite = function() { + var siteId = self.metaModel.getDataForType("geoMap", activity)[0] || activity.siteId; + return entities.getSite(siteId).then(function(result) { + var site = result.data, + data = { + site: site, + pActivityId: activity.projectActivityId + }, + id = siteId, + deferred = $.Deferred(); + site['asyncUpdate'] = true; // aysnc update site metadata for performance improvement + if (entities.utils.isDexieEntityId(site.siteId)) { + id = site.siteId = undefined; + } + + $.ajax({ + method: 'POST', + url: id ? fcConfig.updateSiteUrl + "?id=" + id : fcConfig.updateSiteUrl, + data: JSON.stringify(data), + contentType: 'application/json', + dataType: 'json' + }).then(function (result) { + if (result.id) { + deferred.resolve({data: {siteId: result.id, oldSiteId: siteId, site: site}}); + } + else { + deferred.reject({data: result, error : "Site update failed."}); + } + }, function (jqXHR, status, error) { + // if site update fails, reject the promise only if it is a new site. + // if existing site is update is reject, resolve the promise with the site id. This helps sync the activity. + // update can be rejected if user does not have permission on all the project the site is associated. + if (entities.utils.isDexieEntityId(id)) { + deferred.reject({error : error}); + } + else { + deferred.resolve({data: {siteId: siteId, oldSiteId: siteId, site: site}}); + } + }); + + return deferred.promise(); + }); + } + + self.uploadImages = async function() { + var uploadedImages = [], + promises = [], deferred = $.Deferred(); + + for (var index = 0 ; index < self.imageViewModels.length; index++) { + var imageVM = self.imageViewModels[index]; + if (imageVM.isBlobDocument()) { + var image = images[index], promise; + if (image.documentId && entities.utils.isDexieEntityId(image.documentId)) { + if (imageVM.status() !== IMAGE_DELETED_STATUS) + uploadedImages.push(image.documentId); + } + + if (imageVM.status() !== IMAGE_DELETED_STATUS) + promise = self.uploadImage(imageVM).then(self.updateImageMetadata.bind(self, imageVM, image)) + promises.push(promise) + await promise; + } + + } + + $.when.apply($, promises).then(function () { + deferred.resolve({data:uploadedImages}); + }, function (){ + deferred.reject({error: "Image upload failed."}); + }); + + return deferred.promise(); + } + + self.updateImageMetadata = function(imageVM, image, stagedMetadata) { + $.extend(image, stagedMetadata); + imageVM.load(image, true); + if (entities.utils.isDexieEntityId(image.documentId)) { + // clear documentId so that BioCollect will create a new document for the image + image.documentId = undefined; + } + + return image; + } + + self.uploadImage = function(image) { + var formData = new FormData(); + var blob = image.getBlob(); + var file = new File([blob], image.filename, {type: image.contentType()}); + formData.append("files", file); + return $.ajax({ + url: fcConfig.imageUploadUrl, + type: "POST", + data: formData, + processData: false, + contentType: false + }) + .then(function (result) { + return (result.files && result.files[0]) || {}; + }); + } + + self.deleteImages = function(result) { + var imageIds = result.data; + return entities.bulkDeleteDocuments(imageIds).then(function() { + console.log("Successfully deleted images - " + imageIds.toString()); + }, function () { + console.error("Failed to delete images"); + }); + } + + self.load(); +} + +function getParameters (activity) { + var url = new URL(window.location.href); + return { + projectId: url.searchParams.get("projectId"), + projectActivityId: url.searchParams.get("projectActivityId") + } +} + +document.addEventListener("credential-saved", startInitialising); +document.addEventListener("credential-failed", function () { + alert("Error occurred while saving credentials. Please close modal and try again."); +}); + +window.addEventListener('load', function (){ + setTimeout(startInitialising, 2000); + // two event attributes for backward compatibility + window.parent && window.parent.postMessage({eventName: 'viewmodelloadded', event: 'viewmodelloadded', data: {}}, "*"); +}); + +function startInitialising () { + window.uninitialised = window.uninitialised || false; + entities.getCredentials().then(function (result) { + var config = getParameters(), + activitiesViewModel = new ActivitiesViewModel(config); + + !window.uninitialised && ko.applyBindings(activitiesViewModel); + window.uninitialised = true; + }) +} \ No newline at end of file diff --git a/grails-app/assets/javascripts/outputs.js b/grails-app/assets/javascripts/outputs.js index 7cefb6a54..6e2279629 100644 --- a/grails-app/assets/javascripts/outputs.js +++ b/grails-app/assets/javascripts/outputs.js @@ -320,10 +320,31 @@ ko.bindingHandlers.imageUpload = { } window.decreaseAsyncCounter && window.decreaseAsyncCounter(); }).on('fileuploadfail', function(e, data) { - error(data.errorThrown); + if (fcConfig.enableOffline) { + isOffline().then(function () { + var file = data.files[0]; + file && biocollect.utils.readDocument(file).then(biocollect.utils.saveDocument).then(biocollect.utils.fetchDocument).then(addToViewModel); + }, + function () { + error(data.errorThrown); + }); + } + else { + error(data.errorThrown); + } + window.decreaseAsyncCounter && window.decreaseAsyncCounter(); }); + function addToViewModel(result) { + var viewModel; + biocollect.utils.addObjectURL(result.data); + viewModel = new ImageViewModel(result.data, true); + target.push(viewModel); + complete(true); + return viewModel; + }; + ko.applyBindingsToDescendants(innerContext, element); return { controlsDescendantBindings: true }; diff --git a/grails-app/assets/javascripts/pwa-bio-activity-create-or-edit-manifest.js b/grails-app/assets/javascripts/pwa-bio-activity-create-or-edit-manifest.js new file mode 100644 index 000000000..64d98087c --- /dev/null +++ b/grails-app/assets/javascripts/pwa-bio-activity-create-or-edit-manifest.js @@ -0,0 +1,8 @@ +//= require base-bs4.js +//= require jstz/jstz.min.js +//= require common-bs4.js +//= require forms-manifest.js +//= require enterBioActivityData.js +//= require biocollect-utils.js +//= require pwa-messages.js +//= require pwa-form-initialisation-script.js diff --git a/grails-app/assets/javascripts/pwa-bio-activity-index-manifest.js b/grails-app/assets/javascripts/pwa-bio-activity-index-manifest.js new file mode 100644 index 000000000..e0c8f885b --- /dev/null +++ b/grails-app/assets/javascripts/pwa-bio-activity-index-manifest.js @@ -0,0 +1,9 @@ +//= require jstz/jstz.min.js +//= require base-bs4.js +//= require common-bs4.js +//= require knockout-custom-bindings.js +//= require forms-manifest.js +//= require enterBioActivityData.js +//= require biocollect-utils.js +//= require pwa-messages.js +//= require pwa-form-initialisation-script.js \ No newline at end of file diff --git a/grails-app/assets/javascripts/pwa-cache.js b/grails-app/assets/javascripts/pwa-cache.js new file mode 100644 index 000000000..4a3e7027a --- /dev/null +++ b/grails-app/assets/javascripts/pwa-cache.js @@ -0,0 +1,65 @@ +var projectPromise, paPromise; +var surveyName = "Dung Beetle Monitoring", listId = "dr2683", limit=5, query = "", offset = 0; +var db = getDB(); + +function fetchProject() { + if (!projectPromise) { + projectPromise = $.ajax({ + url: fcConfig.projectURL + }); + } + + return projectPromise; +} + +function saveProject (project) { + var deferred = $.Deferred(); + + db.project.put(project).then(function (projectId) { + deferred.resolve({message: "Saved project to db", success: true, data: project}); + }).catch(function () { + deferred.reject({message: "Failed to save project to db", success: false}); + }); + + return deferred.promise(); +} + +function fetchProjectActivity () { + if (!paPromise) { + paPromise = $.ajax({ + url: fcConfig.projectActivityURL + }); + } + + return paPromise; +} + +function saveProjectActivity (pa) { + var deferred = $.Deferred(); + + db.projectActivity.put(pa).then(function () { + deferred.resolve({message: "Saved project activity to db", success: true, data: pa}); + }).catch(function () { + deferred.reject({message: "Failed to save project activity to db", success: false}); + }); + + return deferred.promise(); +} + +fetchProject().then(saveProject).then(fetchProjectActivity).then(saveProjectActivity).done(function (result) { + var pa = result.data; + var promises = []; + pa.speciesFields && pa.speciesFields.forEach(function (field) { + console.log("fetching species"); + promises.push(updateDBForField(field.dataFieldName, field.output)); + }); + + $.when.apply($, promises).always(function () { + console.log("Starting to fetch sites"); + fetchSites(pa.sites, 0).done(function (result) { + console.log(result.message); + }); + }); +}).fail(function () { + alert("Failed to fetch species configuration for survey"); +}); \ No newline at end of file diff --git a/grails-app/assets/javascripts/pwa-form-initialisation-script.js b/grails-app/assets/javascripts/pwa-form-initialisation-script.js new file mode 100644 index 000000000..c32ec47a1 --- /dev/null +++ b/grails-app/assets/javascripts/pwa-form-initialisation-script.js @@ -0,0 +1,45 @@ +var initialisedSuccessfully = false, + delay = 2000; +document.addEventListener("credential-saved", renderPage); +document.addEventListener("credential-failed", function (e) { + alert("Error occurred while saving credentials"); +}); + +window.addEventListener("load", function (e) { + setTimeout(renderPage, delay); +}); + +function renderPage() { + if (initialisedSuccessfully) { + return; + } + + entities.getCredentials().then(function (result) { + var credentials = result.data; + if (credentials && credentials.length > 0) { + var credential = credentials[0]; + var authorization = "Bearer " + credential.token; + $.ajax({ + url: fcConfig.htmlFragmentURL, + dataType: 'html', + headers: { + 'Authorization': authorization + }, + success: function (html) { + // makes sure comments are not removed. Important from KnockoutJS perspective. + const constHtml = html; + initialisedSuccessfully = true; + var element = document.querySelector("#form-placeholder"); + element.innerHTML = constHtml; + biocollect.utils.nodeScriptReplace(element); + getMetadataAndInitialise(); + }, + error: function (){ + alert("Error occurred while getting content. Close the modal and try again. If the problem persists, contact the administrator."); + } + }); + } + }, function () { + alert("Error occurred while getting credentials"); + }); +} \ No newline at end of file diff --git a/grails-app/assets/javascripts/pwa-index.js b/grails-app/assets/javascripts/pwa-index.js new file mode 100644 index 000000000..661c7b1f6 --- /dev/null +++ b/grails-app/assets/javascripts/pwa-index.js @@ -0,0 +1,750 @@ +async function downloadMapTiles(bounds, tileUrl, minZoom, maxZoom, callback) { + minZoom = minZoom || 0; // Minimum zoom level + maxZoom = maxZoom || 20; // Maximum zoom level + const MAX_PARALLEL_REQUESTS = 10; + + var deferred = $.Deferred(), requestArray = []; + // Check if the browser supports the Cache API + if ('caches' in window) { + // Function to fetch and cache the vector basemap tiles for a bounding box at different zoom levels + try { + // Loop through each zoom level + for (let zoom = minZoom; zoom <= maxZoom; zoom++) { + // Loop through the tiles within the bounding box at the current zoom level + var coordinates = getTileCoordinatesForBoundsAtZoom(bounds, zoom), + xMin = coordinates[0][0], + xMax = coordinates[1][0], + yMin = coordinates[0][1], + yMax = coordinates[1][1]; + + for (let x = xMin; x <= xMax; x++) { + for (let y = yMin; y <= yMax; y++) { + try { + const requestUrl = tileUrl.replace('{z}', zoom).replace('{x}', x).replace('{y}', y); + + // Open the cache + const cache = await caches.open(cacheName); + + // Check if the tile is already cached + const cachedResponse = await cache.match(requestUrl); + + if (!cachedResponse) { + console.log(`Tile at zoom ${zoom}, x ${x}, y ${y} not found in cache. Fetching and caching...`); + + // run x number of queries in parallel + if (requestArray.length <= MAX_PARALLEL_REQUESTS) { + requestArray.push(fetch(requestUrl).then(function (response) { + // Clone the response, as it can only be consumed once + const responseClone = response.clone(); + + // Cache the response + cache.put(requestUrl, responseClone); + })); + } else { + await Promise.all(requestArray); + requestArray = []; + } + + console.log(`Tile at zoom ${zoom}, x ${x}, y ${y} cached.`); + } else { + console.log(`Tile at zoom ${zoom}, x ${x}, y ${y} found in cache.`); + } + } catch (e) { + console.error("Error fetching tiles" + e); + } + + callback && callback(); + } + } + } + + if (requestArray.length > 0) { + await Promise.all(requestArray); + } + console.log('Vector basemap tiles cached for the bounding box.'); + deferred.resolve(); + } catch (error) { + console.error('Error caching vector basemap: ' + error); + deferred.reject(); + } // Call the function to cache the vector basemap tiles for the bounding box + } else { + console.log('Cache API not supported in this browser.'); + deferred.reject(); + } + + return deferred.promise(); +} + +async function deleteMapTiles(bounds, tileUrl, minZoom, maxZoom, callback) { + minZoom = minZoom || 0; // Minimum zoom level + maxZoom = maxZoom || 20; // Maximum zoom level + + var deferred = $.Deferred(); + // Check if the browser supports the Cache API + if ('caches' in window) { + // Function to fetch and cache the vector basemap tiles for a bounding box at different zoom levels + try { + // Loop through each zoom level + for (let zoom = minZoom; zoom <= maxZoom; zoom++) { + // Loop through the tiles within the bounding box at the current zoom level + var coordinates = getTileCoordinatesForBoundsAtZoom(bounds, zoom), + xMin = coordinates[0][0], + xMax = coordinates[1][0], + yMin = coordinates[0][1], + yMax = coordinates[1][1]; + + for (let x = xMin; x <= xMax; x++) { + for (let y = yMin; y <= yMax; y++) { + const requestUrl = tileUrl.replace('{z}', zoom).replace('{x}', x).replace('{y}', y); + + // Open the cache + const cache = await caches.open(cacheName); + + // Check if the tile is already cached + await cache.delete(requestUrl); + + callback && callback(); + } + } + } + + console.log('Vector basemap tiles cached for the bounding box.'); + deferred.resolve(); + } catch (error) { + console.error('Error caching vector basemap: ' + error); + deferred.reject(); + } // Call the function to cache the vector basemap tiles for the bounding box + } else { + console.log('Cache API not supported in this browser.'); + deferred.reject(); + } + + return deferred.promise(); +} + +function getTileCoordinatesForBoundsAtZoom (bounds, zoom) { + var nLat = bounds.getNorth(), + sLat = bounds.getSouth(), + wLng = bounds.getWest(), + eLng = bounds.getEast(), + xWest = tileXCoordinateFromLatLng(nLat, wLng, zoom), + xEast = tileXCoordinateFromLatLng(sLat, eLng, zoom), + yNorth = tileYCoordinateFromLatLng(nLat, eLng, zoom), + ySouth = tileYCoordinateFromLatLng(sLat, wLng, zoom), + xMin = Math.min(xWest, xEast), + xMax = Math.max(xWest, xEast), + yMin = Math.min(yNorth, ySouth), + yMax = Math.max(yNorth, ySouth); + + // each zoom level should have at least 25 tiles i.e. 5 in each axis + if ((yMax - yMin) * (xMax - xMin) < minNumberOfTilesPerZoom) { + var xDiff = xMax - xMin, + yDiff = yMax - yMin, + xAddEachSide = Math.floor((maxTilesPerAxis - xDiff) / 2), + yAddEachSide = Math.floor((maxTilesPerAxis - yDiff) / 2), + max = Math.pow(2, zoom) - 1; + + xMin -= xAddEachSide; + xMax += xAddEachSide; + yMin -= yAddEachSide; + yMax += yAddEachSide; + xMin = xMin < 0 ? 0 : xMin; + xMax = xMax > max ? max : xMax; + yMin = yMin < 0 ? 0 : yMin; + yMax = yMax > max ? max : yMax; + } + + return [[xMin, yMin], [xMax, yMax]]; +} + +function totalTilesForBoundsAtZoom (bounds, zoom) { + var coordinates = getTileCoordinatesForBoundsAtZoom(bounds, zoom), + xMin = coordinates[0][0], + xMax = coordinates[1][0], + yMin = coordinates[0][1], + yMax = coordinates[1][1]; + + return (xMax - xMin + 1) * (yMax - yMin + 1); +} + +function totalTilesForBounds(bounds, minZoom, maxZoom) { + var totalTiles = 0; + for (var zoom = minZoom; zoom <= maxZoom; zoom++) { + totalTiles += totalTilesForBoundsAtZoom(bounds, zoom); + } + + return totalTiles; +} + +// Function to convert longitude to tile coordinate +function tileXCoordinateFromLatLng(lat, lng, zoom) { + var latLng = L.latLng(lat, lng); + return Math.floor(crs.latLngToPoint(latLng, zoom).x / tileSize); +} + +// Function to convert latitude to tile coordinate +function tileYCoordinateFromLatLng(lat, lng, zoom) { + var latLng = L.latLng(lat, lng); + return Math.floor(crs.latLngToPoint(latLng, zoom).y / tileSize); +} + +function OfflineViewModel(config) { + var self = this, + minZoom = config.minZoom || 0, + maxZoom = config.maxZoom || 20, + mapId = config.mapId, + overlayLayersMapControlConfig = Biocollect.MapUtilities.getOverlayConfig(), + mapOptions = { + autoZIndex: false, + zoomToObject: true, + preserveZIndex: true, + addLayersControlHeading: false, + drawControl: false, + showReset: false, + draggableMarkers: false, + useMyLocation: true, + maxAutoZoom: maxZoom, + maxZoom: maxZoom, + minZoom: minZoom, + allowSearchLocationByAddress: true, + allowSearchRegionByAddress: true, + trackWindowHeight: false, + baseLayer: L.tileLayer(config.baseMapUrl, config.baseMapOptions), + wmsFeatureUrl: overlayLayersMapControlConfig.wmsFeatureUrl, + wmsLayerUrl: overlayLayersMapControlConfig.wmsLayerUrl + }, + alaMap = new ALA.Map(mapId, mapOptions), + mapImpl = alaMap.getMapImpl(), + pa = null, + project = null, + mapSection = config.mapSection || "mapSection"; + + self.stages = {metadata: 'metadata', species: 'species', map: 'map', form: 'form', sites: "sites"}; + self.statuses = {done: 'downloaded', doing: 'downloading', error: 'error', wait: 'waiting'}; + self.currentStage = ko.observable(); + self.metadataStatus = ko.observable(self.statuses.wait); + self.speciesStatus = ko.observable(self.statuses.wait); + self.sitesStatus = ko.observable(self.statuses.wait); + self.mapStatus = ko.observable(self.statuses.wait); + self.formStatus = ko.observable(self.statuses.wait); + self.isOnline = ko.observable(true); + self.name = ko.observable(); + self.downloading = ko.observable(false); + self.offlineMaps = ko.observableArray([]); + self.bounds = ko.observable(mapImpl.getBounds()); + self.areaInKmOfBounds = ko.pureComputed(function () { + var bounds = self.bounds(); + return bounds && (area( bounds ) / Math.pow(10, 6)); + }) + self.numberOfTilesDownloaded = ko.observable(0); + self.totalNumberOfTiles = ko.observable(1); + self.progress = ko.observable(0); + self.totalCount = ko.observable(1); + self.numberOfFormsDownloaded = ko.observable(0); + self.totalFormDownload = ko.observable(1); + self.loadMetadata = ko.observable(false); + self.totalSiteTilesDownload = ko.observable(1); + self.numberOfSiteTilesDownloaded = ko.observable(0); + self.percentageFormDownloaded = ko.pureComputed(function (){ + return Math.round(self.numberOfFormsDownloaded() / self.totalFormDownload() * 100); + }); + self.percentageSitesDownloaded = ko.pureComputed(function (){ + return Math.round(self.numberOfSiteTilesDownloaded() / self.totalSiteTilesDownload() * 100); + }); + self.isSurveyOfflineCapable = ko.computed(function () { + var statuses = [self.metadataStatus(), self.formStatus(), self.speciesStatus(), self.mapStatus(), self.sitesStatus()] + if (statuses.every(item => item === self.statuses.done)) { + window.parent && window.parent.postMessage && window.parent.postMessage({event: "download-complete"}, "*"); + } + else { + window.parent && window.parent.postMessage && window.parent.postMessage({event: "download-removed"}, "*"); + } + }); + + self.canMapBeOffline = ko.pureComputed(function () { + return self.offlineMaps().length > 0; + }); + self.showSpeciesProgressBar = ko.pureComputed(function () { + return self.progress() > 0; + }); + self.downloadPercentageComplete = ko.pureComputed(function () { + return Math.round(self.numberOfTilesDownloaded() / self.totalNumberOfTiles() * 100); + }); + self.canDownload = ko.computed(function () { + return !!self.name() && self.isBoundsWithinMaxArea(); + }); + self.isBoundsWithinMaxArea = ko.pureComputed(function () { + var bounds = self.bounds(); + return area(bounds) <= maxArea; + }); + + self.speciesDownloadPercentageComplete = ko.pureComputed(function (){ + return Math.round(self.progress() / self.totalCount() * 100); + }); + + self.offlineMaps.subscribe(offlineMapCheck); + self.currentStage.subscribe(function (stage) { + switch (stage) { + case self.stages.metadata: + getProjectActivityMetadata(); + break; + case self.stages.form: + startDownloadingSurveyForms(); + break; + case self.stages.species: + startDownloadingSpecies(); + break; + case self.stages.sites: + startDownloadingSites(); + break; + case self.stages.map: + offlineMapCheck(); + break; + } + }); + + function offlineMapCheck() { + if (self.canMapBeOffline()) { + self.mapStatus(self.statuses.done); + } + else { + self.mapStatus(self.statuses.error); + } + } + + self.clickSpeciesDownload = function () { + self.progress(0); + self.totalCount(1); + entities.deleteSpeciesForProjectActivity(pa).then(function () { + entities.getSpeciesForProjectActivity(pa, updateSpeciesProgressBar).then(completedSpeciesDownload, errorSpeciesDownload); + }); + } + + self.clickDownload = function () { + if (self.canDownload()) { + var bounds = self.bounds(), + baseMapUrl = config.baseMapUrl, + minZoom = config.minZoom || 0; + + self.downloading(true); + self.numberOfTilesDownloaded(0); + self.totalNumberOfTiles(totalTilesForBounds(bounds, minZoom, maxZoom)); + downloadMapTiles(bounds, config.baseMapUrl, minZoom, maxZoom, function () { + self.numberOfTilesDownloaded(self.numberOfTilesDownloaded() + 1); + }).finally(function () { + self.numberOfTilesDownloaded(0); + self.totalNumberOfTiles(1); + self.downloading(false); + entities.saveMap({ + name: self.name(), + bounds: self.getBoundsArray(bounds), + baseMapUrl: baseMapUrl + }).then(function (result) { + self.getOfflineMaps(); + }); + }); + } + } + + self.getOfflineMaps = function () { + entities.getMaps().then(function (result) { + var maps = result.data; + self.offlineMaps(maps); + }); + } + + self.checkSiteInOfflineDownload = function (data) { + var deferred = $.Deferred(); + entities.getMaps().then(function (result) { + var maps = result.data; + var found = maps.find(function (map) { + return map.name === data.name; + }); + + deferred.resolve(!!found, data); + }, deferred.reject); + + return deferred.promise(); + } + + self.getBoundsArray = function (bounds) { + return [{lat: bounds.getNorth(), lng:bounds.getWest()}, {lat: bounds.getSouth(), lng:bounds.getEast()}]; + } + + self.getBoundsFromArray = function (boundsArray) { + var nw = L.latLng(boundsArray[0]), + se = L.latLng(boundsArray[1]); + + return L.latLngBounds(nw, se); + } + + self.preview = function (data) { + var data = this, + boundsArray = data.bounds, + bounds = self.getBoundsFromArray(boundsArray); + + bounds && mapImpl.fitBounds(bounds); + } + + self.removeMe = function () { + var data = this, + boundsArray = data.bounds, + bounds = self.getBoundsFromArray(boundsArray), + minZoom = 14; + + if (data && data.id) { + deleteMapTiles(bounds, data.baseMapUrl).finally(function () { + entities.deleteMap(data.id).then(function (){ + self.offlineMaps.remove(data); + }); + }); + } + } + + self.scrollToMapSection = function () { + var offset = $("#" + mapSection).offset(); + + if (offset) { + $("html, body").animate({ + scrollTop: offset.top + 'px' + }); + } + } + + function area(bounds) { + var pt1 = new L.LatLng(bounds.getNorth(), bounds.getWest()), + pt2 = new L.LatLng(bounds.getNorth(), bounds.getEast()), + pt3 = new L.LatLng(bounds.getSouth(), bounds.getEast()), + pt4 = new L.LatLng(bounds.getSouth(), bounds.getWest()), + area = pt1.distanceTo(pt2) * pt3.distanceTo(pt4); + + console.log(area); + return area; + } + + function SiteSelectionViewModel(sites){ + var self = this, + deferred = $.Deferred(); + self.chosenSites = ko.observableArray(); + self.sites = ko.observableArray(sites); + self.ok = function () { + self.close(); + deferred.resolve(self.chosenSites()); + } + self.siteSearchValue = ko.observable(""); + self.tempSearchValue = ko.observable(""); + self.searchSitesHandler = function () { + self.tempSearchValue(self.siteSearchValue()); + } + self.clearSearch = function () { + self.siteSearchValue(""); + self.tempSearchValue(""); + } + self.isSiteVisible = function (site) { + var name = (site.name || "").trim().toLowerCase(), + query = self.tempSearchValue().trim().toLowerCase(); + return name.indexOf(query) > -1; + }; + + self.cancel = function () { + self.close(); + deferred.resolve(); + } + + self.close = function () { + self.modal && self.modal.close(); + } + + self.promise = deferred.promise(); + } + + /** + * Downloads base map tiles and wms layer of a site for offline use. + * It is done for all sites of a project activity. + * @returns {Promise