Implementando Napping con modalidad perfil ultra falsh

tecnicas/controllers/views_controller/session_management/details/details_controller.py

@@ -41,14 +41,9 @@ class DetallesController():
         elif technique.repeticion >= technique.repeticiones_max:
             return self.controllGetResponse(error="Se ha alcanzado el número de repeticiones máxima", request=request)
 
-        there_participacions = Participacion.objects.filter(
-            tecnica=technique).exists()
-
-        if there_participacions:
-            (is_update_participations,
-             message) = ParticipacionController.outAllInSession(self.session)
-            if not is_update_participations:
-                return self.controllGetResponse(error=message, request=request)
+        is_update_participations = self.setParticipationsToNoFinished()
+        if not is_update_participations:
+            return self.controllGetResponse(error="Error al actualizar las participaciones", request=request)
 
         self.session.activo = True
         technique.repeticion = technique.repeticion + 1
@@ -61,3 +56,15 @@ class DetallesController():
         }
         return redirect(
             reverse(self.url_next, kwargs=parameters))
+
+    def setParticipationsToNoFinished(self):
+        there_participacions = Participacion.objects.filter(
+            tecnica=self.session.tecnica).exists()
+
+        if there_participacions:
+            (is_update_participations,
+             message) = ParticipacionController.outAllInSession(self.session)
+
+            return is_update_participations
+
+        return True

tecnicas/controllers/views_controller/session_management/details/details_napping_controller.py

@@ -44,7 +44,7 @@ class DetallesNappingController(DetallesController):
 
         if action == "start_perfil_ultra_flash":
             name_mode = action.replace("start_", "").replace("_", " ")
-            return self.controllGetResponse(error="Trabajando en la modalidad", request=request)
+            response = self.startNapping(request=request, name_mode=name_mode)
 
         elif action == "delete_session":
             self.deleteSesorialSession()
@@ -63,12 +63,19 @@ class DetallesNappingController(DetallesController):
         elif self.session.activo:
             return self.controllGetResponse(error="La sesión ya está activada", request=request)
 
-        tecnique_mode = TecnicaModalidad.objects.get_or_create(
-            tecnica=self.session.tecnica, modalidad=Modalidad.objects.get(nombre=name_mode), usando=True)
+        (technique_mode, created) = TecnicaModalidad.objects.get_or_create(
+            tecnica=self.session.tecnica, modalidad=Modalidad.objects.get(nombre=name_mode))
 
-        if not tecnique_mode:
+        if not technique_mode:
             return self.controllGetResponse(error="Modalidad no encontrada", request=request)
 
+        technique_mode.usando = True
+        technique_mode.save()
+
+        is_update_participations = self.setParticipationsToNoFinished()
+        if not is_update_participations:
+            return self.controllGetResponse(error="Error al actualizar las participaciones", request=request)
+
         self.session.activo = True
         self.session.save()
 

tecnicas/controllers/views_controller/sessions_tester/init_session/init_session_napping_controller.py

@@ -1,7 +1,7 @@
 from django.http import HttpRequest
 from django.shortcuts import render, redirect
 from django.urls import reverse
-from tecnicas.models import Participacion
+from tecnicas.models import Participacion, TecnicaModalidad
 from tecnicas.controllers import ParticipacionController
 from .init_session_controller import InitSessionController
 
@@ -19,10 +19,7 @@ class InitSessionNappingController(InitSessionController):
             "has_ended": self.isEndedSession()
         }
 
-        if self.session.tecnica.repeticion == 1:
-            self.context["status"] = "En esta sesión se usará Napping"
-        else:
-            self.context["status"] = "Se uso Napping puro en la última sesión"
+        self.setStatusSession()
 
         if "error" in request.GET:
             self.context["error"] = request.GET["error"]
@@ -72,3 +69,12 @@ class InitSessionNappingController(InitSessionController):
         else:
             context["error"] = "Acción sin especificar"
             return render(request, self.current_direction, context)
+
+    def setStatusSession(self):
+        technique_mode = TecnicaModalidad.objects.get(
+            tecnica=self.session.tecnica, usando=True)
+
+        if technique_mode.modalidad.nombre == "sin modalidad":
+            self.context["status"] = "La sesión usa Napping"
+        else:
+            self.context["status"] = f"La sesión usa Napping con modalidad {technique_mode.modalidad.nombre}"   

tecnicas/controllers/views_controller/sessions_tester/login_session_tester_controller.py

@@ -12,6 +12,7 @@ class LoginSessionTesterController():
     taster_participation: Participacion
     current_direcction = "tecnicas/forms_tester/login_session.html"
     destinity_direcction = "cata_system:catador_init_session"
