Merge pull request #33 from digitalcityscience/29-add-i18n

29 add i18n
digitalcityscience · Aug 21, 2023 · 5b389e0 · 5b389e0
2 parents 5b0bd16 + a12a480
commit 5b389e0
Show file tree

Hide file tree

Showing 32 changed files with 659 additions and 180 deletions.
diff --git a/frontend/.env.development b/frontend/.env.development
@@ -1,2 +1,4 @@
 VUE_APP_BASE_URL = "http://localhost:3000/"
-VUE_APP_API_BASE_URL = "http://localhost:3000/"
+VUE_APP_API_BASE_URL = "http://localhost:3000/"
+VUE_APP_I18N_LOCALE = "en"
+VUE_APP_I18N_FALLBACK_LOCALE = "en"
diff --git a/frontend/.env.production b/frontend/.env.production
@@ -1 +1,3 @@
-VUE_APP_API_BASE_URL = "/api/"
+VUE_APP_API_BASE_URL = "/api/"
+VUE_APP_I18N_LOCALE = "en"
+VUE_APP_I18N_FALLBACK_LOCALE = "en"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,6 +33,7 @@
     "shp-write": "^0.3.2",
     "turf": "^3.0.14",
     "vue": "^2.6.14",
+    "vue-i18n": "^8.28.2",
     "vue-router": "^3.5.3",
     "vuedraggable": "^2.24.3",
     "vuetify": "^2.7.1",
