Merge pull request #40 from CascoArcilla/HU10

Implementacion de nappgin con modalidad sort, perfil ultra flash o sin modalidad

tecnicas/controllers/api_controller/rating_napping_controller.py

@@ -1,28 +1,245 @@
 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, GrupoProducto, TecnicaModalidad
+from tecnicas.forms import ListWordsForm
 
 
 class RatingNappingController:
     @staticmethod
-    def saveRatingCoordinates(request: HttpRequest, data: list):
+    def saveRatingCoordinates(request: HttpRequest, data: list | dict):
         participation = Participacion.objects.get(
             id=request.session["id_participation"]
         )
 
+        name_mod = TecnicaModalidad.objects.get(
+            tecnica=participation.tecnica
+        ).modalidad.nombre.lower()
+
+        # Branch based on modality
+        if name_mod == 'sorting':
+            return RatingNappingController.processSortingMode(
+                data, participation
+            )
+
+        if name_mod in ['sin modalidad', 'perfil ultra flash']:
+            return RatingNappingController.processNappOrPUF(
+                data, participation
+            )
+
+        else:
+            return JsonResponse({"error": "Modalidad no soportada"})
+
+    @staticmethod
+    def processSortingMode(data: dict, participation):
+        try:
+            with transaction.atomic():
+                # Extract products array (always present)
+                products = data.get("products", [])
+                if not products:
+                    return JsonResponse({"error": "No se proporcionaron productos"})
+
+                existing_ratings_map, products_map = RatingNappingController.savePoints(
+                    isSorting=True, products=products, participation=participation
+                )
+
+                # Process groups if they exist
+                groups = data.get("groups", {})
+                if groups:
+                    RatingNappingController.processGroupsForSorting(
+                        products, groups, participation, existing_ratings_map, products_map
+                    )
+                else:
+                    RatingNappingController.deleteAllGroups(participation)
+
+            return JsonResponse({"message": "Datos guardados exitosamente"})
+
+        except Exception as e:
+            print("ERROR:", e)
+            import traceback
+            traceback.print_exc()
+            return JsonResponse({"error": f"Error al procesar datos: {str(e)}"})
+
+    @staticmethod
+    def processNappOrPUF(data: list, participation):
+        try:
+            with transaction.atomic():
+                existing_ratings_map, products_map = RatingNappingController.savePoints(
+                    isSorting=False, products=data, participation=participation
+                )
+
+                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 processGroupsForSorting(products, groups, participation, existing_ratings_map, products_map):
+        """Process groups for sorting mode
+        - Creates/updates GrupoProducto instances
+        - Ensures products don't belong to multiple groups
+        - Associates words with groups
+        """
+        # Build mapping of product_id to group_id from products array
+        product_to_group = {}
+        for product_item in products:
+            group_code = product_item.get("group", "")
+            if group_code:  # Only if product has a group assigned
+                product_id = int(product_item["idProduct"])
+                if product_id in product_to_group:
+                    raise ValueError(
+                        f"Producto {product_id} pertenece a múltiples grupos")
+                product_to_group[product_id] = group_code
+
+        # Get existing groups for this catador and technique
+        existing_groups = GrupoProducto.objects.filter(
+            tecnica=participation.tecnica,
+            catador=participation.catador
+        )
+
+        # Create a map of existing groups by their product composition
+        # We'll identify groups by the set of products they contain
+        existing_groups_map = {}
+        for group in existing_groups:
+            product_ids = set(group.productos.values_list('id', flat=True))
+            key = frozenset(product_ids)
+            existing_groups_map[key] = group
+
+        # Build new groups structure
+        groups_to_create = []
+        groups_to_update = []
+        group_products_map = {}  # group_id -> [product_ids]
+
+        # Organize products by group
+        for product_id, group_code in product_to_group.items():
+            if group_code not in group_products_map:
+                group_products_map[group_code] = []
+            group_products_map[group_code].append(product_id)
+
+        # Process each group
+        for group_code, product_ids in group_products_map.items():
+            product_set = frozenset(product_ids)
+
+            # Check if this group already exists
+            if product_set in existing_groups_map:
+                group = existing_groups_map[product_set]
+                groups_to_update.append((group, group_code))
+            else:
+                # Create new group
+                group = GrupoProducto(
+                    tecnica=participation.tecnica,
+                    catador=participation.catador
+                )
+                groups_to_create.append((group, product_ids, group_code))
+
+        # Create new groups
+        created_groups = []
+        for group, product_ids, group_code in groups_to_create:
+            group.save()  # Save first to get ID for M2M
+
+            # Add products to group
+            productos = [products_map[pid]
+                         for pid in product_ids if pid in products_map]
+            group.productos.set(productos)
+
+            created_groups.append((group, group_code))
+
+        # Combine created and existing groups for word processing
+        all_groups_for_words = created_groups + groups_to_update
+
+        # Delete groups that no longer exist
+        current_group_sets = set(frozenset(pids)
+                                 for pids in group_products_map.values())
+        for product_set, group in existing_groups_map.items():
+            if product_set not in current_group_sets:
+                group.delete()
+
+        # Process words for groups
+        if groups:
+            RatingNappingController.processWordsForGroups(
+                groups, all_groups_for_words
+            )
+    
+    @staticmethod
+    def deleteAllGroups(participation):
+        GrupoProducto.objects.filter(
+            tecnica=participation.tecnica,
+            catador=participation.catador
+        ).delete()
+
+    @staticmethod
+    def processWordsForGroups(groups_data, groups_list):
+        """Process and associate words to groups
+        - Creates words that don't exist
+        - Associates words to GrupoProducto instances
+        - Handles concurrency
+        """
+        # Collect all unique words from all groups
+        all_words = set()
+        for group_id, words in groups_data.items():
+            if words:
+                all_words.update(words)
+
+        if not all_words:
+            # No words to process, just clear existing words from groups
+            for grupo, _ in groups_list:
+                grupo.palabras.clear()
+            return
+
+        # Get existing words
+        existing_words = Palabra.objects.filter(
+            nombre_palabra__in=all_words
+        )
+        existing_words_map = {w.nombre_palabra: w for w in existing_words}
+
+        # Create missing words with concurrency handling
+        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
+
+        # Associate words with groups
+        for grupo, group_id in groups_list:
+            words = groups_data.get(group_id, [])
+            if words:
+                words_to_set = [word_objects[word_name]
+                                for word_name in words if word_name in word_objects]
+                grupo.palabras.set(words_to_set)
+            else:
+                grupo.palabras.clear()
+
+    @staticmethod
+    def savePoints(isSorting: bool, products, participation):
         try:
             with transaction.atomic():
+                # Get products map for validation
                 products_map = RatingNappingController.getProductsMap(
                     participation.tecnica)
 
+                # Get existing ratings map
                 existing_ratings_map = RatingNappingController.getExistingRatingsMap(
-                    participation.tecnica, participation.catador
-                )
+                    participation.tecnica, participation.catador)
+
+                if not isSorting:
+                    validation_result = RatingNappingController.validateWords(
+                        products)
+                    if validation_result is not None:
+                        return validation_result
 
+                # Create new ratings for products that don't have them
                 new_ratings = []
                 ids_products = products_map.keys()
-                for item in data:
+                for item in products:
                     product_id = int(item["idProduct"])
                     if product_id not in existing_ratings_map and product_id in ids_products:
                         new_ratings.append(
@@ -37,16 +254,16 @@ class RatingNappingController:
                 if new_ratings:
                     Calificacion.objects.bulk_create(new_ratings)
                     existing_ratings_map = RatingNappingController.getExistingRatingsMap(
-                        participation.tecnica, participation.catador
-                    )
+                        participation.tecnica, participation.catador)
 
+                # Process DatoPunto instances from products array
                 existing_points_map = RatingNappingController.getExistingPointsMap(
                     existing_ratings_map.values())
 
                 points_to_create = []
                 points_to_update = []
 
-                for item in data:
+                for item in products:
                     product_id = int(item["idProduct"])
                     rating = existing_ratings_map.get(product_id)
 
@@ -71,11 +288,65 @@ class RatingNappingController:
                 if points_to_update:
                     DatoPunto.objects.bulk_update(points_to_update, ['x', 'y'])
 
-            return JsonResponse({"message": "Datos guardados exitosamente"})
+                return (existing_ratings_map, products_map)
 
         except Exception as e:
-            print("ERROR:", e)
-            return JsonResponse({"error": "Error al procesar datos"})
+            print(e)
+            return JsonResponse({"error": "Error al guardar los puntos"})
+
+    @staticmethod
+    def validateWords(data: list):
+        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):
+        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):

tecnicas/controllers/models_controller/dato_controller.py

@@ -48,10 +48,6 @@ class DatoController():
                 value_rounded = round(decimal_value)
                 self.value_data = ValorDecimal(valor=value_rounded)
                 
