feat: added language selection to pattern detail view

2026-07-16 11:43:03 +02:00
parent 55410d675b
commit 32040ca46c
4 changed files with 29 additions and 25 deletions
@@ -18,11 +18,8 @@ msgstr "Save"
 msgid "Añadir sección"
 msgstr "Add section"

-msgid "¿Seguro que quieres cargar el patrón guardado? Se perderán los cambios que no hayas guardado."
-msgstr "Are you sure you want to load the saved pattern? Any unsaved changes will be lost."
-
-msgid "Cargar"
-msgstr "Load"
+msgid "Ver patrón"
+msgstr "View pattern"

 msgid "Exportar a PDF"
 msgstr "Export to PDF"
@@ -1,8 +1,5 @@
-// Guardar/cargar el patrón completo (secciones + personalización de
-// página) contra el backend Django: el estado ya guardado viaja embebido
-// en la plantilla (ver main.js), así que aquí solo hace falta enviar los
-// cambios al guardar, y recargar la página para "cargar" (trae de vuelta
-// la última versión guardada en el servidor).
+// Guardar el patrón completo (secciones + personalización de página)
+// contra el backend Django, por fetch.

 import { serializeSections } from './section-types.js';
 import { serializePageSettings } from './page-settings.js';
@@ -42,15 +39,3 @@ saveBtn.addEventListener('click', async () => {
    alert(saveBtn.dataset.errorMessage);
  }
 });
-
-const loadBtn = document.getElementById('load-pattern');
-
-loadBtn.addEventListener('click', () => {
-  // Cargar sustituye todo lo que haya en pantalla sin posibilidad de
-  // deshacerlo, así que se confirma antes: podría haber cambios sin
-  // guardar. La "carga" en sí es recargar la página: el propio servidor
-  // vuelve a embeber la última versión guardada (ver loadInitialPattern()
-  // en main.js), no hace falta duplicar esa lógica aquí.
-  if (!confirm(loadBtn.dataset.confirmMessage)) return;
-  window.location.reload();
-});
@@ -35,8 +35,12 @@
        <button id="save-pattern" type="button" class="btn btn-sm btn-outline"
          data-save-url="{% url 'crochet:pattern_save' pattern.uuid %}"
          data-error-message="{% trans 'No se ha podido guardar. Inténtalo de nuevo.' %}">{% trans 'Guardar' %}</button>
-        <button id="load-pattern" type="button" class="btn btn-sm btn-outline"
-          data-confirm-message="{% trans '¿Seguro que quieres cargar el patrón guardado? Se perderán los cambios que no hayas guardado.' %}">{% trans 'Cargar' %}</button>
+        <!-- Enlace normal, no un botón con JS: solo navega a la vista de
+             solo lectura (ver PatternDetailView), que se guarda tal cual
+             desde la última vez que se pulsó "Guardar". target="_blank"
+             para no perder el editor con sus cambios sin guardar. -->
+        <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" target="_blank" rel="noopener"
+          class="btn btn-sm btn-outline">{% trans 'Ver patrón' %}</a>
        <button id="export-pdf" type="button" class="btn btn-sm">{% trans 'Exportar a PDF' %}</button>
      </div>
    </header>
@@ -1,4 +1,4 @@
-{% load static %}
+{% load static i18n %}
 <!DOCTYPE html>
 <html lang="{{ lang }}">

@@ -25,6 +25,24 @@

 <body>
  <main class="p-4">
+    <!-- Enlaces normales (sin JS): el tag "language" de i18n activa
+         temporalmente ese idioma para que "url" resuelva la ruta ya
+         traducida (ver crochet/urls.py), igual que hace LocaleMiddleware
+         por petición. no-print para que no aparezca en el PDF exportado
+         (impresión nativa del navegador sobre esta misma página). -->
+    <div class="flex justify-end gap-2 mb-4 no-print">
+      {% if lang != 'es' %}
+        {% language 'es' %}
+          <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" class="btn btn-sm btn-outline">Español</a>
+        {% endlanguage %}
+      {% endif %}
+      {% if lang != 'en' %}
+        {% language 'en' %}
+          <a href="{% url 'crochet:pattern_detail' pattern.uuid %}" class="btn btn-sm btn-outline">English</a>
+        {% endlanguage %}
+      {% endif %}
+    </div>
+
    <div id="panel-output" class="border border-base-300 rounded-box p-4 max-w-3xl mx-auto"
      style="color: {{ page_settings.textColor }}; background-color: {{ page_settings.bgColor }}; font-family: {{ page_settings.font }}; text-align: {{ page_settings.align }};">
      <div id="panel-output-text" style="font-size: {{ page_settings.fontSize }};">