data-primals-engine 1.5.2 → 1.6.0

package/client/src/DataTable.scss

@@ -1,187 +1,187 @@
-/* client/src/index.css ou un fichier CSS dédié à DataImporter */
-
-.import-progress-container {
-  margin-top: 20px;
-  padding: 15px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-}
-
-.import-progress-container h3 {
-  margin-bottom: 15px;
-  color: #333;
-}
-
-.import-progress-container p {
-  margin-bottom: 8px;
-  color: #555;
-}
-
-.progress-bar-wrapper {
-  width: 100%;
-  background-color: #e0e0e0;
-  border-radius: 5px;
-  overflow: hidden;
-  margin-top: 15px;
-  height: 25px; /* Hauteur de la barre de progression */
-}
-
-.progress-bar {
-  height: 100%;
-  background-color: #4CAF50; /* Couleur verte pour la progression */
-  text-align: center;
-  color: white;
-  line-height: 25px; /* Centrer le texte verticalement */
-  transition: width 0.5s ease-in-out; /* Transition douce pour l'animation de la barre */
-  border-radius: 5px;
-}
-
-.import-errors {
-  margin-top: 20px;
-  padding: 10px;
-  border: 1px solid #f44336; /* Bordure rouge pour les erreurs */
-  background-color: #ffebee; /* Fond rouge clair */
-  border-radius: 5px;
-}
-
-.import-errors h4 {
-  color: #d32f2f; /* Rouge plus foncé pour le titre des erreurs */
-  margin-bottom: 10px;
-}
-
-.import-errors ul {
-  list-style-type: disc;
-  margin-left: 20px;
-  color: #c62828; /* Rouge pour les éléments de liste */
-}
-
-.import-errors li {
-  margin-bottom: 5px;
-}
-
-/* Ajustements pour le bouton de fermeture */
-.flex.justify-end.mt-4 button {
-  padding: 8px 15px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.flex.justify-end.mt-4 button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
-}
-.preview-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9em;
-}
-
-.preview-table td {
-  border: 1px solid #ddd;
-  padding: 4px;
-}
-
-.preview-table-container {
-  max-height: 300px;
-  overflow: auto;
-  border: 1px solid #eee;
-  margin-bottom: 10px;
-}
-
-.gauge-container {
-  position: relative;
-  width: 100%;
-  height: 24px;
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  .gauge-bar {
-    height: 100%;
-    background-color: #4caf50;
-    transition: width 0.3s ease-in-out;
-  }
-
-  .gauge-label {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-    font-size: 12px;
-    font-weight: 500;
-    color: #000;
-    text-shadow: 0 0 2px rgb(255 255 255 / 70%);
-  }
-}
-
-// For cells with a dark background color
-.unlighted {
-  .gauge-container {
-    background-color: rgba(255, 255, 255, 0.2);
-    .gauge-bar {
-      background-color: #a5d6a7; // A lighter green
-    }
-    .gauge-label {
-      color: #fff;
-      text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
-    }
-  }
-}
-
-.range-field {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-
-  input[type="range"] {
-    -webkit-appearance: none; /* Supprime l'apparence par défaut */
-    appearance: none;
-    width: 100%; /* Pleine largeur */
-    height: 8px; /* Hauteur spécifiée */
-    background: #ddd; /* Fond gris */
-    outline: none; /* Pas de contour */
-    opacity: 0.7; /* Transparence pour l'effet de survol */
-    -webkit-transition: .2s; /* Transition de 0.2s au survol */
-    transition: opacity .2s;
-    border-radius: 5px;
-
-    &:hover {
-      opacity: 1; /* Totalement opaque au survol */
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none; /* Supprime l'apparence par défaut */
-      appearance: none;
-      width: 20px; /* Largeur de la poignée */
-      height: 20px; /* Hauteur de la poignée */
-      background: #4CAF50; /* Fond vert */
-      cursor: pointer; /* Curseur en forme de main */
-      border-radius: 50%;
-      border: 2px solid white;
-      box-shadow: 0 0 2px rgba(0,0,0,0.5);
-    }
-
-    &::-moz-range-thumb {
-      width: 20px;
-      height: 20px;
-      background: #4CAF50;
-      cursor: pointer;
-      border-radius: 50%;
-      border: 2px solid white;
-      box-shadow: 0 0 2px rgba(0,0,0,0.5);
-    }
-  }
-
-  .range-value {
-    text-align: center;
-    min-width: fit-content;
-    padding: 4px 8px;
-    border-radius: 4px;
-    border: 1px dotted gray;
-    font-size: 1rem;
-  }
+/* client/src/index.css ou un fichier CSS dédié à DataImporter */
+
+.import-progress-container {
+  margin-top: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.import-progress-container h3 {
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.import-progress-container p {
+  margin-bottom: 8px;
+  color: #555;
+}
+
+.progress-bar-wrapper {
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-top: 15px;
+  height: 25px; /* Hauteur de la barre de progression */
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #4CAF50; /* Couleur verte pour la progression */
+  text-align: center;
+  color: white;
+  line-height: 25px; /* Centrer le texte verticalement */
+  transition: width 0.5s ease-in-out; /* Transition douce pour l'animation de la barre */
+  border-radius: 5px;
+}
+
+.import-errors {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #f44336; /* Bordure rouge pour les erreurs */
+  background-color: #ffebee; /* Fond rouge clair */
+  border-radius: 5px;
+}
+
+.import-errors h4 {
+  color: #d32f2f; /* Rouge plus foncé pour le titre des erreurs */
+  margin-bottom: 10px;
+}
+
+.import-errors ul {
+  list-style-type: disc;
+  margin-left: 20px;
+  color: #c62828; /* Rouge pour les éléments de liste */
+}
+
+.import-errors li {
+  margin-bottom: 5px;
+}
+
+/* Ajustements pour le bouton de fermeture */
+.flex.justify-end.mt-4 button {
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.flex.justify-end.mt-4 button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+.preview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.preview-table td {
+  border: 1px solid #ddd;
+  padding: 4px;
+}
+
+.preview-table-container {
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid #eee;
+  margin-bottom: 10px;
+}
+
+.gauge-container {
+  position: relative;
+  width: 100%;
+  height: 24px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .gauge-bar {
+    height: 100%;
+    background-color: #4caf50;
+    transition: width 0.3s ease-in-out;
+  }
+
+  .gauge-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    font-size: 12px;
+    font-weight: 500;
+    color: #000;
+    text-shadow: 0 0 2px rgb(255 255 255 / 70%);
+  }
+}
+
+// For cells with a dark background color
+.unlighted {
+  .gauge-container {
+    background-color: rgba(255, 255, 255, 0.2);
+    .gauge-bar {
+      background-color: #a5d6a7; // A lighter green
+    }
+    .gauge-label {
+      color: #fff;
+      text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
+    }
+  }
+}
+
+.range-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+
+  input[type="range"] {
+    -webkit-appearance: none; /* Supprime l'apparence par défaut */
+    appearance: none;
+    width: 100%; /* Pleine largeur */
+    height: 8px; /* Hauteur spécifiée */
+    background: #ddd; /* Fond gris */
+    outline: none; /* Pas de contour */
+    opacity: 0.7; /* Transparence pour l'effet de survol */
+    -webkit-transition: .2s; /* Transition de 0.2s au survol */
+    transition: opacity .2s;
+    border-radius: 5px;
+
+    &:hover {
+      opacity: 1; /* Totalement opaque au survol */
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none; /* Supprime l'apparence par défaut */
+      appearance: none;
+      width: 20px; /* Largeur de la poignée */
+      height: 20px; /* Hauteur de la poignée */
+      background: #4CAF50; /* Fond vert */
+      cursor: pointer; /* Curseur en forme de main */
+      border-radius: 50%;
+      border: 2px solid white;
+      box-shadow: 0 0 2px rgba(0,0,0,0.5);
+    }
+
+    &::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      background: #4CAF50;
+      cursor: pointer;
+      border-radius: 50%;
+      border: 2px solid white;
+      box-shadow: 0 0 2px rgba(0,0,0,0.5);
+    }
+  }
+
+  .range-value {
+    text-align: center;
+    min-width: fit-content;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: 1px dotted gray;
+    font-size: 1rem;
+  }
 }

package/client/src/GeolocationField.jsx

@@ -1,94 +1,94 @@
-import React, { useState, useEffect } from 'react';
-import { MapContainer, TileLayer, Marker, useMapEvents, Popup } from 'react-leaflet';
-import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
-
-// Fix for default marker icon issue with webpack/parcel
-delete L.Icon.Default.prototype._getIconUrl;
-
-L.Icon.Default.mergeOptions({
-    iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
-    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
-    shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'
-});
-
-
-const LocationMarker = ({ position, setPosition, name, onChange, value }) => {
-    const map = useMapEvents({
-        click(e) {
-            const { lat, lng } = e.latlng;
-            const newPos = [lat, lng];
-            setPosition(newPos);
-            map.flyTo(newPos, map.getZoom());
-            onChange({
-                name: name,
-                value: {
-                    type: 'Point',
-                    coordinates: [lng, lat]
-                }
-            });
-        },
-        locationfound(e) {
-            const { lat, lng } = e.latlng;
-            const newPos = [lat, lng];
-            setPosition(newPos);
-            map.flyTo(newPos, map.getZoom());
-            onChange({
-                name: name,
-                value: {
-                    type: 'Point',
-                    coordinates: [lng, lat]
-                }
-            });
-        },
-    });
-
-    useEffect(() => {
-        // If there's no value, try to locate user
-        if (!value) {
-             map.locate();
-        }
-    }, [map, value]);
-
-
-    return position === null ? null : (
-        <Marker position={position}>
-            <Popup>Selected location</Popup>
-        </Marker>
-    );
-}
-
-const GeolocationField = ({ value, onChange, name }) => {
-    // Default to a central location if no value is provided, e.g., Paris
-    const initialPosition = (value && value.coordinates && value.coordinates.length === 2)
-        ? [value.coordinates[1], value.coordinates[0]] // Leaflet uses [lat, lng], GeoJSON uses [lng, lat]
-        : [48.8566, 2.3522]; // Default to Paris
-
-    const [position, setPosition] = useState(initialPosition);
-
-    useEffect(() => {
-        if (value && value.coordinates && value.coordinates.length === 2) {
-            const newPos = [value.coordinates[1], value.coordinates[0]];
-            if (position[0] !== newPos[0] || position[1] !== newPos[1]) {
-                setPosition(newPos);
-            }
-        } else {
-            // If value is cleared, reset to default. The map.locate() will try to find the user.
-            setPosition([48.8566, 2.3522]);
-        }
-    }, [value]);
-
-    return (
-        <div style={{ height: '300px', width: '100%' }}>
-            <MapContainer center={position} zoom={13} scrollWheelZoom={true} style={{ height: '100%', width: '100%' }}>
-                <TileLayer
-                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                />
-                <LocationMarker position={position} setPosition={setPosition} name={name} onChange={onChange} value={value} />
-            </MapContainer>
-        </div>
-    );
-};
-
+import React, { useState, useEffect } from 'react';
+import { MapContainer, TileLayer, Marker, useMapEvents, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Fix for default marker icon issue with webpack/parcel
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
+    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
+    shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'
+});
+
+
+const LocationMarker = ({ position, setPosition, name, onChange, value }) => {
+    const map = useMapEvents({
+        click(e) {
+            const { lat, lng } = e.latlng;
+            const newPos = [lat, lng];
+            setPosition(newPos);
+            map.flyTo(newPos, map.getZoom());
+            onChange({
+                name: name,
+                value: {
+                    type: 'Point',
+                    coordinates: [lng, lat]
+                }
+            });
+        },
+        locationfound(e) {
+            const { lat, lng } = e.latlng;
+            const newPos = [lat, lng];
+            setPosition(newPos);
+            map.flyTo(newPos, map.getZoom());
+            onChange({
+                name: name,
+                value: {
+                    type: 'Point',
+                    coordinates: [lng, lat]
+                }
+            });
+        },
+    });
+
+    useEffect(() => {
+        // If there's no value, try to locate user
+        if (!value) {
+             map.locate();
+        }
+    }, [map, value]);
+
+
+    return position === null ? null : (
+        <Marker position={position}>
+            <Popup>Selected location</Popup>
+        </Marker>
+    );
+}
+
+const GeolocationField = ({ value, onChange, name }) => {
+    // Default to a central location if no value is provided, e.g., Paris
+    const initialPosition = (value && value.coordinates && value.coordinates.length === 2)
+        ? [value.coordinates[1], value.coordinates[0]] // Leaflet uses [lat, lng], GeoJSON uses [lng, lat]
+        : [48.8566, 2.3522]; // Default to Paris
+
+    const [position, setPosition] = useState(initialPosition);
+
+    useEffect(() => {
+        if (value && value.coordinates && value.coordinates.length === 2) {
+            const newPos = [value.coordinates[1], value.coordinates[0]];
+            if (position[0] !== newPos[0] || position[1] !== newPos[1]) {
+                setPosition(newPos);
+            }
+        } else {
+            // If value is cleared, reset to default. The map.locate() will try to find the user.
+            setPosition([48.8566, 2.3522]);
+        }
+    }, [value]);
+
+    return (
+        <div style={{ height: '300px', width: '100%' }}>
+            <MapContainer center={position} zoom={13} scrollWheelZoom={true} style={{ height: '100%', width: '100%' }}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <LocationMarker position={position} setPosition={setPosition} name={name} onChange={onChange} value={value} />
+            </MapContainer>
+        </div>
+    );
+};
+
 export default GeolocationField;