camptocamp · llienher · Nov 1, 2018 · Nov 1, 2018 · Nov 27, 2018 · Dec 12, 2018
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -18,3 +18,10 @@ rules:
   max-len:
     - error
     - code: 110
+globals:
+    angular: false
+    Cesium: false
+    google: false
+    Bloodhound: false
+    DateFormatter: false
+    localforage: false
diff --git a/examples/offline.html b/examples/offline.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Offline example</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="mobile-web-app-capable" content="yes">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.7.3/localforage.min.js"></script>
+  </head>
+  <body ng-controller="MainController as ctrl" ng-class="{offline: ctrl.ngeoNetworkStatus.isDisconnected()}">
+  <div class="offline-msg alert-danger" translate>You are currently offline.</div>
+    <div id="map" ngeo-map="ctrl.map">
+      <ngeo-offline
+        ngeo-offline-map="ctrl.map"
+        ngeo-offline-extentsize="ctrl.offlineExtentSize">
+      </ngeo-offline>
+    </div>
+    <p id="desc">This example shows how to use the <code><a href="../apidoc/ngeo.offline.component.html" title="Read our documentation">ngeo-offline</a></code> component.</p>
+  </body>
+</html>
diff --git a/examples/offline.js b/examples/offline.js
@@ -0,0 +1,88 @@
+/**
+ * @module app.offline
+ */
+const exports = {};
+
+import './offline.less';
+import './common_dependencies.js';
+import olMap from 'ol/Map.js';
+
+import olView from 'ol/View.js';
+import olLayerTile from 'ol/layer/Tile.js';
+import olSourceOSM from 'ol/source/OSM.js';
+import ngeoMapModule from 'ngeo/map/module.js';
+import ngeoOfflineModule from 'ngeo/offline/module.js';
+import ngeoOfflineConfiguration from 'ngeo/offline/Configuration.js';
+import NgeoOfflineServiceManager from 'ngeo/offline/ServiceManager.js';
+import angular from 'angular';
+
+
+// Useful to work on example - remove me later
+import 'bootstrap/js/modal.js';
+import 'jquery-ui/ui/widgets/resizable.js';
+import 'jquery-ui/ui/widgets/draggable.js';
+
+/** @type {!angular.IModule} **/
+exports.module = angular.module('app', [
+  'gettext',
+  ngeoMapModule.name,
+  ngeoOfflineModule.name,
+  NgeoOfflineServiceManager.module.name,
+]);
+
+exports.module.value('ngeoOfflineTestUrl', '../../src/offline/component.html');
+
+// Define the offline download configuration service
+ngeoOfflineModule.service('ngeoOfflineConfiguration', ngeoOfflineConfiguration);
+
+class MainController {
+
+  /**
+   * @param {ngeoFeatureOverlayMgr} ngeoFeatureOverlayMgr ngeo feature overlay manager service.
+   * @param {ngeoNetworkStatus} ngeoNetworkStatus ngeo network status service.
+   * @param {NgeoOfflineServiceManager} ngeoOfflineServiceManager ngeo offline service.
+   * @ngInject
+   */
+  constructor(ngeoFeatureOverlayMgr, ngeoNetworkStatus, ngeoOfflineServiceManager) {
+
+    /**
+     * Save a square of 10 km sideways (Map's unit is the meter).
+     * @type {number}
+     * @export
+     */
+    this.offlineExtentSize = 10000;
+
+    /**
+     * @type {ngeoNetworkStatus}
+     * @export
+     */
+    this.ngeoNetworkStatus = ngeoNetworkStatus;
+
+    /**
+     * @type {ol.Map}
+     * @export
+     */
+    this.map = new olMap({
+      layers: [
+        new olLayerTile({
+          source: new olSourceOSM()
+        })
+      ],
+      view: new olView({
+        center: [352379, 5172733],
+        zoom: 4
+      })
+    });
+
+    ngeoFeatureOverlayMgr.init(this.map);
+
+    ngeoOfflineServiceManager.setSaveService('offlineDownloader');
+    ngeoOfflineServiceManager.setRestoreService('ngeoOfflineRestorer');
+  }
+}
+
+
+exports.module.controller('MainController', MainController);
+
+
+export default exports;
diff --git a/examples/offline.less b/examples/offline.less
@@ -0,0 +1,74 @@
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "~font-awesome/less/font-awesome.less";
+
+#map {
+  width: 600px;
+  height: 400px;
+  position: relative;
+}
+
+ngeo-offline {
+  div {
+    z-index: 1;
+  }
+  .main-button {
+    position: absolute;
+    right: 1rem;
+    bottom: 5rem;
+    cursor: pointer;
+    .no-data {
+      color: black;
+    }
+    .with-data {
+      color: red;
+    }
+    .no-data, .with-data {
+      background-color: white;
+      text-align: center;
+      font-size: 2.5rem;
+      line-height: 2rem;
+      border-radius: 2rem;
+      font-family: FontAwesome;
+      &::after {
+        content: @fa-var-arrow-circle-o-down;
+      }
+    }
+  }
+
+  .validate-extent {
+    position: absolute;
+    bottom: 0.5rem;
+    width: 10rem;
+    left: calc(~"50% - 5rem");
+  }
+
+  .in-progress {
+    position: absolute;
+    left: calc(~"50% - 3.3rem");
+    top: calc(~"50% - 3rem");
+    color: white;
+    font-weight: bold;
+    background-color: #337ab7;
+    padding: 2rem 2rem;
+    border-radius: 1rem;
+  }
+
+  .modal-content {
+    width: 30rem;
+  }
+
+  .modal-body {
+    button {
+      display: block;
+      margin: 0.5rem auto;
+      width: 25rem;
+    }
+  }
+}
+
+.offline-msg {
+  display: none;
+}
+.offline .offline-msg {
+  display: block;
+}
diff --git a/package.json b/package.json
@@ -128,5 +128,7 @@
     "webpack-dev-server": "3.3.1",
     "webpack-merge": "4.2.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "localforage": "^1.7.3"