-                print(self.value_rating)
-                print(decimal_value)
-                print(value_rounded)
-
             else:
                 self.value_data = ValorDecimal(valor=self.value_rating)
 

tecnicas/controllers/views_controller/create_session/panels_create/panel_create_napping_controller.py

@@ -1,6 +1,6 @@
 from .panel_create_controller import PanelCreateController
 from django.http import HttpRequest, JsonResponse
-from tecnicas.models import Tecnica, TipoTecnica, EstiloPalabra, Producto, SesionSensorial
+from tecnicas.models import Tecnica, TipoTecnica, EstiloPalabra, Producto, SesionSensorial, Modalidad, TecnicaModalidad
 from django.db import transaction
 from tecnicas.utils import deleteDataSession
 
@@ -64,6 +64,25 @@ class PanelCreateNappingController(PanelCreateController):
                     # Third step: Create session and relat with the technique #
                     #
                     # /////////////////////////////////////////////////////// #
+                    mod = Modalidad.objects.get(
+                        nombre=data_basic["modalidad"])
+
+                    if not mod:
+                        raise ValueError("Modalidad no encontrada")
+
+                    technique_mod = TecnicaModalidad.objects.create(
+                        tecnica=technique,
+                        modalidad=mod
+                    )
+
+                    if not technique_mod:
+                        raise ValueError("Error al guardar la técnica")
+
+                    # /////////////////////////////////////////////////////// #
+                    #
+                    # Fourth step: Create session and relat with the technique #
+                    #
+                    # /////////////////////////////////////////////////////// #
                     session = SesionSensorial.objects.create(
                         nombre_sesion=data_basic["nombre_sesion"] if data_basic["nombre_sesion"] != "" else None,
                         tecnica=technique,

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_escala_controller.py

@@ -29,7 +29,7 @@ class DetallesEscalasController(DetallesController):
 
         self.context = {
             "sesion": self.session,
-            "use_technique": technique
+            "use_technique": technique.tipo_tecnica.nombre_tecnica
         }
 
         # Datos de la escala usada

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

@@ -3,7 +3,7 @@ from django.shortcuts import redirect
 from django.urls import reverse
 from django.db.models import F
 from .details_controller import DetallesController
-from tecnicas.models import SesionSensorial, Presentador, Modalidad, TecnicaModalidad, Catador, Participacion, DatoPunto, Calificacion
+from tecnicas.models import SesionSensorial, Presentador, Modalidad, TecnicaModalidad, Catador, Participacion, DatoPunto, Calificacion, GrupoProducto
 from tecnicas.utils import defaultdict_to_dict
 from collections import defaultdict
 
@@ -20,31 +20,36 @@ class DetallesNappingController(DetallesController):
         }
 
         self.defineStatus()
-        self.setOptionesMode()
-        self.setDataTableNoMode()
+        self.setIsEndSession()
+        self.setDataTable()
 
         return self.context
 
     def defineStatus(self):
         repetition = self.session.tecnica.repeticion
+        mod = TecnicaModalidad.objects.get(
+            tecnica=self.session.tecnica)
+
+        self.context["mod_tech"] = mod.modalidad.nombre
+        self.context["mode"] = mod.modalidad.nombre
+        if mod.modalidad.nombre == "sin modalidad":
+            self.context["mod_tech"] = "No se usa modalidad"
 
-        if not repetition and not self.session.activo:
+        if not self.session.activo:
             self.context["status"] = "Listo para iniciar la sesión con Napping"
-        elif not repetition and self.session.activo:
-            self.context["status"] = "Sesión con Napping en curso"
-        elif repetition == 1 and not self.session.activo:
-            self.context["status"] = "En espera de la siguiente acción"
-        else:
-            self.context["status"] = "En espera de la siguiente acción"
+        elif self.session.activo:
+            self.context["status"] = "Sesión con en curso"
 
     def controllPostResponse(self, request: HttpRequest, action: str):
+        print(action)
         if action == "start_sin_modalidad":
-            name_mode = action.replace("start_", "").replace("_", " ")
-            response = self.startNapping(request=request, name_mode=name_mode)
+            response = self.startNapping(request=request)
+
+        elif action == "start_perfil_ultra_flash":
+            response = self.startNapping(request=request)
 
-        if action == "start_perfil_ultra_flash":
-            name_mode = action.replace("start_", "").replace("_", " ")
-            return self.controllGetResponse(error="Trabajando en la modalidad", request=request)
+        elif action == "start_sorting":
+            response = self.startNapping(request=request)
 
         elif action == "delete_session":
             self.deleteSesorialSession()
@@ -57,17 +62,15 @@ class DetallesNappingController(DetallesController):
 
         return response
 
-    def startNapping(self, request: HttpRequest, name_mode: str):
+    def startNapping(self, request: HttpRequest):
         if request.user.user_presentador.user.username != self.session.creadoPor.user.username:
             return self.controllGetResponse(error="Solo el presentador que crea la sesión puede iniciar la repetición", request=request)
         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)
-
-        if not tecnique_mode:
-            return self.controllGetResponse(error="Modalidad no encontrada", 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
         self.session.save()
@@ -78,7 +81,7 @@ class DetallesNappingController(DetallesController):
         return redirect(
             reverse(self.url_next, kwargs=parameters))
 
-    def setDataTableNoMode(self):
+    def setDataTable(self):
         participations = Participacion.objects.filter(
             tecnica=self.session.tecnica).select_related("catador")
         testers = [participation.catador for participation in participations]
@@ -110,17 +113,115 @@ class DetallesNappingController(DetallesController):
         self.context["coordinates_no_mode"] = defaultdict_to_dict(
             coordinates_by_product)
 
+        # Add word frequency data for perfil ultra flash mode
+        mod = TecnicaModalidad.objects.get(tecnica=self.session.tecnica)
+        if mod.modalidad.nombre == "perfil ultra flash":
+            self.setWordFrequencies(ratings)
+        elif mod.modalidad.nombre == "sorting":
+            self.setSortingData()
+
         self.context["there_data"] = True
 
-    def setOptionesMode(self):
-        modes = Modalidad.objects.all()
-        technique_modes = TecnicaModalidad.objects.filter(
-            tecnica=self.session.tecnica)
+    def setWordFrequencies(self, ratings):
+        from collections import Counter
 
-        if not technique_modes.exists():
-            self.context["modes"] = modes
-        else:
-            use_modes = technique_modes.values_list("modalidad", flat=True)
+        # Prefetch palabras to optimize queries
+        ratings_with_words = ratings.prefetch_related(
+            'palabras').select_related('id_producto')
 
-            self.context["modes"] = modes.exclude(
-                id__in=use_modes)
+        # Dictionary to store word frequencies by product
+        word_frequencies_by_product = defaultdict(Counter)
+        all_words_set = set()
+
+        for rating in ratings_with_words:
+            producto_code = rating.id_producto.codigoProducto
+            words = rating.palabras.all()
+
+            for word in words:
+                word_name = word.nombre_palabra
+                word_frequencies_by_product[producto_code][word_name] += 1
+                all_words_set.add(word_name)
+
+        # Convert Counter objects to regular dicts and sort words alphabetically
+        word_frequencies_dict = {
+            product: dict(frequencies)
+            for product, frequencies in word_frequencies_by_product.items()
+        }
+
+        # Sort all words alphabetically for consistent column ordering
+        all_words_sorted = sorted(all_words_set)
+
+        self.context["word_frequencies"] = word_frequencies_dict
+        self.context["all_words"] = all_words_sorted
+
+    def setSortingData(self):
+        # Get all ratings for this technique to access DatoPunto
+        ratings = Calificacion.objects.filter(id_tecnica=self.session.tecnica)
+
+        # Get coordinates for all products
+        coordinates = (
+            DatoPunto.objects.filter(calificacion__in=ratings)
+            .values(
+                producto=F("calificacion__id_producto__codigoProducto"),
+                producto_id=F("calificacion__id_producto__id"),
+                catador=F("calificacion__id_catador__user__username"),
+                catador_id=F("calificacion__id_catador__id"),
+                px=F("x"),
+                py=F("y"),
+            ))
+
+        # Create a mapping of (catador_id, producto_id) -> coordinates
+        coord_map = {}
+        for coord in coordinates:
+            key = (coord["catador_id"], coord["producto_id"])
+            coord_map[key] = {
+                "px": coord["px"],
+                "py": coord["py"],
+                "producto": coord["producto"],
+                "catador": coord["catador"]
+            }
+
+        # Get all groups with their products and words
+        grupos = (
+            GrupoProducto.objects.filter(tecnica=self.session.tecnica)
+            .prefetch_related("productos", "palabras")
+            .select_related("catador__user")
+        )
+
+        # Create a mapping of (catador_id, producto_id) -> words
+        words_map = defaultdict(list)
+        for grupo in grupos:
+            catador_id = grupo.catador.id
+            words = [palabra.nombre_palabra for palabra in grupo.palabras.all()]
+            words_str = ";".join(words) if words else ""
+
+            for producto in grupo.productos.all():
+                key = (catador_id, producto.id)
+                words_map[key] = words_str
+
+        # Structure final data: product -> catador -> {px, py, words}
+        sorting_data = defaultdict(dict)
+
+        for key, coord_data in coord_map.items():
+            catador_id, producto_id = key
+            producto_code = coord_data["producto"]
+            catador_username = coord_data["catador"]
+
+            sorting_data[producto_code][catador_username] = {
+                "px": coord_data["px"],
+                "py": coord_data["py"],
+                "words": words_map.get(key, "")
+            }
+
+        self.context["sorting_data"] = defaultdict_to_dict(sorting_data)
+
+    def setIsEndSession(self):
+        if not self.session.activo and self.session.tecnica.repeticion < 1:
+            self.context["finished"] = False
+            return
+        elif self.session.activo:
+            self.context["finished"] = False
+            return
+        elif not self.session.activo and self.session.tecnica.repeticion >= 1:
+            self.context["finished"] = True
+            return

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

@@ -6,6 +6,8 @@ from collections import defaultdict
 
 
 class DetallesPFController(DetallesController):
+    skip_repetition = 2
+
     def __init__(self, session: SesionSensorial):
         super().__init__(session)
         self.url_template = "tecnicas/manage_sesions/details-session-pf.html"
@@ -18,7 +20,7 @@ class DetallesPFController(DetallesController):
             "sesion": self.session,
             "use_technique": technique,
             "tipo_escala": technique.escala_tecnica.id_tipo_escala.nombre_escala,
-            "repeticiones_max": technique.repeticiones_max - 2
+            "repeticiones_max": technique.repeticiones_max - self.skip_repetition
         }
 
         # Definir el estado de la sesion