+    context = {}
 
     def __init__(self):
         self.tester = Catador()
@@ -28,17 +29,17 @@ class LoginSessionTesterController():
             return controller_error("Credenciales inválidas")
 
     def validateEntryEscalas(self, request=HttpRequest):
-        context = {}
+        self.context = {}
         if not self.session.activo:
-            context["error"] = "La sesión no está activa actualmente"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "La sesión no está activa actualmente"
+            return render(request, self.current_direcction, self.context)
 
         if self.session.tecnica.repeticion == 1:
             try:
                 self.taster_participation = Participacion.objects.get(
                     tecnica=self.session.tecnica, catador=self.tester)
-                context["error"] = "Usted ya esta dentro de la sesión"
-                return render(request, self.current_direcction, context)
+                self.context["error"] = "Usted ya esta dentro de la sesión"
+                return render(request, self.current_direcction, self.context)
 
             except Participacion.DoesNotExist:
                 with transaction.atomic():
@@ -51,8 +52,8 @@ class LoginSessionTesterController():
                         tecnica=self.session.tecnica).count()
 
                     if current_num_testers >= max_testers:
-                        context["error"] = "La sesión ha alcanzado el número máximo de catadores"
-                        return render(request, self.current_direcction, context)
+                        self.context["error"] = "La sesión ha alcanzado el número máximo de catadores"
+                        return render(request, self.current_direcction, self.context)
 
                     self.taster_participation = Participacion.objects.create(
                         tecnica=self.session.tecnica,
@@ -64,21 +65,21 @@ class LoginSessionTesterController():
                 }
                 return redirect(reverse(self.destinity_direcction, kwargs=params))
         else:
-            context["error"] = "Ya no es posible ingresar a la sesión"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "Ya no es posible ingresar a la sesión"
+            return render(request, self.current_direcction, self.context)
 
     def validateEntryRataCata(self, request: HttpRequest):
-        context = {}
+        self.context = {}
         if not self.session.activo:
-            context["error"] = "La sesión no está activa actualmente"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "La sesión no está activa actualmente"
+            return render(request, self.current_direcction, self.context)
 
         if self.session.tecnica.repeticion <= 1:
             try:
                 self.taster_participation = Participacion.objects.get(
                     tecnica=self.session.tecnica, catador=self.tester)
-                context["error"] = "Usted ya esta dentro de la sesión"
-                return render(request, self.current_direcction, context)
+                self.context["error"] = "Usted ya esta dentro de la sesión"
+                return render(request, self.current_direcction, self.context)
             except Participacion.DoesNotExist:
                 with transaction.atomic():
                     code_session = self.session.codigo_sesion
@@ -96,41 +97,41 @@ class LoginSessionTesterController():
                 }
                 return redirect(reverse(self.destinity_direcction, kwargs=params))
         else:
-            context["error"] = "Imposible acceder a esta sesión"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "Imposible acceder a esta sesión"
+            return render(request, self.current_direcction, self.context)
 
     def validateEntryLimitTesters(self, request: HttpRequest):
-        context = {}
+        self.context = {}
         if not self.session.activo:
-            context["error"] = "La sesión no está activa actualmente"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "La sesión no está activa actualmente"
+            return render(request, self.current_direcction, self.context)
 
         if self.session.tecnica.repeticion == 1:
             return self.entrySessionLimitTesters(request)
 
         else:
-            context["error"] = "Ya no es posible ingresar a la sesión"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "Ya no es posible ingresar a la sesión"
+            return render(request, self.current_direcction, self.context)
 
     def validateEntryNapping(self, request: HttpRequest):
-        context = {}
+        self.context = {}
         if not self.session.activo:
-            context["error"] = "La sesión no está activa actualmente"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "La sesión no está activa actualmente"
+            return render(request, self.current_direcction, self.context)
 
         if self.session.tecnica.repeticion == 0:
             return self.entrySessionLimitTesters(request)
 
         else:
-            context["error"] = "Ya no es posible ingresar a la sesión"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "Ya no es posible ingresar a la sesión"
+            return render(request, self.current_direcction, self.context)
 
     def entrySessionLimitTesters(self, request: HttpRequest):
         try:
             self.taster_participation = Participacion.objects.get(
                 tecnica=self.session.tecnica, catador=self.tester)
-            context["error"] = "Usted ya esta dentro de la sesión"
-            return render(request, self.current_direcction, context)
+            self.context["error"] = "Usted ya esta dentro de la sesión"
+            return render(request, self.current_direcction, self.context)
 
         except Participacion.DoesNotExist:
             try:
