Add ¿Quién soy? flow to Panel Diario

Co-authored-by: naielv <109038805+naielv@users.noreply.github.com>

DATA_STRUCTURE.md

@@ -59,6 +59,25 @@ DATA/
 }
 ```
 
+### Aulario Student Names (DATA/entreaulas/Centros/{centro_id}/Aularios/{aulario_id}/Alumnos/)
+
+The Alumnos directory contains subdirectories for each student, where each student has:
+- A unique folder name (student identifier)
+- A `photo.jpg` file with the student's photo/pictogram
+
+Example structure:
+```
+DATA/entreaulas/Centros/centro1/Aularios/aulario_abc123/Alumnos/
+├── Juan/
+│   └── photo.jpg
+├── Maria/
+│   └── photo.jpg
+└── Pedro/
+    └── photo.jpg
+```
+
+This structure is used by the "¿Quién soy?" (Who am I?) feature in Panel Diario, where students can identify themselves by selecting their photo.
+
 ## Generating Password Hashes
 
 To create password hashes for your users, use one of these methods:

public_html/entreaulas/_filefetch.php

@@ -6,6 +6,12 @@ ini_set('memory_limit', '1G');
 header("Access-Control-Allow-Origin: *");
 
 switch ($_GET["type"]) {
+    case "alumno_photo":
+        $centro = str_replace('..', '_', $_GET["centro"] ?? '');
+        $aulario = str_replace('..', '_', $_GET["aulario"] ?? '');
+        $alumno = str_replace('..', '_', $_GET["alumno"] ?? '');
+        $relpath = "entreaulas/Centros/$centro/Aularios/$aulario/Alumnos/$alumno/photo.jpg";
+        break;
     case "panel_actividades":
         $centro = str_replace('..', '_', $_GET["centro"] ?? '');
         $activity = str_replace('..', '_', $_GET["activity"] ?? '');

public_html/entreaulas/paneldiario.php

@@ -92,6 +92,12 @@ switch ($_GET["action"]) {
   case "index":
 ?>
     <div id="grid">
+      <!-- ¿Quién soy? -->
+      <a onclick="document.getElementById('click-sound').play()" href="?action=quien_soy&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary grid-item">
+        <img src="/static/arasaac/yo.png" height="125" class="bg-white">
+        <br>
+        ¿Quién soy?
+      </a>
       <!-- Calendario -->
       <a onclick="document.getElementById('click-sound').play()" href="?action=calendar&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary grid-item">
         <img src="/static/arasaac/calendario.png" height="125" class="bg-white">
@@ -142,6 +148,97 @@ switch ($_GET["action"]) {
       }
     </script>
 
+  <?php
+    break;
+  case "quien_soy":
+    // ¿Quién soy? - Identificación del alumno
+    $aulario_id = $_GET["aulario"] ?? "";
+    $centro_id = $_SESSION["auth_data"]["entreaulas"]["centro"] ?? "";
+    
+    $alumnos_path = "/DATA/entreaulas/Centros/$centro_id/Aularios/$aulario_id/Alumnos";
+    $alumnos = [];
+    
+    if (is_dir($alumnos_path)) {
+      $alumnos = glob($alumnos_path . "/*", GLOB_ONLYDIR);
+    }
+  ?>
+    <script>
+      function seleccionarAlumno(element, nombre) {
+        element.style.backgroundColor = "#9cff9f"; // Verde
+        announceAndMaybeRedirect(
+          nombre + ", ¡Hola " + nombre + "!",
+          "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
+          true
+        );
+      }
+    </script>
+    <div class="card pad">
+      <div>
+        <h1 class="card-title">¿Quién soy?</h1>
+      </div>
+    </div>
+    <div id="grid">
+      <?php 
+      if (empty($alumnos)) {
+      ?>
+        <div class="card pad" style="width: 100%;">
+          <p>No hay alumnos registrados en este aulario.</p>
+          <p>Para añadir alumnos, crea carpetas con sus nombres en: <code><?php echo htmlspecialchars($alumnos_path); ?></code></p>
+          <p>Cada carpeta debe contener un archivo <code>photo.jpg</code> con la foto o pictograma del alumno.</p>
+        </div>
+      <?php 
+      } else {
+        foreach ($alumnos as $alumno_path) {
+          $alumno_name = basename($alumno_path);
+          $photo_path = $alumno_path . "/photo.jpg";
+          $photo_exists = file_exists($photo_path);
+      ?>
+        <a class="card grid-item" style="color: black;" onclick="seleccionarAlumno(this, '<?php echo htmlspecialchars($alumno_name); ?>');">
+          <?php if ($photo_exists): ?>
+            <img src="_filefetch.php?type=alumno_photo&alumno=<?php echo urlencode($alumno_name); ?>&centro=<?php echo urlencode($centro_id); ?>&aulario=<?php echo urlencode($aulario_id); ?>" height="150" class="bg-white">
+          <?php else: ?>
+            <div style="width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 2px dashed #ccc;">
+              <span style="font-size: 48px;">?</span>
+            </div>
+          <?php endif; ?>
+          <br>
+          <span style="font-size: 20px; font-weight: bold;"><?php echo htmlspecialchars($alumno_name); ?></span>
+        </a>
+      <?php 
+        }
+      } 
+      ?>
+    </div>
+    <style>
+      .grid-item {
+        margin-bottom: 10px !important;
+        padding: 15px;
+        width: 250px;
+        text-align: center;
+        text-decoration: none;
+      }
+
+      .grid-item img {
+        margin: 0 auto;
+        height: 150px;
+        border-radius: 10px;
+        border: 3px solid #ddd;
+      }
+    </style>
+    <script>
+      var msnry = new Masonry('#grid', {
+        "columnWidth": 250,
+        "itemSelector": ".grid-item",
+        "gutter": 10,
+        "transitionDuration": 0
+      });
+      setTimeout(() => {
+        msnry.layout()
+      }, 250);
+      window.onresize = () => {
+        msnry.layout()
+      }
+    </script>
   <?php
     break;
   case "actividades":