implement test controls for offline API as a webcomponent

geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js

@@ -192,6 +192,7 @@ import '../../less/geoportailv3.less';
  /* eslint-enable no-unused-vars */
 
 import '../lux-iframe-preview/lux-iframe-preview.ts';
+import '../offlineWebComponent.ts';
 
 import DragRotate from 'ol/interaction/DragRotate';
 import {platformModifierKeyOnly} from 'ol/events/condition';

geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs

@@ -364,6 +364,7 @@
         </div>
         <div ng-if="mainCtrl.selectedLayers.length>0" class="slider-layer-label"><i class="fa fa-arrow-left"></i> <span>{{mainCtrl.selectedLayers[0].get('label') | translate}}</span></div>
       </div>
+      <lux-offline></lux-offline>
       <ngeo-offline
           ngeo-offline-map="::mainCtrl.map"
           ngeo-offline-mask-margin="::100"

geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts

@@ -0,0 +1,137 @@
+import 'jquery';
+import 'bootstrap/js/modal.js';
+
+import i18next from 'i18next';
+
+import {LuxBaseElement} from './LuxBaseElement';
+import {html} from 'lit';
+import {customElement, state, query, property} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+
+
+@customElement('lux-offline')
+export class LuxOffline extends LuxBaseElement {
+
+    @state()
+    private menuDisplayed;
+
+    @state()
+    private infoDisplayed;
+
+    @state()
+    private statusDict;
+
+    @query('.modal')
+    private modal: HTMLElement;
+
+    constructor() {
+        super();
+        const searchParams = new URLSearchParams(document.location.search);
+        const server = searchParams.get('embeddedserver');
+        const proto = searchParams.get('embeddedserverprotocol') || 'http';
+        this.baseURL = (server ? `${proto}://${server}` : "http://localhost:8766/map/")
+    }
+
+    static offlinePackages = [
+        {title: 'roadmap', packageName: 'omt-geoportail-lu'},
+        {title: 'topomap', packageName: 'omt-topo-geoportail-lu'},
+        {title: 'contours', packageName: 'contours-lu'},
+        {title: 'hillshade', packageName: 'hillshade-lu'},
+        {title: 'resources', packageName: 'resources'},
+        {title: 'fonts', packageName: 'fonts'},
+        {title: 'sprites', packageName: 'sprites'}
+    ]
+
+    renderMenu() {
+        return html`
+<div class="offline-btns">
+<div class="offline-btn btn btn-primary" @click="${this.checkTiles}">
+  check background offline data
+</div>
+<br>
+<div class="offline-btn btn btn-primary" @click="${this.showInfo}">
+  show offline data info
+</div>
+<br>
+${this.constructor.offlinePackages.map((definition) =>
+    this.renderOfflinePackageItem(definition.title, definition.packageName))}
+</div>
+`;
+    }
+
+    renderOfflinePackageItem(title, packageName) {
+        return html`
+<div class="offline-btn btn btn-primary" id="PUT-${packageName}" @click="${this.alterTiles}">
+  update ${title}
+</div>
+<div class="offline-btn btn btn-primary" id="DELETE-${packageName}" @click="${this.alterTiles}">
+  delete ${title}
+</div>
+<br>
+`;
+    }
+
+    renderInfo() {
+        return html`
+            <div class="modal" tabindex="-1" role="dialog">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">${i18next.t('Offline package info')}</h4>
+                  </div>
+                  <div class="modal-body">
+    <div>
+      <p><pre ng-style="{'font-size':'8px'}"> ${this.statusDict} </pre></p>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>    
+`;
+    }
+
+    render() {
+        return html`
+<div class="db-button">
+  <span>
+    <div class="no-data webcomponent" @click="${this.toggleMenu}"></div>
+  </span>
+</div>
+${this.menuDisplayed?this.renderMenu():""}
+${this.renderInfo()}
+        `;
+    }
+
+    checkTiles()
+    {
+        console.log("check");
+        let checkPromise = fetch(this.baseURL + "/check");
+        checkPromise.then(response => response.text()).then(text => this.statusDict = text);
+        this.showInfo()
+    }
+
+    showInfo()
+    {
+        $(this.modal).modal('show');
+    }
+
+    alterTiles(e) {
+        let eventId = e.target.id;
+        let separatorPos = eventId.indexOf('-');
+        let method = eventId.substring(0, separatorPos);
+        let packageName = eventId.substring(separatorPos+1);
+        console.log(method + " " + packageName);
+        let alterPromise = fetch(this.baseURL + "/map/" + packageName, {method})
+        alterPromise.then(res => res.text());
+    }
+
+    toggleMenu() {
+        this.menuDisplayed = !this.menuDisplayed;
+    }
+
+    createRenderRoot() {
+        // no shadow dom
+        return this;
+    }
+}

geoportal/geoportailv3_geoportal/static-ngeo/less/offline.less

@@ -1,8 +1,8 @@
-ngeo-offline {
+ngeo-offline, lux-offline {
   div {
     z-index: 1;
   }
-  .main-button {
+  .main-button, .db-button {
     position: absolute;
     right: 8px;
     bottom: 15rem;
@@ -24,10 +24,16 @@ ngeo-offline {
         content: @fa-var-arrow-circle-o-down;
       }
     }
+    .webcomponent {
+      &::after {
+        content: @fa-var-database;
+      }
+    }
     .with-data {
       color: red;
     }
   }
+  .db-button {bottom: 198px}
 
   &.offline-mode {
     .main-button {
@@ -37,9 +43,21 @@ ngeo-offline {
     }
   }
 
+  .offline-btns {
+    position: absolute;
+    top: 2.2rem;
+    left: calc(~"50% - 10rem");
+    text-align: center;
+  }
+
+  .offline-btn {
+      // width: 20rem;
+      margin: 5px;
+  }
+
   .validate-extent {
     position: absolute;
-    top: 4.5rem;
+    bottom: 4.5rem;
     width: 12rem;
     left: calc(~"50% - 6rem");
   }
@@ -133,4 +151,4 @@ body.offline-or-disconnected {
 button.modal-header-close {
   padding-top: 15px;
   padding-right: 15px;
-}
+}