Some fixes and UI changes

- fix access to the rectangle positions; - use a text button; - introduce a function to lighten the code.
swisstopo · Dec 18, 2020 · aaf0fb2 · aaf0fb2
1 parent fa702f9
commit aaf0fb2
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 71 deletions.
diff --git a/locales/app.de.json b/locales/app.de.json
@@ -129,6 +129,7 @@
   "tbx_depth_warning": "Tiefe muss zwischen {{minDepth}}m und {{maxDepth}}m liegen",
   "tbx_description_label": "Beschreibung",
   "tbx_disable_slice_btn_label": "Gesamte Karte zeigen",
+  "tbx_download_data_inside_rectangle_label": "",
   "tbx_download_section_output_label": "Herunterladen",
   "tbx_drawing_tools_label": "Zeichnen und Messen:",
   "tbx_edit_area_hint": "Bearbeiten",

diff --git a/locales/app.en.json b/locales/app.en.json
@@ -129,6 +129,7 @@
   "tbx_depth_warning": "Depth must be between {{minDepth}}m and {{maxDepth}}m",
   "tbx_description_label": "Description",
   "tbx_disable_slice_btn_label": "Show full map",
+  "tbx_download_data_inside_rectangle_label": "Download data inside the rectangle",
   "tbx_download_section_output_label": "Download",
   "tbx_drawing_tools_label": "Drawing and measuring:",
   "tbx_edit_area_hint": "Edit",

diff --git a/locales/app.fr.json b/locales/app.fr.json
@@ -129,6 +129,7 @@
   "tbx_depth_warning": "La profondeur doit se situer entre {{minDepth}}m et {{maxDepth}}m",
   "tbx_description_label": "Description",
   "tbx_disable_slice_btn_label": "Afficher la carte complète",
+  "tbx_download_data_inside_rectangle_label": "",
   "tbx_download_section_output_label": "Télécharger",
   "tbx_drawing_tools_label": "Dessiner et mesurer:",
   "tbx_edit_area_hint": "Éditer",

diff --git a/locales/app.it.json b/locales/app.it.json
@@ -129,6 +129,7 @@
   "tbx_depth_warning": "",
   "tbx_description_label": "",
   "tbx_disable_slice_btn_label": "",
+  "tbx_download_data_inside_rectangle_label": "",
   "tbx_download_section_output_label": "",
   "tbx_drawing_tools_label": "",
   "tbx_edit_area_hint": "",

