Translations

lib/ui/layers/panels/filter.mjs

@@ -5,11 +5,15 @@ mapp.utils.merge(mapp.dictionaries, {
     layer_filter_clear_all: 'Clear all filters',
     layer_filter_greater_than: 'Greater than',
     layer_filter_less_than: 'Less than',
+    layer_filter_set_filter: 'Set filter',
   },
   de: {
     layer_filter_header: 'Filter',
     layer_filter_select: 'Filter Auswahl',
-    layer_filter_clear_all: 'Entferne alle Filter'
+    layer_filter_clear_all: 'Entferne alle Filter',
+    layer_filter_greater_than: 'Mehr als',
+    layer_filter_less_than: 'Weniger als',
+    layer_filter_set_filter: 'Filter einstellen',
   },
   cn: {
     layer_filter_header: '筛选',

lib/ui/layers/view.mjs

@@ -2,10 +2,12 @@ mapp.utils.merge(mapp.dictionaries, {
   en: {
     layer_zoom_to_extent: 'Zoom to filtered layer extent',
     layer_visibility: 'Toggle visibility',
+    zoom_to: 'Zoom to',
   },
   de: {
     layer_zoom_to_extent: 'Zoom zum Ausmaß des gefilterten Datensatzes',
     layer_visibility: 'Umschalten der Ansicht',
+    zoom_to: 'Heranzoomen',
   },
   cn: {
     layer_zoom_to_extent: '缩放至相应筛选范围',
@@ -113,7 +115,7 @@ export default (layer) => {
   }
 
   // Create a div for the magnifying glass icon
-  const zoomButton = mapp.utils.html.node`<button class="mask-icon search" title="Zoom To" data-id="zoom-to">`
+  const zoomButton = mapp.utils.html.node`<button class="mask-icon search" title="${mapp.dictionary.zoom_to}" data-id="zoom-to">`
 
   // Add an event listener to the magnifying glass icon to show the zoom level button when clicked
   zoomButton.addEventListener('click', () => {

lib/ui/locations/entries/cloudinary.mjs

@@ -10,6 +10,13 @@ const onload = {
   documents: docLoad
 }
 
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    image_upload_failed: 'Image upload failed.',
+    document_upload_failed: 'Document upload failed.',
+  }
+})
+
 export default entry => types[entry.type](entry)
 
 function image(entry) {
@@ -178,7 +185,7 @@ function imageLoad(e, entry) {
 
     if (!response || response.error) {
       const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-      const errorMessage = `Cloudinary Image upload failed!${errorDetail}`;
+      const errorMessage = `${mapp.dictionary.image_upload_failed}${errorDetail}`;
       alert(errorMessage);
       return;
     }
@@ -216,7 +223,7 @@ async function docLoad(e, entry) {
 
   if (!response || response.error) {
     const errorDetail = response?.error?.message ? ` Error: ${response.error.message}` : '';
-    const errorMessage = `Cloudinary document upload failed!${errorDetail}`;
+    const errorMessage = `${mapp.dictionary.document_upload_failed}${errorDetail}`;
     alert(errorMessage);
     return;
   }

lib/ui/locations/entries/geometry.mjs

@@ -1,3 +1,13 @@
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    delete_geometry: 'Delete Geometry',
+  },
+  de: {
+    delete_geometry: 'Geometrie entfernen',
+  }
+})
+
+
 export default entry => {
 
   // The geometry value must be JSON.
@@ -113,7 +123,7 @@ export default entry => {
         update(entry)
       }
 
-    }}>Delete Geometry`)
+    }}>${mapp.dictionary.delete_geometry}`)
 
   const icon = entry.style && mapp.utils.html`
     ${mapp.ui.elements.legendIcon(

lib/ui/locations/entries/link.mjs

@@ -1,3 +1,14 @@
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    report: 'Report',
+    link: 'Link',
+  },
+  de: {
+    report: 'Report',
+    link: 'Link',
+  }
+})
+
 export default entry => {
 
   // Ensure that params are set for link generation
@@ -17,7 +28,7 @@ export default entry => {
     })
 
     // Assign entry.label for link text.
-    entry.label ??= entry.report.label || 'Report'
+    entry.label ??= `${entry.report.label || mapp.dictionary.report}`
     entry.icon_class ??= 'mask-icon wysiwyg'
   }
 
@@ -29,7 +40,7 @@ export default entry => {
 
   // Set default label and icon_class
   entry.icon_class ??= 'mask-icon open-in-new'
-  entry.label ??= 'Link'
+  entry.label ??=  `${mapp.dictionary.link}`
 
   // Construct href from URL + params.
   const href = entry.url + mapp.utils.paramString(entry.params)

lib/ui/locations/entries/pin.mjs

@@ -1,3 +1,12 @@
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    pin: 'Pin',
+  },
+  de: {
+    pin: 'Pin',
+  }
+})
+
 export default entry => {
 
   // Assign srid from location.layer if not implicit.
@@ -21,7 +30,7 @@ export default entry => {
   entry.location.Layers.push(entry.L)
 
   const chkbox = mapp.ui.elements.chkbox({
-    label: entry.label || 'Pin',
+    label: `entry.label || ${mapp.dictionary.pin}`,
     checked: true,//!!entry.display,
     onchange: (checked) => {
       entry.display = checked

lib/ui/locations/entries/text.mjs

@@ -1,3 +1,12 @@
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    loading: 'Loading'
+  },
+  de: {
+    loading: 'Wird geladen'
+  }  
+})
+
 export default entry => {
 
   // Short circuit if not editable without a value.
@@ -21,7 +30,7 @@ function edit(entry) {
   if (entry.edit.options) {
 
     // Create container with loading text.
-    entry.container = mapp.utils.html.node`<div>Loading...`;
+    entry.container = mapp.utils.html.node`<div>${mapp.dictionary.loading}`;
 
     // If options is an array and contains values, we can create a dropdown.
     if (entry.edit.options.length) {

lib/ui/locations/view.mjs

@@ -4,12 +4,14 @@ mapp.utils.merge(mapp.dictionaries, {
     location_save: 'Save changes to cloud',
     location_remove: 'Remove feature from selection',
     location_delete: 'Delete location',
+    location_save_changes: 'Save your changes to this location?'
   },
   de: {
     location_zoom: 'Ansicht den Lagen Geometrien anpassen',
     location_save: 'Speichern der Datenänderungen',
     location_remove: 'Lagen Auswahl aufheben',
     location_delete: 'Löschen der Lage',
+    location_save_changes: 'Ihre Änderungen an dieser Lage speichern?'
   },
   cn: {
     location_zoom: '缩放地图至目标范围',
@@ -194,7 +196,7 @@ export default location => {
 
         if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')) {
 
-          if (confirm(`Save your changes to this location?`)) {
+          if (confirm(`${mappe.dictionary.location_save_changes}`)) {
 
             await location.update()
 

lib/ui/utils/Chart.mjs

@@ -1,5 +1,11 @@
 let promise, Chart = null
 
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    fail_chartjs_load: 'Failed to load Chart.js library. Please reload the browser.'
+  }
+})
+
 async function chart(canvas, options) {
 
   // Assign promise to load ChartJS library if null.
@@ -38,7 +44,7 @@ async function chart(canvas, options) {
       })
       .catch(error => {
         console.error(error.message)
-        alert('Failed to load Chart.js library. Please reload the browser.')
+        alert(`${mapp.dictionary.fail_chartjs_load}`)
       })
 
   })

lib/ui/utils/Tabulator.mjs

@@ -1,5 +1,11 @@
 let promise, Tabulator = null
 
+mapp.utils.merge(mapp.dictionaries, {
+  en: {
+    fail_tabulator_load: 'Failed to load Tabulator library. Please reload the browser.'
+  }
+})
+
 async function tabulator() {
 
   // Create promise to load Tabulator library if null.
@@ -32,7 +38,7 @@ async function tabulator() {
       })
       .catch(error => {
         console.error(error.message)
-        alert('Failed to load Tabulator library. Please reload the browser.')
+        alert(`${mapp.dictionary.fail_tabulator_load}`)
       })
 
   })
@@ -49,7 +55,7 @@ async function tabulator() {
   const ul_parents = Table.element.querySelectorAll('.ul-parent')
 
   // Adjust fixed dropdowns on scroll.
-  ul_parents.length && Table.on("scrollHorizontal", left => {
+  ul_parents.length && Table.on('scrollHorizontal', left => {
 
     // Get the table element bounds.
     const table_bounds = Table.element.getBoundingClientRect()

lib/ui/utils/tabulatorUtils.mjs

@@ -105,7 +105,7 @@ function like(_this) {
     return mapp.utils.html.node`<span>
       <input
         type="text"
-        placeholder="Filter"
+        placeholder=${mapp.dictionary.layer_filter_header}
         oninput=${likeFilter}
         onblur=${likeFilter}>`
 
@@ -122,7 +122,7 @@ function numeric(_this) {
     const inputMin = mapp.utils.html`
       <input 
         type="number" 
-        placeholder="Min"
+        placeholder=${mapp.dictionary.layer_filter_less_than}
         oninput=${minEvent}
         onchange=${minEvent}
         onblur=${minEvent}>`
@@ -156,7 +156,7 @@ function numeric(_this) {
     const inputMax = mapp.utils.html`
       <input 
         type="number" 
-        placeholder="Max" 
+        placeholder=${mapp.dictionary.layer_filter_greater_than}
         oninput=${maxEvent}
         onchange=${maxEvent}
         onblur=${maxEvent}>`
@@ -300,7 +300,7 @@ function set(_this) {
           // Render dropdown with distinct values from response.
           mapp.utils.render(dropdown, mapp.ui.elements.dropdown({
             multi: true,
-            placeholder: headerFilterParams.placeholder || 'Set filter',
+            placeholder: headerFilterParams.placeholder || `${mapp.dictionary.layer_filter_set_filter}`,
             entries: response.map(row => ({
               title: row[field],
               option: row[field],
@@ -315,7 +315,7 @@ function set(_this) {
 
     mapp.utils.render(dropdown, mapp.ui.elements.dropdown({
       multi: true,
-      placeholder: headerFilterParams.placeholder || 'Set filter',
+      placeholder: headerFilterParams.placeholder || `${mapp.dictionary.layer_filter_set_filter}`,
       entries: headerFilterParams.options.map(option => ({
         title: option,
         option: option,

public/views/_user.html

@@ -144,6 +144,17 @@ <h1>Account admin</h1>
     // Get list of available roles from workspace.
     const rolesList = await xhrPromise(`${document.head.dataset.dir}/api/workspace/roles`)
 
+    // List of languages key values. 
+    const languagesList = {
+      "en": "English",
+      "de": "German",
+      "cn": "Chinese",
+      "pl": "Polish",
+      "ko": "Korean",
+      "fr": "French",
+      "ja": "Japanese"
+    };
+
     const params = {}
 
     // Get URL params.
@@ -246,8 +257,22 @@ <h1>Account admin</h1>
             vertAlign: 'middle',
             headerTooltip: 'Account language',
             titleFormatter: () => '<div class="xyz-icon icon-translate"></div>',
+            editor: 'list',
+            editorParams: {
+              // show the label of the language in the dropdown list
+              values: Object.keys(languagesList).map(key => ({ label: languagesList[key], value: key })),
+            },
+            cellEdited: languageEdited,
             resizable: false,
-            responsive: 2 // Hide first
+            responsive: 1,
+            formatter: (cell, formatterParams, onRendered) => {
+
+              let val = cell.getValue()
+
+              if (!val) return;
+
+              return languagesList[val];
+            }
           },
           {
             field: 'roles',
@@ -397,6 +422,14 @@ <h1>Account admin</h1>
       return editor;
     };
 
+
+    function languageEdited(e) {
+
+      if (JSON.stringify(e._cell.value) === JSON.stringify(e._cell.oldValue)) return;
+
+      xhrPromise(`${document.head.dataset.dir}/api/user/update?email=${e._cell.row.data.email}&field=language&value=${e._cell.value}`)
+    }
+
     async function cellToggle(e, cell) {
 
       const user = cell.getData();