diff --git a/src/containers/Map/SelectedFeatureBubble.js b/src/containers/Map/SelectedFeatureBubble.js index 08fc6ae..0665d31 100644 --- a/src/containers/Map/SelectedFeatureBubble.js +++ b/src/containers/Map/SelectedFeatureBubble.js @@ -1,10 +1,15 @@ import React from "react"; import SelectedFeatureBubbleAlert from "./SelectedFeatureBubbleAlert"; +import SelectedFeatureBubbleAlertInitial from "./SelectedFeatureBubbleAlertInitial"; export default function SelectedFeatureBubble(props) { const { properties = {} } = props.feature; if (properties.alert) { + // Check if this is an initial location marker + if (properties.isInitialLocation) { + return ; + } return ; } return null; diff --git a/src/containers/Map/SelectedFeatureBubbleAlert.js b/src/containers/Map/SelectedFeatureBubbleAlert.js index 0c8be5f..9468327 100644 --- a/src/containers/Map/SelectedFeatureBubbleAlert.js +++ b/src/containers/Map/SelectedFeatureBubbleAlert.js @@ -1,4 +1,5 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useMemo } from "react"; +import { deepEqual } from "fast-equals"; import { View } from "react-native"; import { IconButton, TouchableRipple } from "react-native-paper"; import { MaterialCommunityIcons } from "@expo/vector-icons"; @@ -63,6 +64,31 @@ export default function SelectedFeatureBubbleAlert({ feature, close }) { /> + {useMemo(() => { + const isLocationsDifferent = + alert.initialLocation && + alert.location && + !deepEqual(alert.initialLocation, alert.location); + + if (isLocationsDifferent) { + return ( + + + {alert.followLocation + ? "Localisation actuelle" + : "Dernière position connue"} + + + ); + } + return null; + }, [ + alert.initialLocation, + alert.location, + alert.followLocation, + styles.titleContainer, + styles.titleText, + ])} Sujet : @@ -123,6 +149,18 @@ const useStyles = createStyles(({ wp, fontSize, theme: { colors } }) => ({ content: { paddingHorizontal: 4, }, + titleContainer: { + marginBottom: 8, + borderBottomWidth: 1, + borderBottomColor: colors.grey, + paddingBottom: 4, + }, + titleText: { + color: colors.primary, + fontSize: 16, + fontWeight: "bold", + textAlign: "center", + }, contentLine: { flexDirection: "row", justifyContent: "space-between", diff --git a/src/containers/Map/SelectedFeatureBubbleAlertInitial.js b/src/containers/Map/SelectedFeatureBubbleAlertInitial.js new file mode 100644 index 0000000..da0c531 --- /dev/null +++ b/src/containers/Map/SelectedFeatureBubbleAlertInitial.js @@ -0,0 +1,185 @@ +import React, { useCallback } from "react"; +import { View } from "react-native"; +import { IconButton, TouchableRipple } from "react-native-paper"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; + +import Maplibre from "@maplibre/maplibre-react-native"; +import Text from "~/components/Text"; +import useTimeDisplay from "~/hooks/useTimeDisplay"; +import { useNavigation } from "@react-navigation/native"; +import { createStyles, useTheme } from "~/theme"; +import { alertActions } from "~/stores"; + +export default function SelectedFeatureBubbleAlertInitial({ feature, close }) { + const { properties = {} } = feature; + const { alert } = properties; + const styles = useStyles(); + const { colors, custom } = useTheme(); + const createdAtText = useTimeDisplay(alert.createdAt); + const navigation = useNavigation(); + const goToAlert = useCallback(() => { + alertActions.setNavAlertCur({ alert }); + navigation.navigate({ + name: "AlertCur", + params: { + screen: "AlertCurTab", + params: { + screen: "AlertCurOverview", + }, + }, + }); + }, [alert, navigation]); + + const { level } = alert; + const levelColor = custom.appColors[level]; + + return ( + + + + ( + + )} + onPress={() => close()} + /> + + + + + Localisation initiale de l'Alerte + + + + Sujet : + + {alert.subject || "non indiqué"} + + + + Code : + #{alert.code} + + + Envoyée par : + {alert.username} + {createdAtText} + + + Depuis l'adresse : + {alert.address} + + + À proximité de : + {alert.nearestPlace} + + + Localisation en 3 mots : + {alert.what3Words} + + + + + Situation + + + + + + ); +} + +const useStyles = createStyles(({ wp, fontSize, theme: { colors } }) => ({ + bubbleContainer: { + backgroundColor: colors.surface, + justifyContent: "center", + alignItems: "flex-start", + paddingHorizontal: 4, + paddingVertical: 2, + borderRadius: 5, + width: wp(75), + }, + bubbleText: { + color: colors.onSurface, + fontSize: 16, + }, + closeButton: {}, + closeButtonIcon: { + color: colors.grey, + }, + content: { + paddingHorizontal: 4, + }, + titleContainer: { + marginBottom: 8, + borderBottomWidth: 1, + borderBottomColor: colors.grey, + paddingBottom: 4, + }, + titleText: { + color: colors.primary, + fontSize: 16, + fontWeight: "bold", + textAlign: "center", + }, + contentLine: { + flexDirection: "row", + justifyContent: "space-between", + flexWrap: "wrap", + }, + contentText: { + color: colors.onSurface, + fontSize: 15, + paddingRight: 5, + }, + contentTextValue: { + color: colors.onSurfaceVariant, + fontSize: 15, + paddingRight: 5, + textAlign: "right", + flexGrow: 1, + }, + alertLinkButton: { + marginTop: 15, + marginBottom: 5, + borderRadius: 0, + paddingVertical: 0, + backgroundColor: colors.primary, + }, + alertLinkContent: { + height: 28, + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + }, + alertLinkText: { + color: colors.surface, + fontSize: 15, + }, + alertLinkButtonIcon: { + color: colors.surface, + marginRight: 5, + fontSize: 15, + }, +}));