imio.smartweb.core 1.2.90__py3-none-any.whl → 1.3__py3-none-any.whl

imio/smartweb/core/webcomponents/src/hooks/useAxios.js

@@ -16,25 +16,61 @@ const useAxios = (params) => {
         } else {
             setIsMore(false);
         }
-        if (Object.keys(params.params).length == 0) {
+
+        if (Object.keys(params.params).length === 0) {
             setResponse(null);
             return;
-        } else {
-            try {
+        }
+
+        try {
+            // Handle multiple URLs with identifiers
+            if (Array.isArray(params.url)) {
+                const requests = params.url.map((urlConfig, index) => {
+                    const { url, identifier } =
+                        typeof urlConfig === "string"
+                            ? { url: urlConfig, identifier: `request_${index}` }
+                            : urlConfig;
+
+                    return axios
+                        .request({
+                            ...params,
+                            url,
+                            signal: controller.signal,
+                        })
+                        .then((res) => ({
+                            identifier,
+                            data: res.data,
+                        }));
+                });
+
+                const responses = await Promise.all(requests);
+                // Convert array to object with identifiers as keys
+                const responseObject = responses.reduce((acc, { identifier, data }) => {
+                    acc[identifier] = data;
+                    return acc;
+                }, {});
+
+                setResponse(responseObject);
+            }
+            // Handle single URL
+            else {
                 const res = await axios.request(params);
                 setResponse(res.data);
-                setIsLoading(false);
-                setError(null);
-            } catch (err) {
-                setError(err);
             }
+            setIsLoading(false);
+            setError(null);
+        } catch (err) {
+            setError(err);
+            setIsLoading(false);
         }
     };
+
     useEffect(() => {
         fetchData({ ...params, signal: controller.signal });
-        return () => controller.abort()
+        return () => controller.abort();
     }, [params.params]);
+
     return { response, error, isLoading, isMore };
 };
 
-export default useAxios;
+export default useAxios;

imio/smartweb/core/webcomponents/src/index.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactWebComponent from "react-web-component";
 import Annuaire from "./components/Annuaire";
+import Campaign from "./components/Campaign";
 import News from "./components/News";
 import Events from "./components/Events";
 import Search from "./components/Search";
@@ -11,6 +12,7 @@ import "./index.scss";
   Note: if your webcomponent depends on external css, disable shadow root
 */
 ReactWebComponent.create(<Annuaire />, "smartweb-annuaire", false);
+ReactWebComponent.create(<Campaign />, "smartweb-campaign", false);
 ReactWebComponent.create(<News />, "smartweb-news", false);
 ReactWebComponent.create(<Events />, "smartweb-events", false);
 ReactWebComponent.create(<Search />, "smartweb-search", false);

imio/smartweb/core/webcomponents/src/index.scss

@@ -280,9 +280,9 @@
         height: 100%;
         top: 0;
         left: 0;
-        background-size: cover;
+        background-size: 130%;
         background-position: center;