+  }
 }
diff --git a/src/message/modalComponent.js b/src/message/modalComponent.js
@@ -1,6 +1,9 @@
-import angular from 'angular';
+/**
+ * @module ngeo.message.modalComponent
+ */
 import 'jquery-ui/ui/widgets/draggable.js';
 import 'bootstrap/js/src/modal.js';
+import angular from 'angular';
 
 
 /**

diff --git a/src/offline/AbstractLocalforageWrapper.js b/src/offline/AbstractLocalforageWrapper.js
@@ -0,0 +1,108 @@
+/**
+ * @module ngeo.offline.AbstractLocalforageWrapper
+ */
+/**
+ * @typedef {{
+ *   id: number,
+ *   plugin: string,
+ *   command: string,
+ *   args: !Array<*>,
+ *   context: (*|undefined)
+ * }}
+ */
+// eslint-disable-next-line no-unused-vars
+let Action;
+
+/**
+ * @abstract
+ */
+const exports = class AbstractLocalforageWrapper {
+  constructor() {
+    this.waitingPromises_ = new Map();
+    this.currentId_ = 0;
+  }
+
+  setItem(...args) {
+    return this.createAction('setItem', ...args);
+  }
+
+  getItem(...args) {
+    return this.createAction('getItem', ...args);
+  }
+
+  clear() {
+    return this.createAction('clear');
+  }
+
+  config(...args) {
+    return this.createAction('config', ...args);
+  }
+
+  /**
+   * @export
+   * @param {string} command .
+   * @param  {...*} args .
+   * @return {Promise} .
+   */
+  createAction(command, ...args) {
+    const id = ++this.currentId_;
+    /**
+     * @type {Action}
+     */
+    const action = {
+      'plugin': 'localforage',
+      'command': command,
+      'args': args,
+      'id': id
+    };
+    const waitingPromise = {};
+    const promise = new Promise((resolve, reject) => {
+      waitingPromise['resolve'] = resolve;
+      waitingPromise['reject'] = reject;
+    });
+    this.waitingPromises_.set(id, waitingPromise);
+    this.postToBackend(action);
+    return promise;
+  }
+
+  /**
+   * @export
+   * @param {*} event .
+   */
+  receiveMessage(event) {
+    /**
+     * @type {Action}
+     */
+    const action = event['data'];
+    const id = action['id'];
+    const command = action['command'];
+    const args = action['args'] || [];
+    const context = action['context'];
+    const msg = action['msg'];
+
+    const waitingPromise = this.waitingPromises_.get(id);
+    if (command === 'error') {
+      console.error(msg, args, context);
+      if (waitingPromise) {
+        waitingPromise.reject(args, context);
+        this.waitingPromises_.delete(id);
+      }
+    } else if (command === 'response') {
+      waitingPromise.resolve(...args);
+      this.waitingPromises_.delete(id);
+    } else {
+      console.error('Unhandled command', JSON.stringify(action, null, '\t'));
+    }
+  }
+
+  /**
+   * @abstract
+   * @protected
+   * @param {Action} action .
+   */
+  postToBackend(action) {
+  }
+};
+
+
+export default exports;