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,
+ },
+}));