ConservationMetrics · rudokemper · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/components/config/ConfigAlerts.vue b/components/config/ConfigAlerts.vue
@@ -4,7 +4,7 @@
       <h3>{{ $t("alerts") }} {{ $t("configuration") }}</h3>
     </div>
     <div v-for="key in keys" :key="key" class="config-field">
-      <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+      <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
       <template v-if="key === 'MAPEO_TABLE'">
         <input
           :id="`${tableName}-${key}`"
@@ -14,9 +14,9 @@
       </template>
       <template v-else-if="key === 'MAPEO_CATEGORY_IDS'">
         <component
+          v-if="isClient"
           class="tag-field"
           :is="isClient ? 'vue-tags-input' : 'div'"
-          v-if="isClient"
           v-model="tagInputs[key]"
           :tags="tags[key]"
           @tags-changed="updateTags(key, $event)"
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import { toCamelCase } from "@/src/utils.ts";
 export default {
   props: {
     tableName: String,
@@ -53,6 +54,7 @@ export default {
     };
   },
   methods: {
+    toCamelCase: toCamelCase,
     updateTags(key, newTags) {
       this.tags[key] = newTags;
       this.config[key] = newTags.map((tag) => tag.text).join(",");

diff --git a/components/config/ConfigFilters.vue b/components/config/ConfigFilters.vue
@@ -5,25 +5,21 @@
     </div>
     <div v-for="key in keys" :key="key" class="config-field">
       <template v-if="key === 'FRONT_END_FILTER_COLUMN'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
-        <input
-          :id="`${tableName}-${key}`"
-          v-model="config[key]"
-          class="input-field"
-        />
-      </template>
-      <template v-else-if="key === 'FILTER_OUT_VALUES_FROM_COLUMN'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
         />
       </template>
       <template
-        v-else-if="key === 'UNWANTED_COLUMNS' || key === 'UNWANTED_SUBSTRINGS'"
+        v-else-if="
+          key === 'FILTER_OUT_VALUES_FROM_COLUMN' ||
+          key === 'UNWANTED_COLUMNS' ||
+          key === 'UNWANTED_SUBSTRINGS'
+        "
       >
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
 
         <component
           class="tag-field"
@@ -39,6 +35,7 @@
 </template>
 
 <script>
+import { toCamelCase } from "@/src/utils.ts";
 export default {
   props: {
     tableName: String,
@@ -52,10 +49,16 @@ export default {
   data() {
     return {
       tagInputs: {
+        FILTER_OUT_VALUES_FROM_COLUMN: "",
         UNWANTED_COLUMNS: "",
         UNWANTED_SUBSTRINGS: "",
       },
       tags: {
+        FILTER_OUT_VALUES_FROM_COLUMN: this.config.FILTER_OUT_VALUES_FROM_COLUMN
+          ? this.config.FILTER_OUT_VALUES_FROM_COLUMN.split(",").map((tag) => ({
+              text: tag,
+            }))
+          : [],
         UNWANTED_COLUMNS: this.config.UNWANTED_COLUMNS
           ? this.config.UNWANTED_COLUMNS.split(",").map((tag) => ({
               text: tag,
@@ -71,6 +74,7 @@ export default {
     };
   },
   methods: {
+    toCamelCase: toCamelCase,
     updateTags(key, newTags) {
       this.tags[key] = newTags;
       this.config[key] = newTags.map((tag) => tag.text).join(",");

diff --git a/components/config/ConfigMap.vue b/components/config/ConfigMap.vue
@@ -5,27 +5,29 @@
     </div>
     <div v-for="key in keys" :key="key" class="config-field">
       <template v-if="key === 'MAPBOX_STYLE'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t("mapboxStyle") }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
           pattern="^mapbox:\/\/styles\/[^\/]+\/[^\/]+$"
+          placeholder="mapbox://styles/user/styleId"
           :title="
             $t('pleaseMatchFormat') + ': mapbox://styles/username/styleid'
           "
         />
       </template>
       <template v-if="key === 'MAPBOX_ACCESS_TOKEN'">
         <label :for="`${tableName}-${key}`"
-          >{{ $t(key) }} <span style="color: red">*</span></label
+          >{{ $t(toCamelCase(key)) }} <span style="color: red">*</span></label
         >
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
           pattern="^pk\.ey.*"
-          :title="$t('pleaseMatchFormat') + ': pk.ey... '"
+          placeholder="pk.ey…"
+          :title="$t('pleaseMatchFormat') + ': pk.ey… '"
         />
       </template>
       <template
@@ -37,7 +39,7 @@
           key === 'MAPBOX_ZOOM'
         "
       >
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
@@ -67,13 +69,13 @@
                   : key === 'MAPBOX_PITCH'
                     ? 85
                     : key === 'MAPBOX_ZOOM'
-                      ? 23
+                      ? 22
                       : 0
           "
         />
       </template>
       <template v-else-if="key === 'MAPBOX_PROJECTION'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <select
           :id="`${tableName}-${key}`"
           v-model="config[key]"
@@ -90,7 +92,7 @@
         </select>
       </template>
       <template v-else-if="key === 'MAPBOX_3D'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <label :for="`${tableName}-${key}`" class="checkbox-label">
           <input
             type="checkbox"
@@ -101,7 +103,7 @@
         </label>
       </template>
       <template v-else-if="key === 'MAP_LEGEND_LAYER_IDS'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <component
           class="tag-field"
           :is="isClient ? 'vue-tags-input' : 'div'"
@@ -112,7 +114,7 @@
         />
       </template>
       <template v-else-if="key === 'PLANET_API_KEY'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
@@ -124,6 +126,8 @@
 </template>
 
 <script>
+import { toCamelCase } from "@/src/utils.ts";
+
 export default {
   props: {
     tableName: String,
@@ -150,6 +154,7 @@ export default {
     };
   },
   methods: {
+    toCamelCase: toCamelCase,
     updateTags(key, newTags) {
       this.tags[key] = newTags;
       this.config[key] = newTags.map((tag) => tag.text).join(",");

diff --git a/components/config/ConfigMedia.vue b/components/config/ConfigMedia.vue
@@ -7,20 +7,22 @@
       <template
         v-if="key === 'MEDIA_BASE_PATH_ALERTS' && views.includes('alerts')"
       >
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
+          placeholder="https://…"
           type="url"
         />
       </template>
       <template v-else-if="key === 'MEDIA_BASE_PATH'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
+          placeholder="https://…"
           type="url"
         />
       </template>
@@ -29,12 +31,17 @@
 </template>
 
 <script>
+import { toCamelCase } from "@/src/utils.ts";
+
 export default {
   props: {
     tableName: String,
     config: Object,
     views: Array,
     keys: Array,
   },
+  methods: {
+    toCamelCase: toCamelCase,
+  },
 };
 </script>
diff --git a/components/config/ConfigOther.vue b/components/config/ConfigOther.vue
@@ -5,11 +5,12 @@
     </div>
     <div v-for="key in keys" :key="key" class="config-field">
       <template v-if="key === 'LOGO_URL'">
-        <label :for="`${tableName}-${key}`">{{ $t(key) }}</label>
+        <label :for="`${tableName}-${key}`">{{ $t(toCamelCase(key)) }}</label>
         <input
           :id="`${tableName}-${key}`"
           v-model="config[key]"
           class="input-field"
+          placeholder="https://…"
           type="url"
         />
       </template>
@@ -18,12 +19,16 @@
 </template>
 
 <script>
+import { toCamelCase } from "@/src/utils.ts";
 export default {
   props: {
     tableName: String,
     config: Object,
     views: Array,
     keys: Array,
   },
+  methods: {
+    toCamelCase: toCamelCase,
+  },
 };
 </script>
diff --git a/lang/en.json b/lang/en.json
@@ -32,6 +32,8 @@
   "enable": "Enable",
   "filtering": "Filtering",
   "filterDataByColumn": "Filter data by column",
+  "filterOutValuesFromColumn": "Which values to filter out from the column",
+  "frontEndFilterColumn": "Column to filter values from",
   "gallery": "Gallery",
   "galleryNotAvailable": "GuardianConnector Views Gallery is not available. Please activate media embedding",
   "geocoordinates": "Coordinates",
@@ -43,12 +45,27 @@
   "login": "Log in",
   "loginButton": "Sign up or log in",
   "loginError": "An error occurred while trying to log in",
+  "logoUrl": "Logo URL",
   "map": "Map",
+  "mapboxAccessToken": "Mapbox Access Token",
+  "mapboxBearing": "Map bearing (-180 to 180)",
+  "mapboxCenterLatitude": "Center latitude (-90 to 90)",
+  "mapboxCenterLongitude": "Center longitude (-180 to 180)",
+  "mapboxPitch": "Map pitch (0 to 85)",
+  "mapboxProjection": "Map projection",
+  "mapboxZoom": "Zoom level (0 to 22)",
   "mapLegend": "Map Legend",
+  "mapLegendLayerIds": "Layer IDs to show in the map legend",
+  "mapbox3d": "Do you want to enable 3D terrain?",
   "mapboxSatelliteUpTo2019": "Mapbox Satellite (up to 2019)",
   "mapboxStreets": "Mapbox Streets",
+  "mapboxStyle": "Mapbox Style",
+  "mapeoCategoryIds": "Mapeo Category IDs to show on the alerts map",
   "mapeoData": "Mapeo Data",
+  "mapeoTable": "Name of Mapeo data table",
   "media": "Media",
+  "mediaBasePath": "Base path for media",
+  "mediaBasePathAlerts": "Base path for alert images",
   "modified": "Modified",
   "monthDetected": "Month detected",
   "mostRecentAlerts": "Most recent alerts",
@@ -58,6 +75,7 @@
   "other": "Other",
   "password": "Password",
   "passwordIncorrect": "The password you entered is incorrect",
+  "planetApiKey": "Planet API Key",
   "planetMonthlyVisualBasemap": "Planet (NICFI) - monthly visual basemap",
   "pleaseMatchFormat": "Por favor, siga el formato esperado",
   "previewImagerySource": "Preview Imagery Source",
@@ -80,6 +98,8 @@
   "territory": "Territory",
   "type": "Type",
   "typeOfAlerts": "Type of alerts",
+  "unwantedColumns": "Unwanted columns",
+  "unwantedSubstrings": "Unwanted substrings",
   "version": "Version",
   "views": "Views",
   "viewOnGoogleMaps": "view on Google Maps",

diff --git a/lang/es.json b/lang/es.json
@@ -32,6 +32,8 @@
   "enable": "Activar",
   "filtering": "Filtrado",
   "filterDataByColumn": "Filtrar datos por columna",
+  "filterOutValuesFromColumn": "Qué valores filtrar de la columna",
+  "frontEndFilterColumn": "Columna para filtrar valores",
   "gallery": "Galería",
   "galleryNotAvailable": "La galería de vistas de GuardianConnector no está disponible. Por favor, active la incrustación de medios",
   "geocoordinates": "Coordenadas",
@@ -43,12 +45,27 @@
   "login": "Iniciar sesión",
   "loginButton": "Regístrese o inicie sesión",
   "loginError": "Ocurrió un error al intentar iniciar sesión",
+  "logoUrl": "URL del logo",
   "map": "Mapa",
+  "mapboxAccessToken": "Token de acceso de Mapbox (pk.ey...)",
+  "mapboxBearing": "Orientación del mapa (-180 a 180)",
+  "mapboxCenterLatitude": "Latitud del centro (-90 a 90)",
+  "mapboxCenterLongitude": "Longitud del centro (-180 a 180)",
+  "mapboxPitch": "Inclinación del mapa (0 a 85)",
+  "mapboxProjection": "Proyección del mapa",
+  "mapboxZoom": "Nivel de zoom (0 a 22)",
   "mapLegend": "Leyenda del mapa",
+  "mapLegendLayerIds": "IDs de capas para mostrar en la leyenda del mapa",
+  "mapbox3d": "¿Desea habilitar el terreno 3D?",
   "mapboxSatelliteUpTo2019": "Mapbox Satellite (hasta 2019)",
   "mapboxStreets": "Mapbox Streets",
+  "mapboxStyle": "Estilo de Mapbox",
+  "mapeoCategoryIds": "IDs de categorías de Mapeo para mostrar en el mapa de alertas",
   "mapeoData": "Datos de Mapeo",
+  "mapeoTable": "Nombre de la tabla de datos de Mapeo",
   "media": "Medios",
+  "mediaBasePath": "Ruta base para medios",
+  "mediaBasePathAlerts": "Ruta base para imágenes de alertas",
   "modified": "Modificado",
   "monthDetected": "Mes detectado",
   "mostRecentAlerts": "Alertas más recientes",
@@ -58,15 +75,16 @@
   "other": "Otro",
   "password": "Contraseña",
   "passwordIncorrect": "La contraseña que ingresó es incorrecta",
+  "planetApiKey": "Clave API de Planet",
   "planetMonthlyVisualBasemap": "Planet (NICFI) - mapa base visual mensual",
   "pleaseMatchFormat": "Por favor, siga el formato esperado",
   "previewImagerySource": "Vista previa de las fuentes de imágenes",
   "previousAlerts": "Alertas anteriores",
   "recentAlertsDate": "Fecha de las alertas más recientes publicadas",
   "recentAlertsNumber": "Número de alertas más recientes",
-  "removeTable": "Eliminar tabla",
-  "removeTableAreYouSure": "¿Está seguro de que desea eliminar esta tabla",
   "red": "rojo",
+  "removeTable": "Eliminar tabla",
+  "removeTableAreYouSure": "¿Está seguro de que desea eliminar esta tabla?",
   "resetDashboard": "Restablecer el tablero",
   "satelliteUsedForDetection": "Satélite utilizado para la detección",
   "selectAlertDateRange": "Seleccione un rango de fechas de alerta",
@@ -80,6 +98,8 @@
   "territory": "Territorio",
   "type": "Tipo",
   "typeOfAlerts": "Tipo de alertas",
+  "unwantedColumns": "Columnas no deseadas",
+  "unwantedSubstrings": "Subcadenas no deseadas",
   "version": "Versión",
   "views": "Vistas",
   "viewOnGoogleMaps": "ver en Google Maps",