This commit is contained in:
2025-12-24 16:01:18 +01:00
parent 9beb6e1b43
commit e615156347
9 changed files with 531 additions and 16 deletions
+231
View File
@@ -0,0 +1,231 @@
<?php
// Protection : nécessite d'être connecté
require __DIR__ . '/includes/auth.php';
require_login('/christmas-list.php');
// Connexion DB
require __DIR__ . '/includes/db.php';
// Config page
$pageTitle = "PachaFamily - Christmas list";
$activePage = "christmas-list";
$bodyClass = "pf-christmas-list";
$pageCss = "/modules/christmas-list/christmas-list.css";
require __DIR__ . '/header.php';
// Constantes
$year = (int)date('Y');
$adults = ['Laia', 'Laura', 'Avi Iaia'];
$children = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim'];
$occasions = [
'TIO' => 'Tió',
'NADAL' => 'Nadal',
'REIS' => 'Reis',
];
// Récup données
$stmt = $pdo->prepare("
SELECT *
FROM pf_christmas_gifts
WHERE year = :year
");
$stmt->execute(['year' => $year]);
$gifts = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Indexer par [adult][child][occasion]
$byAdult = [];
foreach ($gifts as $gift) {
$a = $gift['adult_name'];
$c = $gift['child_name'];
$o = $gift['occasion'];
$byAdult[$a][$c][$o][] = $gift;
}
?>
<div class="pf-container">
<h1>Christmas list <?= htmlspecialchars($year) ?></h1>
<p>Visió sintètica dels regals per adult, infant i festa. Afegeix nous regals amb el botó “+”.</p>
<section class="pf-section pf-section--panel">
<div class="cl-grid-wrapper">
<table class="pf-table cl-grid-table">
<thead>
<!-- Ligne 1 : cellule vide + noms des enfants (colspan=3) -->
<tr>
<th></th>
<?php foreach ($children as $child): ?>
<th colspan="<?= count($occasions) ?>" class="cl-child-header">
<?= htmlspecialchars($child) ?>
</th>
<?php endforeach; ?>
</tr>
<!-- Ligne 2 : Adult + Tió / Nadal / Reis pour chaque enfant -->
<tr>
<th class="cl-header-adult">Adult</th>
<?php foreach ($children as $child): ?>
<?php foreach ($occasions as $occCode => $occLabel): ?>
<th class="cl-header-occ"><?= htmlspecialchars($occLabel) ?></th>
<?php endforeach; ?>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ($adults as $adult): ?>
<tr>
<!-- Colonne adulte -->
<td class="cl-adult-cell"><?= htmlspecialchars($adult) ?></td>
<!-- Colonnes (enfant x fête) -->
<?php foreach ($children as $child): ?>
<?php foreach ($occasions as $occCode => $occLabel): ?>
<?php
$cellGifts = $byAdult[$adult][$child][$occCode] ?? [];
$total = array_sum(array_column($cellGifts, 'amount'));
// Id unique pour cette cellule (pour cibler le menu en JS)
$cellId = 'cell_' . md5($adult . '_' . $child . '_' . $occCode);
?>
<td class="cl-gift-cell" data-cell-id="<?= $cellId ?>">
<div class="cl-gift-cell-content">
<?php if (!empty($cellGifts)): ?>
<ul class="cl-gift-list">
<?php foreach ($cellGifts as $gift): ?>
<li>
<?= htmlspecialchars($gift['gift_description']) ?>
<?php if ($gift['amount'] > 0): ?>
<span class="cl-gift-amount">
(<?= number_format($gift['amount'], 0, ',', ' ') ?> €)
</span>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<span class="cl-empty"> Cap regal</span>
<?php endif; ?>
<div class="cl-total-and-add">
<div class="cl-gift-total">
<?php if ($total > 0): ?>
Total: <?= number_format($total, 0, ',', ' ') ?> €
<?php else: ?>
&nbsp;
<?php endif; ?>
</div>
<button type="button"
class="cl-add-btn"
data-target="<?= $cellId ?>">
+
</button>
</div>
</div>
<!-- Menu d'ajout caché au départ -->
<div class="cl-add-menu" id="<?= $cellId ?>">
<form method="post" action="/modules/christmas-list/save-gift.php" class="cl-gift-form">
<input type="hidden" name="year" value="<?= $year ?>">
<input type="hidden" name="adult_name" value="<?= htmlspecialchars($adult) ?>">
<input type="hidden" name="child_name" value="<?= htmlspecialchars($child) ?>">
<input type="hidden" name="occasion" value="<?= htmlspecialchars($occCode) ?>">
<input type="text" name="gift_description" placeholder="Regal..." required>
<div class="cl-gift-form-row">
<input type="url" name="product_link" placeholder="Enllaç">
<input type="number" name="amount" placeholder="€" step="0.01" min="0">
</div>
<div class="cl-gift-form-actions">
<button type="button" class="cl-cancel-btn" data-target="<?= $cellId ?>">Cancel·lar</button>
<button type="submit" class="cl-ok-btn">OK</button>
</div>
</form>
</div>
</td>
<?php endforeach; ?>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
<section class="pf-section pf-section--panel">
<h2>Resum del pressupost</h2>
<?php
$stmtSum = $pdo->prepare("
SELECT adult_name, child_name, occasion, SUM(amount) AS total
FROM pf_christmas_gifts
WHERE year = :year
GROUP BY adult_name, child_name, occasion
ORDER BY adult_name, child_name, occasion
");
$stmtSum->execute(['year' => $year]);
$sums = $stmtSum->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="cl-budget-wrapper">
<table class="pf-table pf-table--compact">
<thead>
<tr>
<th>Adult</th>
<th>Infant</th>
<th>Festa</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php foreach ($sums as $row): ?>
<tr>
<td><?= htmlspecialchars($row['adult_name']) ?></td>
<td><?= htmlspecialchars($row['child_name']) ?></td>
<td><?= htmlspecialchars($occasions[$row['occasion']] ?? $row['occasion']) ?></td>
<td><?= number_format($row['total'], 0, ',', ' ') ?> €</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
</div>
<!-- JS inline simple pour ouvrir/fermer les menus d'ajout -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Ouvrir le menu associé au bouton +
document.querySelectorAll('.cl-add-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
const targetId = btn.getAttribute('data-target');
const menu = document.getElementById(targetId);
// Fermer les autres menus avant d'ouvrir celui-ci
document.querySelectorAll('.cl-add-menu').forEach(function (m) {
if (m.id !== targetId) {
m.classList.remove('cl-add-menu--open');
}
});
menu.classList.toggle('cl-add-menu--open');
});
});
// Boutons Cancel·lar pour fermer le menu
document.querySelectorAll('.cl-cancel-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
const targetId = btn.getAttribute('data-target');
const menu = document.getElementById(targetId);
menu.classList.remove('cl-add-menu--open');
});
});
});
</script>
<?php
require __DIR__ . '/footer.php';
+1 -1
View File
@@ -38,7 +38,7 @@ body {
/* === LAYOUT CONTAINER / HEADER / NAV / FOOTER === */ /* === LAYOUT CONTAINER / HEADER / NAV / FOOTER === */
.pf-container { .pf-container {
max-width: 1200px; max-width: 1440px;
margin: 0 auto; margin: 0 auto;
padding: 0 16px; padding: 0 16px;
} }
+3
View File
@@ -39,6 +39,9 @@ if (!isset($activePage)) {
<a href="/family-calendar.php" <a href="/family-calendar.php"
class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a> class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
<a href="/christmas-list.php"
class="pf-nav-link <?= $activePage === 'Christmas-list' ? 'pf-nav-link--active' : ''; ?>">Christmas list</a>
<?php if (isset($_SESSION['user'])): ?> <?php if (isset($_SESSION['user'])): ?>
<span class="pf-nav-user"> <span class="pf-nav-user">
Bonjour <?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?> Bonjour <?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?>
+8 -9
View File
@@ -12,8 +12,6 @@ $pageCss = "/modules/home/home.css";
require __DIR__ . '/header.php'; require __DIR__ . '/header.php';
?> ?>
<div class="pf-container"> <div class="pf-container">
<h1>Bienvenue sur PachaFamily</h1> <h1>Bienvenue sur PachaFamily</h1>
<p>Centre de contrôle de l'organisation familiale.</p> <p>Centre de contrôle de l'organisation familiale.</p>
@@ -51,15 +49,16 @@ require __DIR__ . '/header.php';
<span class="pf-card-cta">À venir</span> <span class="pf-card-cta">À venir</span>
</div> </div>
<!-- Autre exemple --> <!-- Module : Christmas list -->
<div class="pf-card pf-card--module pf-card--disabled"> <a href="/christmas-list.php" class="pf-card pf-card--module">
<div class="pf-card-icon">📦</div> <div class="pf-card-icon">🎄</div>
<h3 class="pf-card-title">Liste de courses</h3> <h3 class="pf-card-title">Christmas list</h3>
<div class="pf-card-body"> <div class="pf-card-body">
Centralisez les listes de courses et les partages entre membres. Planifica els regals de cada nen, per al Tió, el Nadal i els Reis.
</div>
<span class="pf-card-cta">À venir</span>
</div> </div>
<span class="pf-card-cta">Accedir al mòdul</span>
</a>
</div> </div>
</section> </section>
</div> </div>
+221
View File
@@ -0,0 +1,221 @@
/* Christmas list : vue synthétique avec bouton + et menu flottant */
.pf-christmas-list h1 {
margin-bottom: 4px;
}
.pf-christmas-list p {
margin-top: 0;
margin-bottom: 12px;
font-size: 13px;
color: #4b5563;
}
/* Grille principale */
.cl-grid-wrapper {
overflow-x: auto; /* sécurité pour petits écrans */
}
.cl-grid-table {
font-size: 11px;
}
/* En-têtes */
.cl-grid-table thead th {
padding: 6px 4px;
}
.cl-child-header {
text-align: center;
font-weight: 600;
white-space: nowrap;
}
.cl-header-adult {
text-align: left;
white-space: nowrap;
}
.cl-header-occ {
text-align: center;
font-weight: 500;
color: #627d98;
}
/* Colonne adulte */
.cl-adult-cell {
font-weight: 600;
white-space: nowrap;
padding: 8px 6px;
}
/* Cellules cadeau */
.cl-gift-cell {
min-width: 120px;
vertical-align: top;
padding: 6px 4px;
}
/* Contenu de la cellule : colonne verticale */
.cl-gift-cell-content {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Liste des cadeaux : alignée à gauche */
.cl-gift-list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.cl-gift-list li {
margin-bottom: 2px;
}
/* Montant par cadeau */
.cl-gift-amount {
font-size: 10px;
color: #627d98;
margin-left: 2px;
}
/* Cellule vide */
.cl-empty {
display: inline-block;
margin-bottom: 2px;
font-size: 11px;
color: #9fb3c8;
}
/* Ligne Total + bouton + */
.cl-total-and-add {
display: flex;
align-items: center;
justify-content: space-between; /* Total à gauche, + à droite */
gap: 4px;
margin-top: 2px;
}
/* Texte Total */
.cl-gift-total {
font-size: 10px;
font-weight: 600;
color: #243b53;
}
/* Bouton + */
.cl-add-btn {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #d9e2ec;
background: #f0f4f8;
color: #243b53;
font-size: 12px;
line-height: 18px;
text-align: center;
padding: 0;
cursor: pointer;
}
.cl-add-btn:hover {
background: #d9e2ec;
}
/* Menu d'ajout (caché par défaut) */
.cl-add-menu {
display: none;
margin-top: 4px;
padding: 6px;
border-radius: 6px;
border: 1px solid #d9e2ec;
background: #f8fafc;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
/* Classe pour afficher le menu */
.cl-add-menu--open {
display: block;
}
/* Formulaire dans le menu */
.cl-gift-form {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Ligne du formulaire (lien + montant) */
.cl-gift-form-row {
display: flex;
gap: 4px;
}
/* Champs du formulaire */
.cl-gift-form input[type="text"],
.cl-gift-form input[type="url"],
.cl-gift-form input[type="number"] {
font-size: 10px;
padding: 2px 4px;
border-radius: 4px;
border: 1px solid #d9e2ec;
}
.cl-gift-form input[type="text"] {
width: 100%;
}
.cl-gift-form input[type="url"] {
flex: 1 1 auto;
}
.cl-gift-form input[type="number"] {
width: 60px;
}
/* Boutons OK / Cancel */
.cl-gift-form-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
margin-top: 2px;
}
.cl-gift-form-actions button {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid #d9e2ec;
background: #f0f4f8;
cursor: pointer;
}
.cl-gift-form-actions button:hover {
background: #d9e2ec;
}
.cl-ok-btn {
font-weight: 600;
color: #1f2933;
}
.cl-cancel-btn {
color: #9fb3c8;
}
/* Récap global en bas */
.cl-budget-wrapper {
margin-top: 4px;
}
.cl-budget-wrapper .pf-table {
font-size: 11px;
}
.cl-budget-wrapper .pf-table th,
.cl-budget-wrapper .pf-table td {
padding: 4px 4px;
}
+38
View File
@@ -0,0 +1,38 @@
<?php
require __DIR__ . '/../../includes/auth.php';
require_login('/christmas-list.php');
require __DIR__ . '/../../includes/db.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$year = (int)($_POST['year'] ?? date('Y'));
$adult_name = trim($_POST['adult_name'] ?? '');
$child_name = trim($_POST['child_name'] ?? '');
$occasion = trim($_POST['occasion'] ?? ''); // TIO / NADAL / REIS
$gift_desc = trim($_POST['gift_description'] ?? '');
$product_link = trim($_POST['product_link'] ?? '');
$amount = $_POST['amount'] !== '' ? (float)$_POST['amount'] : 0.0;
if ($adult_name && $child_name && $occasion && $gift_desc) {
$stmt = $pdo->prepare("
INSERT INTO pf_christmas_gifts
(year, adult_name, child_name, occasion, gift_description, product_link, amount)
VALUES
(:year, :adult_name, :child_name, :occasion, :gift_description, :product_link, :amount)
");
$stmt->execute([
'year' => $year,
'adult_name' => $adult_name,
'child_name' => $child_name,
'occasion' => $occasion,
'gift_description'=> $gift_desc,
'product_link' => $product_link ?: null,
'amount' => $amount,
]);
}
}
// Retour à la page Christmas list
header('Location: /christmas-list.php');
exit;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 535 KiB

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

+27 -4
View File
@@ -1,12 +1,15 @@
/* === HOME : fond et overlay === */ /* === HOME : fond et overlay === */
/* Fond image + overlay uniquement pour la home */ /* Fond image uniquement pour la home */
body.pf-home { body.pf-home {
position: relative; position: relative;
background-image: url("/modules/home/assets/img/background.jpg"); background-image: url("/modules/home/assets/img/background.jpg");
background-size: cover; background-size: cover;
background-position: top center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
/* Texte global plutôt clair sur la home (sur l'image) */
color: #f9fafb;
} }
/* Header translucide par-dessus l'image sur la home */ /* Header translucide par-dessus l'image sur la home */
@@ -30,6 +33,11 @@ body.pf-home > * {
z-index: 0; z-index: 0;
} }
/* Descendre légèrement le contenu sous le header sur la home */
body.pf-home .pf-main {
padding-top: 60px; /* au lieu de 24px défini dans global.css */
}
/* === HOME / MODULES CARDS === */ /* === HOME / MODULES CARDS === */
/* Container des cartes de modules */ /* Container des cartes de modules */
@@ -103,11 +111,11 @@ body.pf-home > * {
.pf-user-info { .pf-user-info {
margin-top: 12px; margin-top: 12px;
font-size: 13px; font-size: 13px;
color: #4b5563; color: #f9fafb; /* lisible sur le fond */
} }
.pf-user-info a { .pf-user-info a {
color: #c81e1e; color: #ffb4b4;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }
@@ -115,3 +123,18 @@ body.pf-home > * {
.pf-user-info a:hover { .pf-user-info a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Dans les cards (fond clair) : texte foncé */
body.pf-home .pf-card,
body.pf-home .pf-section--panel {
color: #222;
}
/* Sassurer que les titres / textes intro sont bien à gauche et lisibles */
body.pf-home h1,
body.pf-home .pf-container > p,
body.pf-home .pf-user-info,
body.pf-home .pf-section > h2 {
text-align: left;
color: #f9fafb;
}