@@ -28,8 +30,15 @@ class DetallesPFController(DetallesController):
 
         self.getDataPhases()
 
+        self.isEndSession()
+
         return self.context
 
+    def isEndSession(self):
+        current_rep = self.session.tecnica.repeticion - self.skip_repetition
+        max_rep = self.session.tecnica.repeticiones_max - self.skip_repetition
+        self.context["finished"] = current_rep >= max_rep
+
     def getDataPhases(self):
         curren_repetition = self.session.tecnica.repeticion
 
@@ -46,7 +55,7 @@ class DetallesPFController(DetallesController):
             self.context["fisrt_phase"] = self.getDataFirstPhase()
             self.context["second_phase"] = self.getDataSecondPhase()
             self.context["data_ratings"] = self.getDataRatings()
-            self.context["repeticion"] = self.session.tecnica.repeticion - 2
+            self.context["repeticion"] = self.session.tecnica.repeticion - self.skip_repetition
 
         return self.context
 

tecnicas/controllers/views_controller/session_management/monitor/monitor_napping_controller.py

@@ -27,11 +27,9 @@ class MonitorNappingController(MonitorController):
         return (True, "Puedes finalizar la sesión")
 
     def finishSession(self):
-        mode_technique = TecnicaModalidad.objects.get(
-            tecnica=self.sensorial_session.tecnica, usando=True)
-        mode_technique.usando = False
-        mode_technique.save()
-
+        technique = self.sensorial_session.tecnica
+        technique.repeticion = 1
+        technique.save()
         self.sensorial_session.activo = False
         self.sensorial_session.save()
         return self.sensorial_session

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).modalidad.nombre
+
+        if technique_mode == "sin modalidad":
+            self.context["status"] = "La sesión usa Napping"
+        else:
+            self.context["status"] = f"La sesión usa Napping con modalidad {technique_mode}"

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,8 +2,10 @@ 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, Palabra, GrupoProducto
+from tecnicas.forms import ListWordsForm
 from tecnicas.utils import noValidTechnique
+from tecnicas.controllers import ParticipacionController
 from .general_test_controller import GenetalTestController
 
 
@@ -11,6 +13,8 @@ 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"
+        self.sort_direction = "tecnicas/forms_tester/test_napping_sort.html"
 
     def controllGet(self, request: HttpRequest):
         technique = self.session.tecnica
@@ -26,16 +30,25 @@ class TestNappingController(GenetalTestController):
             return redirect(reverse(self.previus_directory, kwargs=params))
 
         name_mode_activate = TecnicaModalidad.objects.get(
-            tecnica=technique, usando=True).modalidad.nombre
+            tecnica=technique).modalidad.nombre
 
         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)
+
+        if name_mode_activate == "sorting":
+            self.context["mode"] = "sorting"
+            return self.nappingSort(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 +66,36 @@ 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)
+
+        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()
+        self.setWords()
+
+        return render(request, self.napping_puf_test, self.context)
+
+    def nappingSort(self, request: HttpRequest):
+        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.context["form"] = ListWordsForm()
+        self.setCoordinates()
+        self.setGroups()
+
+        return render(request, self.sort_direction, self.context)
+
     def setCoordinates(self):
         technique = self.session.tecnica
 
@@ -65,10 +108,135 @@ 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__id")
         )
 
         self.context["data_points"] = list(data_points)
+
+    def setGroups(self):
+        technique = self.session.tecnica
+
+        # Get all product groups for this tester
+        grupos_producto = GrupoProducto.objects.filter(
+            tecnica=technique,
+            catador=self.participation.catador
+        ).prefetch_related('productos', 'palabras')
+
+        groups = []
+        for group in grupos_producto:
+            # Get products in this group
+            products_list = []
+            for product in group.productos.all():
+                products_list.append({
+                    'id': product.id,
+                    'codigoProducto': product.codigoProducto
+                })
+
+            # Get words for this group
+            words_list = list(group.palabras.values_list(
+                'nombre_palabra', flat=True))
+
+            groups.append({
+                'id': group.id,
+                'products': products_list,
+                'words': words_list
+            })
+
+        self.context["groups"] = groups
+
+    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
+
+    def controllPost(self, request: HttpRequest):
+        action = request.POST.get("action")
+
+        if action == "finish_session":
+            # Get technique and mode
+            technique = self.session.tecnica
+            self.participation = Participacion.objects.get(
+                tecnica=technique, catador=request.user.user_catador)
+
+            name_mode_activate = TecnicaModalidad.objects.get(
+                tecnica=technique).modalidad.nombre
+
+            # Validate based on mode
+            validation_error = self.validateSessionCompletion(
+                technique, name_mode_activate)
+
+            if validation_error:
+                # Return to the appropriate template with error
+                if name_mode_activate == "sin modalidad":
+                    return self.nappingTest(request)
+                elif name_mode_activate == "perfil ultra flash":
+                    return self.nappingPufTest(request)
+
+            # If validation passes, finish the session
+            ParticipacionController.finishSession(self.participation)
+            params = {"code_sesion": self.session.codigo_sesion}
+            return redirect(reverse(self.previus_directory, kwargs=params))
+
+        # For other actions, call parent's controllPost
+        return super().controllPost(request)
+
+    def validateSessionCompletion(self, technique, mode_name):
+        # Get all products in technique
+        products = Producto.objects.filter(id_tecnica=technique)
+        product_count = products.count()
+
+        # Get all ratings for this tester
+        ratings = Calificacion.objects.filter(
+            num_repeticion=0,
+            id_tecnica=technique,
+            id_catador=self.participation.catador
+        ).select_related('id_producto').prefetch_related('palabras')
+
+        # Check if all products have ratings
+        if ratings.count() != product_count:
+            missing_count = product_count - ratings.count()
+            return f"Faltan {missing_count} producto(s) por evaluar."
+
+        # Check if all ratings have DatoPunto (coordinates)
+        ratings_with_points = DatoPunto.objects.filter(
+            calificacion__in=ratings
+        ).values_list('calificacion_id', flat=True)
+
+        ratings_without_points = ratings.exclude(id__in=ratings_with_points)
+        if ratings_without_points.exists():
+            missing_products = [
+                r.id_producto.codigoProducto for r in ratings_without_points
+            ]
+            return f"Los siguientes productos no tienen coordenadas: {', '.join(missing_products)}"
+
+        # Additional validation for "perfil ultra flash" mode
+        if mode_name == "perfil ultra flash":
+            # Check that each rating has at least one word
+            ratings_without_words = []
+            for rating in ratings:
+                if rating.palabras.count() < 1:
+                    ratings_without_words.append(
+                        rating.id_producto.codigoProducto)
+
+            if ratings_without_words:
+                return f"Los siguientes productos deben tener al menos 1 palabra: {', '.join(ratings_without_words)}"
+
+        # All validations passed
+        return None

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

@@ -40,11 +40,10 @@ class TestSortController(GenetalTestController):
         self.context["products"] = products_in_technique
 
         grups_products = GrupoProducto.objects.filter(
-            tecnica=technique, catador=request.user.user_catador).select_related("productos", "palabras")
+            tecnica=technique, catador=request.user.user_catador)
 
