Añadir el .value al final del enum para imprimirlo funciona a las mil maravillas.
Pero quiero mostrar otra solución más elegante.
En Starship, probablemente será habitual que queramos obtener el estado de la cadena de un Starship.
Para hacerlo más fácil, ¿por qué no añadir aquí un método abreviado llamado getStatusString()?
Esto devolverá un string, y dentro, devolverá $this->status->value.
Gracias a esto, en la plantilla, podemos acortar a ship.statusString.
Ah, ¡y esto es más inteligencia Twig!
¡No hay ninguna propiedad llamada statusString en Starship!
Pero a Twig no le importa.
Ve que hay un método getStatusString() y lo llama.
Observa: cuando actualizamos, la página sigue funcionando.
Me gusta mucho esta solución, así que la copiaré...
y la repetiré aquí arriba para el atributo alt.
Y mientras arreglamos esto, en show.html.twig, también imprimimos el estado allí.
Así que haré ese mismo cambio...
y luego cerraré esto.
Bien: terminemos de dinamizar nuestra plantilla de página de inicio: a partir de aquí todo es coser y cantar.
Para el nombre del barco, {{ ship.name }}, para el capitán, {{ ship.captain }}.
Y aquí abajo para la clase, {{ ship.class }}.
Ah, y rellenemos el enlace: {{ path() }} y luego el nombre de la ruta.
Estamos enlazando con la página del espectáculo del barco, así que la ruta es app_starship_show.
Y como esto tiene un comodín id, pasa id ajustado a ship.id.
Y ahora, ¡mucho mejor!
Se ve bien y podemos hacer clic en estos enlaces.
Pero... la imagen sigue rota.
Antes, cuando copiamos las imágenes en nuestro directorio assets/,
incluí tres archivos para los tres estados.
Aquí arriba, estamos apuntando "más o menos" al estado en curso...
pero ésta no es la forma correcta de hacer referencia a las imágenes del directorio assets/.
En su lugar, di {{ asset() }} y pasa la ruta relativa
al directorio assets/, llamada ruta "lógica".
Si probamos eso ahora...
estamos más cerca.
Pero la parte "en curso" tiene que ser dinámica en función del estado.
Algo que podríamos intentar es la concatenación Twig: añadir ship.status a la cadena.
Eso es posible, aunque es un poco feo.
En lugar de eso, volvamos a la solución que utilizamos hace un momento: hacer que todos los datos
sobre nuestro Starship sean fácilmente accesibles...
desde la clase Starship.
Esto es lo que quiero decir: añade un public function getStatusImageFilename() que devuelva una cadena.
Vamos a hacer toda la lógica para crear el nombre de archivo aquí mismo.
Pondré una función match.
Esto dice: comprueba $this->status y si es igual a WAITING, devuelve esta cadena.
Si es igual a IN_PROGRESS devuelve esta cadena y así sucesivamente.
Y exactamente igual que antes, como tenemos un método getStatusImageFilename(), conseguimos,
en Twig, hacer como si tuviéramos una propiedad statusImageFilename.
Y ahora, ¡ya lo tenemos!
¡Últimas cosas!
Rellenemos algunos enlaces que faltan, como este logotipo que debería ir a la página de inicio.
Ahora mismo...
no va a ninguna parte.
Recuerda que cuando queremos enlazar a una página, tenemos que asegurarnos de que esa ruta tiene un nombre.
En src/Controller/MainController.php...
nuestra página de inicio no tiene nombre.
Vale, tiene un nombre autogenerado, pero no queremos confiar en eso.
Añade name: ajustado a app_homepage.
O puedes utilizar app_main_homepage.
Para enlazar el logotipo, en base.html.twig...
aquí está...
Utiliza {{ path('app_homepage') }}.
Cópialo y repítelo a continuación para otro enlace de inicio.
Dejaremos estos otros enlaces para un futuro tutorial.
De vuelta al navegador, ¡haz clic en ese logotipo!
Ya está. El último enlace que falta está en la página del programa.
Este enlace "atrás" también debería ir a la página de inicio.
Abre show.html.twig.
Y arriba -ahí está- pegaré ese mismo enlace.
Ok equipo, ¡el diseño está hecho!
¡Enhorabuena! Tómate un té...
o un café con leche...
o un donut o un paseo por la naturaleza para celebrarlo.
¡Porque esto es enorme!
Nuestro sitio parece y se siente real.
Estoy encantada.
Ahora podemos centrarnos en los detalles más sutiles.
Por ejemplo, cuando hacemos clic en este enlace, la barra lateral debe colapsarse.
Para ello, quiero presentarte mi herramienta favorita para escribir JavaScript: Stimulus.