@@ -158,5 +159,5 @@ class LoginSessionTesterController():
                     return redirect(reverse(self.destinity_direcction, kwargs=params))
 
             except ValueError as e:
-                context["error"] = str(e)
-                return render(request, self.current_direcction, context)
+                self.context["error"] = str(e)
+                return render(request, self.current_direcction, self.context)

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

@@ -2,7 +2,8 @@ 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
+from tecnicas.models import Participacion, Producto, TecnicaModalidad, DatoPunto, Calificacion, Modalidad
+from tecnicas.forms import ListWordsForm
 from tecnicas.utils import noValidTechnique
 from .general_test_controller import GenetalTestController
 
@@ -11,6 +12,7 @@ class TestNappingController(GenetalTestController):
     def __init__(self, sensorial_session, user_tester):
         super().__init__(sensorial_session, user_tester)
         self.napping_test = "tecnicas/forms_tester/test_napping.html"
+        self.napping_puf_test = "tecnicas/forms_tester/test_napping_puf.html"
 
     def controllGet(self, request: HttpRequest):
         technique = self.session.tecnica
@@ -31,11 +33,14 @@ class TestNappingController(GenetalTestController):
         if name_mode_activate == "sin modalidad":
             self.context["mode"] = "sin modalidad"
             return self.nappingTest(request)
