fix(dae): alert navigation view

src/containers/Map/ShapePoints.js

@@ -17,9 +17,11 @@ const iconStyle = {
   iconSize: 0.5,
 };
 
-const defibIconStyle = {
-  ...iconStyle,
-  iconAllowOverlap: true,
+const defibCircleStyle = {
+  circleRadius: 8,
+  circleColor: ["get", "defibColor"],
+  circleStrokeColor: "#FFFFFF",
+  circleStrokeWidth: 2,
 };
 
 const useStyles = createStyles(({ theme: { colors } }) => ({
@@ -64,12 +66,12 @@ export default function ShapePoints({ shape, children, ...shapeSourceProps }) {
       />
 
       {/* Defibrillators (DAE) – separate layer (non-clustered) */}
-      <Maplibre.SymbolLayer
+      <Maplibre.CircleLayer
         filter={["==", ["get", "isDefib"], true]}
         key="points-defib"
         id="points-defib"
         aboveLayerID="points-origin"
-        style={defibIconStyle}
+        style={defibCircleStyle}
       />
 
       {children}

src/scenes/AlertCurMap/ControlButtons.js

@@ -20,8 +20,6 @@ export default function ControlButtons({
   setZoomLevel,
   detached,
 }) {
-  // const styles = useStyles();
-
   return (
     <>
       <View

src/scenes/AlertCurMap/useFeatures.js

@@ -119,8 +119,10 @@ export default function useFeatures({
           defib.horaires_std,
           defib.disponible_24h,
         );
-        const icon =
-          status === "open" ? "green" : status === "closed" ? "red" : "grey";
+        // Only show available defibs on the alert navigation map
+        if (status !== "open") {
+          return;
+        }
         const id = `defib:${defib.id}`;
 
         features.push({
@@ -128,7 +130,7 @@ export default function useFeatures({
           id,
           properties: {
             id,
-            icon,
+            defibColor: "#4CAF50",
             defib,
             isDefib: true,
           },

src/scenes/AlertCurOverview/index.js

@@ -13,6 +13,7 @@ import {
   useSessionState,
   alertActions,
   useAggregatedMessagesState,
+  useDefibsState,
   defibsActions,
 } from "~/stores";
 import { getCurrentLocation } from "~/location";
@@ -84,9 +85,17 @@ export default withConnectivity(
     const navigation = useNavigation();
     const toast = useToast();
 
+    const { showDefibsOnAlertMap: defibsEnabled } = useDefibsState([
+      "showDefibsOnAlertMap",
+    ]);
     const [loadingDaeCorridor, setLoadingDaeCorridor] = useState(false);
 
-    const showDefibsOnAlertMap = useCallback(async () => {
+    const toggleDefibsOnAlertMap = useCallback(async () => {
+      if (defibsEnabled) {
+        defibsActions.setShowDefibsOnAlertMap(false);
+        return;
+      }
+
       if (loadingDaeCorridor) {
         return;
       }
@@ -174,7 +183,7 @@ export default withConnectivity(
       } finally {
         setLoadingDaeCorridor(false);
       }
-    }, [alert, loadingDaeCorridor, navigation, toast]);
+    }, [alert, defibsEnabled, loadingDaeCorridor, navigation, toast]);
 
     const [notifyAroundMutation] = useMutation(NOTIFY_AROUND_MUTATION);
     const notifyAround = useCallback(async () => {
@@ -501,21 +510,33 @@ export default withConnectivity(
               >
                 <Button
                   mode="contained"
-                  loading={loadingDaeCorridor}
                   disabled={loadingDaeCorridor}
                   icon={() => (
                     <MaterialCommunityIcons
-                      name="heart-pulse"
+                      name={
+                        loadingDaeCorridor
+                          ? "loading"
+                          : defibsEnabled
+                            ? "heart-off"
+                            : "heart-pulse"
+                      }
                       style={[styles.actionIcon, styles.actionShowDefibsIcon]}
                     />
                   )}
-                  style={[styles.actionButton, styles.actionShowDefibsButton]}
-                  onPress={showDefibsOnAlertMap}
+                  style={[
+                    styles.actionButton,
+                    defibsEnabled
+                      ? styles.actionShowDefibsButtonActive
+                      : styles.actionShowDefibsButton,
+                  ]}
+                  onPress={toggleDefibsOnAlertMap}
                 >
                   <Text
                     style={[styles.actionText, styles.actionShowDefibsText]}
                   >
-                    Afficher les défibrillateurs
+                    {defibsEnabled
+                      ? "Ne plus afficher les défibrillateurs"
+                      : "Afficher les défibrillateurs"}
                   </Text>
                 </Button>
               </View>

src/scenes/AlertCurOverview/styles.js

@@ -73,6 +73,9 @@ export default createStyles(({ wp, hp, scaleText, theme: { colors } }) => ({
   actionShowDefibsButton: {
     backgroundColor: colors.blue,
   },
+  actionShowDefibsButtonActive: {
+    backgroundColor: colors.grey,
+  },
   actionShowDefibsText: {},
   actionShowDefibsIcon: {},
   actionSmsButton: {},