-        self.context["grups_products"] = grups_products if grups_products else []
+        self.context["grups_products"] = grups_products or []
 
         self.context["form_word"] = ListWordsForm()
 
         return render(request, self.current_directory, self.context)
-

tecnicas/forms/create_session/sesion_basic_napping.py

@@ -1,4 +1,5 @@
 from django import forms
+from tecnicas.models import Modalidad
 
 
 class SesionBasicNappingForm(forms.Form):
@@ -22,3 +23,16 @@ class SesionBasicNappingForm(forms.Form):
         "class": "bg-surface-ligt border-b-1 text-center w-full p-1",
         "placeholder": "Este campo es opcional"
     }), required=False)
+
+    def __init__(self, *args, **kwargs):
+        super(SesionBasicNappingForm, self).__init__(*args, **kwargs)
+        names_mod = [
+            ("sin modalidad", "sin modalidad"),
+            ("sorting", "sorting"),
+            ("perfil ultra flash", "perfil ultra flash")
+        ]
+
+        self.fields['modalidad'] = forms.CharField(widget=forms.RadioSelect(choices=names_mod, attrs={
+            "class": "radio radio-lg radio-info",
+            "placeholder": "Seleccione una modalidad",
+        }), required=True, initial=names_mod[0])

tecnicas/static/js/span-notification.js

@@ -1,5 +1,6 @@
 function spanNotifaction(messageError, isError = true, time = 4500) {
   const span = document.createElement("span");
+  span.classList.add("text-xl", "font-bold", "text-white");
   span.textContent = messageError;
 
   const div = document.createElement("div");

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

@@ -0,0 +1,253 @@
+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');
+
+// 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");
+  window.isPlacementActive = true;
+} else {
+  // Normal mode: placement is always active
+  window.isPlacementActive = true;
+}
+
+// 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 (!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`;
+
+  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
+//////
+////
+*/
+
+// Callback for additional validation before saving
+window.beforeSaveData = null;
+
+// Function to get extra data for each product
+window.getExtraDataForSave = null;
+
+window.saveData = async function (isFinishSession = false) {
+  const codeProducts = Object.keys(window.placedPoints);
+  const data = [];
+
+  // Only validate all products placed if finishing session
+  if (isFinishSession && products.length != codeProducts.length) {
+    spanNotifaction("Por favor, coloca todos los puntos antes de finalizar la sesión")
+    return false;
+  }
+
+  // Call beforeSaveData callback if it exists (for ultra flash validation)
+  if (window.beforeSaveData && typeof window.beforeSaveData === 'function') {
+    const validationResult = window.beforeSaveData(isFinishSession);
+    if (validationResult === false) {
+      return false;
+    }
+  }
+
+  codeProducts.forEach((code) => {
+    const point = window.placedPoints[code];
+
+    const objData = {
+      code: code,
+      x: point.x,
+      y: point.y,
+      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);
+  })
+
+  const URL = "/cata/testers/api/rating-napping"
+  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
+  }
+}
+
+// Function to finish session with validation
+window.finishSession = async function () {
+  const success = await window.saveData(true);
+  if (success) {
+    // Submit the form to finish session
+    const formFinish = document.getElementById("form-finish-session")
+    formFinish.action = ""
+    formFinish.submit();
+  }
+}
+
+document
+  .getElementById("save-progress")
+  .addEventListener("click", () => window.saveData(false));

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

