Started translating metadata

package.json

@@ -31,7 +31,8 @@
   "license": "ISC",
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
-    "@radiantearth/stac-fields": "1.0.0-beta.19",
+    "@musement/iso-duration": "^1.0.0",
+    "@radiantearth/stac-fields": "1.0.0-beta.20",
     "@radiantearth/stac-migrate": "~1.2.0",
     "axios": "^1.2.0",
     "bootstrap-vue": "^2.21.2",

src/StacBrowser.vue

@@ -49,6 +49,9 @@ import STAC from './models/stac';
 import Utils from './utils';
 import URI from 'urijs';
 
+import I18N from '@radiantearth/stac-fields/I18N';
+import { translateFields } from './i18n';
+
 Vue.use(Clipboard);
 
 Vue.use(AlertPlugin);
@@ -139,7 +142,13 @@ export default {
       immediate: true,
       async handler (locale) {
         this.$root.$i18n.locale = locale;
-        require(`./locales/${locale}/datepicker.js`);
+
+        // require(`./locales/${locale}/datepicker`);
+        // require(`./locales/${locale}/duration`);
+
+        // Update stac-fields
+        I18N.locales = [locale];
+        I18N.translate = translateFields;
 
         if (this.data instanceof STAC) {
           let link = this.data.getLocaleLink(locale, this.fallbackLocaleFromVueX);

src/components/Links.vue

@@ -25,6 +25,7 @@ import Fields from '@radiantearth/stac-fields/fields.json';
 import { ogcRelPrefix } from '../rels';
 import Utils from '../utils';
 import { formatKey } from '@radiantearth/stac-fields/helper';
+import { translateFields } from '../i18n';
 
 
 export default {
@@ -68,7 +69,7 @@ export default {
     formatRel(rel) {
       let lc = typeof rel === 'string' ? rel.toLowerCase() : "";
       if (lc in Fields.links.rel.mapping) {
-        return Fields.links.rel.mapping[lc];
+        return translateFields(Fields.links.rel.mapping[lc]);
       }
       else {
         if (rel.startsWith(ogcRelPrefix)) {

src/components/Metadata.vue

@@ -10,6 +10,8 @@
 <script>
 import { formatAsset, formatCollection, formatGrouped, formatItemProperties, formatLink, formatProvider, formatSummaries } from '@radiantearth/stac-fields';
 import MetadataGroup from './metadata/MetadataGroup.vue';
+import { isoDuration } from '@musement/iso-duration';
+import { mapState } from 'vuex';
 
 export default {
     name: "Metadata",
@@ -38,8 +40,33 @@ export default {
             default: null
         }
     },
+    data() {
+        return {
+            formattedData: []
+        };
+    },
     computed: {
-        formattedData() {
+        ...mapState(['locale']),
+    },
+    watch: {
+        locale: {
+            immediate: true,
+            async handler (locale) {
+                if (typeof locale !== 'string') {
+                    return;
+                }
+                
+                // Update durations (for stac-fields)
+                const phrases = await import(`../locales/${locale}/duration.js`);
+                isoDuration.setLocales({en: phrases.default});
+
+                // Format the data again to update translations
+                this.formattedData = this.formatData();
+            }
+        }
+    },
+    methods: {
+        formatData() {
             // Filter all fields as given in ignoreFields and also 
             // ignore fields starting with an underscore which is likely originating from the STAC class
             let filter = key => !key.startsWith('_') && !this.ignoreFields.includes(key);
@@ -66,7 +93,7 @@ export default {
                             core.push(summaryGroup);
                         }
                     });
-                    return core.sort((a,b) => a.label.localeCompare(b.label));
+                    return core.sort((a,b) => a.label.localeCompare(b.label, [this.locale]));
                 }
                 default:
                     return formatGrouped(this.context, this.data, this.type, filter);

src/i18n.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import CONFIG from './config';
+import {default as Fields} from '@radiantearth/stac-fields/I18N';
 
 Vue.use(VueI18n);
 
@@ -12,6 +13,7 @@ function loadLocaleMessages () {
     if (CONFIG.locale == locale || CONFIG.fallbackLocale == locale) {
       messages[locale] = require(`./locales/${locale}/texts.json`);
       messages[locale]['custom'] = require(`./locales/${locale}/custom.json`);
+      messages[locale]['fields'] = require(`./locales/${locale}/fields.json`);
     }
     else {
       messages[locale] = {};
@@ -28,5 +30,15 @@ const i18n = new VueI18n({
   fallbackLocale: CONFIG.fallbackLocale,
   messages: loadLocaleMessages()
 });
-
 export default i18n;
+
+export function translateFields(value, vars = null) {
+  if (typeof value !== 'string' || value.length === 0) {
+    return value;
+  }
+  let key = `fields.${value}`;
+  if (i18n.te(key)) {
+    return i18n.t(key, null, vars);
+  }
+  return Fields.format(value, vars);
+}

src/locales/de/duration.js

@@ -0,0 +1,2 @@
+import { de as locale } from '@musement/iso-duration';
+export default locale;

src/locales/de/fields.json

@@ -0,0 +1,69 @@
+{
+  "Internationalization / Localization": "Internationalisierung / Lokalisierung",
+  "Current Language": "Aktive Sprache",
+  "Available Languages": "Verfügbare Sprachen",
+  "About": "Über...",
+  "Alternative representation": "Andere Varianten",
+  "Time of data": "Zeit der Daten",
+  "n/a": "n.v.",
+  "none": "keine",
+  "Hashing algorithm:": "Hash-Code-Algorithmus:",
+  "Until {0}": "Bis {0}",
+  "{0} until present": "{0} bis jetzt",
+
+  "German": "Deutsch",
+  "English": "Englisch",
+  "English (US)": "Englisch (USA)",
+
+  "8-bit integer": "8-Bit-Ganzzahl",
+  "16-bit integer": "16-Bit-Ganzzahl",
+  "32-bit integer": "32-Bit-Ganzzahl",
+  "64-bit integer": "64-Bit-Ganzzahl",
+  "unsigned 8-bit integer": "Vorzeichenlose 8-Bit-Ganzzahl",
+  "unsigned 16-bit integer": "Vorzeichenlose 16-Bit-Ganzzahl",
+  "unsigned 32-bit integer": "Vorzeichenlose 32-Bit-Ganzzahl",
+  "unsigned 64-bit integer": "Vorzeichenlose 64-Bit-Ganzzahl",
+  "16-bit float": "16-Bit-Gleitkommazahl",
+  "32-bit float": "32-Bit-Gleitkommazahl",
+  "64-bit float": "64-Bit-Gleitkommazahl",
+  "16-bit complex integer": "Komplexe 16-Bit-Ganzzahl",
+  "32-bit complex integer": "Komplexe 32-Bit-Ganzzahl",
+  "32-bit complex float": "Komplexe 32-Bit-Gleitkommazahl",
+  "64-bit complex float": "Komplexe 64-Bit-Gleitkommazahl",
+  "non-standard": "nicht standardisiert",
+
+  "MGRS": "UTM",
+  "Military Grid Reference System": "UTM-Referenzsystem",
+  "UTM Zone": "UTM-Zone",
+  "Latitude Band": "Breitengradband",
+  "Square Identifier": "Quadrat-Kennung",
+  "Easting": "Ostrichtung",
+  "Northing": "Nordrichtung",
+  "MODIS Sinusoidal Tile Grid": "MODIS Sinusförmiges Kachelgitter",
+  "Horizontal": "Horizontal",
+  "Vertical": "Vertikal",
+  "WRS-1": "WRS-1",
+  "Worldwide Reference System 1": "Weltweites Referenzsystem 1",
+  "WRS-2": "WRS-2",
+  "Worldwide Reference System 2": "Weltweites Referenzsystem 2",
+  "Path": "Pfad",
+  "Row": "Reihe",
+  "DOQ": "DOQ",
+  "Digital Orthophoto Quadrangle": "Digitales-Orthofoto-Viereck",
+  "Quadrangle": "Viereck",
+  "DOQQ": "DOQQ",
+  "Digital Orthophoto Quarter Quadrangle": "Digitales-Orthofoto-Viertel-Viereck",
+  "North": "Nord",
+  "East": "Ost",
+  "South": "Süd",
+  "West": "West",
+  "Quarter": "Viertel",
+  "Maxar ARD Tile Grid": "Maxar-ARD-Kachelgitter",
+  "Quadkey": "Quadkey",
+  "EASE-DGGS": "EASE-DGGS",
+  "Level": "Stufe",
+  "Level 0 row cell": "Stufe-0-Zellenreihe",
+  "Level 0 column cell": "Stufe-0-Zellenspalte",
+  "Fraction of level {i} row cell": "Bruchteil der Stufe-{i}-Zellenreihe",
+  "Fraction of level {i} column cell": "Bruchteil der Stufe-{i}-Zellenspalte"
+}

src/locales/de/texts.json

@@ -17,7 +17,7 @@
       "generic": "Herunterladen",
       "withSource": "Herunterladen von {source}"
     },
-    "inItems": "Datei in Unterlementen | Dateien in Unterelementen",
+    "inItems": "Datei in Unterelementen | Dateien in Unterelementen",
     "role": {
       "data": "Daten",
       "metadata": "Metadaten"
@@ -87,8 +87,6 @@
     "unauthorized": "Der Anfrage fehlen die Anmeldedaten, bspw. ein API-Schlüssel. Bitte geben Sie Ihre Anmeldedaten an und versuchen Sie es erneut."
   },
   "featureExperimental": "Diese Funktion ist noch experimentell und kann unerwartete Ergebnisse verursachen!",
-  "fields": {
-  },
   "fullscreen": {
     "exit": "Verlasse den Vollbild-Modus",
     "show": "Zeige im Vollbild-Modus"

src/locales/en/duration.js

@@ -0,0 +1,32 @@
+// A. Either re-use phrases from iso-duration...
+import { en as locale } from '@musement/iso-duration';
+
+// B. ... or define your own based on https://github.com/musement/iso-duration
+/*
+const locale = {
+  years(c) {
+    return "year" + (c === 1 ? "" : "s");
+  },
+  months(c) {
+    return "month" + (c === 1 ? "" : "s");
+  },
+  weeks(c) {
+    return "week" + (c === 1 ? "" : "s");
+  },
+  days(c) {
+    return "day" + (c === 1 ? "" : "s");
+  },
+  hours(c) {
+    return "hour" + (c === 1 ? "" : "s");
+  },
+  minutes(c) {
+    return "minute" + (c === 1 ? "" : "s");
+  },
+  seconds(c) {
+    return "second" + (c === 1 ? "" : "s");
+  },
+  decimal: ".",
+};
+*/
+
+export default locale;

src/locales/en/fields.json

@@ -0,0 +1,2 @@
+{
+}

src/locales/en/texts.json

@@ -87,8 +87,6 @@
     "unauthorized": "The request lacks credentials, e.g. an API token. Please provide your credentials and try again."
   },
   "featureExperimental": "This feature is still experimental and may give unexpected results!",
-  "fields": {
-  },
   "fullscreen": {
     "exit": "Exit Fullscreen",
     "show": "View Fullscreen"

src/locales/fr/duration.js

@@ -0,0 +1,2 @@
+import { fr as locale } from '@musement/iso-duration';
+export default locale;

src/locales/fr/fields.json

@@ -0,0 +1,2 @@
+{
+}

src/locales/fr/texts.json

@@ -87,8 +87,6 @@
     "unauthorized": "La requête requiert des informations d'authentification, comme par exemple un jeton API. Veuillez fournir vos informations d'authentification et réessayer"
   },
   "featureExperimental": "Cette fonctionnalité est encore expérimentale et peut donner des résultats inattendus!",
-  "fields": {
-  },
   "fullscreen": {
     "exit": "Quitter le mode plein écran",
     "show": "Voir en plein écran"

src/store/index.js

@@ -638,6 +638,7 @@ function getStore(config, router) {
         if (Utils.size(i18n.messages[locale]) <= 1) { // languages key is already set thus 1 and not 0
           const messages = (await import(`../locales/${locale}/texts.json`)).default;
           messages['custom'] = (await import(`../locales/${locale}/custom.json`)).default;
+          messages['fields'] = (await import(`../locales/${locale}/fields.json`)).default;
           i18n.mergeLocaleMessage(locale, messages);
         }
 

src/utils.js

@@ -287,7 +287,7 @@ export default class Utils {
         return `DOI ${path}`;
       }
       else {
-        return `${file} at ${auth}`;
+        return `${file} (${auth})`;
       }
     }
     else if (file && !commonFileNames.includes(file)) {