MAJ accordeon auto page home
This commit is contained in:
sebvtl728
@@ -39,9 +39,15 @@ const ConstructSection = ({
|
||||
// 2️⃣ Si localStorage est vide, récupérer les missions depuis WordPress
|
||||
const response = await api.get("wp/v2/pages/13?_fields=acf");
|
||||
|
||||
if (response.data.acf?.mission && Array.isArray(response.data.acf.mission)) {
|
||||
if (
|
||||
response.data.acf?.mission &&
|
||||
Array.isArray(response.data.acf.mission)
|
||||
) {
|
||||
setMissions(response.data.acf.mission);
|
||||
localStorage.setItem("missions", JSON.stringify(response.data.acf.mission)); // Sauvegarde en local
|
||||
localStorage.setItem(
|
||||
"missions",
|
||||
JSON.stringify(response.data.acf.mission)
|
||||
); // Sauvegarde en local
|
||||
console.log("✅ Missions chargées depuis WordPress !");
|
||||
} else {
|
||||
// 3️⃣ Si aucune mission dans WordPress, utiliser des valeurs par défaut
|
||||
@@ -52,7 +58,9 @@ const ConstructSection = ({
|
||||
];
|
||||
setMissions(defaultMissions);
|
||||
localStorage.setItem("missions", JSON.stringify(defaultMissions));
|
||||
console.log("⚠️ Aucune mission trouvée, valeurs par défaut utilisées !");
|
||||
console.log(
|
||||
"⚠️ Aucune mission trouvée, valeurs par défaut utilisées !"
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -73,7 +81,8 @@ const ConstructSection = ({
|
||||
// ✅ Gestion des changements depuis d'autres onglets/navigateurs
|
||||
useEffect(() => {
|
||||
const handleStorageChange = () => {
|
||||
const updatedMissions = JSON.parse(localStorage.getItem("missions")) || [];
|
||||
const updatedMissions =
|
||||
JSON.parse(localStorage.getItem("missions")) || [];
|
||||
setMissions(updatedMissions);
|
||||
};
|
||||
|
||||
@@ -95,22 +104,63 @@ const ConstructSection = ({
|
||||
{/* Left Column */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box>
|
||||
<Typography variant="h2" sx={{ fontWeight: "bold", fontSize: { xs: "2rem", md: "2.4rem", lg: "3rem" } }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: { xs: "2rem", md: "2.4rem", lg: "3rem" },
|
||||
}}
|
||||
>
|
||||
{constructTitle}{" "}
|
||||
<Typography component="span" sx={{ fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, color: "#0e467f", fontWeight: "bold" }}>
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
|
||||
color: "#0e467f",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{constructSubtitle}
|
||||
</Typography>
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" sx={{ mt: 2, fontWeight: "bold", color: "#0e467f" }}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ mt: 2, fontWeight: "bold", color: "#0e467f" }}
|
||||
>
|
||||
Secteurs : {constructSector}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" sx={{ mt: 2, fontSize: { xs: "1rem", md: "1.2rem" }, lineHeight: 1.6, color: "#666" }} dangerouslySetInnerHTML={{ __html: constructText }} />
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontSize: { xs: "1rem", md: "1.2rem" },
|
||||
lineHeight: 1.6,
|
||||
color: "#666",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: constructText }}
|
||||
/>
|
||||
|
||||
<Card sx={{ mt: 4, backgroundColor: "#0e467f", color: "#fff", borderRadius: "12px", boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)" }}>
|
||||
<Card
|
||||
sx={{
|
||||
mt: 4,
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1" sx={{ fontSize: "1.1rem", lineHeight: 1.6, textAlign: "center" }} dangerouslySetInnerHTML={{ __html: constructNoteText }} />
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontSize: "1.1rem",
|
||||
lineHeight: 1.6,
|
||||
textAlign: "center",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: constructNoteText }}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
@@ -118,10 +168,29 @@ const ConstructSection = ({
|
||||
|
||||
{/* Right Column */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{ backgroundColor: "#fff", padding: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
height: "400px",
|
||||
backgroundImage: `url('https://picsum.photos/id/52/600/400.webp')`, // Replace with the image URL or dynamic data
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
padding: 3,
|
||||
borderRadius: "15px",
|
||||
}}
|
||||
>
|
||||
{/* ✅ Correction de la duplication du titre */}
|
||||
{missionTitle && (
|
||||
<Typography variant="h3" sx={{ fontWeight: "bold", textAlign: "center", mt: 3, mb: 2, color: "#0e467f" }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mt: 3,
|
||||
mb: 2,
|
||||
color: "#0e467f",
|
||||
}}
|
||||
>
|
||||
{missionTitle}
|
||||
</Typography>
|
||||
)}
|
||||
@@ -129,9 +198,21 @@ const ConstructSection = ({
|
||||
{/* ✅ Accordéon dynamique */}
|
||||
{missions.length > 0 ? (
|
||||
missions.map((mission, index) => (
|
||||
<Accordion key={index} expanded={expanded === `panel${index}`} onChange={handleAccordionChange(`panel${index}`)}>
|
||||
<Accordion
|
||||
key={index}
|
||||
expanded={expanded === `panel${index}`}
|
||||
onChange={handleAccordionChange(`panel${index}`)}
|
||||
>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography variant="h6">{mission.title}</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: { xs: "1rem", md: "1.2rem", lg: "1.5rem" },
|
||||
}}
|
||||
>
|
||||
{mission.title}
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>{mission.details}</Typography>
|
||||
@@ -147,7 +228,22 @@ const ConstructSection = ({
|
||||
{/* Background Image et Items */}
|
||||
<Box sx={{ position: "relative", height: "auto", mt: 3 }}>
|
||||
{missionItems?.map((item, index) => (
|
||||
<Box key={index} sx={{ position: "absolute", top: item.top, left: item.left, transform: "translate(-50%, -50%)", backgroundColor: "#0e467f", color: "#fff", padding: "6px 12px", borderRadius: "20px", fontSize: "0.9rem", fontWeight: "bold", textAlign: "center" }}>
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: item.top,
|
||||
left: item.left,
|
||||
transform: "translate(-50%, -50%)",
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
padding: "6px 12px",
|
||||
borderRadius: "20px",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Box>
|
||||
))}
|
||||
|
||||
@@ -263,41 +263,6 @@ const saveMissionsToWordPress = async (missions) => {
|
||||
multiline
|
||||
rows={3}
|
||||
/>
|
||||
|
||||
{/* ✅ Bouton d'enregistrement */}
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 3,
|
||||
fontSize: "1.1rem",
|
||||
fontWeight: "bold",
|
||||
color: "#ffffff",
|
||||
backgroundColor: "#0e467f",
|
||||
"&:hover": { backgroundColor: "#093a6b" },
|
||||
}}
|
||||
onClick={handleSave}
|
||||
>
|
||||
💾 Enregistrer les modifications
|
||||
</Button>
|
||||
|
||||
{/* ✅ Bouton retour au Dashboard */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
borderColor: "#0e467f",
|
||||
color: "#0e467f",
|
||||
}}
|
||||
onClick={() => navigate("/admin/dashboard")}
|
||||
>
|
||||
⬅ Retour au Dashboard
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -352,6 +317,42 @@ const saveMissionsToWordPress = async (missions) => {
|
||||
➕ Ajouter une mission
|
||||
</Button>
|
||||
</Paper>
|
||||
<Paper elevation={3} sx={{ marginTop: "30px", padding: "20px" }}>
|
||||
{/* ✅ Bouton d'enregistrement */}
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 3,
|
||||
fontSize: "1.1rem",
|
||||
fontWeight: "bold",
|
||||
color: "#ffffff",
|
||||
backgroundColor: "#0e467f",
|
||||
"&:hover": { backgroundColor: "#093a6b" },
|
||||
}}
|
||||
onClick={handleSave}
|
||||
>
|
||||
💾 Enregistrer les modifications
|
||||
</Button>
|
||||
|
||||
{/* ✅ Bouton retour au Dashboard */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
borderColor: "#0e467f",
|
||||
color: "#0e467f",
|
||||
}}
|
||||
onClick={() => navigate("/admin/dashboard")}
|
||||
>
|
||||
⬅ Retour au Dashboard
|
||||
</Button>
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user