Merge remote-tracking branch 'origin/development' into development

kieler · Sep 13, 2023 · d7f64d7 · d7f64d7
2 parents 673a84d + faab251
commit d7f64d7
Show file tree

Hide file tree

Showing 25 changed files with 2,083 additions and 1,681 deletions.
diff --git a/App/RailTrail/README.md b/App/RailTrail/README.md
@@ -1,6 +1,6 @@
-Start App
-
 ```
 cd App/RailTrail/
+npm install
+yarn install
 npm start
 ```
diff --git a/App/RailTrail/api/api.ts b/App/RailTrail/api/api.ts
@@ -50,7 +50,7 @@ const retrieveVehicleId = async (
   vehicleNameRequest: VehicleNameRequest,
   config?: AxiosRequestConfig
 ): Promise<VehicleNameResponse> => {
-  const response = await Backend.post<VehicleNameResponse>(
+  const response = await Backend.put<VehicleNameResponse>(
     "/vehicles/app/getId",
     vehicleNameRequest,
     config

diff --git a/App/RailTrail/assets/icons/turning-point.tsx b/App/RailTrail/assets/icons/turning-point.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import Svg, { SvgProps, Rect, Path, Circle } from "react-native-svg"
+const TurningPoint = (props: SvgProps) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    viewBox="0 0 48 48"
+    fill="none"
+    {...props}
+  >
+    <Rect
+      width={33.941}
+      height={33.941}
+      y={24}
+      fill="#FAFAFA"
+      rx={5}
+      transform="rotate(-45 0 24)"
+    />
+    <Circle
+      cx={24}
+      cy={24}
+      r={11}
+      fill="#FAFAFA"
+      stroke="#282828"
+      strokeWidth={2}
+    />
+    <Path
+      fill="#FAFAFA"
+      d="m31.085 30.855 1.499-4.77 4.77 1.5-1.5 4.769-4.77-1.5ZM11.74 32.593l2.984-4.012 4.012 2.984-2.985 4.012-4.011-2.984ZM20.5 10.5l4.909-.95.95 4.909-4.909.95-.95-4.909Z"
+    />
+    <Path
+      fill="#282828"
+      d="m33.902 28.7.267 4.593L29.5 30.04l4.402-1.34ZM16.116 31.766l-4.376-1.422 4.728-3.166-.352 4.588ZM23.345 12.94l3.89-2.459-.585 5.66-3.305-3.201Z"
+    />
+  </Svg>
+)
+export default TurningPoint
diff --git a/App/RailTrail/components/change-vehicle-id-bottom-sheet.tsx b/App/RailTrail/components/change-vehicle-id-bottom-sheet.tsx
@@ -1,7 +1,7 @@
 import { StyleSheet, View, Text, Alert, Keyboard } from "react-native"
 import { textStyles } from "../values/text-styles"
 import { Color } from "../values/color"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import BottomSheet, {
   BottomSheetTextInput,
   useBottomSheetDynamicSnapPoints,
@@ -20,83 +20,84 @@ interface ExternalProps {
 
 type Props = ExternalProps
 
-export const ChangeVehicleIdBottomSheet = ({
-  isVisible,
-  setIsVisible,
-  trackId,
-}: Props) => {
-  const dispatch = useDispatch()
-  const localizedStrings = useTranslation()
+export const ChangeVehicleIdBottomSheet = memo(
+  ({ isVisible, setIsVisible, trackId }: Props) => {
+    const dispatch = useDispatch()
+    const localizedStrings = useTranslation()
 
-  const [text, onChangeText] = useState("")
+    const [text, onChangeText] = useState("")
 
-  // ref
-  const bottomSheetRef = useRef<BottomSheet>(null)
+    // ref
+    const bottomSheetRef = useRef<BottomSheet>(null)
 
-  // variables
-  const snapPoints = useMemo(() => ["CONTENT_HEIGHT"], [])
+    // variables
+    const snapPoints = useMemo(() => ["CONTENT_HEIGHT"], [])
 
-  const {
-    animatedHandleHeight,
-    animatedSnapPoints,
-    animatedContentHeight,
-    handleContentLayout,
-  } = useBottomSheetDynamicSnapPoints(snapPoints)
+    const {
+      animatedHandleHeight,
+      animatedSnapPoints,
+      animatedContentHeight,
+      handleContentLayout,
+    } = useBottomSheetDynamicSnapPoints(snapPoints)
 
-  useEffect(() => {
-    if (isVisible) {
-      bottomSheetRef.current?.expand()
-    } else {
-      bottomSheetRef.current?.close()
-    }
-  }, [isVisible])
-
-  const onButtonPress = async () => {
-    retrieveVehicleId(text, trackId!).then((response) => {
-      if (response == null) {
-        Alert.alert(
-          localizedStrings.t("bottomSheetAlertVehicleIdNotFoundTitle"),
-          localizedStrings.t("bottomSheetAlertVehicleIdNotFoundMessage"),
-          [{ text: localizedStrings.t("alertOk"), onPress: () => {} }]
-        )
+    useEffect(() => {
+      if (isVisible) {
+        bottomSheetRef.current?.expand()
       } else {
-        setIsVisible(false)
-        Keyboard.dismiss()
-        dispatch(TripAction.setVehicleId(parseInt(text)))
+        bottomSheetRef.current?.close()
       }
-    })
-  }
+    }, [isVisible])
 
-  return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      index={-1}
-      snapPoints={animatedSnapPoints}
-      handleHeight={animatedHandleHeight}
-      contentHeight={animatedContentHeight}
-      enablePanDownToClose
-      onClose={() => setIsVisible(false)}
-    >
-      <View style={styles.contentContainer} onLayout={handleContentLayout}>
-        <Text style={[textStyles.headerTextBig, textStyles.textSpacing10]}>
-          {localizedStrings.t("bottomSheetVehicleId")}
-        </Text>
-        <Text>{localizedStrings.t("bottomSheetChangeVehicleId")}</Text>
-        <BottomSheetTextInput
-          placeholder={localizedStrings.t("bottomSheetVehicleId")}
-          value={text}
-          onChangeText={onChangeText}
-          style={styles.textInput}
-        />
-        <Button
-          text={localizedStrings.t("buttonContinue")}
-          onPress={() => onButtonPress()}
-          style={styles.buttonMargin}
-        />
-      </View>
-    </BottomSheet>
-  )
-}
+    const onButtonPress = async () => {
+      retrieveVehicleId(text, trackId!).then((response) => {
+        if (response == null) {
+          Alert.alert(
+            localizedStrings.t("bottomSheetAlertVehicleIdNotFoundTitle"),
+            localizedStrings.t("bottomSheetAlertVehicleIdNotFoundMessage"),
+            [{ text: localizedStrings.t("alertOk"), onPress: () => {} }]
+          )
+        } else {
+          setIsVisible(false)
+          Keyboard.dismiss()
+          dispatch(TripAction.setVehicleName(text))
+          dispatch(TripAction.setVehicleId(response))
+          onChangeText("")
+        }
+      })
+    }
+
+    return (
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={-1}
+        snapPoints={animatedSnapPoints}
+        handleHeight={animatedHandleHeight}
+        contentHeight={animatedContentHeight}
+        enablePanDownToClose
+        onClose={() => setIsVisible(false)}
+      >
+        <View style={styles.contentContainer} onLayout={handleContentLayout}>
+          <Text style={[textStyles.headerTextBig, textStyles.textSpacing10]}>
+            {localizedStrings.t("bottomSheetVehicleId")}
+          </Text>
+          <Text>{localizedStrings.t("bottomSheetChangeVehicleId")}</Text>
+          <BottomSheetTextInput
+            placeholder={localizedStrings.t("bottomSheetVehicleId")}
+            value={text}
+            autoCapitalize="none"
+            onChangeText={onChangeText}
+            style={styles.textInput}
+          />
+          <Button
+            text={localizedStrings.t("buttonContinue")}
+            onPress={() => onButtonPress()}
+            style={styles.buttonMargin}
+          />
+        </View>
+      </BottomSheet>
+    )
+  }
+)
 
 const styles = StyleSheet.create({
   contentContainer: {

diff --git a/App/RailTrail/components/fab.tsx b/App/RailTrail/components/fab.tsx
@@ -23,8 +23,7 @@ export const FAB = ({ onPress, children }: Props) => (
 
 const styles = StyleSheet.create({
   alignEnd: {
-    justifyContent: "flex-end",
-    flexDirection: "row",
+    alignSelf: "flex-end",
   },
   container: {
     margin: 10,

diff --git a/App/RailTrail/components/header.tsx b/App/RailTrail/components/header.tsx
@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet, Pressable } from "react-native"
-import React from "react"
+import React, { memo } from "react"
 import { MaterialIcons } from "@expo/vector-icons"
 import { Color } from "../values/color"
 import { useTranslation } from "../hooks/use-translation"
@@ -9,83 +9,87 @@ interface ExternalProps {
   readonly speed: number
   readonly nextVehicle: number | null
   readonly nextCrossing: number | null
-  readonly vehicleId: number
+  readonly vehicleName: string
   readonly setIsChangeVehicleIdBottomSheetVisible: React.Dispatch<
     React.SetStateAction<boolean>
   >
 }
 
 type Props = ExternalProps
 
-export const Header = ({
-  distance,
-  speed,
-  nextVehicle,
-  nextCrossing,
-  vehicleId,
-  setIsChangeVehicleIdBottomSheetVisible,
-}: Props) => {
-  const localizedStrings = useTranslation()
+export const Header = memo(
+  ({
+    distance,
+    speed,
+    nextVehicle,
+    nextCrossing,
+    vehicleName,
+    setIsChangeVehicleIdBottomSheetVisible,
+  }: Props) => {
+    const localizedStrings = useTranslation()
 
-  speed = speed < 1 ? 0 : Math.round(speed)
-  let distanceString =
-    distance < 1000
-      ? Math.round(distance) + " m"
-      : Math.round(distance / 100) / 10 + " km"
+    speed = speed < 1 ? 0 : Math.round(speed)
+    let distanceString =
+      distance < 1000
+        ? Math.round(distance) + " m"
+        : Math.round(distance / 100) / 10 + " km"
 
-  return (
-    <View style={styles.container}>
-      <View style={styles.row}>
-        <View style={styles.box}>
-          <Text style={styles.lable}>
-            {localizedStrings.t("headerDistance")}
-          </Text>
-          <Text style={styles.value}>{distanceString}</Text>
+    return (
+      <View style={styles.container}>
+        <View style={styles.row}>
+          <View style={styles.box}>
+            <Text style={styles.lable}>
+              {localizedStrings.t("headerDistance")}
+            </Text>
+            <Text style={styles.value}>{distanceString}</Text>
+          </View>
+          <View style={styles.box}>
+            <Text style={styles.lable}>
+              {localizedStrings.t("headerNextVehicle")}
+            </Text>
+            <Text style={styles.value}>
+              {nextVehicle != null ? `${Math.round(nextVehicle)} m` : "-"}
+            </Text>
+          </View>
         </View>
-        <View style={styles.box}>
-          <Text style={styles.lable}>
-            {localizedStrings.t("headerNextVehicle")}
-          </Text>
-          <Text style={styles.value}>
-            {nextVehicle != null ? `${Math.round(nextVehicle)} m` : "-"}
-          </Text>
+        <View style={styles.row}>
+          <View style={styles.box}>
+            <Text style={styles.lable}>
+              {localizedStrings.t("headerSpeed")}
+            </Text>
+            <Text style={styles.value}>{speed ?? ""} km/h</Text>
+          </View>
+          <View style={styles.box}>
+            <Text style={styles.lable}>
+              {localizedStrings.t("headerNextCrossing")}
+            </Text>
+            <Text style={styles.value}>
+              {nextCrossing != null ? `${Math.round(nextCrossing)} m` : "-"}
+            </Text>
+          </View>
         </View>
+        <Pressable
+          onPress={() => {
+            setIsChangeVehicleIdBottomSheetVisible(true)
+          }}
+        >
+          <View style={styles.rowSingleLine}>
+            <Text style={styles.lableSingleLine}>
+              {localizedStrings.t("headerVehicleId")}
+            </Text>
+            <Text style={styles.valueSingleLine}>{vehicleName ?? ""}</Text>
+            <MaterialIcons
+              style={styles.icon}
+              name="cached"
+              size={24}
+              color="black"
+            />
+          </View>
+        </Pressable>
       </View>
-      <View style={styles.row}>
-        <View style={styles.box}>
-          <Text style={styles.lable}>{localizedStrings.t("headerSpeed")}</Text>
-          <Text style={styles.value}>{speed ?? ""} km/h</Text>
-        </View>
-        <View style={styles.box}>
-          <Text style={styles.lable}>
-            {localizedStrings.t("headerNextCrossing")}
-          </Text>
-          <Text style={styles.value}>
-            {nextCrossing != null ? `${Math.round(nextCrossing)} m` : "-"}
-          </Text>
-        </View>
-      </View>
-      <Pressable
-        onPress={() => {
-          setIsChangeVehicleIdBottomSheetVisible(true)
-        }}
-      >
-        <View style={styles.rowSingleLine}>
-          <Text style={styles.lableSingleLine}>
-            {localizedStrings.t("headerVehicleId")}
-          </Text>
-          <Text style={styles.valueSingleLine}>{vehicleId ?? ""}</Text>
-          <MaterialIcons
-            style={styles.icon}
-            name="cached"
-            size={24}
-            color="black"
-          />
-        </View>
-      </Pressable>
-    </View>
-  )
-}
+    )
+  }
+)
 
 const styles = StyleSheet.create({
   container: {
@@ -120,7 +124,8 @@ const styles = StyleSheet.create({
     alignSelf: "center",
   },
   valueSingleLine: {
-    margin: 10,
+    marginVertical: 10,
+    marginEnd: 10,
     fontSize: 20,
   },
   icon: {