@@ -0,0 +1,623 @@
+// Napping Sort Mode - Three Phase Implementation
+// Phase 1: Place products on plane
+// Phase 2: Create groups by selecting points
+// Phase 3: Describe groups with words
+
+// Store groups: { "group-1": ["CODE1", "CODE2"], "group-2": ["CODE3"] }
+const productGroups = {};
+
+// Store group words: { "group-1": ["word1", "word2"], "group-2": ["word3"] }
+const groupWords = {};
+
+// Track which group each product belongs to: { "CODE1": "group-1", "CODE2": "group-1" }
+const productToGroup = {};
+
+// Selected points for creating a group
+let selectedPoints = [];
+
+// Current group counter for generating IDs
+let groupCounter = 1;
+
+// Current phase (1, 2, or 3)
+let currentPhase = 1;
+
+// Current group being described
+let currentGroupId = null;
+
+// Only initialize if in sort mode
+const modeElementSort = document.querySelector('[data-mode]');
+const isSortMode = modeElementSort && modeElementSort.dataset.mode.toLowerCase() === 'sorting';
+
+if (isSortMode) {
+    initSortMode();
+}
+
+function loadExistingGroups() {
+    const dataGroupContainer = document.querySelector('.data-group-products');
+    if (!dataGroupContainer) return { hasGroups: false, hasWords: false };
+
+    const groupElements = dataGroupContainer.querySelectorAll('.item-group');
+    let hasGroups = false;
+    let hasWords = false;
+
+    groupElements.forEach((groupEl, index) => {
+        const groupId = `group-${groupCounter++}`;
+        const products = [];
+        const words = groupEl.dataset.words ? groupEl.dataset.words.split(',').map(w => w.trim()).filter(w => w) : [];
+
+        // Get products in this group
+        groupEl.querySelectorAll('.item-group-product').forEach(productEl => {
+            const code = productEl.dataset.code;
+            products.push(code);
+            productToGroup[code] = groupId;
+        });
+
+        if (products.length > 0) {
+            hasGroups = true;
+            productGroups[groupId] = products;
+            groupWords[groupId] = words;
+
+            if (words.length > 0) {
+                hasWords = true;
+            }
+        }
+    });
+
+    return { hasGroups, hasWords };
+}
+
+function initSortMode() {
+    const continueGroupingBtn = document.getElementById('continue-grouping');
+    const continueDescriptionBtn = document.getElementById('continue-description');
+    const createGroupBtn = document.getElementById('create-group-btn');
+    const dissolveGroupBtn = document.getElementById('dissolve-group-btn');
+    const groupControls = document.getElementById('group-controls');
+    const questionSaveBtn = document.getElementById('question-save');
+
+    const groupWordDialog = document.getElementById('group-word-dialog');
+    const groupWordForm = document.getElementById('group-word-form');
+    const groupWordInput = document.getElementsByName('nombre_palabra')[0];
+    groupWordInput.value = "";
+    const groupWordList = document.getElementById('group-word-list');
+    const dialogGroupId = document.getElementById('dialog-group-id');
+
+    // Hide question save button initially
+    questionSaveBtn.classList.add('hidden');
+
+    // Load existing groups from backend and determine initial phase
+    const { hasGroups, hasWords } = loadExistingGroups();
+
+    setTimeout(() => {
+        // Determine initial phase based on existing data
+        if (hasGroups && hasWords) {
+            // Skip to Phase 3 (Description) if groups have words
+            currentPhase = 3;
+            window.isPlacementActive = false;
+            groupControls.classList.remove('hidden');
+            continueDescriptionBtn.classList.remove('hidden');
+
+            renderExistingGroups();
+            startDescriptionPhase();
+        } else if (hasGroups) {
+            // Skip to Phase 2 (Grouping) if groups exist but no words
+            currentPhase = 2;
+            renderExistingGroups();
+            window.isPlacementActive = false;
+            groupControls.classList.remove('hidden');
+            continueDescriptionBtn.classList.remove('hidden');
+
+            const plane = document.getElementById('napping-plane');
+            plane.classList.remove('cursor-crosshair');
+            plane.classList.add('cursor-default');
+
+            enablePointSelection();
+            spanNotifaction("Continúa agrupando productos o pasa a la descripción.", false);
+        } else {
+            // Start in Phase 1 (Placement)
+            currentPhase = 1;
+        }
+    }, 200);
+
+    // Phase 1: Product Placement
+    // Show continue to grouping button when all products are placed
+    setInterval(() => {
+        if (currentPhase === 1) {
+            const placedCount = Object.keys(window.placedPoints).length;
+            const totalProducts = document.querySelectorAll('.item-product').length;
+
+            if (placedCount === totalProducts && placedCount > 0) {
+                continueGroupingBtn.classList.remove('hidden');
+            } else {
+                continueGroupingBtn.classList.add('hidden');
+            }
+        }
+    }, 500);
+
+    // Transition to Phase 2: Grouping
+    continueGroupingBtn.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;
+        }
+
+        startGroupingPhase();
+    });
+
+    function startGroupingPhase() {
+        currentPhase = 2;
+        window.isPlacementActive = false;
+        continueGroupingBtn.classList.add('hidden');
+        groupControls.classList.remove('hidden');
+        continueDescriptionBtn.classList.remove('hidden');
+
+        const plane = document.getElementById('napping-plane');
+        plane.classList.remove('cursor-crosshair');
+        plane.classList.add('cursor-default');
+
+        // Remove selection from products
+        document.querySelectorAll('.item-product').forEach(p => {
+            p.classList.remove('ring-4', 'ring-primary');
+        });
+
+        spanNotifaction("Fase de agrupación: Selecciona puntos y crea grupos.", false);
+
+        // Auto-save points when transitioning to Phase 2
+        sortModeSaveData(false);
+
+        // Enable point selection
+        enablePointSelection();
+    }
+
+    function enablePointSelection() {
+        // Add click handler to points for selection
+        document.getElementById('napping-plane').addEventListener('click', (e) => {
+            if (currentPhase !== 2) return;
+
+            const point = e.target.closest('.data-point');
+            if (point) {
+                e.stopPropagation();
+                togglePointSelection(point.dataset.code);
+            }
+        });
+    }
+
+    function togglePointSelection(code) {
+        // Check if point is already in a group
+        if (productToGroup[code]) {
+            spanNotifaction(`El producto ${code} ya pertenece al grupo ${productToGroup[code]}`);
+            return;
+        }
+
+        const point = document.getElementById(`point-${code}`);
+        const index = selectedPoints.indexOf(code);
+
+        if (index > -1) {
+            // Deselect
+            selectedPoints.splice(index, 1);
+            point.classList.remove('ring-4', 'ring-blue-500');
+            point.classList.add('bg-red-600');
+            point.classList.remove('bg-blue-600');
+        } else {
+            // Select
+            selectedPoints.push(code);
+            point.classList.add('ring-4', 'ring-blue-500');
+            point.classList.remove('bg-red-600');
+            point.classList.add('bg-blue-600');
+        }
+    }
+
+    // Create Group
+    createGroupBtn.addEventListener('click', () => {
+        if (selectedPoints.length === 0) {
+            spanNotifaction("Selecciona al menos un punto para crear un grupo");
+            return;
+        }
+
+        const groupId = `group-${groupCounter++}`;
+        productGroups[groupId] = [...selectedPoints];
+        groupWords[groupId] = [];
+
+        // Update product to group mapping
+        selectedPoints.forEach(code => {
+            productToGroup[code] = groupId;
+        });
+
+        // Visual update: change color of grouped points
+        const colors = ['bg-green-600', 'bg-purple-600', 'bg-yellow-600', 'bg-pink-600', 'bg-indigo-600'];
+        const colorIndex = (groupCounter - 2) % colors.length;
+
+        selectedPoints.forEach(code => {
+            const point = document.getElementById(`point-${code}`);
+            point.classList.remove('bg-blue-600', 'ring-4', 'ring-blue-500');
+            point.classList.add(colors[colorIndex]);
+        });
+
+        // Add group to display
+        addGroupToDisplay(groupId, selectedPoints, colors[colorIndex]);
+
+        // Clear selection
+        selectedPoints = [];
+
+        spanNotifaction(`Grupo "${groupId}" creado con éxito`, false);
+    });
+
+    function addGroupToDisplay(groupId, products, colorClass) {
+        const groupsDisplay = document.getElementById('groups-display');
+
+        const groupBadge = document.createElement('div');
+        groupBadge.id = `display-${groupId}`;
+        groupBadge.className = `badge badge-lg gap-2 p-4 ${colorClass} text-white cursor-pointer font-semibold`;
+        groupBadge.innerHTML = `
+            [ ${products.join(', ')} ]
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current dissolve-group-icon" data-group-id="${groupId}">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        `;
+
+        groupsDisplay.appendChild(groupBadge);
+
+        // Add dissolve handler
+        groupBadge.querySelector('.dissolve-group-icon').addEventListener('click', (e) => {
+            e.stopPropagation();
+            dissolveGroup(groupId);
+        });
+
+        // Add click handler for Phase 3 (describe group)
+        groupBadge.addEventListener('click', () => {
+            if (currentPhase === 3) {
+                openGroupWordDialog(groupId);
+            }
+        });
+    }
+
+    function dissolveGroup(groupId) {
+        if (currentPhase === 3) {
+            spanNotifaction("No puedes disolver un grupo en la fase de descripción");
+            return;
+        }
+
+        if (groupWords[groupId] && groupWords[groupId].length > 0) {
+            spanNotifaction("No puedes disolver un grupo que ya tiene palabras descriptivas");
+            return;
+        }
+
+        // Remove from product to group mapping
+        productGroups[groupId].forEach(code => {
+            delete productToGroup[code];
+            const point = document.getElementById(`point-${code}`);
+            point.classList.remove('bg-green-600', 'bg-purple-600', 'bg-yellow-600', 'bg-pink-600', 'bg-indigo-600');
+            point.classList.add('bg-red-600');
+        });
+
+        // Remove group
+        delete productGroups[groupId];
+        delete groupWords[groupId];
+
+        // Remove from display
+        const displayElement = document.getElementById(`display-${groupId}`);
+        if (displayElement) {
+            displayElement.remove();
+        }
+
+        spanNotifaction(`Grupo "${groupId}" disuelto`, false);
+    }
+
+    // Dissolve Group button (dissolves last created group or selected group)
+    dissolveGroupBtn.addEventListener('click', () => {
+        const groupIds = Object.keys(productGroups);
+        if (groupIds.length === 0) {
+            spanNotifaction("No hay grupos para disolver");
+            return;
+        }
+
+        // Dissolve the last group
+        const lastGroupId = groupIds[groupIds.length - 1];
+        dissolveGroup(lastGroupId);
+    });
+
+    // Transition to Phase 3: Description
+    continueDescriptionBtn.addEventListener('click', () => {
+        const groupIds = Object.keys(productGroups);
+        if (groupIds.length === 0) {
+            spanNotifaction("Crea al menos un grupo para continuar");
+            return;
+        }
+
+        // Check all products are in groups
+        const totalProducts = document.querySelectorAll('.item-product').length;
+        const groupedProducts = Object.keys(productToGroup).length;
+
+        if (groupedProducts !== totalProducts) {
+            spanNotifaction("Todos los productos deben estar asignados a un grupo");
+            return;
+        }
+
+        startDescriptionPhase();
+    });
+
+    function startDescriptionPhase() {
+        currentPhase = 3;
+        continueDescriptionBtn.classList.add('hidden');
+
+        createGroupBtn.classList.add('hidden');
+        dissolveGroupBtn.classList.add('hidden');
+
+        questionSaveBtn.classList.remove('hidden');
+
+        const iconsDisolveGroup = document.querySelectorAll('.dissolve-group-icon');
+        for (let index = 0; index < iconsDisolveGroup.length; index++) {
+            const icon = iconsDisolveGroup.item(index);
+            icon.remove();
+        }
+
+        spanNotifaction("Fase de descripción: Haz clic en un grupo para agregar palabras.", false);
+
+        // Auto-save groups when transitioning to Phase 3
+        sortModeSaveData(false);
+    }
+
+    // Group Word Dialog Functions
+    function openGroupWordDialog(groupId) {
+        currentGroupId = groupId;
+        dialogGroupId.innerText = groupId;
+        renderGroupWordList();
+        groupWordDialog.showModal();
+    }
+
+    function renderGroupWordList() {
+        groupWordList.innerHTML = '';
+        const words = groupWords[currentGroupId] || [];
+
+        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', () => {
+                removeGroupWord(index);
+            });
+
+            groupWordList.appendChild(badge);
+
+        });
+
+        // Update group display with word count
+        updateGroupDisplayWithWords(currentGroupId);
+    }
+
+    function addGroupWord(word) {
+        if (!groupWords[currentGroupId]) {
+            groupWords[currentGroupId] = [];
+        }
+
+        if (groupWords[currentGroupId].includes(word)) {
+            spanNotifaction("Palabra duplicada");
+            return;
+        }
+
+        groupWords[currentGroupId].push(word);
+        renderGroupWordList();
+    }
+
+    function removeGroupWord(index) {
+        if (groupWords[currentGroupId]) {
+            groupWords[currentGroupId].splice(index, 1);
+            renderGroupWordList();
+        }
+    }
+
+    groupWordForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const word = groupWordInput.value.trim();
+        if (word) {
+            addGroupWord(word);
+            groupWordInput.value = '';
+            groupWordInput.focus();
+        }
+    });
+
+    function updateGroupDisplayWithWords(groupId) {
+        const displayElement = document.getElementById(`display-${groupId}`);
+        if (!displayElement) return;
+
+        const words = groupWords[groupId] || [];
+        const products = productGroups[groupId] || [];
+
+        // Add tooltip with words on hover
+        if (words.length > 0) {
+            let tooltip = displayElement.querySelector('.group-tooltip');
+            if (!tooltip) {
+                tooltip = document.createElement('div');
+                tooltip.className = 'group-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 hidden';
+                displayElement.classList.add('group', 'relative');
+                displayElement.appendChild(tooltip);
+            }
+
+            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 = `
+                <strong>${groupId}</strong>
+                <div class="mt-2 pt-2 border-t border-gray-600" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 300px;">
+                    ${wordBadges}
+                </div>
+            `;
+            tooltip.style.maxWidth = '320px';
+            tooltip.style.whiteSpace = 'normal';
+            tooltip.classList.remove('hidden');
+        } else {
+            let tooltip = displayElement.querySelector('.group-tooltip');
+            if (tooltip) {
+                tooltip.remove();
+            }
+        }
+    }
+
+    function renderExistingGroups() {
+        const colors = ['bg-green-600', 'bg-purple-600', 'bg-yellow-600', 'bg-pink-600', 'bg-indigo-600'];
+        let colorIndex = 0;
+
+        for (const [groupId, products] of Object.entries(productGroups)) {
+            const color = colors[colorIndex % colors.length];
+            colorIndex++;
+
+            // Update point colors
+            products.forEach(code => {
+                const point = document.getElementById(`point-${code}`);
+
+                if (point) {
+                    point.classList.remove('bg-red-600');
+                    point.classList.add(color);
+                }
+            });
+
+            // Add group to display
+            addGroupToDisplay(groupId, products, color);
+
+            // Update display with words if they exist
+            if (groupWords[groupId] && groupWords[groupId].length > 0) {
+                updateGroupDisplayWithWords(groupId);
+            }
+        }
+    }
+
+    // Set up callbacks to extend the base saveData function
+    window.beforeSaveData = function (isFinishSession = false) {
+        if (isFinishSession) {
+            // Validate all products are placed
+            const totalProducts = document.querySelectorAll('.item-product').length;
+            const placedCount = Object.keys(window.placedPoints).length;
+
+            if (placedCount !== totalProducts) {
+                spanNotifaction("Por favor, coloca todos los productos antes de finalizar la sesión");
+                return false;
+            }
+
+            // Validate all products are in groups
+            const groupedProducts = Object.keys(productToGroup).length;
+            if (groupedProducts !== totalProducts) {
+                spanNotifaction("Todos los productos deben estar asignados a un grupo");
+                return false;
+            }
+
+            // Validate each group has at least one product (already guaranteed by creation logic)
+            const groupIds = Object.keys(productGroups);
+            if (groupIds.length === 0) {
+                spanNotifaction("Debe existir al menos un grupo");
+                return false;
+            }
+
+            // Validate each group has at least one word
+            for (const groupId of groupIds) {
+                const words = groupWords[groupId] || [];
+                if (words.length < 1) {
+                    spanNotifaction(`El grupo ${groupId} debe tener al menos una palabra descriptiva`);
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+
+    // Override save-progress button to use sort mode save function
+    const saveProgressBtn = document.getElementById('save-progress');
+    // Remove existing event listener by cloning and replacing
+    const newSaveProgressBtn = saveProgressBtn.cloneNode(true);
+    newSaveProgressBtn.textContent = 'Guardar Progreso Sort';
+    saveProgressBtn.parentNode.replaceChild(newSaveProgressBtn, saveProgressBtn);
+
+    newSaveProgressBtn.addEventListener('click', async () => {
+        await sortModeSaveData(false);
+    });
+
+    // Override finish-session button to use sort mode save function
+    document.getElementById('finish-session').addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const success = await sortModeSaveData(true);
+        if (success) {
+            const formFinish = document.getElementById("form-finish-session");
+            formFinish.action = "";
+            formFinish.submit();
+        }
+    });
+
+    // Sort mode specific save function
+    async function sortModeSaveData(isFinishSession = false) {
+        // Run validation callback if it exists
+        if (window.beforeSaveData && typeof window.beforeSaveData === 'function') {
+            const validationResult = window.beforeSaveData(isFinishSession);
+            if (validationResult === false) {
+                return false;
+            }
+        }
+
+        // Build products array with basic position info and group assignment
+        const products = [];
+        for (const [code, point] of Object.entries(window.placedPoints)) {
+            const groupId = productToGroup[code];
+            products.push({
+                code: code,
+                x: point.x,
+                y: point.y,
+                idProduct: point.id,
+                group: groupId || "" // Empty string if no group assigned
+            });
+        }
+
+        // Build groups object with word arrays
+        const groups = {};
+        const groupIds = Object.keys(productGroups);
+
+        // Only include groups if they exist
+        if (groupIds.length > 0) {
+            for (const groupId of groupIds) {
+                groups[groupId] = groupWords[groupId] || [];
+            }
+        }
+
+        // Build the data structure
+        const data = { products: products };
+
+        // Only add groups if they exist
+        if (Object.keys(groups).length > 0) {
+            data.groups = groups;
+        }
+
+        const URL = "/cata/testers/api/rating-napping";
+        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-ultra-flash.js

@@ -0,0 +1,235 @@
+// Store words: { "CODE": ["word1", "word2"] }
+const productWords = {};
+
+// Only initialize ultra flash if the mode is active
+if (window.isUltraFlash) {
+    initUltraFlash();
+}
+
+function initUltraFlash() {
+    const continueBtn = document.getElementById('continue-description');
+    const questionSaveBtn = document.getElementById('question-save');
+    const dialog = document.getElementById('word-dialog');
+    const wordForm = document.getElementById('word-form');
+    const wordInput = document.querySelector('.cts-input-list-word');
+    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;
+
+    wordInput.value = '';
+
+    // Check if there are existing words from backend
+    points.forEach(point => {
+        const code = point.dataset.code;
+        const wordsAttr = point.dataset.words;
+
+        if (wordsAttr && wordsAttr.trim() !== '') {
+            productWords[code] = wordsAttr.split(',').filter(w => w.trim() !== '');
+            
+            if (productWords[code].length >= 1) {
+                hasExistingWords = true;
+            }
+        }
+    });
+
+    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', () => {
+        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');
+        questionSaveBtn.classList.remove("hidden");
+        spanNotifaction("Fase de descripción: Haz clic en un punto para agregar palabras.", false);
+
+        const plane = document.getElementById('napping-plane');
+        plane.classList.remove('cursor-crosshair');
+        plane.classList.add('cursor-default');
+        document.querySelectorAll('.item-product').forEach(p => {
+            p.classList.remove('ring-4', 'ring-primary');
+        });
+
+        // Auto-save positions when transitioning to description phase
+        window.saveData(false);
+    }
+
+    // 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] = [];
+        }
+
+        // No maximum limit on words
+
+        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;
+
+        const words = productWords[code] || [];
+
+        // Remove existing tooltip if present
+        let tooltip = point.querySelector('.cts-tooltip');
+
+        if (tooltip) {
+            tooltip.remove();
+        }
+
+        // Only create tooltip in description phase and if there are words
+        if (isDescriptionPhase && words.length > 0) {
+            tooltip = document.createElement('div');
+            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 = `
+                <strong>${code}</strong>
+                <div class="mt-2 pt-2 border-t border-gray-600" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 300px;">
+                    ${wordBadges}
+                </div>
+            `;
+
+            // Add max-width to tooltip
+            tooltip.style.maxWidth = '320px';
+            tooltip.style.whiteSpace = 'normal';
+            point.appendChild(tooltip);
+        }
+    }
+
+    // Set up callbacks to extend the base saveData function
+    // Validation callback - runs before saving
+    window.beforeSaveData = function (isFinishSession = false) {
+        // If finishing session, validate all products placed and have words
+        if (isFinishSession) {
+            const totalProducts = document.querySelectorAll('.item-product').length;
+            const codeProducts = Object.keys(window.placedPoints);
+            
+            // Check all products are placed
+            if (codeProducts.length !== totalProducts) {
+                spanNotifaction("Por favor, coloca todos los productos antes de finalizar la sesión.");
+                return false;
+            }
+            
+            // Check each product has at least 1 word
+            for (const code of codeProducts) {
+                const words = productWords[code] || [];
+                if (words.length < 1) {
+                    spanNotifaction(`El producto ${code} debe tener al menos 1 palabra para finalizar la sesión.`);
+                    return false;
+                }
+            }
+        }
+        // For progress save, no validation needed
+        return true;
+    };
+
+    // Data extension callback - adds words to each product's data
+    window.getExtraDataForSave = function (code) {
+        const words = productWords[code] || [];
+        return {
+            words: words
+        };
+    };
+}

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,28 @@
+<dialog id="word-dialog" class="modal">
+    <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>
+
+        <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>
+
+        <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/components/dialog-nap-sort.html

