From 098f39f3fbe91990a8c72b81e5b23fa841bd1e05 Mon Sep 17 00:00:00 2001 From: Moritz Kirmse Date: Tue, 30 Nov 2021 20:07:25 +0100 Subject: [PATCH 1/2] implement test controls for offline API as a webcomponent --- .../static-ngeo/js/apps/MainController.js | 1 + .../static-ngeo/js/apps/main.html.ejs | 1 + .../static-ngeo/js/offlineWebComponent.ts | 133 ++++++++++++++++++ .../static-ngeo/less/offline.less | 26 +++- 4 files changed, 157 insertions(+), 4 deletions(-) create mode 100644 geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts diff --git a/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js b/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js index 1e64fc084..621139304 100644 --- a/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js +++ b/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'; diff --git a/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs b/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs index 098fb76a3..e2e51ce3f 100644 --- a/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs +++ b/geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs @@ -364,6 +364,7 @@
{{mainCtrl.selectedLayers[0].get('label') | translate}}
+ +
+ check background offline data +
+
+
+ show offline data info +
+
+${this.constructor.offlinePackages.map((definition) => + this.renderOfflinePackageItem(definition.title, definition.packageName))} + +`; + } + + renderOfflinePackageItem(title, packageName) { + return html` +
+ update ${title} +
+
+ delete ${title} +
+
+`; + } + + renderInfo() { + return html` + +`; + } + + render() { + return html` +
+ +
+
+
+${this.menuDisplayed?this.renderMenu():""} +${this.renderInfo()} + `; + } + + checkTiles() + { + console.log("check"); + let checkPromise = fetch("http://localhost:8766/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("http://localhost:8766/map/" + packageName, {method}) + alterPromise.then(res => res.text()); + } + + toggleMenu() { + this.menuDisplayed = !this.menuDisplayed; + } + + createRenderRoot() { + // no shadow dom + return this; + } +} diff --git a/geoportal/geoportailv3_geoportal/static-ngeo/less/offline.less b/geoportal/geoportailv3_geoportal/static-ngeo/less/offline.less index 653fae1a4..d49fcd213 100644 --- a/geoportal/geoportailv3_geoportal/static-ngeo/less/offline.less +++ b/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; -} \ No newline at end of file +} From fe64a6b38a879a5cfb93fbb0aec5e73d0847327f Mon Sep 17 00:00:00 2001 From: Moritz Kirmse Date: Wed, 1 Dec 2021 17:26:58 +0100 Subject: [PATCH 2/2] use correct specification of local mobile server --- .../static-ngeo/js/offlineWebComponent.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts b/geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts index 9f31741fa..a8ae0656d 100644 --- a/geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts +++ b/geoportal/geoportailv3_geoportal/static-ngeo/js/offlineWebComponent.ts @@ -26,6 +26,10 @@ export class LuxOffline extends LuxBaseElement { 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 = [ @@ -102,7 +106,7 @@ ${this.renderInfo()} checkTiles() { console.log("check"); - let checkPromise = fetch("http://localhost:8766/check"); + let checkPromise = fetch(this.baseURL + "/check"); checkPromise.then(response => response.text()).then(text => this.statusDict = text); this.showInfo() } @@ -118,7 +122,7 @@ ${this.renderInfo()} let method = eventId.substring(0, separatorPos); let packageName = eventId.substring(separatorPos+1); console.log(method + " " + packageName); - let alterPromise = fetch("http://localhost:8766/map/" + packageName, {method}) + let alterPromise = fetch(this.baseURL + "/map/" + packageName, {method}) alterPromise.then(res => res.text()); }