+        if name_mode_activate == "perfil ultra flash":
+            self.context["mode"] = "perfil ultra flash"
+            return self.nappingPufTest(request)
         else:
             return noValidTechnique(
                 name_view=self.previus_directory,
                 query_params={
-                    "error": "La técnica no tiene modalidad activada"
+                    "error": f"Trabajando en la modalidad: {name_mode_activate}"
                 },
                 params={
                     "code_sesion": self.session.codigo_sesion
@@ -53,6 +58,24 @@ class TestNappingController(GenetalTestController):
 
         return render(request, self.napping_test, self.context)
 
+    def nappingPufTest(self, request: HttpRequest):
+        maked_previus_napping = TecnicaModalidad.objects.get(
+            tecnica=self.session.tecnica,
+            modalidad=Modalidad.objects.get(nombre="sin modalidad")
+        )
+
+        self.context["maked_napping"] = True if maked_previus_napping else False
+        self.context["mode"] = "perfil ultra flash"
+        self.context["form"] = ListWordsForm()
+
+        self.context["session"] = self.session
+        technique = self.session.tecnica
+        products_in_technique = Producto.objects.filter(id_tecnica=technique)
+        self.context["products"] = products_in_technique
+        self.setCoordinates()
+
+        return render(request, self.napping_puf_test, self.context)
+
     def setCoordinates(self):
         technique = self.session.tecnica
 
@@ -65,10 +88,10 @@ class TestNappingController(GenetalTestController):
         data_points = DatoPunto.objects.filter(
             calificacion__in=ratings
         ).values(
-            code= F("calificacion__id_producto__codigoProducto"),
-            px= F("x"),
-            py= F("y"),
-            id_product= F("calificacion__id_producto")
+            code=F("calificacion__id_producto__codigoProducto"),
+            px=F("x"),
+            py=F("y"),
+            id_product=F("calificacion__id_producto")
         )
 
         self.context["data_points"] = list(data_points)

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

@@ -0,0 +1,229 @@
+const planeContainer = document.getElementById('napping-plane');
+const productsContainer = document.getElementById('items');
+const products = document.querySelectorAll('.item-product');
+
+// Configuration for the physical dimensions of the tablecloth (in cm)
+const PHYSICAL_WIDTH = 60;
+const PHYSICAL_HEIGHT = 40;
+
+let selectedProductCode = null;
+let selectedProductId = null;
+
+// Object to store coordinates: { "CODE": { x: 10.5, y: 20.1, id: 123 } }
+window.placedPoints = {};
+
+const modeElement = document.querySelector('[data-mode]');
+window.isUltraFlash = modeElement && modeElement.dataset.mode.toLowerCase().includes('ultra flash') || None;
+
+if (window.isUltraFlash) {
+  document.getElementById("question-save").classList.add("hidden");
+  window.isPlacementActive = true;
+} else {
+  window.isPlacementActive = false;
+}
+
+// 1. Handle Product Selection
+products.forEach(product => {
+  product.addEventListener('click', () => {
+    if (!window.isPlacementActive) return;
+
+    // Remove selection from others
+    products.forEach(p => p.classList.remove('ring-4', 'ring-primary'));
+
+    // Select current
+    product.classList.add('ring-4', 'ring-primary');
+    selectedProductCode = product.dataset.code;
+    selectedProductId = product.dataset.idProduct;
+  });
+});
+
+// 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) {
+    spanNotifaction("Por favor, selecciona un producto primero")
+    return;
+  }
+
+  const rect = planeContainer.getBoundingClientRect();
+
+  // Calculate click position relative to the container (in pixels)
+  const xPixel = e.clientX - rect.left;
+  const yPixel = e.clientY - rect.top;
+
+  // Calculate scaled coordinates (0 to PHYSICAL_DIMENSIONS)
+  // X axis: 0 on left, 60 on right
+  const xCoord = (xPixel / rect.width) * PHYSICAL_WIDTH;
+
+  // Y axis: 0 on bottom, 40 on top (Invert Y because DOM Y is 0 at top)
+  const yCoord = PHYSICAL_HEIGHT - ((yPixel / rect.height) * PHYSICAL_HEIGHT);
+
+  // Update Data Object
+  window.placedPoints[selectedProductCode] = {
+    x: parseFloat(xCoord.toFixed(2)),
+    y: parseFloat(yCoord.toFixed(2)),
+    id: selectedProductId
+  };
+
+  // Render Point
+  window.renderPoint(selectedProductCode, xPixel, yPixel, xCoord, yCoord);
+});
+
+// Make renderPoint global
+window.renderPoint = function (code, xPx, yPx, xVal, yVal) {
+  // Remove existing point for this product if it exists
+  const existingPoint = document.getElementById(`point-${code}`);
+  if (existingPoint) {
+    existingPoint.remove();
+  }
+
+  const point = document.createElement('div');
+  point.id = `point-${code}`;
+  point.className = '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';
+  point.dataset.code = code;
+  point.dataset.px = xVal;
+  point.dataset.py = yVal;
+  point.dataset.idProduct = window.placedPoints[code]?.id;
+
+  point.style.left = `${xPx}px`;
+  point.style.top = `${yPx}px`;
+
+  const label = document.createElement('div');
+  label.className = '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';
+  label.innerHTML = `
+            <strong>${code}</strong><br>
+            X: ${xVal.toFixed(1)}<br>
+            Y: ${yVal.toFixed(1)}
+        `;
+
+  point.appendChild(label);
+  planeContainer.appendChild(point);
+
+  const textLabel = document.createElement('span');
+  textLabel.className = 'absolute top-4 left-1/2 transform -translate-x-1/2 text-xs font-bold text-gray-700 pointer-events-none';
+  textLabel.innerText = code;
+  point.appendChild(textLabel);
+}
+
+function checkPoints() {
+  const points = document.querySelectorAll('.data-point');
+
+  points.forEach(point => {
+    const code = point.dataset.code;
+
+    const xVal = parseFloat(point.dataset.px);
+    const yVal = parseFloat(point.dataset.py);
+
+    const rect = planeContainer.getBoundingClientRect();
+
+    const px = (xVal / PHYSICAL_WIDTH) * rect.width;
+    const py = ((PHYSICAL_HEIGHT - yVal) / PHYSICAL_HEIGHT) * rect.height;
+
+    window.placedPoints[code] = {
+      x: xVal.toFixed(2),
+      y: yVal.toFixed(2),
+      id: point.dataset.idProduct
+    };
+
+    window.renderPoint(code, px, py, xVal, yVal);
+  });
+}
+
+setTimeout(checkPoints, 100);
+
+/*
+////
+//////
+//////// Question to finish session
+//////
+////
+*/
+
+function showOptionsSave() {
+  document.getElementById("question-save").classList.add("hidden");
+  document.getElementById("finish-session").classList.remove("hidden");
+  document.getElementById("cancel-save").classList.remove("hidden");
+}
+
+function showQuestionSave() {
+  document.getElementById("question-save").classList.remove("hidden");
+  document.getElementById("finish-session").classList.add("hidden");
+  document.getElementById("cancel-save").classList.add("hidden");
+}
+
+document
+  .getElementById("question-save")
+  .addEventListener("click", showOptionsSave);
+
+document
+  .getElementById("cancel-save")
+  .addEventListener("click", showQuestionSave);
+
+/*
+////
+//////
+//////// Save data and finish session
+//////
+////
+*/
+
+window.saveData = async function () {
+  const codeProducts = Object.keys(window.placedPoints);
+  const data = [];
+
+  if (products.length != codeProducts.length) {
+    spanNotifaction("Por favor, coloca todos los puntos")
+    return;
+  }
+
+  codeProducts.forEach((code) => {
+    const point = window.placedPoints[code];
+
+    const objData = {
+      code: code,
+      x: point.x,
+      y: point.y,
+      idProduct: point.id
+    };
+
+    data.push(objData);
+  })
+
+  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
+  }
+}
+
+document
+  .getElementById("save-progress")
+  .addEventListener("click", window.saveData);

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

