Add client part

.dockerignore

@@ -10,3 +10,7 @@
 !geoportal/geomapfish_geoportal/static
 !geoportal/geomapfish_geoportal/locale
 geoportal/geomapfish_geoportal/locale/*.pot
+!webcomponents
+!package.json
+!tsconfig.json
+!vite.config.ts

.github/dependabot.yaml

@@ -7,3 +7,11 @@ updates:
       time: '04:00'
     ignore:
       - dependency-name: none
+
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: daily
+    open-pull-requests-limit: 20
+    ignore:
+      - dependency-name: none

.gitignore

@@ -35,3 +35,4 @@ __pycache__/
 !/CONST_create_template/geoportal/geomapfish_geoportal/locale/
 !/CONST_create_template/geoportal/geomapfish_geoportal/static/
 /yandex
+/node_modules

Dockerfile

@@ -19,6 +19,7 @@ ENV SIMPLE=$SIMPLE
 
 RUN build-l10n "geomapfish"
 
+# hadolint ignore=DL3059
 RUN \
     cd /tmp/config/geoportal/ && \
     c2c-template --vars ${VARS_FILE} \
@@ -30,7 +31,7 @@ RUN \
 
 ###############################################################################
 
-FROM camptocamp/geomapfish-config:2.7
+FROM camptocamp/geomapfish-config:2.7 AS gmf-config
 
 ARG PGSCHEMA
 ENV PGSCHEMA=$PGSCHEMA
@@ -66,3 +67,23 @@ VOLUME /etc/geomapfish \
     /etc/gunicorn \
     /etc/haproxy_dev \
     /etc/haproxy
+
+###############################################################################
+
+FROM node:16-slim AS custom-build
+
+WORKDIR /app
+COPY package.json ./
+
+RUN npm install
+
+COPY package.json tsconfig.json vite.config.ts ./
+COPY webcomponents/ ./webcomponents/
+RUN npm run build
+
+CMD [ "npm", "run", "dev" ]
+
+###############################################################################
+
+FROM gmf-config AS config
+COPY --from=custom-build /app/dist/ /etc/geomapfish/

docker-compose.override.sample.yaml

@@ -77,3 +77,10 @@ services:
     extends:
       file: docker-compose-lib.yaml
       service: webpack_dev_server
+
+  vite_dev_server:
+    build:
+      context: '.'
+      target: custom-build
+    volumes:
+      - ./:/app/

geoportal/vars.yaml

@@ -125,6 +125,11 @@ vars:
         gmfContextualDataOptions:
           projections: *alternate_projections
           rasterParams: {}
+        # For dev, the corresponding value in static should also be removed.
+        gmfCustomJavascriptUrl: https://localhost:8484/vite/custom.js
+      static:
+        gmfCustomJavascriptUrl:
+          name: ''
 
     desktop_alt:
       extends: desktop

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "lit": "2.0.0-rc.3",
+    "typescript": "4.3.2",
+    "vite": "2.5.4"
+  }
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "lib": ["es2020", "dom"],
+    "moduleResolution": "node",
+    "experimentalDecorators": true
+  },
+  "include": ["webcomponents/**/*.ts"],
+  "files": ["webcomponents/window.d.ts"]
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import {defineConfig} from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 3001,
+    https: true,
+    open: 'webcomponents/index.js',
+  },
+  build: {
+    lib: {
+      entry: 'webcomponents/index.ts',
+      formats: ['es'],
+    },
+    sourcemap: true,
+  },
+});

webcomponents/feedback.ts

@@ -0,0 +1,144 @@
+import {customElement, state} from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
+
+@customElement('proj-feedback')
+export class ProjFeedback extends LitElement {
+  @state()
+  private show_modal = true;
+  @state()
+  private permalink: string;
+  private email: string;
+  private email_optional: string;
+  private feedback_text: string;
+  private url_: string;
+  private subscriptions_ = [];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.subscriptions_.push(
+      window.gmf.config.getConfig().subscribe({
+        next: (configuration) => {
+          this.url_ = configuration.sitnFeedbackUrl;
+        },
+      })
+    );
+  }
+
+  render() {
+    return html`<div class="modal-header">
+        <h4 class="modal-title" id="myModalLabel">Signaler un problème</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      ${this.show_modal
+        ? html`<div class="modal-body">
+              Votre email (optionnel):<br />
+              <input
+                input="text"
+                placeholder="[email protected]"
+                name="email"
+                class="form-control"
+                .value="${this.email}"
+              />
+              <br />
+              Inclure un membre du SITN (optionnel) :<br />
+              <input
+                type="text"
+                placeholder="[email protected]"
+                name="email_optional"
+                class="form-control"
+                .value="${this.email_optional}"
+              />
+              <br />
+              Votre description du problème concernant la carte :<br />
+              <textarea
+                rows="4"
+                cols="40"
+                class="form-control"
+                .value="${this.feedback_text}"
+                maxlength="1000"
+                placeholder="Taille maximale: 1000 caractères"
+              >
+              </textarea>
+              <br />
+              L'URL ci-dessous sera envoyée au SITN:
+              <input
+                type="text"
+                name="permalink"
+                class="form-control"
+                value="${window.location.href}"
+                .value="${this.permalink}"
+                readonly="True"
+              />
+              <br />
+              Pour contacter le SITN directement:
+              <a href="mailto:[email protected]?subject=Problème Géoportail">[email protected]</a>
+            </div>
+            <div class="modal-footer">
+              <button type="submit" class="btn btn-primary" @click="${this.feedbackSubmit}">Envoyer</button>
+            </div>`
+        : html`<div class="sitn-loader">
+            <div class="fas fa-spinner fa-spin"></div>
+            <p>En cours d'envoi...</p>
+          </div>`}`;
+  }
+
+  private feedbackSubmit() {
+    if (
+      (this.email && this.email.indexOf('@') === -1) ||
+      (this.email_optional && this.email_optional.indexOf('@') === -1)
+    ) {
+      alert("Une adresse email n'est pas valide");
+      return;
+    }
+
+    if (!this.feedback_text) {
+      alert('Veuillez saisir une descritption du problème.');
+      return;
+    }
+
+    if (this.feedback_text.length > 1000) {
+      alert('Votre texte est trop long (max 1000 caractères).');
+      return;
+    }
+    this.show_modal = false;
+
+    let url = new URL(this.url_);
+    let params = new URLSearchParams(url.search.slice(1));
+    let formdata = new FormData();
+    formdata.set('permalink', this.permalink.toString());
+    formdata.set('ua', navigator.userAgent);
+    formdata.set('email', this.email);
+    formdata.set('email_optional', this.email_optional);
+    formdata.set('feedback', this.feedback_text);
+
+    fetch(this.url_, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+      },
+      body: formdata,
+    }).then(
+      () => {
+        this.show_modal = false;
+        alert(
+          [
+            'Merci! Votre demande est bien partie.',
+            '\n\n',
+            'Suivant votre demande, une personne du SITN ',
+            'prendra bientôt contact avec vous.',
+          ].join('')
+        );
+      },
+      () => {
+        alert('Une erreur est survenue. Merci de contacter le SITN ([email protected])');
+      }
+    );
+  }
+
+  // Disable shadow DOM
+  protected createRenderRoot(): LitElement {
+    return this;
+  }
+}

webcomponents/index.ts

@@ -0,0 +1 @@
+import './feedback.ts';

webcomponents/window.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  gmf: any;
+}