Merge pull request #1746 from swisstopo/feature/viewer-1701-seismic-linien-ueber-ogc-api-einbinden

Feature 1701: Seismic-Linien über OGC-API einbinden

Author: daniel-va

ui/locales/toolbox/toolbox.de.json

@@ -0,0 +1,21 @@
+{
+  "actions": {
+    "export": "Daten exportieren"
+  },
+  "ogc": {
+    "layer-selection": {
+      "title": "Export",
+      "confirm": "Export"
+    },
+    "queue": {
+      "title": "Export Warteschlange"
+    },
+    "stage": {
+      "Prepare": "Vorbereitung Download auf dem Server",
+      "Running": "Durchführung Export",
+      "Success": "Export wurde erfolgreich durchgeführt",
+      "Failure": "Export ist fehlgeschlagen",
+      "Complete": "Export Abgeschlossen"
+    }
+  }
+}

ui/locales/toolbox/toolbox.en.json

@@ -0,0 +1,21 @@
+{
+  "actions": {
+    "export": ""
+  },
+  "ogc": {
+    "layer-selection": {
+      "title": "",
+      "confirm": ""
+    },
+    "queue": {
+      "title": ""
+    },
+    "stage": {
+      "Prepare": "",
+      "Running": "",
+      "Success": "",
+      "Failure": "",
+      "Complete": ""
+    }
+  }
+}

ui/locales/toolbox/toolbox.fr.json

@@ -0,0 +1,21 @@
+{
+  "actions": {
+    "export": ""
+  },
+  "ogc": {
+    "layer-selection": {
+      "title": "",
+      "confirm": ""
+    },
+    "queue": {
+      "title": ""
+    },
+    "stage": {
+      "Prepare": "",
+      "Running": "",
+      "Success": "",
+      "Failure": "",
+      "Complete": ""
+    }
+  }
+}

ui/locales/toolbox/toolbox.it.json

@@ -0,0 +1,21 @@
+{
+  "actions": {
+    "export": ""
+  },
+  "ogc": {
+    "layer-selection": {
+      "title": "",
+      "confirm": ""
+    },
+    "queue": {
+      "title": ""
+    },
+    "stage": {
+      "Prepare": "",
+      "Running": "",
+      "Success": "",
+      "Failure": "",
+      "Complete": ""
+    }
+  }
+}

ui/src/context/register-context.ts

@@ -18,6 +18,7 @@ import { LayerInfoService } from 'src/features/layer/info/layer-info.service';
 import { LayerService } from 'src/features/layer/layer.service';
 import { GestureControlsService } from 'src/features/controls/gestures/gesture-controls.service';
 import { SessionService } from 'src/features/session/session.service';
