Merge branch 'development' of https://github.com/chnuessli/defikarte.…

…ch-app into development
OpenBracketsCH · May 28, 2024 · 492881f · 492881f
2 parents e45b87f + 2205f0b
commit 492881f
Show file tree

Hide file tree

Showing 23 changed files with 575 additions and 192 deletions.
diff --git a/app/App.js b/app/App.js
@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import 'intl-pluralrules';
 import React from 'react';
 import { StatusBar } from "react-native";
@@ -16,11 +17,11 @@ import ListScreen from './src/screens/ListScreen';
 import MainScreen from './src/screens/MainScreen';
 
 const navigator = createStackNavigator({
-  Main: { screen: MainScreen, navigationOptions: { title: 'Karte', headerShown: false } },
-  List: { screen: ListScreen, navigationOptions: { title: 'In deiner Nähe', headerShown: true } },
-  Create: { screen: CreateScreen, navigationOptions: { title: 'Defibrillator melden', headerShown: true } },
-  Detail: { screen: DetailScreen, navigationOptions: { title: 'Detailansicht', headerShown: true } },
-  About: { screen: AboutScreen, navigationOptions: { title: 'About', headerShown: true } },
+  Main: { screen: MainScreen, navigationOptions: { title: t('map'), headerShown: false } },
+  List: { screen: ListScreen, navigationOptions: { title: t('close_to_you'), headerShown: true } },
+  Create: { screen: CreateScreen, navigationOptions: { title: t('create_aed'), headerShown: true } },
+  Detail: { screen: DetailScreen, navigationOptions: { title: t('detail_view'), headerShown: true } },
+  About: { screen: AboutScreen, navigationOptions: { title: t('about'), headerShown: true } },
 }, {
   initialRouteName: 'Main',
   defaultNavigationOptions: {

diff --git a/app/app.json b/app/app.json
@@ -3,7 +3,7 @@
     "name": "Defikarte.ch",
     "slug": "Defikarte-ch",
     "owner": "defikarte",
-    "version": "1.0.37",
+    "version": "1.0.38",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -12,19 +12,24 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["assets/*.png"],
+    "assetBundlePatterns": [
+      "assets/*.png"
+    ],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "ch.defikarte.app",
-      "buildNumber": "1.0.37",
+      "buildNumber": "1.0.38",
       "infoPlist": {
-        "NSLocationWhenInUseUsageDescription": "Diese App benötigt die Standortdaten deines Gerätes um den nächsten Defi anzeigen zu können."
+        "NSLocationWhenInUseUsageDescription": true
       }
     },
     "android": {
       "package": "ch.defikarte.app",
-      "versionCode": 37,
-      "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"],
+      "versionCode": 38,
+      "permissions": [
+        "ACCESS_COARSE_LOCATION",
+        "ACCESS_FINE_LOCATION"
+      ],
       "config": {
         "googleMaps": {
           "apiKey": ""
@@ -34,10 +39,19 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
+    "plugins": [
+      "expo-localization"
+    ],
     "extra": {
       "eas": {
         "projectId": "1d176347-a834-4c1c-92e7-c0f4637108a0"
       }
+    },
+    "locales": {
+      "de": "./assets/locales/de.json",
+      "en": "./assets/locales/en.json",
+      "fr": "./assets/locales/fr.json",
+      "it": "./assets/locales/it.json"
     }
   }
-}
+}
diff --git a/app/assets/locales/de.json b/app/assets/locales/de.json
@@ -0,0 +1,3 @@
+{
+  "NSLocationWhenInUseUsageDescription": "Sie können die Distanz zu nahegelegenen Defibrillatoren anzeigen und sich selbst lokalisieren wenn Sie den Standort für Defikarte.ch aktivieren."
+}
diff --git a/app/assets/locales/en.json b/app/assets/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "NSLocationWhenInUseUsageDescription": "You'll get the distance to nearby defibrillators, easily create new ones at your location and locate yourself when you turn on Location Services for Defikarte.ch."
+}
diff --git a/app/assets/locales/fr.json b/app/assets/locales/fr.json
@@ -0,0 +1,3 @@
+{
+  "NSLocationWhenInUseUsageDescription": "Vous obtiendrez la distance aux défibrillateurs à proximité, pourrez facilement en créer de nouveaux à votre emplacement et vous localiser lorsque vous activerez les services de localisation pour Defikarte.ch."
+}
diff --git a/app/assets/locales/it.json b/app/assets/locales/it.json
@@ -0,0 +1,3 @@
+{
+  "NSLocationWhenInUseUsageDescription": "Otterrai la distanza ai defibrillatori nelle vicinanze, potrai facilmente crearne di nuovi nella tua posizione e localizzarti quando attiverai i servizi di localizzazione per Defikarte.ch."
+}
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -31,7 +31,8 @@
     "react-native-screens": "~3.29.0",
     "react-native-select-dropdown": "^4.0.1",
     "react-navigation": "^4.4.4",
