Merge pull request #1325 from swisstopo/on_test_2024-08-05

Draft On test 2024 08 05
swisstopo · Aug 19, 2024 · 50611f6 · 50611f6
2 parents 02495e2 + 4a50406
commit 50611f6
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -11,9 +11,43 @@ You are welcome to use and adapt this software for your own uses; see [LICENSE](
 
 ## Your own version: getting started
 
+Clone the repository
 ```bash
 git clone https://github.com/swissgeol/ngm.git
-cd ngm
+```
+
+### Linux and Mac OS X
+
+> **Install** *node.js and npm*  
+> See instructions at [https://nodejs.org/en/download/package-manager](https://nodejs.org/en/download/package-manager)  
+
+#### Start frontend
+
+From the root directory change to the ```ui```-dirrectory
+```bash
+cd ui
+```
+Install dependencies
+```bash
+npm install
+```
+start development server
+```bash
+npm start
+```
+
+open http://localhost:8000
+
+#### Start backend api
+
+> **Install** *Docker*  
+> See instructions at [https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/)  
+
+> **Install** *rust and cargo*  
+> See instructions at [https://doc.rust-lang.org/cargo/getting-started/installation.html](https://doc.rust-lang.org/cargo/getting-started/installation.html)
+
+Start the api and application
+```bash
 make run
 ```
 

diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json
@@ -94,8 +94,6 @@
   "header_search_placeholder": "Suche...",
   "lsb_cesium_toolbar_label": "Cesium-Toolbar",
   "lsb_debug_tools": "Debugtools",
-  "lsb_login": "Login",
-  "lsb_logout": "Logout",
   "lsb_settings": "Einstellungen",
   "lsb_share": "Teilen",
   "lyr_3d_model_berne_label": "3D-Modell Stadt Bern",

diff --git a/ui/locales/app.en.json b/ui/locales/app.en.json
@@ -94,8 +94,6 @@
   "header_search_placeholder": "Search...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
-  "lsb_login": "Login",
-  "lsb_logout": "Logout",
   "lsb_settings": "Settings",
   "lsb_share": "Share",
   "lyr_3d_model_berne_label": "City of Bern",

diff --git a/ui/locales/app.fr.json b/ui/locales/app.fr.json
@@ -94,8 +94,6 @@
   "header_search_placeholder": "Recherche...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
-  "lsb_login": "Connexion",
-  "lsb_logout": "Déconnexion",
   "lsb_settings": "Paramètres",
   "lsb_share": "Partager",
   "lyr_3d_model_berne_label": "Modèle 3D Ville de Berne",

diff --git a/ui/locales/app.it.json b/ui/locales/app.it.json
@@ -94,8 +94,6 @@
   "header_search_placeholder": "Ricercare...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
-  "lsb_login": "Connessione",
-  "lsb_logout": "Diconnessione",
   "lsb_settings": "Impostazioni",
   "lsb_share": "Condividere",
   "lyr_3d_model_berne_label": "Modello 3D Città di Berna",

diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
@@ -1,7 +1,6 @@
 import {html} from 'lit';
 import type {AuthUser} from '../auth';
 import Auth from '../auth';
-import i18next from 'i18next';
 import {LitElementI18n} from '../i18n.js';
 import auth from '../store/auth';
 import {classMap} from 'lit/directives/class-map.js';
@@ -62,8 +61,7 @@ export class NgmAuth extends LitElementI18n {
     return html`
       <div class="ngm-user ${classMap({'ngm-active-section': !!this.user})}"
            @click=${!this.user ? this.login : this.logout}>
-        <div class="ngm-user-icon"></div>
-        ${!this.user ? i18next.t('lsb_login') : i18next.t('lsb_logout')}
+          <div class="ngm-user-icon"></div>
       </div>`;
   }
 

diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
@@ -221,9 +221,9 @@ export class SideBar extends LitElementI18n {
                class="ngm-mob-menu-toggle"
                @click=${() => this.mobileShowAll = !this.mobileShowAll}>
             <div class="${classMap({
-              'ngm-view-all-icon': !this.mobileShowAll,
-              'ngm-view-less-icon': this.mobileShowAll
-            })}"></div>
+      'ngm-view-all-icon': !this.mobileShowAll,
+      'ngm-view-less-icon': this.mobileShowAll
+    })}"></div>
           </div>
         </div>
         <div .hidden=${this.mobileView} class="ngm-menu-2">
