v2.0,0 - Refactor code structure for improved readability and maintainability

This commit is contained in:
naielv
2026-02-13 01:56:00 +01:00
parent 4efda27840
commit 30fce4b5a9
11 changed files with 919 additions and 310 deletions

View File

@@ -12,23 +12,23 @@ switch ($_GET["form"]) {
// Por ahora, solo mostramos un mensaje de confirmación.
// Y redirigimos despues de 10 segundos al panel diario.
header("Refresh: 10; URL=/entreaulas/paneldiario.php?aulario=" . urlencode($_GET['aulario'] ?? ''));
?>
?>
<div class="card pad">
<div>
<h1 class="card-title">Menú Seleccionado</h1>
<span>
Has seleccionado el siguiente menú para el día <?php echo htmlspecialchars($selected_date); ?>:
</span>
<ul>
<li>Primer Plato: <?php echo htmlspecialchars($plato1); ?></li>
<li>Segundo Plato: <?php echo htmlspecialchars($plato2); ?></li>
<li>Postre: <?php echo htmlspecialchars($postre); ?></li>
</ul>
<a href="/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary">Volver
al Panel Diario</a>
</div>
<div>
<h1 class="card-title">Menú Seleccionado</h1>
<span>
Has seleccionado el siguiente menú para el día <?php echo htmlspecialchars($selected_date); ?>:
</span>
<ul>
<li>Primer Plato: <?php echo htmlspecialchars($plato1); ?></li>
<li>Segundo Plato: <?php echo htmlspecialchars($plato2); ?></li>
<li>Postre: <?php echo htmlspecialchars($postre); ?></li>
</ul>
<a href="/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary">Volver
al Panel Diario</a>
</div>
</div>
<?php
<?php
die();
break;
}
@@ -36,16 +36,61 @@ switch ($_GET["form"]) {
<audio id="win-sound" src="/static/sounds/win.mp3" preload="auto"></audio>
<audio id="lose-sound" src="/static/sounds/lose.mp3" preload="auto"></audio>
<audio id="click-sound" src="/static/sounds/click.mp3" preload="auto"></audio>
<script>
function announceAndMaybeRedirect(message, redirectUrl, success) {
const fallbackId = success ? 'win-sound' : 'lose-sound';
const fallbackAudio = document.getElementById(fallbackId);
const doRedirect = () => {
if (redirectUrl) {
window.location.href = redirectUrl;
}
};
const playFallback = () => {
if (!fallbackAudio) {
doRedirect();
return;
}
doRedirect();
return;
fallbackAudio.pause();
fallbackAudio.currentTime = 0;
fallbackAudio.onended = () => {
fallbackAudio.onended = null;
doRedirect();
};
fallbackAudio.play().catch(doRedirect);
};
if (!message) {
playFallback();
return;
}
if (!('speechSynthesis' in window)) {
playFallback();
return;
}
try {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(message);
utterance.lang = 'es-ES';
utterance.rate = 1;
utterance.onend = doRedirect;
utterance.onerror = playFallback;
window.speechSynthesis.speak(utterance);
} catch (e) {
playFallback();
}
}
</script>
<?php
switch ($_GET["action"]) {
default:
case "index":
?>
<div class="card pad">
<div>
<h1 class="card-title">Panel Diario</h1>
</div>
</div>
?>
<div id="grid">
<!-- Calendario -->
<a onclick="document.getElementById('click-sound').play()" href="?action=calendar&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary grid-item">
@@ -91,27 +136,31 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "actividades":
$actividades = glob("/DATA/entreaulas/Centros/" . $_SESSION["auth_data"]["entreaulas"]["centro"] . "/Panel/Actividades/*", GLOB_ONLYDIR);
?>
?>
<script>
function seleccionarActividad(element, actividad) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
actividad + ", Actividad seleccionada",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
}
</script>
<div class="card pad">
<div>
<h1 class="card-title">¿Que vamos a hacer?</h1>
</div>
<div class="card pad">
<div>
<h1 class="card-title">¿Que vamos a hacer?</h1>
</div>
</div>
<div id="grid">
<?php foreach ($actividades as $actividad_path) {
@@ -146,9 +195,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "menu":
// Menú del comedor (nuevo sistema, vista simplificada)
@@ -219,14 +271,15 @@ switch ($_GET["action"]) {
}
return "/entreaulas/_filefetch.php?type=comedor_image&centro=" . urlencode($centro_id) . "&aulario=" . urlencode($aulario_id) . "&date=" . urlencode($date) . "&file=" . urlencode($value);
}
?>
?>
<script>
function seleccionarMenuTipo(element, hasData) {
function seleccionarMenuTipo(element, hasData, menu_ty) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
menu_ty + ", Menú seleccionado",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
}
</script>
<div class="card pad">
@@ -234,7 +287,7 @@ switch ($_GET["action"]) {
<div class="text-muted"><?= htmlspecialchars($date) ?></div>
</div>
<div class="menu-grid">
<div class="menum-grid">
<?php
$plates = [
"primero" => "Primer plato",
@@ -256,31 +309,31 @@ switch ($_GET["action"]) {
}
}
}
?>
<div class="card pad menu-card" onclick="seleccionarMenuTipo(this, <?php echo $hasData ? 'true' : 'false'; ?>);" style="cursor: pointer; border: 4px solid <?= htmlspecialchars($typeColor) ?>;">
<h3 class="menu-title" style="color: <?= htmlspecialchars($typeColor) ?>;">
?>
<div class="card pad menum-card" onclick="seleccionarMenuTipo(this, <?php echo $hasData ? 'true' : 'false'; ?>, '<?= htmlspecialchars($typeLabel) ?>');" style="cursor: pointer; border: 4px solid <?= htmlspecialchars($typeColor) ?>;">
<h3 class="menum-title" style="color: <?= htmlspecialchars($typeColor) ?>;">
<?= htmlspecialchars($typeLabel) ?>
</h3>
<?php if (!$hasData): ?>
<div class="menu-placeholder">Menú no disponible</div>
<div class="menum-placeholder">Menú no disponible</div>
<?php else: ?>
<div class="menu-lines">
<div class="menum-lines">
<?php
$loop = 0;
foreach ($plates as $plateKey => $plateLabel):
$loop ++;
$loop++;
$plate = $menuItem["plates"][$plateKey] ?? ["name" => "", "pictogram" => "", "photo" => ""];
$pictSrc = image_src_simple($plate["pictogram"] ?? "", $centro_id, $source_aulario_id, $date);
?>
<div class="menu-line">
?>
<div class="menum-line">
<?php if ($pictSrc !== ""): ?>
<img class="menu-line-img" src="<?= htmlspecialchars($pictSrc) ?>" alt="<?= htmlspecialchars($plateLabel) ?>">
<img class="menum-line-img" src="<?= htmlspecialchars($pictSrc) ?>" alt="<?= htmlspecialchars($plateLabel) ?>">
<?php else: ?>
<div class="menu-line-img placeholder">
<div class="menum-line-img placeholder">
<!-- Nª Plato --><?= $loop ?>
</div>
<?php endif; ?>
<div class="menu-line-name">
<div class="menum-line-name">
<?= $plate["name"] !== "" ? htmlspecialchars($plate["name"]) : "?" ?>
</div>
</div>
@@ -292,37 +345,49 @@ switch ($_GET["action"]) {
</div>
<style>
.menu-grid {
.menum-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
align-items: stretch;
min-width: 0;
}
.menu-card {
.menum-card {
min-height: 260px;
width: 100%;
min-width: 0;
}
.menu-title {
.menum-title {
font-size: 1.6rem;
margin-bottom: 10px;
}
.menu-lines {
.menum-lines {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
min-width: 0;
}
.menu-line {
.menum-line {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-columns: 100px minmax(0, 1fr);
align-items: center;
gap: 8px;
background: #fff;
border-radius: 10px;
padding: 6px 8px;
border: 2px solid #eee;
min-width: 0;
}
.menu-line-title {
.menum-line-title {
font-weight: bold;
}
.menu-line-img {
.menum-line-img {
width: 100px;
height: 100px;
object-fit: contain;
@@ -334,17 +399,24 @@ switch ($_GET["action"]) {
justify-content: center;
font-weight: bold;
}
.menu-line-img.placeholder {
.menum-line-img.placeholder {
background: #f1f1f1;
border-style: dashed;
color: #333;
font-size: 5rem;
}
.menu-line-name {
.menum-line-name {
font-size: 1.1rem;
font-weight: bold;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-placeholder {
.menum-placeholder {
height: 160px;
display: flex;
align-items: center;
@@ -356,44 +428,53 @@ switch ($_GET["action"]) {
font-weight: bold;
}
</style>
<?php
<?php
break;
case "calendar":
// Calendario, elegir el dia, mes, y dia-de-la-semana.
$mes_correcto = date('m');
$dia_correcto = date('d');
$ds_correcto = date('N'); // 1 (Lunes) a 7 (Domingo)
?>
$first_ds = date('N', strtotime(date('Y-m-01'))); // 1 (Lunes) a 7 (Domingo)
$days_in_month = (int) date('t');
?>
<div class="card pad">
<h1>¿Que dia es?</h1>
</div>
<div class="grid">
<div class="calendar-grid">
<script>
function seleccionarDia(element, dia, mes, year, ds) {
// Si es dia correcto
if (dia == <?php echo $dia_correcto; ?> && mes == <?php echo $mes_correcto; ?> && ds == <?php echo $ds_correcto; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "?action=calendario_diasemana&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
dia + ", Correcto",
"?action=calendario_diasemana&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(dia + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
}
}
</script>
<?php foreach (range(1, 31) as $dia) {
<?php
$leading_blanks = max(0, $first_ds - 1);
for ($i = 0; $i < $leading_blanks; $i++) {
echo '<div class="card grid-item calendar-empty"></div>';
}
foreach (range(1, $days_in_month) as $dia) {
$ds = date('N', strtotime(date('Y-m-') . sprintf("%02d", $dia)));
if ($ds > 5) {
?>
?>
<div class="card grid-item" style="background-color: #000; color: #fff; text-align: center;">
<span style="font-size: 48px;"><?php echo $dia; ?></span>
</div>
<?php
<?php
continue;
}
$is_today = ($dia == $dia_correcto);
@@ -402,56 +483,75 @@ switch ($_GET["action"]) {
onclick="seleccionarDia(this, <?php echo $dia; ?>, <?php echo $mes_correcto; ?>, <?php echo date('Y'); ?>, <?php echo $ds; ?>);">
<span style="font-size: 48px;"><?php echo $dia; ?></span>
</a>
<?php } ?>
<?php }
$total_cells = $leading_blanks + $days_in_month;
$trailing_blanks = (7 - ($total_cells % 7)) % 7;
for ($i = 0; $i < $trailing_blanks; $i++) {
echo '<div class="card grid-item calendar-empty"></div>';
}
?>
</div>
<style>
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
grid-auto-rows: 100px;
}
.grid-item {
margin-bottom: 10px !important;
margin-bottom: 0 !important;
padding: 15px;
width: 130px;
height: 100px;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.grid-item img {
margin: 0 auto;
height: 125px;
}
.calendar-empty {
background: transparent;
border: 2px dashed #e0e0e0;
box-shadow: none;
}
.calendar-grid {
min-width: 0;
}
</style>
<script>
var msnry = new Masonry('.grid', {
"columnWidth": 130,
"itemSelector": ".grid-item",
"gutter": 10,
"transitionDuration": 0
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
</script>
<?php
<?php
break;
case "calendario_diasemana":
// Calendario - Día de la semana
$dia_de_la_semana = date('N'); // 1 (Lunes) a 7 (Domingo)
?>
?>
<div class="card pad">
<h1>¿Que día de la semana es?</h1>
</div>
<div class="grid">
<script>
function seleccionarDiaSemana(element, ds) {
var dow = ["", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
// Si es dia de la semana correcto
if (ds == <?php echo $dia_de_la_semana; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
location.href = "/entreaulas/paneldiario.php?action=calendario_mes&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
dow[ds] + ", Correcto",
"/entreaulas/paneldiario.php?action=calendario_mes&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(dow[ds] + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
@@ -474,7 +574,7 @@ switch ($_GET["action"]) {
5 => "Ostirala"
];
foreach ($days_of_week as $ds => $day_name) {
?>
?>
<a class="card grid-item" style="width: 225px; height: 225px; color: black;"
onclick="seleccionarDiaSemana(this, <?php echo $ds; ?>);">
<span style="font-size: 30px;"><?php echo $day_name; ?></span>
@@ -507,9 +607,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "calendario_mes":
// Calendario - Mes
@@ -542,7 +645,7 @@ switch ($_GET["action"]) {
11 => "Azaroa",
12 => "Abendua"
];
?>
?>
<div class="card pad">
<h1>¿Que mes es?</h1>
</div>
@@ -550,15 +653,17 @@ switch ($_GET["action"]) {
<script>
function seleccionarMes(element, mes) {
// Si es mes correcto
var meses = ["", "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
if (mes == <?php echo $mes_correcto; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
meses[mes] + ", Correcto",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(meses[mes] + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
@@ -566,7 +671,7 @@ switch ($_GET["action"]) {
}
</script>
<?php foreach ($meses_esp as $mes => $mes_name) {
?>
?>
<a class="card grid-item" style="width: 180px; height: 180px; color: black;"
onclick="seleccionarMes(this, <?php echo $mes; ?>);">
<span style="font-size: 24px;"><?php echo $mes_name; ?></span>
@@ -599,9 +704,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
}
require_once "_incl/post-body.php"; ?>
require_once "_incl/post-body.php"; ?>