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:
@@ -1,14 +1,16 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { NewsList } from '../components/NewsList'
|
||||
import { ServerStatus } from '../components/ServerStatus'
|
||||
|
||||
// Isla de la portada: monta la lista de noticias (React) donde Django deja
|
||||
// el contenedor #home-news-app. El resto de la página sigue siendo Django.
|
||||
const el = document.getElementById('home-news-app')
|
||||
if (el) {
|
||||
createRoot(el).render(
|
||||
<StrictMode>
|
||||
<NewsList />
|
||||
</StrictMode>,
|
||||
)
|
||||
// Islas de la portada: cada componente React se monta donde Django deja su
|
||||
// contenedor. El resto de la página sigue siendo Django.
|
||||
function mount(id: string, node: React.ReactElement) {
|
||||
const el = document.getElementById(id)
|
||||
if (el) {
|
||||
createRoot(el).render(<StrictMode>{node}</StrictMode>)
|
||||
}
|
||||
}
|
||||
|
||||
mount('home-news-app', <NewsList />)
|
||||
mount('home-status-app', <ServerStatus />)
|
||||
|
||||
Reference in New Issue
Block a user