-        opacity: 0.8;
+        opacity: 0.6;
     }
 
     &-img {

imio/smartweb/core/webcomponents/src/utils/CampaignMap.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from "react";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import useFilterQuery from "../hooks/useFilterQuery";
+import L from "leaflet";
+import iconSvg from "../assets/pin-react.svg";
+import iconSvgActivated from "../assets/pin-react-active.svg";
+import { Link } from "react-router-dom";
+import "./Map.scss";
+import "leaflet/dist/leaflet.css";
+import removeAccents from "remove-accents";
+import queryString from "query-string";
+import { el } from "date-fns/locale";
+
+function ChangeMapView({ activeItem, arrayOfLatLngs }) {
+    const map = useMap();
+    if (activeItem) {
+        const activeCoord = [];
+        activeCoord.push(activeItem.fields.geolocalisation.lat);
+        activeCoord.push(activeItem.fields.geolocalisation.lon);
+        map.setView(activeCoord, 15);
+    } else {
+        let bounds = new L.LatLngBounds(arrayOfLatLngs);
+        map.fitBounds(bounds);
+    }
+    return null;
+}
+
+function Map(props) {
+    const [activeItem, setActiveItem] = useState(null);
+    const [filterGeoArray, setFilterGeoArray] = useState([]);
+    const [allPosition, setAllPosition] = useState(null);
+    const { u, ...parsed } = Object.assign({
+        id: queryString.parse(useFilterQuery().toString())["u"],
+    });
+    // Delete Imio positions
+    useEffect(() => {
+        if (!props.items) {
+            return;
+        }
+        const filterArray = props.items.filter((isgeo) => {
+            if (isgeo.fields) {
+                return (
+                    isgeo.fields.geolocalisation.lat &&
+                    isgeo.fields.geolocalisation.lat !== 50.4989185 &&
+                    isgeo.fields.geolocalisation.lon !== 4.7184485
+                );
+            } else {
+                return (
+                    isgeo.geolocation.latitude &&
+                    isgeo.geolocation.latitude !== 50.4989185 &&
+                    isgeo.geolocation.longitude !== 4.7184485
+                );
+            }
+        });
+        setFilterGeoArray(filterArray);
+    }, [props.items]);
+
+    // Setup Maker Icon
+    const mapIcon = (url) => {
+        return new L.Icon({
+            iconUrl: url,
+            iconSize: [29, 37],
+        });
+    };
+    // Get Marker Icon and Z-index
+    const getMarkerIcon = (index) => {
+        if (index === parsed.id) {
+            return mapIcon(iconSvgActivated);
+        }
+        if (index === props.hoverId) {
+            return mapIcon(iconSvgActivated);
+        }
+        return mapIcon(iconSvg);
+    };
+    const getMarkerZindex = (index) => {
+        if (index === props.clickId) {
+            return 999;
+        }
+        if (index === props.hoverId) {
+            return 999;
+        }
+        return 1;
+    };
+
+    useEffect(() => {
+        var result =
+            filterGeoArray &&
+            filterGeoArray.filter((obj) => {
+                return obj.id === parsed.id;
+            });
+        setActiveItem(result[0]);
+    }, [filterGeoArray]);
+
+    useEffect(() => {
+        if (filterGeoArray.length > 0) {
+            let posArray = [];
+            filterGeoArray.map((pos, i) => {
+                let lat = pos.fields.geolocalisation.lat;
+                let long = pos.fields.geolocalisation.lon;
+                posArray.push([lat, long]);
+            });
+            setAllPosition(posArray);
+        }
+    }, [filterGeoArray]);
+    const position = [50.85034, 4.35171];
+
+    const markers = filterGeoArray.map((mark, i) => (
+        <Marker
+            key={i}
+            icon={getMarkerIcon(mark.id)}
+            zIndexOffset={getMarkerZindex(mark.id)}
+            position={[
+                mark.fields.geolocalisation ? mark.fields.geolocalisation.lat : "",
+                mark.fields.geolocalisation ? mark.fields.geolocalisation.lon : "",
+            ]}
+            eventHandlers={{
+                mouseover: (e) => {
+                    // Gérer les événements ici
+                },
+            }}
+        >
+            <Popup closeButton={false}>
+                <Link
+                    className="r-map-popup"
+                    style={{ textDecoration: "none" }}
+                    to={{
+                        pathname:
+                            "/" +
+                            removeAccents(mark.text)
+                                .replace(/[^a-zA-Z ]/g, "")
+                                .replace(/\s/g, "-")
+                                .toLowerCase(),
+                        search: `?u=${mark.id}`,
+                        state: {
+                            idItem: mark.id,
+                        },
+                    }}
+                >
+                    <span className="r-map-popup-title">{mark.text}</span>
+                </Link>
+                <a
+                    href={`https://www.google.com/maps/dir/?api=1&destination=${mark.fields.rue ? mark.fields.rue + " " + mark.fields.numero : ""}`}
+                    className="r-map-popup-adress"
+                >
+                    {mark.fields.rue && mark.fields.rue + " " + mark.fields.numero}
+                </a>
+            </Popup>
+        </Marker>
+    ));
+
+    return (
+        <div>
+            <MapContainer
+                style={{ height: `calc(100vh - ${props.headerHeight}px)`, minHeight: "600px" }}
+                center={position}
+                zoom={35}
+            >
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                {allPosition != null ? (
+                    <ChangeMapView
+                        activeItem={activeItem}
+                        activeItemUID={parsed.id}
+                        arrayOfLatLngs={allPosition && allPosition}
+                    />
+                ) : (
+                    ""
+                )}
+                {filterGeoArray && markers}
+            </MapContainer>
+        </div>
+    );
+}
+
+export default Map;

imio/smartweb/core/webcomponents/src/utils/Map.jsx

@@ -91,7 +91,7 @@ function Map(props) {
     }, [filterGeoArray]);
     const position = [50.85034, 4.35171];
 
-    const markers = filterGeoArray.map((mark,i) => (
+    const markers = filterGeoArray.map((mark, i) => (
         <Marker
             key={i}
             icon={getMarkerIcon(mark.UID)}

imio/smartweb/core/webcomponents/src/utils/Map.scss

@@ -4,4 +4,18 @@
 
 .leaflet-popup {
     padding: 0;
-}
+}
+.r-map-popup-title {
+    font-weight: bold;
+    text-decoration: none !important;
+}
+
+.r-map-popup-adress {
+    font-size: 1em;
+    text-decoration: underline;
+    display: block;
+    margin-top: 0.5rem;
+    color: #202228;
+    position: relative;
+    z-index: 1;
+}