Merge pull request #1353 from kaminderpal/1309-datatable-language

fix(DataTable): datatable language Closes #1309 (#1353)
Canadian-Geospatial-Platform · Oct 4, 2023 · a80ae30 · a80ae30
2 parents a4e8ff6 + fcd7851
commit a80ae30
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 35 deletions.
diff --git a/packages/geoview-core/public/configs/raw-data-table.json b/packages/geoview-core/public/configs/raw-data-table.json
@@ -18,10 +18,12 @@
       {
         "geoviewLayerId": "esriFeatureLYR4",
         "geoviewLayerName": {
-          "en": "Water quality at monitoring sites"
+          "en": "Water quality at monitoring sites",
+          "fr": "Water quality at monitoring sites"
         },
         "metadataAccessPath": {
-          "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer"
+          "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer",
+          "fr": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer"
         },
         "geoviewLayerType": "esriFeature",
         "initialSettings": {
@@ -37,10 +39,12 @@
         "geoviewLayerId": "historical-flood",
         "serviceDateFormat": "yyyy/mm/ddThh:mm:ssz",
         "geoviewLayerName": {
-          "en": "Historical Flood Events (HFE)"
+          "en": "Historical Flood Events (HFE)",
+          "fr": "Historical Flood Events (HFE)"
         },
         "metadataAccessPath": {
-          "en": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer"
+          "en": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer",
+          "fr": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer"
         },
         "geoviewLayerType": "esriFeature",
         "listOfLayerEntryConfig": [
@@ -52,10 +56,12 @@
       {
         "geoviewLayerId": "geojsonLYR5",
         "geoviewLayerName": {
-          "en": "GeoJSON Sample"
+          "en": "GeoJSON Sample",
+          "fr": "GeoJSON Sample"
         },
         "metadataAccessPath": {
-          "en": "./geojson/metadata.json"
+          "en": "./geojson/metadata.json",
+          "fr": "./geojson/metadata.json"
         },
         "geoviewLayerType": "GeoJSON",
         "initialSettings": {
@@ -65,20 +71,23 @@
           {
             "layerId": "polygons.json",
             "layerName": {
-              "en": "Polygons"
+              "en": "Polygons",
+              "fr": "Polygons"
             }
           },
           {
             "layerId": "lines.json",
             "layerName": {
-              "en": "Lines"
+              "en": "Lines",
+              "fr": "Lines"
             }
           },
           {
             "entryType": "group",
             "layerId": "point-feature-group",
             "layerName": {
-              "en": "point-feature-group"
+              "en": "point-feature-group",
+              "fr": "point-feature-group"
             },
             "listOfLayerEntryConfig": [
               {
@@ -87,7 +96,8 @@
                   "visible": "no"
                 },
                 "layerName": {
-                  "en": "Icons"
+                  "en": "Icons",
+                  "fr": "Icons"
                 }
               },
               {
@@ -96,7 +106,8 @@
                   "visible": "always"
                 },
                 "layerName": {
-                  "en": "Points"
+                  "en": "Points",
+                  "fr": "Points"
                 }
               }
             ]
@@ -105,7 +116,7 @@
       }
     ]
   },
-  "theme": "dark",
+  "theme": "light",
   "navBar": [
     "zoom",
     "fullscreen",
@@ -117,9 +128,12 @@
     "north-arrow",
     "overview-map"
   ],
-  "corePackages": [],
+  "corePackages": [
+    "footer-panel"
+  ],
   "externalPackages": [],
   "suportedLanguages": [
+    "fr",
     "en"
   ]
 }
diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
@@ -129,6 +129,10 @@
     "jsonExportBtn": "Download GeoJSON",
     "downloadAsCSV": "Download as CSV",
     "filterMap": "Filter Map",
-    "stopFilterMap": "Stop Filter Map"
+    "stopFilterMap": "Stop Filter Map",
+    "leftPanelHeading": "Available Categories",
+    "rightPanelHeading": "Selected Category",
+    "rowsSelected": "{rowsSelected} of {totalRows} row(s) selected",
+    "rowsFiltered": "{rowsFiltered} of {totalRows} row(s) filtered"
   }
 }
diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
@@ -129,6 +129,10 @@
     "jsonExportBtn": "Télécharger GeoJSON",
     "downloadAsCSV": "Télécharger la CSV",
     "filterMap": "Filtrer la carte",