-    "react-navigation-stack": "^2.10.4"
+    "react-navigation-stack": "^2.10.4",
+    "expo-localization": "~14.8.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

diff --git a/app/src/components/CreateMapOverlay.js b/app/src/components/CreateMapOverlay.js
@@ -1,56 +1,53 @@
+import { AntDesign } from '@expo/vector-icons';
+import { t } from 'i18next';
 import React from 'react';
-import { Alert, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { withNavigation } from 'react-navigation';
-import { AntDesign } from '@expo/vector-icons';
 import MapInfoPanel from './MapInfoPanel';
 
 const CreateMapOverlay = ({ setIsCreateMode, newDefiCoords, navigation, isTopView }) => {
   const ApprovePosition = () => {
     Alert.alert(
-      'Position überprüfen',
-      'Ist der rote Marker korrekt positioniert?',
+      t('check_position'),
+      t('is_marker_position_correct'),
       [
         {
-          text: 'Ja',
+          text: t('yes'),
           onPress: () => {
             navigation.navigate('Create', { latlon: newDefiCoords });
             setIsCreateMode(false);
           },
         },
         {
-          text: 'Nein',
-          style: 'destructive'
+          text: t('no'),
+          style: 'destructive',
         },
       ],
-      { cancelable: false },
-    )
+      { cancelable: false }
+    );
   };
 
   return (
     <>
-      <MapInfoPanel
-        isTopView={isTopView}
-        text='Ziehe den Marker an den Standort des neuen Defibrillators'
-        subText='(Marker halten und verschieben)' />
+      <MapInfoPanel isTopView={isTopView} text={t('move_marker_to_position')} subText={`(${t('hold_marker_to_move')})`} />
       <View style={styles.createIconsContainerStyle}>
         <TouchableOpacity
           style={styles.iconStyle}
           onPress={async () => {
             ApprovePosition();
-          }} >
+          }}
+        >
           <AntDesign name="checkcircleo" size={48} color="white" />
-          <Text style={styles.descriptionTextStyle}>Position wählen</Text>
+          <Text style={styles.descriptionTextStyle}>{t('confirm_position')}</Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => setIsCreateMode(false)}
-          style={styles.iconStyle}>
+        <TouchableOpacity onPress={() => setIsCreateMode(false)} style={styles.iconStyle}>
           <AntDesign name="closecircleo" size={48} color="white" />
-          <Text style={styles.descriptionTextStyle}>Abbrechen</Text>
+          <Text style={styles.descriptionTextStyle}>{t('cancel')}</Text>
         </TouchableOpacity>
       </View>
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   createIconsContainerStyle: {
@@ -71,7 +68,7 @@ const styles = StyleSheet.create({
   descriptionTextStyle: {
     color: 'white',
     marginTop: 5,
-  }
+  },
 });
 
-export default withNavigation(CreateMapOverlay);
+export default withNavigation(CreateMapOverlay);
diff --git a/app/src/components/ErrorBoundary.js b/app/src/components/ErrorBoundary.js
@@ -1,5 +1,6 @@
+import { t } from 'i18next';
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -21,7 +22,7 @@ class ErrorBoundary extends React.Component {
       // You can render any custom fallback UI
       return (
         <View style={styles.containerStyle}>
-          <Text style={styles.errorTextStyle}>Something went wrong. Please try to restart the app.</Text>
+          <Text style={styles.errorTextStyle}>{t('something_went_wrong')}</Text>
         </View>
       );
     }

