Add the webcomponents

webcomponents/feedback.ts

@@ -0,0 +1,165 @@
+import {customElement, state} from 'lit/decorators.js';
+import {html, css} from 'lit';
+
+// @ts-ignore
+@customElement('proj-feedback')
+export class ProjFeedback extends (window as any).gmfapi.elements.ToolPanelElement {
+  @state()
+  private show_send = false;
+  @state()
+  private permalink: string = window.location.href;
+  private email: string = '';
+  private email_optional: string = '';
+  private feedback_text: string = '';
+  private url_: string;
+  private subscriptions_ = [];
+
+  static styles = [
+    ...(window as any).gmfapi.elements.ToolPanelElement.styles,
+    css`
+      .modal-footer {
+        border-top: 0.06rem solid var(--color-light);
+      }
+    `,
+  ];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.subscriptions_.push(
+      (window as any).gmfapi.store.config.getConfig().subscribe({
+        next: (configuration) => {
+          if (configuration) {
+            this.url_ = new URL(configuration.sitnFeedbackPath, configuration.gmfBase).href;
+          }
+        },
+      })
+    );
+    window.addEventListener('popstate', () => {
+      this.permalink = window.location.href;
+    });
+  }
+
+  render() {
+    return html`${this.getTitle('Signaler un problème')}
+      <div class="modal-body">
+        <label for="email">Votre email (optionnel):</label><br />
+        <input
+          input="text"
+          placeholder="[email protected]"
+          name="email"
+          class="form-control"
+          id="email"
+          .value="${this.email}"
+          @input=${(e) => {
+            this.email = e.target.value;
+          }}
+        />
+        <br />
+        <label for="email_optional">Inclure un membre du SITN (optionnel):</label><br />
+        <input
+          type="text"
+          placeholder="[email protected]"
+          name="email_optional"
+          class="form-control"
+          id="email_optional"
+          .value="${this.email_optional}"
+          @input=${(e) => {
+            this.email_optional = e.target.value;
+          }}
+        />
+        <br />
+        <label for="feedback_text">Votre description du problème concernant la carte:</label><br />
+        <textarea
+          rows="4"
+          cols="40"
+          class="form-control"
+          id="feedback_text"
+          .value="${this.feedback_text}"
+          @input=${(e) => {
+            this.feedback_text = e.target.value;
+          }}
+          maxlength="1000"
+          placeholder="Taille maximale: 1000 caractères"
+        >
+        </textarea>
+        <br />
+        <label for="permalink">L'URL ci-dessous sera envoyée au SITN:</label>
+        <input
+          type="text"
+          name="permalink"
+          class="form-control"
+          id="permalink"
+          .value="${this.permalink}"
+          readonly
+        />
+        <br />
+        Pour contacter le SITN directement:
+        <a href="mailto:[email protected]?subject=Problème Géoportail">[email protected]</a>
+      </div>
+      <br />
+      <div class="modal-footer">
+        <button type="submit" class="btn prime" @click="${this.feedbackSubmit}">Envoyer</button>
+      </div>
+      ${this.show_send
+        ? 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_send = true;
+
+    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((response) => {
+        if (!response.ok) {
+          throw new Error(`${response.statusText} (${response.status})`);
+        }
+        this.show_send = false;
+        alert(
+          [
+            'Merci! Votre demande est bien partie.',
+            '',
+            'Suivant votre demande, une personne du SITN prendra bientôt contact avec vous.',
+          ].join('\n')
+        );
+      })
+      .catch((error) => {
+        console.error(error);
+        alert('Une erreur est survenue. Merci de contacter le SITN ([email protected])');
+      });
+  }
+}

webcomponents/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script type="module" src="./index.ts"></script>
+  </head>
+  <body>
+    <proj-feedback></proj-feedback>
+  </body>
+</html>

webcomponents/index.ts

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

webcomponents/window.d.ts

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