Se manejan las palabras existentes para nappgin con perfil ultra flash

tecnicas/controllers/api_controller/rating_napping_controller.py

@@ -1,7 +1,8 @@
 from django.http import JsonResponse
 from django.http import HttpRequest
 from django.db import transaction
-from tecnicas.models import Calificacion, DatoPunto, Producto, Participacion
+from tecnicas.models import Calificacion, DatoPunto, Producto, Participacion, Palabra
+from tecnicas.forms import ListWordsForm
 
 
 class RatingNappingController:
@@ -20,6 +21,10 @@ class RatingNappingController:
                     participation.tecnica, participation.catador
                 )
 
+                validation_result = RatingNappingController.validateWords(data)
+                if validation_result is not None:
+                    return validation_result
+
                 new_ratings = []
                 ids_products = products_map.keys()
                 for item in data:
@@ -71,12 +76,75 @@ class RatingNappingController:
                 if points_to_update:
                     DatoPunto.objects.bulk_update(points_to_update, ['x', 'y'])
 
+                RatingNappingController.processWordsForRatings(
+                    data, existing_ratings_map
+                )
+
             return JsonResponse({"message": "Datos guardados exitosamente"})
 
         except Exception as e:
             print("ERROR:", e)
             return JsonResponse({"error": "Error al procesar datos"})
 
+    @staticmethod
+    def validateWords(data: list):
+        """Valida todas las palabras de todos los items usando ListWordsForm.
+        Retorna JsonResponse con error si hay problemas, None si todo está bien."""
+        for item in data:
+            words = item.get("words", [])
+            if words:
+                dic_words = {}
+                for index, word in enumerate(words, start=1):
+                    dic_words[f"palabra_{index}"] = word
+
+                form = ListWordsForm(dic_words, new_words=words)
+                if not form.is_valid():
+                    errors = []
+                    for field, error_list in form.errors.items():
+                        errors.extend(error_list)
+                    return JsonResponse({"error": f"Error en validación de palabras: {', '.join(errors)}"})
+        return None
+
+    @staticmethod
+    def processWordsForRatings(data: list, existing_ratings_map: dict):
+        """Procesa y asocia palabras a las calificaciones.
+        Crea palabras que no existan y las asocia a las calificaciones correspondientes."""
+
+        all_words = set()
+        for item in data:
+            words = item.get("words", [])
+            if words:
+                all_words.update(words)
+
+        if not all_words:
+            return
+
+        existing_words = Palabra.objects.filter(
+            nombre_palabra__in=all_words
+        )
+        existing_words_map = {w.nombre_palabra: w for w in existing_words}
+
+        word_objects = {}
+        for word_name in all_words:
+            if word_name in existing_words_map:
+                word_objects[word_name] = existing_words_map[word_name]
+            else:
+                word_obj, created = Palabra.objects.get_or_create(
+                    nombre_palabra=word_name
+                )
+                word_objects[word_name] = word_obj
+
+        for item in data:
+            words = item.get("words", [])
+            if words:
+                product_id = int(item["idProduct"])
+                rating = existing_ratings_map.get(product_id)
+
+                if rating:
+                    words_to_set = [word_objects[word_name]
+                                    for word_name in words]
+                    rating.palabras.set(words_to_set)
+
     @staticmethod
     def getProductsMap(id_tecnica):
         products_qs = Producto.objects.filter(id_tecnica=id_tecnica)

tecnicas/controllers/views_controller/sessions_tester/tests_forms/test_napping_controller.py

@@ -2,7 +2,7 @@ from django.http import HttpRequest
 from django.shortcuts import redirect, render
 from django.urls import reverse
 from django.db.models import F
-from tecnicas.models import Participacion, Producto, TecnicaModalidad, DatoPunto, Calificacion, Modalidad
+from tecnicas.models import Participacion, Producto, TecnicaModalidad, DatoPunto, Calificacion, Modalidad, Palabra
 from tecnicas.forms import ListWordsForm
 from tecnicas.utils import noValidTechnique
 from .general_test_controller import GenetalTestController
