Fase 1 (isla 2): estado del servidor de la portada en React/TSX

Segunda isla de la home: la tabla de estado (nombre, online, login, hora,
dirección) pasa de plantilla Django a componente React.

- API: home_status_api -> /api/home/status/ (server_name, address, expansion,
  online_characters, status). Reutiliza check_server_status y
  get_online_characters_count de views/pages.
- React: ServerStatus.tsx (fetch + reloj en vivo con setInterval, mismas clases
  CSS). El entry home.tsx ahora monta dos islas: #home-news-app y #home-status-app.
- partials/noticias.html: la <table> de estado se sustituye por el contenedor.

Verificado: check OK, ambos endpoints 200, la home monta las dos islas.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 20:22:32 +00:00
parent 98c3cbdbc6
commit d612b7916c
6 changed files with 115 additions and 32 deletions
+3 -23
View File
@@ -8,29 +8,9 @@
<div class="raf-index-holder">
<div class="right-content" id="right-content-min">
<div class="right-body">
<table class="max-center-table">
<tr>
<td class="yellow-info">{{ server.name }} <span class="blue-info small-font">{{ expansion }}<span></td>
<td class="real-info-box green-info">{{ online_characters }}</td>
</tr>
<tr>
<td>Login</td>
<td class="real-info-box {% if status == 'Online' %}green-info{% else %}red-info{% endif %}">{{ status }}</td>
</tr>
<tr>
<td>Hora</td>
<td class="real-info-box"><span id="server-time">{{ server_time }}</span></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr class="centered">
<td colspan="2">
<p><span>{{ server.address }}</span></p>
</td>
</tr>
</table>
<!-- Isla React (Vite): tabla de estado del servidor,
alimentada por /api/home/status/. Reloj en vivo en TSX. -->
<div id="home-status-app"></div>
</div>
<div class="raf-index-responsive"><a href="recruit-a-friend">¡RECLUTA A UN AMIGO!</a></div>
</div>