@@ -0,0 +1,29 @@
+<dialog id="group-word-dialog" class="modal">
+    <div class="modal-box max-w-2xl bg-surface-ligt">
+        <h3 class="font-bold text-lg">Describir Grupo: <span id="dialog-group-id"></span></h3>
+        <p class="py-2 text-sm text-gray-600">Agrega palabras para describir este grupo de productos</p>
+
+        <form id="group-word-form" class="space-y-4 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 class="mt-4">
+            <h4 class="font-semibold mb-2">Palabras agregadas:</h4>
+            <div id="group-word-list" class="flex flex-wrap gap-2"></div>
+        </div>
+
+        <div class="modal-action">
+            <form method="dialog">
+                <button class="cts-btn-general cts-btn-secondary btn-push">Cerrar</button>
+            </form>
+        </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>

tecnicas/templates/tecnicas/components/table-napping-puf.html

@@ -0,0 +1,53 @@
+{% load custom_filters %}
+<article class="space-y-4 text-black">
+    <h2 class="font-bold text-xl text-center">
+        Datos de Napping con Perfil Ultra Flash
+    </h2>
+
+    <div class="overflow-x-auto rounded-lg border border-surface-general">
+        <table id="generic-donwload-table" class="min-w-max w-full text-sm text-center border-collapse">
+            <thead class="bg-surface-sweet font-semibold">
+                <tr>
+                    <th class="py-2 px-3 border border-surface-general">Producto</th>
+                    {% for tester in testers %}
+                    <th class="py-2 px-3 border border-surface-general uppercase">
+                        X{{ forloop.counter }}
+                    </th>
+                    <th class="py-2 px-3 border border-surface-general uppercase">
+                        Y{{ forloop.counter }}
+                    </th>
+                    {% endfor %}
+                    {% for word in all_words %}
+                    <th class="py-2 px-3 border border-surface-general capitalize">
+                        {{ word }}
+                    </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody class="bg-surface-ligt divide-y divide-gray-200">
+                {% for product, coordinates_tester in coordinates_no_mode.items %}
+                <tr>
+                    <td class="py-2 px-3 border border-surface-general">{{ product }}</td>
+                    {% for tester in testers %}
+                    {% with points=coordinates_tester|get_item:tester.user.username %}
+                    <td class="py-2 px-3 border border-surface-general">
+                        {{ points.px }}
+                    </td>
+                    <td class="py-2 px-3 border border-surface-general">
+                        {{ points.py }}
+                    </td>
+                    {% endwith %}
+                    {% endfor %}
+                    {% for word in all_words %}
+                    {% with word_freq=word_frequencies|get_item:product|get_item:word %}
+                    <td class="py-2 px-3 border border-surface-general">
+                        {% if word_freq %}{{ word_freq }}{% else %}0{% endif %}
+                    </td>
+                    {% endwith %}
+                    {% endfor %}
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</article>

