Patches

app/api/src/crud/crud_customization.py

@@ -54,6 +54,7 @@ async def build_layer_category_obj(self, db: AsyncSession, layer_name: str):
             "access_token",
             "max_resolution",
             "max_resolution",
+            "doc_url"
         ]:
             if getattr(layer, key) is not None:
                 layer_attributes[key] = getattr(layer, key)

app/client/src/components/indicators/Indicators.vue

@@ -19,16 +19,38 @@
                 layer.get('showOptions') === true
             }"
           >
-            <v-expansion-panel-header expand-icon="" v-slot="{}">
-              <v-layout row class="pl-1" wrap align-center>
+            <v-expansion-panel-header
+              expand-icon=""
+              v-slot="{}"
+              class="pl-0 ml-0"
+            >
+              <v-layout row class="pl-0 ml-0" wrap align-center>
+                <v-flex class="checkbox" xs1>
+                  <v-tooltip top>
+                    <template v-slot:activator="{ on }">
+                      <v-btn
+                        v-on="on"
+                        @click.stop="openDocumentation(layer)"
+                        v-show="layer.get('docUrl')"
+                        class="ma-0 pb-0"
+                        small
+                        text
+                        icon
+                      >
+                        <i class="fas fa-info"></i>
+                      </v-btn>
+                    </template>
+                    <span>{{ $t(`map.tooltips.openDocumentation`) }}</span>
+                  </v-tooltip>
+                </v-flex>
                 <v-flex class="checkbox" xs1>
                   <v-checkbox
                     :color="appColor.secondary"
                     :input-value="layer.getVisible()"
                     @change="toggleLayerVisibility(layer)"
                   ></v-checkbox>
                 </v-flex>
-                <v-flex xs10 class="light-text">
+                <v-flex xs9 class="light-text">
                   <h4 class="pl-2">
                     {{ translate("layerName", layer.get("name")) }}
                   </h4>
@@ -129,6 +151,12 @@
         :styleDialogStatus="styleDialogStatus"
       ></StyleDialog>
     </span>
+    <documentation-dialog
+      :color="appColor.primary"
+      :visible="showDocumentationDialog"
+      :item="selectedDocumentationLayer"
+      @close="showDocumentationDialog = false"
+    ></documentation-dialog>
     <span v-if="timePickerDialogStatus">
       <TimePicker
         :status="timePickerDialogStatus"
@@ -152,12 +180,14 @@ import TimePicker from "./TimePicker.vue";
 import InLegend from "../viewer/ol/controls/InLegend.vue";
 import ApiService from "../../services/api.service";
 import { GET_USER_CUSTOM_DATA } from "../../store/actions.type";
+import DocumentationDialog from "../other/DocumentationDialog.vue";
 export default {
   mixins: [Mapable, Legend, LayerTree],
   components: {
     InLegend,
     StyleDialog,
-    TimePicker
+    TimePicker,
+    DocumentationDialog
   },
   data: () => ({
     indicatorLayers: [],
@@ -174,7 +204,9 @@ export default {
     currentItem: null,
     styleDialogKey: 0,
     styleDialogStatus: false,
-    timePickerDialogStatus: false
+    timePickerDialogStatus: false,
+    showDocumentationDialog: false,
+    selectedDocumentationLayer: null
   }),
   mounted() {
     EventBus.$on("updateStyleDialogStatusForLayerOrder", value => {
@@ -391,6 +423,10 @@ export default {
       } else {
         return false;
       }
+    },
+    openDocumentation(layer) {
+      this.showDocumentationDialog = true;
+      this.selectedDocumentationLayer = layer;
     }
   },
   watch: {

app/client/src/components/isochrones/IsochroneThematicData.vue

@@ -462,7 +462,8 @@ export default {
                     pois: amenity ? this.$t(`pois.${amenity}`) : amenity
                   };
                   let value = numberSeparator(
-                    this.getString(parseInt(sumPois[amenity]))
+                    this.getString(parseInt(sumPois[amenity])),
+                    this.$i18n.locale
                   );
                   obj[`isochrone-${calculation.id}`] = value || "-";
                   if (poisObj[amenity]) {

app/client/src/components/other/DocumentationDialog.vue

@@ -32,7 +32,7 @@
               <iframe
                 @load="isLoading = false"
                 scrolling="yes"
-                :src="item.mapLayer.get('docUrl')"
+                :src="getDocUrl"
               >
               </iframe></div
           ></vue-scroll>
@@ -62,12 +62,23 @@ export default {
           this.$emit("close");
         }
       }
+    },
+    getDocUrl() {
+      //DE:  plan4better.de/docs/heatmap-connectivity
+      //EN:  plan4better.de/en/docs/heatmap-connectivity
+      let docUrl = this.item.get("docUrl");
+      if (docUrl.includes("/en/docs") && this.$i18n.locale === "de") {
+        docUrl = docUrl.replace("/en/docs", "/docs");
+      } else if (!docUrl.includes("/en/docs") && this.$i18n.locale === "en") {
+        docUrl = docUrl.replace("/docs", "/en/docs");
+      }
+      return docUrl;
     }
   },
   methods: {
     openDocInNetTab() {
       if (!this.item) return;
-      const url = this.item.mapLayer.get("docUrl");
+      const url = this.getDocUrl;
       if (url) {
         window.open(url, "_blank");
       }
@@ -83,6 +94,7 @@ export default {
   overflow: hidden;
   margin: 15px auto;
   max-width: 800px;
+  height: 530px;
 }
 
 iframe {

app/client/src/factory/layer.js

@@ -57,7 +57,8 @@ export const LayerFactory = {
       layerOrderKey: 1,
       queryable: lConf.queryable,
       displayInLayerList: lConf.display_in_layer_list || true,
-      legendGraphicUrls: lConf.legend_urls || null
+      legendGraphicUrls: lConf.legend_urls || null,
+      docUrl: lConf.doc_url || null
     };
     if (lConf.min_resolution) {
       lOpts.minResolution = lConf.min_resolution;