@@ -0,0 +1,259 @@
+// Store words: { "CODE": ["word1", "word2"] }
+const productWords = {};
+if (window.isUltraFlash) {
+    initUltraFlash(productWords);
+}
+
+function initUltraFlash(productWords) {
+    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 wordList = document.getElementById('word-list');
+    const dialogProductCode = document.getElementById('dialog-product-code');
+
+    let isDescriptionPhase = false;
+    let currentProductCode = null;
+
+    const points = document.querySelectorAll('.data-point');
+    let hasExistingWords = false;
+
+    // Check if there are existing words
+    points.forEach(point => {
+        const code = point.dataset.code;
+        const wordsAttr = point.dataset.words;
+
+        if (wordsAttr) {
+            productWords[code] = wordsAttr.split(',').filter(w => w);
+            hasExistingWords = true;
+        }
+    });
+
+    if (hasExistingWords) {
+        startDescriptionPhase();
+        points.forEach(point => {
+            const code = point.dataset.code;
+            updatePointLabel(code);
+            console.log(productWords[code]);
+        });
+    } else {
+        continueBtn.classList.remove('hidden');
+    }
+
+    // Check if all products are placed
+    continueBtn.addEventListener('click', () => {
+        const placedCount = Object.keys(window.placedPoints).length;
+        const totalProducts = document.querySelectorAll('.item-product').length;
+
+        if (placedCount !== totalProducts) {
+            spanNotifaction("Por favor, coloca todos los productos antes de continuar.");
+            return;
+        }
+
+        startDescriptionPhase();
+    });
+
+    function startDescriptionPhase() {
+        isDescriptionPhase = true;
+        window.isPlacementActive = false;
+        continueBtn.classList.add('hidden');
+        document.getElementById("question-save").classList.remove("hidden");
+
+        spanNotifaction("Fase de descripción: Haz clic en un punto para agregar palabras.", false);
+
+        document.getElementById('napping-plane').classList.remove('cursor-crosshair');
+        document.getElementById('napping-plane').classList.add('cursor-default');
+        document.querySelectorAll('.item-product').forEach(p => p.classList.remove('ring-4', 'ring-primary'))
+    }
+
+    // Handle Point Click for Description
+    // We need to attach this to the plane or points.
+    // Since points are re-rendered, delegating to plane is better, or hooking into renderPoint.
+    // But renderPoint is in the other file.
+    // Let's use event delegation on the plane, but we need to catch the click on the point.
+
+    document.getElementById('napping-plane').addEventListener('click', (e) => {
+        if (!isDescriptionPhase) return;
+
+        const point = e.target.closest('.data-point');
+
+        if (point) {
+            e.stopPropagation();
+            openWordDialog(point.dataset.code);
+        }
+    });
+
+    function openWordDialog(code) {
+        currentProductCode = code;
+        dialogProductCode.innerText = code;
+        renderWordListInDialog();
+        dialog.showModal();
+    }
+
+    function renderWordListInDialog() {
+        wordList.innerHTML = '';
+        const words = productWords[currentProductCode] || [];
+
+        words.forEach((word, index) => {
+            const badge = document.createElement('div');
+            badge.className = 'badge badge-secondary gap-2 p-3';
+            badge.innerHTML = `
+                ${word}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current cursor-pointer remove-word" data-index="${index}"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            `;
+
+            badge.querySelector('.remove-word').addEventListener('click', () => {
+                removeWord(index);
+            });
+
+            wordList.appendChild(badge);
+        });
+
+        // Update visualization on the plane
+        updatePointLabel(currentProductCode);
+    }
+
+    function addWord(word) {
+        if (!productWords[currentProductCode]) {
+            productWords[currentProductCode] = [];
+        }
+
+        if (productWords[currentProductCode].length >= 5) {
+            spanNotifaction("Máximo 5 palabras por producto.");
+            return;
+        }
+
+        if (productWords[currentProductCode].includes(word)) {
+            spanNotifaction("Palabra duplicada");
+            return;
+        }
+
+        productWords[currentProductCode].push(word);
+        renderWordListInDialog();
+    }
+
+    function removeWord(index) {
+        if (productWords[currentProductCode]) {
+            productWords[currentProductCode].splice(index, 1);
+            renderWordListInDialog();
+        }
+    }
+
+    wordForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const word = wordInput.value.trim();
+        if (word) {
+            addWord(word);
+            wordInput.value = '';
+            wordInput.focus();
+        }
+    });
+
+    function updatePointLabel(code) {
+        const point = document.getElementById(`point-${code}`);
+        if (!point) return;
+
+        // Find or create the words container below the point
+        const tooltip = point.querySelector('.group-hover\\:block');
+        if (tooltip) {
+            // Rebuild tooltip content
+            const xVal = parseFloat(point.dataset.px).toFixed(1);
+            const yVal = parseFloat(point.dataset.py).toFixed(1);
+            const words = productWords[code] || [];
+
+            let wordsHtml = '';
+            if (words.length > 0) {
+                wordsHtml = `<div class="mt-1 pt-1 border-t border-gray-600 text-yellow-300 italic">${words.join(', ')}</div>`;
+            }
+
+            tooltip.innerHTML = `
+                <strong>${code}</strong><br>
+                X: ${xVal}<br>
+                Y: ${yVal}
+                ${wordsHtml}
+            `;
+        }
+    }
+
+    // Override saveData to include words
+    // We need to hook into the existing saveData or replace it.
+    // Since we made saveData global, we can wrap it.
+
+    const originalSaveData = window.saveData;
+
+    window.saveData = async function () {
+        // If in description phase, validate words
+        if (isDescriptionPhase) {
+            const codes = Object.keys(window.placedPoints);
+            for (const code of codes) {
+                const words = productWords[code] || [];
+                if (words.length < 3) {
+                    spanNotifaction(`El producto ${code} debe tener al menos 3 palabras.`);
+                    return false;
+                }
+            }
+        }
+
+        // Prepare data
+        const codeProducts = Object.keys(window.placedPoints);
+        const data = [];
+
+        if (document.querySelectorAll('.item-product').length != codeProducts.length) {
+            spanNotifaction("Por favor, coloca todos los puntos")
+            return false;
+        }
+
+        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 // Add words here
+            };
+
+            data.push(objData);
+        })
+
+        // We can reuse the rest of the logic, but we need to send the data.
+        // The original function constructs data inside it. We can't easily inject data into it unless we rewrite it.
+        // So I will rewrite the fetch part here.
+
+        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
+        }
+    }
+}