@@ -71,6 +71,7 @@ class TestNappingController(GenetalTestController):
         products_in_technique = Producto.objects.filter(id_tecnica=technique)
         self.context["products"] = products_in_technique
         self.setCoordinates()
+        self.setWords()
 
         return render(request, self.napping_puf_test, self.context)
 
@@ -93,3 +94,22 @@ class TestNappingController(GenetalTestController):
         )
 
         self.context["data_points"] = list(data_points)
+
+    def setWords(self):
+        technique = self.session.tecnica
+
+        ratings = Calificacion.objects.filter(
+            num_repeticion=0,
+            id_tecnica=technique,
+            id_catador=self.participation.catador
+        ).prefetch_related('palabras', 'id_producto')
+
+        words_by_product = {}
+        for rating in ratings:
+            product_code = rating.id_producto.codigoProducto
+            words_list = list(rating.palabras.values_list(
+                'nombre_palabra', flat=True))
+            if words_list:
+                words_by_product[product_code] = words_list
+
+        self.context["words_by_product"] = words_by_product

tecnicas/static/js/test-napping-plane.js

@@ -15,7 +15,6 @@ window.placedPoints = {};
 const modeElement = document.querySelector('[data-mode]');
 window.isUltraFlash = modeElement && modeElement.dataset.mode.toLowerCase().includes('ultra flash');
 