diff --git a/src/toolbox/areaOfInterestTemplate.js b/src/toolbox/areaOfInterestTemplate.js
@@ -18,6 +18,7 @@ export default function getTemplate() {
                 data-position="top left"
                 @click=${this.onAddAreaClick_.bind(this, 'point')}>
             <i class="map marker alternate icon"></i>
+        </button>
         <button class="ui button"
                 data-tooltip=${i18next.t('tbx_add_line_btn_label')}
                 data-variation="mini"
@@ -69,6 +70,58 @@ export default function getTemplate() {
   `;
 }
 
+function createButtonsFields(i) {
+  return html`
+  <div class="ngm-btns-field">
+    <div class="ui tiny fluid compact buttons ngm-aoi-buttons">
+        <button
+        class="ui button"
+        @click=${this.showAreaInfo.bind(this, i)}
+        data-tooltip=${i18next.t('tbx_info_btn_hint')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="info circle icon"></i></button>
+        <button
+        class="ui button"
+        @click=${this.flyToArea.bind(this, i.id)}
+        data-tooltip=${i18next.t('tbx_fly_to_btn_hint')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="search plus icon"></i></button>
+        <button
+        class="ui button"
+        @click=${this.editAreaPosition.bind(this, i.id)}
+        data-tooltip=${i18next.t('tbx_edit_area_hint')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="pen icon"></i></button>
+        <button
+        class="ui button"
+        @click=${this.updateEntityVolume.bind(this, i.id, true)}
+        ?hidden=${i.type === 'point' || i.volumeShowed}
+        data-tooltip=${i18next.t('tbx_show_volume_btn_label')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="${this.getIconClass.call(this, i.id, true)}"></i></button>
+        <button
+        class="ui button"
+        @click=${this.hideVolume.bind(this, i.id)}
+        ?hidden=${i.type === 'point' || !i.volumeShowed}
+        data-tooltip=${i18next.t('tbx_hide_volume_btn_label')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="${this.getIconClass.call(this, i.id, true)}"></i></button>
+        <button
+        class="ui button"
+        @click=${this.onRemoveEntityClick_.bind(this, i.id)}
+        data-tooltip=${i18next.t('tbx_remove_btn_hint')}
+        data-position="top center"
+        data-variation="tiny"
+        ><i class="trash alternate outline icon"></i></button>
+    </div>
+</div>`;
+}
+
 function aoiListTemplate() {
   return this.entitiesList_.map((i, index) =>
     html`
@@ -81,86 +134,44 @@ function aoiListTemplate() {
             </div>
         </div>
         <div class="content ngm-aoi-content">
-            <div class="ngm-btns-field">
-                <div class="ui tiny fluid compact buttons ngm-aoi-buttons">
-                    <button
-                    class="ui button"
-                    @click=${this.showAreaInfo.bind(this, i)}
-                    data-tooltip=${i18next.t('tbx_info_btn_hint')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="info circle icon"></i></button>
-                    <button
-                    class="ui button"
-                    @click=${this.flyToArea.bind(this, i.id)}
-                    data-tooltip=${i18next.t('tbx_fly_to_btn_hint')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="search plus icon"></i></button>
-                    <button
-                    class="ui button"
-                    @click=${this.editAreaPosition.bind(this, i.id)}
-                    data-tooltip=${i18next.t('tbx_edit_area_hint')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="pen icon"></i></button>
-                    <button
-                    class="ui button"
-                    @click=${this.updateEntityVolume.bind(this, i.id, true)}
-                    ?hidden=${i.type === 'point' || i.volumeShowed}
-                    data-tooltip=${i18next.t('tbx_show_volume_btn_label')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="${this.getIconClass.call(this, i.id, true)}"></i></button>
-                    <button
-                    class="ui button"
-                    @click=${this.hideVolume.bind(this, i.id)}
-                    ?hidden=${i.type === 'point' || !i.volumeShowed}
-                    data-tooltip=${i18next.t('tbx_hide_volume_btn_label')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="${this.getIconClass.call(this, i.id, true)}"></i></button>
-                    <button class="ui button"
-                    data-tooltip=${i18next.t('tbx_download_hint')}
-                    data-position="top left"
-                    data-variation="mini"
-                    @click=${() => {
+            ${createButtonsFields.call(this, i)}
 
-                      const rectangle = this.selectedArea_.polygon.hierarchy.getValue().positions.map(cartesianToDegrees);
-                      rectangle.pop();
-                      console.log('hey', rectangle);
-                      const bbox = coordinatesToBbox(rectangle);
-                      console.log('hey', bbox);
-                      this.dispatchEvent(new CustomEvent('downloadActiveData', {
-                        detail: {
-                          bbox4326: bbox
-                        }
-                      }));
-                    }
-                    }>
-                    <i class="download icon"></i>
-                    </button>
-                    <button
-                    class="ui button"
-                    @click=${this.onRemoveEntityClick_.bind(this, i.id)}
-                    data-tooltip=${i18next.t('tbx_remove_btn_hint')}
-                    data-position="top center"
-                    data-variation="tiny"
-                    ><i class="trash alternate outline icon"></i></button>
-                </div>
-            </div>
             ${i.type !== 'polygon' ?
-      html`
+            html`
                     <ngm-gst-interaction
                         .viewer=${this.viewer}
                         .positions=${i.positions}
                         .geometryType=${i.type}
                         .parentElement=${this}>
-                    </ngm-gst-interaction>
-                ` : ''}
+                    </ngm-gst-interaction>`
+            : ''}
             ${i.type === 'line' ?
-      html`<ngm-toolbox-slicer .slicer=${this.slicer} .positions=${i.positions}></ngm-toolbox-slicer>` : ''}
+            html`<ngm-toolbox-slicer .slicer=${this.slicer} .positions=${i.positions}></ngm-toolbox-slicer>`
+            : ''}
+            ${i.type === 'rectangle' ?
+            html `
+              <div class="ui tiny buttons">
+              <button class="ui button"
+                data-position="top left"
+                data-variation="mini"
+                @click=${() => {
+                  const rectangle = i.positions.map(cartesianToDegrees);
+                  rectangle.pop();
+                  const bbox = coordinatesToBbox(rectangle);
+                  this.dispatchEvent(new CustomEvent('downloadActiveData', {
+                    detail: {
+                      bbox4326: bbox
+                    }
+                  }));
+                }
+                }>
+                ${i18next.t('tbx_download_data_inside_rectangle_label')}
+              </button>
+            </div>
+            `
+            : ''}
         </div>
+
         <div class="ngm-aoi-edit"  ?hidden=${!this.draw_.entityForEdit || this.draw_.entityForEdit.id !== i.id}>
             <div class="ui mini basic fluid buttons ngm-aoi-tooltip-container">
                 <button class="ui button basic primary"