tecnicas/templates/tecnicas/components/table-napping-sorting.html

@@ -0,0 +1,47 @@
+{% load custom_filters %}
+<article class="space-y-4 text-black">
+    <h2 class="font-bold text-xl text-center">
+        Datos de Napping con Sorting
+    </h2>
+
+    <div class="overflow-x-auto rounded-lg border border-surface-general">
+        <table id="generic-donwload-table" class="min-w-max w-full text-sm text-center border-collapse">
+            <thead class="bg-surface-sweet font-semibold">
+                <tr>
+                    <th class="py-2 px-3 border border-surface-general">Producto</th>
+                    {% for tester in testers %}
+                    <th class="py-2 px-3 border border-surface-general uppercase">
+                        X{{ forloop.counter }}
+                    </th>
+                    <th class="py-2 px-3 border border-surface-general uppercase">
+                        Y{{ forloop.counter }}
+                    </th>
+                    <th class="py-2 px-3 border border-surface-general uppercase">
+                        C{{ forloop.counter }}
+                    </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody class="bg-surface-ligt divide-y divide-gray-200">
+                {% for product, data_per_tester in sorting_data.items %}
+                <tr>
+                    <td class="py-2 px-3 border border-surface-general">{{ product }}</td>
+                    {% for tester in testers %}
+                    {% with data=data_per_tester|get_item:tester.user.username %}
+                    <td class="py-2 px-3 border border-surface-general">
+                        {{ data.px }}
+                    </td>
+                    <td class="py-2 px-3 border border-surface-general">
+                        {{ data.py }}
+                    </td>
+                    <td class="py-2 px-3 border border-surface-general">
+                        {{ data.words }}
+                    </td>
+                    {% endwith %}
+                    {% endfor %}
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</article>

tecnicas/templates/tecnicas/create_sesion/panel-basic-napping.html

@@ -28,14 +28,14 @@
                 </section>
                 <section class="flex flex-row flex-wrap justify-center gap-4">
                     <label for="{{ form_sesion.numero_productos.id_for_label }}"
-                        class="text-lg flex flex-col items-center px-2 font-medium tracking-wide">
+                        class="text-lg flex flex-col items-center px-2 font-medium tracking-wide flex-1">
                         <p class="tracking-normal text-base font-bold">
                             Número de Productos:
                         </p>
                         {{ form_sesion.numero_productos }}
                     </label>
                     <label for="{{ form_sesion.numero_catadores.id_for_label }}"
-                        class="text-lg flex flex-col items-center px-2 font-medium tracking-wide">
+                        class="text-lg flex flex-col items-center px-2 font-medium tracking-wide flex-1">
                         <p class="tracking-normal text-base font-bold">
                             Número de Catadores:
                         </p>
@@ -51,6 +51,21 @@
                 </section>
             </article>
 
+            <article class="space-y-4">
+                <h2 class="text-2xl font-bold">Elije Modalidad</h2>
+                <section class="flex flex-row gap-4 justify-around flex-wrap">
+                    {% for choice in form_sesion.modalidad %}
+                    <label for="{{choice.id_for_label}}"
+                        class="cts-btn-general-compress cts-btn-secondary btn-push px-4 py-2 uppercase flex-1 flex items-center justify-around gap-2">
+                        {{ choice.tag }}
+                        <p class="italic text-center flex-1">
+                            {{ choice.choice_label }}
+                        </p>
+                    </label>
+                    {% endfor %}
+                </section>
+            </article>
+
             <article class="w-full flex max-sm:flex-col flex-wrap items-center justify-center gap-4">
                 <button type="submit" class="cts-btn-general cts-btn-primary btn-push flex-1/4 w-full">
                     Continuar

tecnicas/templates/tecnicas/forms_tester/test_napping.html

@@ -18,10 +18,11 @@
         </header>
 
         <article class="hidden">
-            <form action="{% url 'cata_system:catador_init_session' code_sesion=session.codigo_sesion %}" method="post"
+            <form id="form-finish-session"
+                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">
+                <input type="hidden" name="action" value="finish_session" class="action-input">
             </form>
         </article>
 
@@ -41,8 +42,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,12 +124,17 @@
                 <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')">
+                        onclick="window.finishSession()">
                         Finalizar
                     </button>
                     <button id="cancel-save" class="cts-btn-general cts-btn-error btn-push hidden flex-1">