+import { OgcService } from 'src/features/ogc';
 
 type AppContext = ContextProvider<Context<unknown, unknown>, LitElement>;
 export const registerAppContext = (
@@ -50,6 +51,7 @@ export const registerAppContext = (
   contexts.push(makeProvider(LayerService));
   contexts.push(makeProvider(LayerInfoService));
   contexts.push(makeProvider(GestureControlsService));
+  contexts.push(makeProvider(OgcService));
 
   return contexts;
 };

ui/src/elements/ngm-side-bar.ts

@@ -49,10 +49,10 @@ import { consume } from '@lit/context';
 import { isSameLayer, LayerService } from 'src/features/layer/layer.service';
 import { LayerInfoService } from 'src/features/layer/info/layer-info.service';
 import { distinctUntilChanged, map, skip, take } from 'rxjs';
-import { run } from 'src/utils/fn.utils';
 import { getLayersConfig } from 'src/swisstopoImagery';
 import { SessionService } from 'src/features/session';
 import { initializeLayerHelpers } from 'src/layers/helpers';
+import { run } from 'src/utils/fn.utils';
 
 export type SearchLayer = SearchLayerWithLayer | SearchLayerWithSource;
 
@@ -123,7 +123,9 @@ export class SideBar extends LitElementI18n {
   private shareListenerAdded = false;
 
   private readonly shareDownListener = (evt) => {
-    if (!evt.composedPath().includes(this)) this.activePanel = null;
+    if (!evt.composedPath().includes(this)) {
+      this.closePanel();
+    }
   };
 
   private viewer: Viewer | null = null;
@@ -206,8 +208,9 @@ export class SideBar extends LitElementI18n {
     });
 
     const sliceOptions = getSliceParam();
-    if (sliceOptions?.type && sliceOptions.slicePoints)
-      this.activePanel = 'tools';
+    if (sliceOptions?.type && sliceOptions.slicePoints) {
+      this.openPanel('tools');
+    }
 
     this.layerService.layerActivated$.subscribe((layer) => {
       this.maybeShowVisibilityHint(layer as LayerConfig);
@@ -224,18 +227,49 @@ export class SideBar extends LitElementI18n {
       });
   }
 
-  async togglePanel(panelName, showHeader = true) {
+  async togglePanel(panelName: string, showHeader = true) {
+    this.showHeader = showHeader;
+    if (this.activePanel === panelName) {
+      this.closePanel(panelName);
+    } else {
+      this.openPanel(panelName);
+    }
+  }
+
+  private openPanel(panelName: string): void {
+    document.body.style.setProperty(
+      '--sidebar-width',
+      run(() => {
+        switch (panelName) {
+          case 'data':
+            return '440px';
+          case 'settings':
+          case 'tools':
+            return '250px';
+          case 'dashboard':
+            return 'min(1028px, calc(100vw - 144px))';
+          case 'share':
+            return '436px';
+          default:
+            return '';
+        }
+      }),
+    );
+    this.activePanel = panelName;
+  }
+
+  private readonly handlePanelClose = () => this.closePanel();
+
+  private readonly closePanel = (panelName?: string): void => {
     if (DashboardStore.projectMode.value === 'edit') {
       DashboardStore.showSaveOrCancelWarning(true);
       return;
     }
-    this.showHeader = showHeader;
-    if (this.activePanel === panelName) {
+    if (panelName === undefined || this.activePanel === panelName) {
+      document.body.style.setProperty('--sidebar-width', '');
       this.activePanel = null;
-      return;
     }
-    this.activePanel = panelName;
-  }
+  };
 
   async syncActiveLayers() {
     const flatLayers = flattenLayers(this.catalogLayers!);
@@ -570,18 +604,18 @@ export class SideBar extends LitElementI18n {
       <ngm-dashboard
         class="ngm-side-bar-panel ngm-large-panel"
         ?hidden=${this.activePanel !== 'dashboard'}
-        @close=${() => (this.activePanel = null)}
+        @close=${this.handlePanelClose}
       ></ngm-dashboard>
       <ngm-layer-panel
         ?hidden="${this.activePanel !== 'data'}"
         .layers="${this.catalogLayers ?? []}"
-        @close="${() => (this.activePanel = null)}"
+        @close="${this.handlePanelClose}"
       ></ngm-layer-panel>
       <div .hidden=${this.activePanel !== 'tools'} class="ngm-side-bar-panel">
         <ngm-tools
           .toolsHidden=${this.activePanel !== 'tools'}
-          @open=${() => (this.activePanel = 'tools')}
-          @close=${() => (this.activePanel = null)}
+          @open=${() => this.openPanel('tools')}
+          @close=${this.handlePanelClose}
         ></ngm-tools>
       </div>
       <div
@@ -590,10 +624,7 @@ export class SideBar extends LitElementI18n {
       >
         <div class="ngm-panel-header">
           ${i18next.t('lsb_share')}
-          <div
-            class="ngm-close-icon"
-            @click=${() => (this.activePanel = null)}
-          ></div>
+          <div class="ngm-close-icon" @click=${this.handlePanelClose}></div>
         </div>
         ${this.activePanel !== 'share'
           ? ''
@@ -605,10 +636,7 @@ export class SideBar extends LitElementI18n {
       >
         <div class="ngm-panel-header">
           ${i18next.t('lsb_settings')}
-          <div
-            class="ngm-close-icon"
-            @click=${() => (this.activePanel = null)}
-          ></div>
+          <div class="ngm-close-icon" @click=${this.handlePanelClose}></div>
         </div>
         <div class="toolbar-settings">
           <div class="inner-toolbar-settings">

ui/src/features/core/core-checkbox.element.ts

@@ -10,6 +10,9 @@ export class CoreCheckbox extends LitElement {
   @property({ type: Boolean })
   accessor isIndeterminate: boolean = false;
 
+  @property({ type: Boolean, attribute: 'disabled', reflect: true })
+  accessor isDisabled: boolean = false;
+
   firstUpdated() {
     const slot = this.shadowRoot?.querySelector('slot');
     slot?.addEventListener('slotchange', () => {
@@ -25,6 +28,9 @@ export class CoreCheckbox extends LitElement {
   private handleClick(e: Event) {
     e.stopPropagation();
     e.preventDefault();
+    if (this.isDisabled) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent('update', { bubbles: true, composed: true }),
     );
@@ -82,6 +88,13 @@ export class CoreCheckbox extends LitElement {
     :host {
       display: flex;
       align-items: center;
+      --checkbox-color: var(--color-primary);
+      --checkbox-color--active: var(--color-primary--active);
+    }
+
+    :host([disabled]) {
+      --checkbox-color: var(--color-primary--disabled);
+      --checkbox-color--active: var(--color-primary--disabled);
     }
 
     label {
@@ -107,15 +120,15 @@ export class CoreCheckbox extends LitElement {
       width: 20px;
       height: 20px;
       border-radius: 1px;
-      border: 2px solid var(--color-primary);
+      border: 2px solid var(--checkbox-color);
 
       ${applyTransition('fade')};
       transition-property: background-color, border-color;
     }
 
     label:has(input[checked]) .icon {
-      border-color: var(--color-primary--active);
-      background-color: var(--color-primary--active);
+      border-color: var(--checkbox-color--active);
+      background-color: var(--checkbox-color--active);
     }
 
     /* checkbox highlight */

ui/src/features/core/core-modal.element.ts

@@ -36,12 +36,13 @@ export class CoreModal extends LitElement {
   static open(props: CoreModalProps, content: TemplateResult): CoreModal {
     const container = document.createElement('div');
     container.classList.add('ngm-core-modal-container');
-    document.body.appendChild(container);
+    const root = document.querySelector('ngm-app-boot')!;
+    root.appendChild(container);
 
     const close = () => {
       render(null, container);
       if (container.parentElement != null) {
-        document.body.removeChild(container);
+        root.removeChild(container);
       }
       if (props.onClose != null) {
         props.onClose();

ui/src/features/layer/display/layer-display-list-item.element.ts

@@ -11,6 +11,7 @@ import i18next from 'i18next';
 import { LayerService } from 'src/features/layer/layer.service';
 import { consume } from '@lit/context';
 import { LayerTiffController } from 'src/features/layer';
+import { OgcService } from 'src/features/ogc';
 
 @customElement('ngm-layer-display-list-item')
 export class LayerDisplayListItem extends CoreElement {
@@ -35,6 +36,9 @@ export class LayerDisplayListItem extends CoreElement {
   @consume({ context: LayerService.context() })
   accessor layerService!: LayerService;
 
+  @consume({ context: OgcService.context() })
+  accessor ogcService!: OgcService;
+
   @state()
   accessor isOpacityActive = false;
 

ui/src/features/layer/info/layer-info.service.ts

@@ -73,6 +73,7 @@ export class LayerInfoService extends BaseService {
         const eventHandler = new ScreenSpaceEventHandler(viewer.canvas);
         eventHandler.setInputAction(
           async (event: ScreenSpaceEventHandler.PositionedEvent) => {
+            // Don't pick while drawing.
             if (DrawStore.drawStateValue) {
               return;
             }