tecnicas/static/js/test-napping.js

@@ -1,209 +0,0 @@
-const planeContainer = document.getElementById('napping-plane');
-const productsContainer = document.getElementById('items');
-const products = document.querySelectorAll('.item-product');
-
-// Configuration for the physical dimensions of the tablecloth (in cm)
-const PHYSICAL_WIDTH = 60;
-const PHYSICAL_HEIGHT = 40;
-
-let selectedProductCode = null;
-let selectedProductId = null;
-
-// Object to store coordinates: { "CODE": { x: 10.5, y: 20.1, id: 123 } }
-const placedPoints = {};
-
-// 1. Handle Product Selection
-products.forEach(product => {
-    product.addEventListener('click', () => {
-        // Remove selection from others
-        products.forEach(p => p.classList.remove('ring-4', 'ring-primary'));
-
-        // Select current
-        product.classList.add('ring-4', 'ring-primary');
-        selectedProductCode = product.dataset.code;
-        selectedProductId = product.dataset.idProduct;
-    });
-});
-
-// 2. Handle Plane Click (Placing Points)
-planeContainer.addEventListener('click', (e) => {
-    if (!selectedProductCode) {
-        spanNotifaction("Por favor, selecciona un producto primero")
-        return;
-    }
-
-    const rect = planeContainer.getBoundingClientRect();
-
-    // Calculate click position relative to the container (in pixels)
-    const xPixel = e.clientX - rect.left;
-    const yPixel = e.clientY - rect.top;
-
-    // Calculate scaled coordinates (0 to PHYSICAL_DIMENSIONS)
-    // X axis: 0 on left, 60 on right
-    const xCoord = (xPixel / rect.width) * PHYSICAL_WIDTH;
-
-    // Y axis: 0 on bottom, 40 on top (Invert Y because DOM Y is 0 at top)
-    const yCoord = PHYSICAL_HEIGHT - ((yPixel / rect.height) * PHYSICAL_HEIGHT);
-
-    // Update Data Object
-    placedPoints[selectedProductCode] = {
-        x: parseFloat(xCoord.toFixed(2)),
-        y: parseFloat(yCoord.toFixed(2)),
-        id: selectedProductId
-    };
-
-    // Render Point
-    renderPoint(selectedProductCode, xPixel, yPixel, xCoord, yCoord);
-});
-
-function renderPoint(code, xPx, yPx, xVal, yVal) {
-    // Remove existing point for this product if it exists
-    const existingPoint = document.getElementById(`point-${code}`);
-    if (existingPoint) {
-        existingPoint.remove();
-    }
-
-    const point = document.createElement('div');
-    point.id = `point-${code}`;
-    point.className = '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';
-    point.style.left = `${xPx}px`;
-    point.style.top = `${yPx}px`;
-
-    // Tooltip/Label
-    const label = document.createElement('div');
-    label.className = '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';
-    label.innerHTML = `
-            <strong>${code}</strong><br>
-            X: ${xVal.toFixed(1)}<br>
-            Y: ${yVal.toFixed(1)}
-        `;
-
-    point.appendChild(label);
-    planeContainer.appendChild(point);
-
-    const textLabel = document.createElement('span');
-    textLabel.className = 'absolute top-4 left-1/2 transform -translate-x-1/2 text-xs font-bold text-gray-700 pointer-events-none';
-    textLabel.innerText = code;
-    point.appendChild(textLabel);
-}
-
-function checkPoints() {
-    const points = document.querySelectorAll('.data-point');
-
-    points.forEach(point => {
-        const code = point.dataset.code;
-
-        const xVal = parseFloat(point.dataset.px);
-        const yVal = parseFloat(point.dataset.py);
-
-        const rect = planeContainer.getBoundingClientRect();
-
-        const px = (xVal / PHYSICAL_WIDTH) * rect.width;
-        const py = ((PHYSICAL_HEIGHT - yVal) / PHYSICAL_HEIGHT) * rect.height;
-
-        placedPoints[code] = {
-            x: parseFloat(xVal.toFixed(2)),
-            y: parseFloat(yVal.toFixed(2)),
-            id: point.dataset.idProduct
-        };
-
-        renderPoint(code, px, py, xVal, yVal);
-    });
-}
-
-checkPoints();
-
-/*
-////
-//////
-//////// Question to finish session
-//////
-////
-*/
-
-function showOptionsSave() {
-    document.getElementById("question-save").classList.add("hidden");
-    document.getElementById("finish-session").classList.remove("hidden");
-    document.getElementById("cancel-save").classList.remove("hidden");
-}
-
-function showQuestionSave() {
-    document.getElementById("question-save").classList.remove("hidden");
-    document.getElementById("finish-session").classList.add("hidden");
-    document.getElementById("cancel-save").classList.add("hidden");
-}
-
-document
-    .getElementById("question-save")
-    .addEventListener("click", showOptionsSave);
-
-document
-    .getElementById("cancel-save")
-    .addEventListener("click", showQuestionSave);
-
-/*
-////
-//////
-//////// Save data and finish session
-//////
-////
-*/
-
-async function saveData() {
-    const codeProducts = Object.keys(placedPoints);
-    const data = [];
-
-    if (products.length != codeProducts.length) {
-        spanNotifaction("Por favor, coloca todos los puntos")
-        return;
-    }
-
-    codeProducts.forEach((code) => {
-        const point = placedPoints[code];
-
-        const objData = {
-            code: code,
-            x: point.x,
-            y: point.y,
-            idProduct: point.id
-        };
-
-        data.push(objData);
-    })
-
-    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
-    }
-}
-
-document
-    .getElementById("save-progress")
-    .addEventListener("click", saveData);

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