diff --git a/app/src/components/FieldInfo.jsx b/app/src/components/FieldInfo.jsx
@@ -1,4 +1,5 @@
 import { FontAwesome6 } from '@expo/vector-icons';
+import { t } from 'i18next';
 import React, { useState } from 'react';
 import { Button, Linking, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
@@ -18,23 +19,24 @@ const FieldInfo = ({ titel, text, link }) => {
       <TouchableOpacity onPress={handlePress}>
         <FontAwesome6 name="circle-question" size={24} color="rgba(70, 70, 70, 1)" />
       </TouchableOpacity>
-      <Modal
-        visible={modalVisible}
-        animationType="none"
-        onRequestClose={closeModal}
-        transparent={true}
-      >
+      <Modal visible={modalVisible} animationType="none" onRequestClose={closeModal} transparent={true}>
         <View style={styles.container}>
           <View style={styles.modalView}>
-            {titel && <Text style={styles.titelStyle}>{titel}</Text>}
+            {titel && <Text style={styles.titelStyle}>{t(titel)}</Text>}
             <View>
-              {text.map((x, i) => <View style={styles.contentContainer} kex={i}>
-                <Text key={i + 'title'} style={styles.contentTitelStyle}>{x.titel}</Text>
-                <Text key={i + 'text'} style={styles.contentTextStyle}>{x.text}</Text>
-              </View>)}
-              {link && <Button title="Weiterführende Informationen" onPress={() => Linking.openURL(link)} />}
+              {text.map((x, i) => (
+                <View style={styles.contentContainer} key={i}>
+                  <Text key={i + 'title'} style={styles.contentTitelStyle}>
+                    {t(x.titel)}
+                  </Text>
+                  <Text key={i + 'text'} style={styles.contentTextStyle}>
+                    {t(x.text)}
+                  </Text>
+                </View>
+              ))}
+              {link && <Button title={t('further_information')} onPress={() => Linking.openURL(link)} />}
             </View>
-            <Button onPress={closeModal} title='Schliessen' />
+            <Button onPress={closeModal} title={t('close')} />
           </View>
         </View>
       </Modal>
@@ -85,4 +87,4 @@ const styles = StyleSheet.create({
   contentContainer: {
     marginBottom: 10,
   },
-});
+});
diff --git a/app/src/components/LocationError.js b/app/src/components/LocationError.js
@@ -1,18 +1,10 @@
+import { t } from 'i18next';
 import { Alert, StyleSheet } from 'react-native';
 
 const LocationError = ({ title, message }) => {
-  return (
-    Alert.alert(
-      title,
-      message,
-      [
-        { text: "OK" }
-      ],
-      { cancelable: false }
-    )
-  );
-}
+  return Alert.alert(title, message, [{ text: t('ok') }], { cancelable: false });
+};
 
 const styles = StyleSheet.create({});
 
-export default LocationError;
+export default LocationError;
diff --git a/app/src/components/Map.js b/app/src/components/Map.js
@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import React, { useEffect, useState } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import MapView from 'react-native-map-clustering';
@@ -108,13 +109,13 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
       return (
         <MapInfoPanel
           isTopView={true}
-          text="Zoome in eine bestimmte Region um Defibrillatoren anzuzeigen."
-          subText={`(${defibrillators.length} Defis im Kartenausschnitt, Anzeige ab < 1000)`}
+          text={t('zoom_in_to_see_defis')}
+          subText={`(${t('current_aeds_on_map', { count: defibrillators.length })})`}
         />
       );
     } else if (mode === 'load') {
       //defibrillators.length === 0 && isLoading
-      return <MapInfoPanel isTopView={true} text="Lade Defibrillatoren..." showLoading={true} />;
+      return <MapInfoPanel isTopView={true} text={t('load_aed')} showLoading={true} />;
     }
   };