Fase 3 (isla): panel de votación (vote_points) en React/TSX

vote_points_view ya devolvía JSON en POST. VotePanel.tsx renderiza los sitios de
votación (nombre, icono, PV) y cada botón abre el sitio en otra pestaña y hace POST
del voto -> acredita PV o muestra el cooldown que devuelve el backend. La vista pasa
vote_sites_data (serializable) por json_script. Se elimina el JS jQuery y el panel
duplicado; la sección informativa se queda en Django.

Verificado: check OK, render de la isla correcto, redirige a login sin sesión.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 21:48:32 +00:00
parent a4da7f068b
commit cefa30dabc
5 changed files with 132 additions and 34 deletions
+9 -33
View File
@@ -48,39 +48,15 @@
<div class="box-content">
<div class="title-box-content"><h2>Sitios de votación</h2></div>
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/vote_points_response.js"></script>
<div class="body-box-content centered" id="vote-panel">
<button class="refresh-button" onclick="doRefresh();"><img class="refresh-icon" src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-images/nw-icons/refresh.webp" title="Refrescar" alt="Refrescar"></button>
<p><span>Nota:</span> Gtop100 puede demorar unos minutos en acreditar el voto.</p>
<br>
<div id="vote-panel">
<div id="vote-panel">
{% for site in vote_sites %}
<div class="inline-div">
<table>
<tr>
<td><img class="img-med-icon" src="{{ site.image_url }}" title="{{ site.name }}" alt="{{ site.name }}"></td>
</tr>
<tr>
<td>{{ site.name }}</td>
</tr>
<tr>
<td>PV: <span>{{ site.points }}</span></td>
</tr>
<tr>
<td>
<form method="POST" class="nw-vote-form" accept-charset="utf-8">
{% csrf_token %}
<button type="button" class="vote-button" data-url="{{ site.url }}" data-remaining-time="{{ site.remaining_time }}">Votar</button>
</form>
</td>
</tr>
</table>
</div>
{% endfor %}
<hr>
<div class="alert-message" id="voteResponse"></div>
<div class="body-box-content centered">
{% load django_vite %}
<!-- Isla React (Vite): panel de votación. Cada botón abre el sitio
y hace POST del voto (acredita PV o muestra cooldown). -->
<div id="vote-points-app"
data-csrf="{{ csrf_token }}"
data-url="{% url 'vote_points' %}"></div>
{{ vote_sites_data|json_script:"vote-points-data" }}
{% vite_asset 'src/entries/vote_points.tsx' %}
<br>
</div>
</div>