@@ -138,7 +144,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 +151,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,172 @@
+{% extends 'tecnicas/layouts/base.html' %}
+{% load static %}
+{% load custom_filters %}
+
+{% 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 id="form-finish-session"
+                action="{% url 'cata_system:catador_init_session' code_sesion=session.codigo_sesion %}" method="post"
+                class="form-actions">
+                {% csrf_token %}
+                <input type="hidden" name="action" value="finish_session" 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 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">
+            <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 %}
+                <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 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>
+                        </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 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">
+                    <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>
+                <button id="continue-description" class="cts-btn-general cts-btn-primary btn-push hidden">
+                    Continuar a descripción
+                </button>
+                <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="window.finishSession()">
+                        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>
+
+        {% include "../components/dialog-nap-puf.html" %}
+
+        {% 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>
+<script src="{% static 'js/test-napping-ultra-flash.js' %}"></script>
+{% endblock %}

tecnicas/templates/tecnicas/forms_tester/test_napping_sort.html

@@ -0,0 +1,198 @@
+{% 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 id="form-finish-session"
+                action="{% url 'cata_system:catador_init_session' code_sesion=session.codigo_sesion %}" method="post"
+                class="form-actions">
+                {% csrf_token %}
+                <input type="hidden" name="action" value="finish_session" 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 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 %} Napping {% endif %}
+                </p>
+            </section>
+        </article>
+
+        <article class="container-rating-word p-2 py-6 space-y-6 bg-surface-ligt rounded min-w-3xl">
+            <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>
+
+            <section class="flex max-sm:flex-col gap-2 justify-around">
+                <article 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 %}
+                </article>
+
+                <article class="flex gap-2">
+                    <button id="continue-grouping"
+                        class="cts-btn-general-compress py-1 px-4 cts-btn-primary btn-push hidden">
+                        Continuar a Agrupación
+                    </button>
+                    <button id="continue-description"
+                        class="cts-btn-general-compress py-1 px-4 cts-btn-primary btn-push hidden">
+                        Continuar a Descripción
+                    </button>
+                </article>
+            </section>
+
+            <!-- Phase 2: Group Creation Controls (Hidden initially, shown in Sort mode) -->
+            <section id="group-controls" class="hidden space-y-2">
+                <div class="flex gap-4 justify-center items-center flex-wrap">
+                    <button id="create-group-btn" class="cts-btn-general-compress py-1 px-4 cts-btn-primary btn-push">
+                        Crear Grupo
+                    </button>
+                    <button id="dissolve-group-btn" class="cts-btn-general-compress py-1 px-4 cts-btn-error btn-push">
+                        Disolver Grupo
+                    </button>
+                </div>
+
+                {% if groups %}
+                <div class="data-group-products hidden">
+                    {% for group in groups %}
+                    <ul class="item-group" {% if group.words %} data-words="{{ group.words|join:',' }}" {% endif %}>
+                        {% for product in group.products %}
+                        <li class="item-group-product" data-id-product="{{ product.id }}"
+                            data-code="{{ product.codigoProducto }}"></li>
+                        {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+                {% endif %}
+
+                <!-- Display existing groups -->
+                <div id="groups-display" class="flex gap-3 flex-wrap justify-center"></div>
+            </section>
+
+            <!-- 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 }}">
+                        <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>
+                <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="window.finishSession()">
+                        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>
+
+        {% include "../components/dialog-nap-sort.html" with form=form %}
+
+        {% 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>
+<script src="{% static 'js/test-napping-sort.js' %}"></script>
+{% endblock %}

tecnicas/templates/tecnicas/manage_sesions/details-session-napping.html

@@ -54,7 +54,7 @@
             </section>
 
             <section
-                class="bg-surface-card flex flex-wrap items-center justify-center max-sm:justify-normal gap-x-2 p-4 rounded-2xl">
+                class="bg-surface-card col-span-2 flex flex-wrap items-center justify-center max-sm:justify-normal gap-x-2 p-4 rounded-2xl">
                 <p class="font-bold">
                     Fecha creación:
                 </p>
@@ -83,6 +83,13 @@
                 </p>
             </section>
 
+            <section
+                class="bg-surface-ligt flex flex-wrap items-center justify-center max-sm:justify-normal gap-x-2 p-4 rounded-2xl">
+                <p class="font-sans">
+                    <b>Modalidad:</b> <span class="capitalize">{{ mod_tech }}</span>
+                </p>
+            </section>
+
             <section
                 class="bg-surface-card flex flex-wrap items-center justify-center max-sm:justify-normal gap-x-2 p-4 rounded-2xl">
                 <p class="font-sans">
@@ -115,16 +122,23 @@
         </p>
         <article class="grid grid-cols-2 gap-4 max-sm:gap-2">
             {% if not session.activo %}
-            {% for mode in modes %}
+            {% if finished %}
+            <div
+                class="text-2xl font-semibold flex-1 cts-btn-secondary p-4 flex justify-center items-center rounded-lg select-none text-center">
+                <p class=" text-black">
+                    Sesión finalizada
+                </p>
+            </div>
+            {% else %}
             <button
                 class="cts-btn-general capitalize cts-btn-primary btn-push flex flex-col justify-center items-center gap-2"
-                data-mode="{{ mode.nombre }}" onclick="startSession('{{ mode.nombre }}')">
-                Napping {% if mode.nombre != "sin modalidad" %} {{ mode.nombre }} {% endif %}
+                data-mode="{{ mode }}" onclick="startSession('{{ mode }}')">
+                Iniciar {% if mode != "sin modalidad" %}Napping con {{ mode }}{% else %}Napping{% endif %}
                 <figure class="w-10">
                     <img src="{% static 'img/giro.svg' %}" alt="flechas girando" class="invert">
                 </figure>
             </button>
-            {% endfor %}
+            {% endif %}
             {% else %}
             <a href="{% url 'cata_system:monitor_sesion' session_code=session.codigo_sesion %}" class="w-full">
                 <button
@@ -178,7 +192,13 @@
         </p>
 
         {% if there_data %}
+        {% if mode == "perfil ultra flash" %}
+        {% include "../components/table-napping-puf.html" with testers=testers coordinates_no_mode=coordinates_no_mode word_frequencies=word_frequencies all_words=all_words %}
+        {% elif mode == "sorting" %}
+        {% include "../components/table-napping-sorting.html" with testers=testers sorting_data=sorting_data %}
+        {% else %}
         {% include "../components/table-napping-no-mode.html" with testers=testers coordinates_no_mode=coordinates_no_mode %}
+        {% endif %}
         {% else %}
         {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
         {% endif %}

tecnicas/templates/tecnicas/manage_sesions/details-session-pf.html

@@ -120,6 +120,14 @@
         </p>
         <article class="flex flex-wrap gap-10 max-sm:gap-2">
             {% if not sesion.activo %}
+            {% if finished %}
+            <div
+                class="text-2xl font-semibold flex-1 cts-btn-secondary p-4 flex justify-center items-center rounded-lg select-none text-center">
+                <p class=" text-black">
+                    Sesión finalizada
+                </p>
+            </div>
+            {% else %}
             <button
                 class="ct-btn-start-repition flex-1 uppercase text-lg max-sm:text-base tracking-wider p-4 border-b-2 active:border-b-0 active:border-t-2 active:border-green-500 border-green-800  transition-all rounded-xl bg-green-600 text-white font-bold disabled:bg-amber-600 flex flex-col justify-center items-center gap-2"
                 onclick="startRepetition()">
@@ -128,6 +136,7 @@
                     <img src="{% static 'img/giro.svg' %}" alt="flechas girando" class="invert">
                 </figure>
             </button>
+            {% endif %}
             {% else %}
             <a href="{% url 'cata_system:monitor_sesion' session_code=sesion.codigo_sesion %}" class="flex-1 w-fit">
                 <button
@@ -232,31 +241,31 @@
                 </article>
 
                 {% if repeticion == 1 %}
-                    {% if data_ratings %}
-                        {% include "../components/table_pf_all.html" with second_phase=second_phase data_ratings=data_ratings %}
-                    {% else %}
-                        {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
-                    {% endif %}
+                {% if data_ratings %}
+                {% include "../components/table_pf_all.html" with second_phase=second_phase data_ratings=data_ratings %}
                 {% else %}
-                    {% if data_ratings %}
-                        <article class="overflow-x-auto py-2 space-y-4">
-                            {% for data_tester in data_ratings %}
-                                {% include "../components/table_pf.html" with data=data_tester session_name=sesion.nombre_sesion session_code=sesion.codigo_sesion %}
-                            {% endfor %}
-                        </article>
-                        <div class="flex justify-end mt-3 gap-4 flex-wrap">
-                            <button id="download-csv-btn" class="cts-btn-general cts-btn-primary btn-push">
-                                Descargar datos CSV en zip
-                            </button>
-                            <button id="download-xls-btn" class="cts-btn-general cts-btn-primary btn-push">
-                                Descargar datos en XLSX
-                            </button>
-                        </div>
-                        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
-                        <script src="{% static 'js/download-table-xlsx.js' %}"></script>
-                    {% else %}
-                        {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
-                    {% endif %}
+                {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
+                {% endif %}
+                {% else %}
+                {% if data_ratings %}
+                <article class="overflow-x-auto py-2 space-y-4">
+                    {% for data_tester in data_ratings %}
+                    {% include "../components/table_pf.html" with data=data_tester session_name=sesion.nombre_sesion session_code=sesion.codigo_sesion %}
+                    {% endfor %}
+                </article>
+                <div class="flex justify-end mt-3 gap-4 flex-wrap">
+                    <button id="download-csv-btn" class="cts-btn-general cts-btn-primary btn-push">
+                        Descargar datos CSV en zip
+                    </button>
+                    <button id="download-xls-btn" class="cts-btn-general cts-btn-primary btn-push">
+                        Descargar datos en XLSX
+                    </button>
+                </div>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+                <script src="{% static 'js/download-table-xlsx.js' %}"></script>
+                {% else %}
+                {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
+                {% endif %}
                 {% endif %}
             </section>
         </article>

tecnicas/urls.py

@@ -156,7 +156,7 @@ urlpatterns = [
          views.ratingSort,
          name="api_rating_sort"),
 
-    path("testers/api/rating-napping/no-mode",
-         views.ratingNappingNoMode,
-         name="api_rating_napping_no_mode"),
+    path("testers/api/rating-napping",
+         views.ratingNapping,
+         name="api_rating_napping"),
 ]

tecnicas/views/__init__.py

@@ -29,7 +29,7 @@ from .apis.api_list_words_pf import apiListWordsPF
 from .apis.rating_word_scales import ratingWordScales
 from .apis.rating_word_cata import ratingWordCata
 from .apis.rating_sort import ratingSort
-from .apis.rating_napping import ratingNappingNoMode
+from .apis.rating_napping import ratingNapping
 
 from .tester_forms.init_tester_form import initTesterForm
 from .tester_forms.panel_main_tester import mainPanelTester

tecnicas/views/apis/rating_napping.py

@@ -3,7 +3,7 @@ from tecnicas.controllers import RatingNappingController
 import json
 
 
-def ratingNappingNoMode(req:  HttpRequest):
+def ratingNapping(req:  HttpRequest):
     if req.method == "POST":
         try:
             data = json.loads(req.body.decode("utf-8"))