@@ -0,0 +1,25 @@
+<dialog id="word-dialog" class="modal">
+    <div class="modal-box bg-surface-ligt">
+        <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>
+
+        <div id="word-list" class="flex flex-wrap gap-2 mb-4 min-h-[50px]"></div>
+
+        <div class="modal-action">
+            <form method="dialog">
+                <button class="btn">Cerrar</button>
+            </form>
+        </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>

tecnicas/templates/tecnicas/forms_tester/test_napping.html

@@ -41,8 +41,8 @@
             </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">
-                    Modalidad: {% if mode != "sin modalidad" %}{{ mode }} {% else %} Nappging {% endif %}
+                <p class="text-xl font-bold text-center capitalize" data-mode="{{ mode }}">
+                    Modalidad: {% if mode != "sin modalidad" %}{{ mode }} {% else %} Napping {% endif %}
                 </p>
             </section>
         </article>
@@ -123,6 +123,11 @@
                 <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?
@@ -138,7 +143,6 @@
                 <span id="loading-data-save" class="loading loading-spinner loading-xl text-accent hidden"></span>
             </section>
         </article>
-
         {% include "../components/toast-container.html" %}
     </article>
 </article>
@@ -146,5 +150,5 @@
 
 {% block extra_js %}
 <script src="{% static 'js/actions-form.js' %}"></script>