-    "stopFilterMap": "Filtrer la carte d'arrêt"
+    "stopFilterMap": "Filtrer la carte d'arrêt",
+    "leftPanelHeading": "Tables disponible",
+    "rightPanelHeading": "Table sélectionnée",
+    "rowsSelected": "{rowsSelected} sur {totalRows} ligne(s) sélectionnée(s)",
+    "rowsFiltered": "{rowsFiltered} sur {totalRows} ligne(s) filtrée(s)"
   }
 }
diff --git a/packages/geoview-core/public/templates/raw-data-table.html b/packages/geoview-core/public/templates/raw-data-table.html
@@ -47,37 +47,78 @@ <h4 id="HUC1">1. Default Configuration</h4>
   <div>
     <div id="dataTable" style="margin: 2rem 0"></div>
   </div>
+  <div id="mapWM2" class="llwp-map" data-lang="fr" style="margin: 2rem 0"
+    data-config-url="./configs/raw-data-table.json"></div>
 
+  <div>
+    <div id="frDataTable" style="margin: 2rem 0"></div>
+  </div>
 
   <script src="codedoc.js"></script>
   <script>
     // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
     cgpv.init(function () {
       console.log('api is ready');
       const { api, ui, createRoot } = cgpv;
+      const mapId1 = "mapWM1";
+      const mapId2 = "mapWM2";
 
       //create snippets
       createConfigSnippet();
       createCodeSnippet();
 
       renderDataTableFromMap = async () => {
+        // import footerTabs from the core for the current map
+        const { footerTabs: ft1 } = api.maps[mapId1];
         console.time("renderDataTableFromMap")
         const root = createRoot(document.getElementById("dataTable"));
 
         root.render("Data is loading...")
 
-        const layerId = Object.keys(api.maps['mapWM1'].layer.geoviewLayers)[2];
-        const data = await cgpv.api.maps['mapWM1'].dataTable.createDataPanel({ layerId, mapId: "mapWM1" })
+        const layerId = Object.keys(api.maps[mapId1].layer.geoviewLayers)[2];
+        const data = await cgpv.api.maps[mapId1].dataTable.createDataPanel({ layerId, mapId: mapId1 })
+
+        // create new tab and add the LegendComponent to the footer tab
+        ft1.createFooterTab({
+          value: 3,
+          label: 'Data Table',
+          content: () => data,
+        });
 
-        root.render(data)
+        root.render("")
 
         console.timeEnd("renderDataTableFromMap")
       };
 
+      renderFrenchDataTableFromMap = async () => {
+        // import footerTabs from the core for the current map
+        const { footerTabs: ft1 } = api.maps[mapId2];
+        console.time("renderFrDataTableFromMap")
+        const root = createRoot(document.getElementById("frDataTable"));
+
+        root.render("Les données sont en cours de chargement...")
+
+        const layerId = Object.keys(api.maps[mapId2].layer.geoviewLayers)[2];
+        const data = await cgpv.api.maps[mapId2].dataTable.createDataPanel({ layerId, mapId: mapId2 })
+
+        // create new tab and add the LegendComponent to the footer tab
+        ft1.createFooterTab({
+          value: 3,
+          label: 'Nouveau Données',
+          content: () => data,
+        });
+        root.render("")
+
+        console.timeEnd("renderFrDataTableFromMap")
+      }
+
       cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => {
-        setTimeout(() => { renderDataTableFromMap(); }, 2000)
+        renderDataTableFromMap();
       }, 'mapWM1');
 
+      cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => {
+        renderFrenchDataTableFromMap();
+      }, 'mapWM2');
     });
   </script>
 </body>

diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { Projection } from 'ol/proj';
+import { useTranslation } from 'react-i18next';
 import {
   Box,
   Grid,
@@ -51,6 +52,7 @@ const sxClasses = {
  */
 
 export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layerIds }: DatapanelProps) {
+  const { t } = useTranslation();
   const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
   const [isLoading, setisLoading] = useState(false);
 
@@ -114,13 +116,13 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer
       <Grid container spacing={2} sx={sxClasses.gridContainer}>
         <Grid item xs={3}>
           <Typography component="p" sx={sxClasses.headline}>
-            Available Categories
+            {t('dataTable.leftPanelHeading')}
           </Typography>
         </Grid>
 
         <Grid item xs={9}>
           <Typography component="p" sx={sxClasses.headline}>
-            Selected Category
+            {t('dataTable.rightPanelHeading')}
           </Typography>
         </Grid>
       </Grid>