@@ -266,15 +266,19 @@ export class SideBar extends LitElementI18n {
           <div class="ngm-close-icon" @click=${() => this.activePanel = ''}></div>
         </div>
         <div class="toolbar-settings">
-          <label>${i18next.t('lsb_debug_tools')}</label>
-          <div class="ngm-checkbox ngm-debug-tools-toggle ${classMap({active: this.debugToolsActive})}"
-               @click=${() => (<HTMLInputElement> this.querySelector('.ngm-debug-tools-toggle > input')).click()}>
-            <input type="checkbox" ?checked=${this.debugToolsActive} @change="${this.toggleDebugTools}">
-            <span class="ngm-checkbox-icon">
-              </span>
-            <label>${i18next.t('lsb_cesium_toolbar_label')}</label>
+            <div class="inner-toolbar-settings">
+              <label>${i18next.t('lsb_debug_tools')}</label>
+              <div class="ngm-checkbox ngm-debug-tools-toggle ${classMap({active: this.debugToolsActive})}" @click=${() => (<HTMLInputElement> this.querySelector('.ngm-debug-tools-toggle > input')).click()}>
+                <input type="checkbox" ?checked=${this.debugToolsActive} @change="${this.toggleDebugTools}">
+                <span class="ngm-checkbox-icon"></span>
+                <label>${i18next.t('lsb_cesium_toolbar_label')}</label>
+              </div>
+              <a class="contact-mailto-link" target="_blank"
+               href="mailto:[email protected]">${i18next.t('contact_mailto_text')}</a>
+            <a class="disclaimer-link" target="_blank"
+               href="${i18next.t('disclaimer_href')}">${i18next.t('disclaimer_text')}</a>
+            </div>
           </div>
-        </div>
       </div>
       <div .hidden=${this.activePanel !== 'data' || this.hideDataDisplayed}
            class="ngm-side-bar-panel ngm-extension-panel ngm-data-panel">
@@ -290,20 +294,20 @@ export class SideBar extends LitElementI18n {
             ${this.layerOrderChangeActive ? i18next.t('dtd_finish_ordering_label') : i18next.t('dtd_change_order_label')}
           </div>
           ${this.layerOrderChangeActive ?
-              html`
+        html`
                 <ngm-layers-sort
                     .layers=${this.activeLayers}
                     .actions=${this.layerActions}
                     @orderChanged=${(evt) => this.onLayersOrderChange(evt.detail)}>
                 </ngm-layers-sort>` :
-              html`
+        html`
                 <ngm-layers
                     .layers=${this.activeLayers}
                     .actions=${this.layerActions}
                     @removeDisplayedLayer=${evt => this.onRemoveDisplayedLayer(evt)}
                     @layerChanged=${evt => this.onLayerChanged(evt)}>
                 </ngm-layers>`
-          }
+      }
           <h5 class="ui header">${i18next.t('dtd_user_content_label')}</h5>
           <ngm-layers-upload
               .toastPlaceholder=${this.toastPlaceholder}
@@ -345,7 +349,7 @@ export class SideBar extends LitElementI18n {
     const callback = attributeParams ?
       this.getTileLoadCallback(attributeParams.attributeKey, attributeParams.attributeValue) :
       undefined;
-      const flatLayers = this.getFlatLayers(this.catalogLayers, callback);
+    const flatLayers = this.getFlatLayers(this.catalogLayers, callback);
     const urlLayers = getLayerParams();
     const assetIds = getAssetIds();
     const ionToken = MainStore.ionToken.value;
@@ -713,7 +717,7 @@ export class SideBar extends LitElementI18n {
     // done like this to have correct rerender of component
     const promise = Promise.resolve(dataSource);
     const config: LayerConfig = {
-      load() {return promise;},
+      load() { return promise; },
       label: name,
       layer,
       promise: promise,

diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
@@ -504,10 +504,6 @@ export class NgmApp extends LitElementI18n {
               <ngm-map-chooser .hidden=${this.mobileView} class="ngm-bg-chooser-map"
                               .initiallyOpened=${false}></ngm-map-chooser>
             </div>
-            <a class="contact-mailto-link" target="_blank"
-               href="mailto:[email protected]">${i18next.t('contact_mailto_text')}</a>
-            <a class="disclaimer-link" target="_blank"
-               href="${i18next.t('disclaimer_href')}">${i18next.t('disclaimer_text')}</a>
           </div>
           ${this.showCesiumToolbar ? html`
             <cesium-toolbar></cesium-toolbar>` : ''}

diff --git a/ui/src/style/index.css b/ui/src/style/index.css
@@ -511,9 +511,7 @@ ngm-voxel-filter .ngm-action-btn.ui.button {
   position: absolute;
   z-index: 2;
   left: 5px;
-  font-size: 12px;
-  color: #fff;
-  text-shadow: 0 0 2px #000;
+  color: #357183;
 }
 .contact-mailto-link {
   bottom: 60px;

diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css
@@ -76,6 +76,14 @@ ngm-side-bar {
   overflow-y: auto;
 }
 
+.inner-toolbar-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 14px;
+}
+
 .ngm-side-bar-panel.ngm-large-panel {
   width: calc(100vw - 144px);
 }