@@ -65,9 +66,27 @@
       "parser": "babel-eslint"
     },
     "rules": {
-      "vue/multi-word-component-names": ["error", {
-        "ignores": ["Alert","Area","Classification","Criteria","Geoparsing","Layers","Legend","Ligfinder","Map","Panel","Proximity","Results","Tools","User"]
-      }]
+      "vue/multi-word-component-names": [
+        "error",
+        {
+          "ignores": [
+            "Alert",
+            "Area",
+            "Classification",
+            "Criteria",
+            "Geoparsing",
+            "Layers",
+            "Legend",
+            "Ligfinder",
+            "Map",
+            "Panel",
+            "Proximity",
+            "Results",
+            "Tools",
+            "User"
+          ]
+        }
+      ]
     }
   },
   "browserslist": [

diff --git a/frontend/src/components/AOI.vue b/frontend/src/components/AOI.vue
@@ -2,18 +2,18 @@
     <div>
         <v-dialog v-model="deleteDialog" max-width="35vw" >
           <v-card>
-            <v-card-title class="text-h6">Are you sure you want to delete this item?</v-card-title>
+            <v-card-title class="text-h6">{{ $t('ligfinder.aoi.delete') }}</v-card-title>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
-              <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
+              <v-btn color="blue darken-1" text @click="closeDelete">{{ $t('ligfinder.aoi.cancel') }}</v-btn>
+              <v-btn color="blue darken-1" text @click="deleteItemConfirm">{{ $t('ligfinder.aoi.ok') }}</v-btn>
               <v-spacer></v-spacer>
             </v-card-actions>
           </v-card>
         </v-dialog>
         <v-select
           :items="$store.state.AOI.items"
-          label="AoI Mode"
+          :label="$t('ligfinder.aoi.mode')"
           outlined
           item-text="name"
           item-value="value"
@@ -29,11 +29,11 @@
             <thead>
                 <tr>
                     <th class="text-left">
-                        Name
+                        {{ $t('ligfinder.aoi.name') }}
                     </th>
 
                     <th class="text-left">
-                        Action
+                        {{ $t('ligfinder.aoi.action') }}
                     </th>
                 </tr>
             </thead>
@@ -61,12 +61,12 @@
             <v-select
                 :items="$store.state.AOI.operators"
                 v-model="$store.state.AOI.selectedOperator"
-                label="operation"
+                :label="$t('ligfinder.aoi.operation')"
                 solo
                 class="select-operator"
             >
             </v-select>
-            <button style="font-size: 0.8vw" class="btn btn-info mb-4 mt-4" @click="getParcels()">Suche Starten</button>            
+            <button style="font-size: 0.8vw" class="btn btn-info mb-4 mt-4" @click="getParcels()">{{ $t('ligfinder.aoi.search') }}</button>            
         </div>
     </div>
 </template>

diff --git a/frontend/src/components/AdministrativeAOI.vue b/frontend/src/components/AdministrativeAOI.vue
@@ -4,7 +4,7 @@
 
             <v-select
                 :items="$store.state.administrativeAOI.items"
-                label="Verwaltungsebene"
+                :label="$t('ligfinder.aoi.administrative.level')"
                 solo
                 item-text="name"
                 item-value="value"
@@ -22,7 +22,7 @@
 
                 >
                     <template v-slot:activator>
-                        <v-list-item-title>select area by name </v-list-item-title>
+                        <v-list-item-title>{{ $t('ligfinder.aoi.administrative.selectByName') }}</v-list-item-title>
                     </template>
 
                     <template >

diff --git a/frontend/src/components/Area.vue b/frontend/src/components/Area.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="$store.state.ligfinder.FOI.features[0]">
         <v-card>
-            <v-subheader>Grundstücksfläche in m²</v-subheader>
+            <v-subheader>{{ $t('ligfinder.area.landInM2') }}</v-subheader>
             <v-card-text>
                 <v-row>
                     <v-col class="px-4">
@@ -39,7 +39,7 @@
                 </v-row>
             </v-card-text>
 
-            <v-subheader>Vorhandene Bruttogeschossfläche in m² </v-subheader>
+            <v-subheader>{{ $t('ligfinder.area.grossFloorInM2') }}</v-subheader>
             <v-card-text>
                 <v-row>
                     <v-col class="px-4">
@@ -77,7 +77,7 @@
                 </v-row>
             </v-card-text>
 
-            <v-subheader>Verfügbare Unbebaute</v-subheader>
+            <v-subheader>{{ $t('ligfinder.area.availableVacantLots') }}</v-subheader>
             <v-card-text>
                 <v-row>
                     <v-col class="px-4">
@@ -116,13 +116,13 @@
             </v-card-text>
 
             <v-col class="mt-4" >
-                <button style="font-size: 0.8vw" class="btn btn-info" @click="areaFilter">Suche Starten</button>
-                <button style="font-size: 0.8vw" class="btn btn-success ml-2" @click="applyAreaFilter">Änderungen übernehmen</button>
+                <button style="font-size: 0.8vw" class="btn btn-info" @click="areaFilter">{{ $t('ligfinder.area.search') }}</button>
+                <button style="font-size: 0.8vw" class="btn btn-success ml-2" @click="applyAreaFilter">{{ $t('ligfinder.area.apply') }}</button>
             </v-col>
         </v-card>
     </div>
     <div v-else class="table text-center">
-        <p>No Feature Selected</p>
+        <p>{{ $t('ligfinder.area.noFeature') }}</p>
 
     </div>
 </template>

diff --git a/frontend/src/components/BaseMaps.vue b/frontend/src/components/BaseMaps.vue
@@ -15,15 +15,15 @@
             @change="toglleBasemap"
         >
             <v-radio
-                label="OSM"
+                :label="$t('basemap.osm')"
                 value="lightOSM"
             ></v-radio>
             <v-radio
-                label="Satellite"
+                :label="$t('basemap.satellite')"
                 value="satellieHybrid"
             ></v-radio>
             <v-radio
-                label="Dark"
+                :label="$t('basemap.dark')"
                 value="dark"
             ></v-radio>
         </v-radio-group>

diff --git a/frontend/src/components/Building3D.vue b/frontend/src/components/Building3D.vue
@@ -4,7 +4,7 @@
         v-model="$store.state.AOI.buildingSwitch"
         @click.once="getBuildings"
         @change="toggle3DBuilding"
-        :label="`Gebäude: ${$store.state.AOI.buildingSwitch.toString()}`"
+        :label="$t('building3d.label', {'0': $store.state.AOI.buildingSwitch.toString()})"
     ></v-switch>
 </template>
 

diff --git a/frontend/src/components/Classification.vue b/frontend/src/components/Classification.vue
@@ -9,11 +9,7 @@
             >
             </i>
         </div>
-         <div class="text-center mt-4 classification-title" >
-
-            Classification
-
-        </div>
+         <div class="text-center mt-4 classification-title" >{{ $t('classification.title') }}</div>
         <v-container
             fluid
             mt-10
@@ -26,7 +22,7 @@
             >
                 <v-select
                 :items="this.addedLayersNames"
-                label="Layer"
+                :label="$t('classification.layer')"
                 v-model="$store.state.classification.selectedLayer"
                 @change="selectAttributes"
                 ></v-select>
@@ -40,7 +36,7 @@
                 <v-select
                 :items="$store.state.classification.choroplethMethod"
                 item-text="name"
-                label="Choropleth"
+                :label="$t('classification.choropleth')"
                 v-model="$store.state.classification.selectedChoroplethMethod"
                 ></v-select>
             </v-col>
@@ -54,7 +50,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="1st Attribute"
+                    :label="$t('classification.1stAttr')"
                     :items="$store.state.classification.attributes"
                     v-model="$store.state.classification.attribute1"
                     ></v-select>
@@ -64,7 +60,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="2nd Attribute"
+                    :label="$t('classification.2ndAttr')"
                     :items="$store.state.classification.attributes"
                     v-model="$store.state.classification.attribute2"
                     ></v-select>
@@ -76,7 +72,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="1st Attribute"
+                    :label="$t('classification.1stAttr')"
                     :items="$store.state.classification.attributes"
                     v-model="$store.state.classification.attribute1"
                     ></v-select>
@@ -90,7 +86,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="Classification Method"
+                    :label="$t('classification.method')"
                     :items="$store.state.classification.classificationMethod"
                     v-model="$store.state.classification.selectedClassificationMethod"
                     ></v-select>
@@ -100,7 +96,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="Classes"
+                    :label="$t('classification.classes')"
                     :items="$store.state.classification.classes"
                     v-model="$store.state.classification.selectedClass"
                     ></v-select>
@@ -113,7 +109,7 @@
                     sm="6"
                 >
                     <v-select
-                    label="Color Palette"
+                    :label="$t('classification.palette')"
                     :items="this.colorBrewerItems"
                     v-model="$store.state.classification.selectedColorPalette"
                     ></v-select>
@@ -125,20 +121,20 @@
                     cols="12"
                     sm="6"
                 >
-                <span style="vertical-align: middle;">1st Color </span>  <span style="vertical-align: middle;"><input type="color" v-model="$store.state.classification.color1" value="#ff0000"></span>
+                <span style="vertical-align: middle;">{{$t('classification.1stColor')}} </span>  <span style="vertical-align: middle;"><input type="color" v-model="$store.state.classification.color1" value="#ff0000"></span>
                 </v-col>
 
                 <v-col
                     cols="12"
                     sm="6"
                 >
-                <span style="vertical-align: middle;">2nd Color </span>  <span style="vertical-align: middle;"><input type="color" v-model="$store.state.classification.color2" value="#0000FF"></span>
+                <span style="vertical-align: middle;">{{$t('classification.2ndColor')}} </span>  <span style="vertical-align: middle;"><input type="color" v-model="$store.state.classification.color2" value="#0000FF"></span>
                 </v-col>
 
             </v-row>
             <div class="mt-4" >
-                <button style="font-size: 0.8vw" class="btn btn-info" @click="classify">Classify</button>
-                <button style="font-size: 0.8vw" class="btn btn-secondary ml-4" @click="resetClassification">Reset</button>
+                <button style="font-size: 0.8vw" class="btn btn-info" @click="classify">{{$t('classification.classify')}}</button>
+                <button style="font-size: 0.8vw" class="btn btn-secondary ml-4" @click="resetClassification">{{$t('classification.reset')}}</button>
             </div>
 
         </v-container>

diff --git a/frontend/src/components/CompareLikedParcels.vue b/frontend/src/components/CompareLikedParcels.vue
@@ -11,9 +11,9 @@
         <table class="table table-hover">
             <thead>
                 <tr align="center" valign="center">
-                        <th>Attribute</th>
+                        <th>{{$t('compareParcels.attr')}}</th>
                         <th  v-for="i in $store.state.compareLikedParcels.likedParcelsJsonResponse.features" :key="i.properties.gid">
-                            <button @click="zoomToLikedParcel(i.properties.gid)" class="btn btn-outline-info btn-sm">zoom to</button>
+                            <button @click="zoomToLikedParcel(i.properties.gid)" class="btn btn-outline-info btn-sm">{{$t('compareParcels.zoomTo')}}</button>
                         </th>
 
                     </tr>