-<script src="{% static 'js/test-napping.js' %}"></script>
+<script src="{% static 'js/test-napping-plane.js' %}"></script>
 {% endblock %}

tecnicas/templates/tecnicas/forms_tester/test_napping_puf.html

@@ -0,0 +1,163 @@
+{% extends 'tecnicas/layouts/base.html' %}
+
+{% load static %}
+
+{% block title %}Napping{% endblock %}
+
+{% block content %}
+<article class="cts-container-main">
+    <article class="cts-wrap-content text-black max-w-4xl">
+        <header class="text-center flex-row w-full items-stretch flex justify-around flex-wrap gap-2">
+            <h1 class="rounded font-bold text-2xl bg-surface-ligt p-4 flex-1">
+                Sesión usando <br>técnica
+                <span class="uppercase">{{ session.tecnica.tipo_tecnica }}</span>
+            </h1>
+            <button class="cts-btn-general cts-btn-error btn-push" onclick="exit_sesion('form-actions')">
+                Salir de la sesión
+            </button>
+        </header>
+
+        <article class="hidden">
+            <form action="{% url 'cata_system:catador_init_session' code_sesion=session.codigo_sesion %}" method="post"
+                class="form-actions">
+                {% csrf_token %}
+                <input type="hidden" name="action" class="action-input">
+            </form>
+        </article>
+
+        <section class="hidden">
+            <input type="hidden" value="{{ session.tecnica.id }}" name="id-tecnica" class="ct-input-id-tech">
+        </section>
+
+        {% if error %}
+        {% include "../components/error-message.html" with message=error %}
+        {% 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 %}
+                </p>
+            </section>
+        </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>
+            <div id="items" class="original-products flex gap-4 flex-wrap justify-center"
+                data-original-products="original">
+                {% for product in products %}
+                <div class="item-product bg-btn-secondary text-black font-bold px-4 py-2 rounded cursor-grab transition-all"
+                    data-id-product="{{ product.id }}" data-code="{{ product.codigoProducto }}">
+                    {{ product.codigoProducto }}
+                </div>
+                {% endfor %}
+            </div>
+
+            <!-- Cartesian Plane Container -->
+            <div class="flex justify-center w-full">
+                <div class="relative w-full max-w-[800px] aspect-[3/2] bg-white border-2 border-gray-400 shadow-inner cursor-crosshair"
+                    id="napping-plane"
+                    style="background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 20px 20px;">
+
+                    <span class="absolute bottom-1 right-2 text-xs text-gray-500 font-bold">60cm (X)</span>
+                    <span class="absolute top-2 left-1 text-xs text-gray-500 font-bold">40cm (Y)</span>
+                    <span class="absolute bottom-1 left-1 text-xs text-gray-500 font-bold">0</span>
+
+                    {% for point in data_points %}
+                    <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 %}>
+                        <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 }}
+                        </div>
+                        <span
+                            class="absolute top-4 left-1/2 transform -translate-x-1/2 text-xs font-bold text-gray-700 pointer-events-none">
+                            {{ point.code }}
+                        </span>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <section role="alert" class="alert alert-info">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    class="h-6 w-6 shrink-0 stroke-current">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 0 0118 0z"></path>
+                </svg>
+                <span class="text-lg">
+                    Para guardar los datos sin finalizar su sesión use el botón
+                    <b>"Guardar progreso"</b>
+                </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 usas el botón <b>“Salir de la sesión”</b> asegúrese de guardar el progreso de lo contrario
+                        perderás todo lo que no hayas guardado antes
+                    </span>
+                    <span class="text-lg block">
+                        Con el botón <b>“Finalizar”</b>, se guardan las posiciones, sales de la sesión y no
+                        podrás ingresar otra vez
+                    </span>
+                </div>
+            </section>
+
+            <section class="flex justify-end gap-4 max-sm:flex-col">
+                <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?
+                    </button>
+                    <button id="finish-session" class="cts-btn-general cts-btn-tertiary btn-push hidden flex-1"
+                        onclick="finishSession('form-actions')">
+                        Finalizar
+                    </button>
+                    <button id="cancel-save" class="cts-btn-general cts-btn-error btn-push hidden flex-1">
+                        Cancelar
+                    </button>
+                </div>
+                <span id="loading-data-save" class="loading loading-spinner loading-xl text-accent hidden"></span>
+            </section>
+        </article>
+
+        {% if mode == "perfil ultra flash" %}
+        {% include "../components/dialog-nap-puf.html" %}
+        {% endif %}
+
+        {% include "../components/toast-container.html" %}
+    </article>
+</article>
+{% endblock %}
+
+{% 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 %}