-// For normal mode (sin modalidad), placement is always active
 // For ultra flash mode, it starts active but will be controlled by ultra-flash.js
 if (window.isUltraFlash) {
   document.getElementById("question-save").classList.add("hidden");
@@ -42,7 +41,6 @@ products.forEach(product => {
 
 // 2. Handle Plane Click (Placing Points)
 planeContainer.addEventListener('click', (e) => {
-  // If placement is not active, do nothing (or handle differently in other script)
   if (!window.isPlacementActive) return;
 
   if (!selectedProductCode) {
@@ -163,6 +161,12 @@ document
 ////
 */
 
+// Callback for additional validation before saving (can be set by ultra flash)
+window.beforeSaveData = null;
+
+// Function to get extra data for each product (can be set by ultra flash)
+window.getExtraDataForSave = null;
+
 window.saveData = async function () {
   const codeProducts = Object.keys(window.placedPoints);
   const data = [];
@@ -172,6 +176,14 @@ window.saveData = async function () {
     return;
   }
 
+  // Call beforeSaveData callback if it exists (for ultra flash validation)
+  if (window.beforeSaveData && typeof window.beforeSaveData === 'function') {
+    const validationResult = window.beforeSaveData();
+    if (validationResult === false) {
+      return false;
+    }
+  }
+
   codeProducts.forEach((code) => {
     const point = window.placedPoints[code];
 
@@ -182,6 +194,12 @@ window.saveData = async function () {
       idProduct: point.id
     };
 
+    // Get extra data if callback exists (for ultra flash words)
+    if (window.getExtraDataForSave && typeof window.getExtraDataForSave === 'function') {
+      const extraData = window.getExtraDataForSave(code);
+      Object.assign(objData, extraData);
+    }
+
     data.push(objData);
   })
 

tecnicas/static/js/test-napping-ultra-flash.js

@@ -3,16 +3,15 @@ const productWords = {};
 
 // Only initialize ultra flash if the mode is active
 if (window.isUltraFlash) {
-    initUltraFlash(productWords);
+    initUltraFlash();
 }
 
-function initUltraFlash(productWords) {
+function initUltraFlash() {
     const continueBtn = document.getElementById('continue-description');
     const questionSaveBtn = document.getElementById('question-save');
-    const saveProgressBtn = document.getElementById('save-progress');
     const dialog = document.getElementById('word-dialog');
     const wordForm = document.getElementById('word-form');
-    const wordInput = document.getElementById('word-input');
+    const wordInput = document.querySelector('.cts-input-list-word');
     const wordList = document.getElementById('word-list');
     const dialogProductCode = document.getElementById('dialog-product-code');
 
@@ -22,6 +21,8 @@ function initUltraFlash(productWords) {
     const points = document.querySelectorAll('.data-point');
     let hasExistingWords = false;
 
+    wordInput.value = '';
+
     // Check if there are existing words from backend
     points.forEach(point => {
         const code = point.dataset.code;
@@ -29,26 +30,28 @@ function initUltraFlash(productWords) {
 
         if (wordsAttr && wordsAttr.trim() !== '') {
             productWords[code] = wordsAttr.split(',').filter(w => w.trim() !== '');
-            if (productWords[code].length > 0) {
+            
+            if (productWords[code].length >= 1) {
                 hasExistingWords = true;
             }
         }
     });
 
-    // If words already exist, skip phase 1 and go directly to description phase
-    if (hasExistingWords) {
-        startDescriptionPhase();
-        // Update all point labels to show existing words
-        points.forEach(point => {
-            const code = point.dataset.code;
-            if (productWords[code] && productWords[code].length > 0) {
-                updatePointLabel(code);
-            }
-        });
-    } else {
-        // No existing words, show continue button for phase 1
-        continueBtn.classList.remove('hidden');
-    }
+    setTimeout(() => {
+        if (hasExistingWords) {
+            startDescriptionPhase();
+            // Update all point labels to show existing words
+            points.forEach(point => {
+                const code = point.dataset.code;
+                if (productWords[code] && productWords[code].length > 0) {
+                    updatePointLabel(code);
+                }
+            });
+        } else {
+            // No existing words, show continue button for phase 1
+            continueBtn.classList.remove('hidden');
+        }
+    }, 100);
 
     // Check if all products are placed
     continueBtn.addEventListener('click', () => {
@@ -65,21 +68,14 @@ function initUltraFlash(productWords) {
 
     function startDescriptionPhase() {
         isDescriptionPhase = true;
-        window.isPlacementActive = false; // Freeze point placement
-        
-        // Hide continue button and show finish options
+        window.isPlacementActive = false;
         continueBtn.classList.add('hidden');
         questionSaveBtn.classList.remove("hidden");
-
-        // Update UI to indicate description phase
         spanNotifaction("Fase de descripción: Haz clic en un punto para agregar palabras.", false);
 
-        // Change cursor style to indicate different mode
         const plane = document.getElementById('napping-plane');
         plane.classList.remove('cursor-crosshair');
         plane.classList.add('cursor-default');
-        
-        // Remove any product selection highlights
         document.querySelectorAll('.item-product').forEach(p => {
             p.classList.remove('ring-4', 'ring-primary');
         });
@@ -170,9 +166,10 @@ function initUltraFlash(productWords) {
         if (!point) return;
 
         const words = productWords[code] || [];
-        
+
         // Remove existing tooltip if present
-        let tooltip = point.querySelector('.group-hover\\:block');
+        let tooltip = point.querySelector('.cts-tooltip');
+
         if (tooltip) {
             tooltip.remove();
         }
@@ -180,8 +177,8 @@ function initUltraFlash(productWords) {
         // Only create tooltip in description phase and if there are words
         if (isDescriptionPhase && words.length > 0) {
             tooltip = document.createElement('div');
-            tooltip.className = 'absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-800 text-white text-xs rounded z-10 hidden group-hover:block';
-            
+            tooltip.className = 'cts-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-800 text-white text-xs rounded z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none';
+
             // Display words in a 3-column grid (no coordinates)
             const wordBadges = words.map(w => `<span class="inline-block px-2 py-1 bg-yellow-600 text-white rounded text-xs">${w}</span>`).join('');
             tooltip.innerHTML = `
@@ -190,29 +187,20 @@ function initUltraFlash(productWords) {
                     ${wordBadges}
                 </div>
             `;
-            
+
             // Add max-width to tooltip
             tooltip.style.maxWidth = '320px';
             tooltip.style.whiteSpace = 'normal';
-            
             point.appendChild(tooltip);
         }
     }
 
-    // Override saveData to include words for ultra flash mode
-    // This replaces the basic saveData from test-napping-plane.js
-    window.saveData = async function () {
-        const codeProducts = Object.keys(window.placedPoints);
-        const totalProducts = document.querySelectorAll('.item-product').length;
-
-        // Validate all products are placed
-        if (totalProducts != codeProducts.length) {
-            spanNotifaction("Por favor, coloca todos los puntos");
-            return false;
-        }
-
+    // Set up callbacks to extend the base saveData function
+    // Validation callback - runs before saving
+    window.beforeSaveData = function () {
         // If in description phase, validate words (minimum 1 per product)
         if (isDescriptionPhase) {
+            const codeProducts = Object.keys(window.placedPoints);
             for (const code of codeProducts) {
                 const words = productWords[code] || [];
                 if (words.length < 1) {
@@ -221,55 +209,15 @@ function initUltraFlash(productWords) {
                 }
             }
         }
+        return true;
+    };
 
-        // Prepare data with coordinates and words
-        const data = [];
-        codeProducts.forEach((code) => {
-            const point = window.placedPoints[code];
-            const words = productWords[code] || [];
-
-            const objData = {
-                code: code,
-                x: point.x,
-                y: point.y,
-                idProduct: point.id,
-                words: words // Include words for ultra flash mode
-            };
-
-            data.push(objData);
-        });
-
-        // Send data to server
-        const URL = "/cata/testers/api/rating-napping/no-mode";
-        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
-
-        try {
-            const response = await fetch(URL, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    "X-CSRFToken": csrfToken,
-                },
-                body: JSON.stringify(data),
-            });
-
-            if (!response.ok) {
-                spanNotifaction("Error en la respuesta del servidor");
-                return false;
-            }
-
-            const result = await response.json();
-
-            if (result.error) {
-                spanNotifaction(result.error);
-                return false;
-            } else {
-                spanNotifaction(result.message, false);
-                return true;
-            }
-        } catch (error) {
-            spanNotifaction("Error en proceso de guardar los datos");
-            return false;
-        }
-    }
+    // Data extension callback - adds words to each product's data
+    window.getExtraDataForSave = function (code) {
+        const words = productWords[code] || [];
+        console.log(`Getting words for ${code}:`, words);
+        return {
+            words: words
+        };
+    };
 }

tecnicas/templates/tecnicas/components/dialog-nap-puf.html

@@ -1,14 +1,17 @@
 <dialog id="word-dialog" class="modal">
-    <div class="modal-box bg-surface-ligt">
+    <div class="modal-box bg-surface-ligt space-y-4">
         <h3 class="font-bold text-lg">
             Describir producto
             <span id="dialog-product-code"></span>
         </h3>
-        <p class="py-4">Agrega palabras que describan este producto (máximo 5).</p>
-        <form id="word-form" class="flex gap-2 mb-4">
-            <input type="text" id="word-input" placeholder="Palabra..."
-                class="input input-bordered bg-surface-light w-full text-black" autocomplete="off">
-            <button type="submit" class="btn btn-primary">Agregar</button>
+
+        <form id="word-form" class="cts-form-pf-word flex justify-center items-center gap-4">
+            <label for="{{ form.nombre_palabra.id_for_label }}" class="text-left flex-1">
+                {{ form.nombre_palabra }}
+            </label>
+            <button type="submit" class="cts-btn-general-compress cts-btn-primary btn-push py-1 px-4">
+                Agregar
+            </button>
         </form>
 
         <div id="word-list" class="flex flex-wrap gap-2 mb-4 min-h-[50px]"></div>

tecnicas/templates/tecnicas/forms_tester/test_napping_puf.html

@@ -1,6 +1,6 @@
 {% extends 'tecnicas/layouts/base.html' %}
-
 {% load static %}
+{% load custom_filters %}
 
 {% block title %}Napping{% endblock %}
 
@@ -34,12 +34,6 @@
         {% endif %}
 
         <article class="rounded flex flex-col gap-4">
-            <section class="flex items-center justify-center bg-surface-ligt p-2 rounded-lg">
-                <p class="text-lg font-medium text-center">
-                    {{ session.tecnica.instrucciones }}
-                </p>
-            </section>
-
             <section class="flex items-center justify-center flex-wrap gap-4 bg-surface-ligt p-2 rounded-lg">
                 <p class="text-xl font-bold text-center capitalize" data-mode="{{ mode }}">
                     Modalidad: {% if mode != "sin modalidad" %}{{ mode }} {% else %} Nappging {% endif %}
@@ -48,7 +42,15 @@
         </article>
 
         <article class="container-rating-word p-2 py-6 space-y-6 bg-surface-ligt rounded min-w-3xl">
-            <h2 class="text-xl font-bold">Productos en la sesión</h2>
+            <section class="flex items-center justify-around flex-wrap gap-4 bg-surface-ligt p-2 rounded-lg">
+                <h2 class="text-xl font-bold">Productos en la sesión</h2>
+                <div class="flex flex-col items-center justify-center flex-wrap">
+                    <p class="text-lg font-bold text-center">Instrucciones</p>
+                    <p class="text-lg font-normal text-center">
+                        {{ session.tecnica.instrucciones }}
+                    </p>
+                </div>
+            </section>
             <div id="items" class="original-products flex gap-4 flex-wrap justify-center"
                 data-original-products="original">
                 {% for product in products %}
@@ -73,13 +75,11 @@
                     <div id="point-{{ point.code }}"
                         class="data-point absolute w-4 h-4 bg-red-600 rounded-full transform -translate-x-1/2 -translate-y-1/2 cursor-pointer border-2 border-white shadow-md group"
                         data-px="{{ point.px }}" data-py="{{ point.py }}" data-code="{{ point.code }}"
-                        data-id-product="{{ point.id_product }}" {% if point.words %}
-                        data-words="{{ point.words|join:',' }}" {% endif %}>
+                        data-id-product="{{ point.id_product }}" {% if words_by_product|get_item:point.code %}
+                        data-words="{{ words_by_product|get_item:point.code|join:',' }}" {% endif %}>
                         <div
                             class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-10 hidden group-hover:block">
-                            <strong>{{ point.code }}</strong><br>
-                            X: {{ point.px }}<br>
-                            Y: {{ point.py }}
+                            <strong>{{ point.code }}</strong>
                         </div>
                         <span
                             class="absolute top-4 left-1/2 transform -translate-x-1/2 text-xs font-bold text-gray-700 pointer-events-none">
@@ -102,6 +102,20 @@
                 </span>
             </section>
 
+            <section role="alert" class="alert alert-warning">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
+                    viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <div class="flex-col">
+                    <span class="text-lg block">
+                        Si ya has agregado <b>atributos</b> a un punto y <b>guardas el progreso</b> ya no será posible
+                        volver a mover los puntos
+                    </span>
+                </div>
+            </section>
+
             <section role="alert" class="alert alert-warning">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
                     viewBox="0 0 24 24">
@@ -124,11 +138,9 @@
                 <button id="save-progress" class="cts-btn-general cts-btn-primary btn-push">
                     Guardar progreso
                 </button>
-                {% if mode == "perfil ultra flash" %}
                 <button id="continue-description" class="cts-btn-general cts-btn-primary btn-push hidden">
                     Continuar a descripción
                 </button>
-                {% endif %}
                 <div class="flex gap-2">
                     <button id="question-save" class="cts-btn-general cts-btn-secondary btn-push flex-1">
                         ¿Finalizar sesión?
@@ -145,9 +157,7 @@
             </section>
         </article>
 
-        {% if mode == "perfil ultra flash" %}
         {% include "../components/dialog-nap-puf.html" %}
-        {% endif %}
 
         {% include "../components/toast-container.html" %}
     </article>
@@ -157,7 +167,5 @@
 {% block extra_js %}
 <script src="{% static 'js/actions-form.js' %}"></script>
 <script src="{% static 'js/test-napping-plane.js' %}"></script>
-{% if mode == "perfil ultra flash" %}
 <script src="{% static 'js/test-napping-ultra-flash.js' %}"></script>
-{% endif %}
 {% endblock %}