Creacion de grupos para napping con sorting

tecnicas/controllers/api_controller/rating_napping_controller.py

@@ -12,6 +12,8 @@ class RatingNappingController:
             id=request.session["id_participation"]
         )
 
+        print(data)
+
         try:
             with transaction.atomic():
                 products_map = RatingNappingController.getProductsMap(

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

@@ -41,12 +41,16 @@ class DetallesNappingController(DetallesController):
             self.context["status"] = "Sesión con en curso"
 
     def controllPostResponse(self, request: HttpRequest, action: str):
+        print(action)
         if action == "start_sin_modalidad":
             response = self.startNapping(request=request)
 
         elif action == "start_perfil_ultra_flash":
             response = self.startNapping(request=request)
 
+        elif action == "start_sorting":
+            response = self.startNapping(request=request)
+
         elif action == "delete_session":
             self.deleteSesorialSession()
             response = redirect(
@@ -118,32 +122,33 @@ class DetallesNappingController(DetallesController):
 
     def setWordFrequencies(self, ratings):
         from collections import Counter
-        
+
         # Prefetch palabras to optimize queries
-        ratings_with_words = ratings.prefetch_related('palabras').select_related('id_producto')
-        
+        ratings_with_words = ratings.prefetch_related(
+            'palabras').select_related('id_producto')
+
         # 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
 

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

@@ -14,6 +14,7 @@ class TestNappingController(GenetalTestController):
         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
@@ -34,9 +35,15 @@ class TestNappingController(GenetalTestController):
         if name_mode_activate == "sin modalidad":
             self.context["mode"] = "sin modalidad"
             return self.nappingTest(request)
+
         if name_mode_activate == "perfil ultra flash":
             self.context["mode"] = "perfil ultra flash"
             return self.nappingPufTest(request)
+
+        if name_mode_activate == "sorting":
+            self.context["mode"] = "sorting"
+            return self.nappingSort(request)
+
         else:
             return noValidTechnique(
                 name_view=self.previus_directory,
@@ -76,6 +83,17 @@ class TestNappingController(GenetalTestController):
 
         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.setCoordinates()
+
+        return render(request, self.sort_direction, self.context)
+
     def setCoordinates(self):
         technique = self.session.tecnica
 

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

@@ -204,7 +204,7 @@ window.saveData = async function (isFinishSession = false) {
     data.push(objData);
   })
 
-  const URL = "/cata/testers/api/rating-napping/no-mode"
+  const URL = "/cata/testers/api/rating-napping"
   const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
 
   try {

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

@@ -0,0 +1,438 @@
+// 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 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.querySelector('.cts-input-list-word');
+    const groupWordList = document.getElementById('group-word-list');
+    const dialogGroupId = document.getElementById('dialog-group-id');
+
+    // Hide question save button initially
+    questionSaveBtn.classList.add('hidden');
+
+    // Check if there are existing groups from backend (TODO: implement backend data loading)
+    // For now, start in Phase 1
+
+    // 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
+        window.saveData(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
+        window.saveData(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');
+        }
+    }
+
+    // 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;
+    };
+
+    // Data extension callback - adds groups and words to save data
+    window.getExtraDataForSave = function (code) {
+        const groupId = productToGroup[code];
+        const group = groupId ? {
+            groupId: groupId,
+            groupWords: groupWords[groupId] || []
+        } : null;
+
+        return {
+            group: group
+        };
+    };
+}

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

@@ -0,0 +1,35 @@
+<dialog id="group-word-dialog" class="modal">
+    <div class="modal-box max-w-2xl">
+        <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">
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text">Palabra</span>
+                </label>
+                <input type="text" class="cts-input-list-word input input-bordered w-full"
+                    placeholder="Escribe una palabra..." maxlength="50" required>
+            </div>
+
+            <div class="flex justify-end">
+                <button type="submit" class="cts-btn-general cts-btn-primary btn-push">
+                    Agregar Palabra
+                </button>
+            </div>
+        </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">
+                <!-- Words will be added here dynamically -->
+            </div>
+        </div>
+
+        <div class="modal-action">
+            <form method="dialog">
+                <button class="cts-btn-general cts-btn-secondary btn-push">Cerrar</button>
+            </form>
+        </div>
+    </div>
+</dialog>

tecnicas/templates/tecnicas/forms_tester/test_napping_sort.html

@@ -0,0 +1,185 @@
+{% 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>
+
+                <!-- 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" %}
+
+        {% 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/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"))