Panel basico para PF

tecnicas/controllers/views_controller/create_session/panel_basic_controller.py

@@ -1,4 +1,4 @@
-from tecnicas.forms import SesionBasicForm, SesionBasicCATAForm
+from tecnicas.forms import SesionBasicForm, SesionBasicCATAForm, SesionBasicPFForm
 from django.http import HttpRequest
 from django.shortcuts import redirect, render
 from django.urls import reverse
@@ -12,9 +12,10 @@ class PanelBasicController():
 
     url_panel_basic = "tecnicas/create_sesion/configuracion-panel-basic.html"
     url_panel_basic_cata = "tecnicas/create_sesion/panel-basic-cata.html"
+    url_panel_basic_pf = "tecnicas/create_sesion/panel-basic-pf.html"
 
-    url_next_panel_scales = "cata_system:panel_configuracion_tags"
-    url_next_panel_cata = "cata_system:panel_configuracion_codes"
+    url_next_panel_tags = "cata_system:panel_configuracion_tags"
+    url_next_panel_codes = "cata_system:panel_configuracion_codes"
 
     url_select_technique = "cata_system:seleccion_tecnica"
 
@@ -50,7 +51,7 @@ class PanelBasicController():
                 values["name_tecnica"] = name_tecnica
                 request.session['form_basic'] = values
                 response = redirect(
-                    reverse("cata_system:panel_configuracion_tags"))
+                    reverse(PanelBasicController.url_next_panel_tags))
             else:
                 response = render(request, PanelBasicController.url_panel_basic, {
                     "form_sesion": form, "error": "Información no valida"})
@@ -102,7 +103,7 @@ class PanelBasicController():
                     values["name_tecnica"] = name_tecnica
                     request.session['form_basic'] = values
                     response = redirect(
-                        reverse("cata_system:panel_configuracion_tags"))
+                        reverse(PanelBasicController.url_next_panel_tags))
             else:
                 response = render(request, PanelBasicController.url_panel_basic, {
                     "form_sesion": form, "error": "Información no valida"})
@@ -139,9 +140,44 @@ class PanelBasicController():
             values["name_tecnica"] = name_tecnica
             request.session['form_basic'] = values
             response = redirect(
-                reverse(PanelBasicController.url_next_panel_cata))
+                reverse(PanelBasicController.url_next_panel_codes))
         else:
             response = render(request, PanelBasicController.url_panel_basic, {
                 "form_sesion": form, "error": "Información no valida"})
 
         return response
+
+    @staticmethod
+    def controllGetPF(request: HttpRequest):
+        form_sesion = SesionBasicPFForm()
+
+        view_context = {
+            "form_sesion": form_sesion,
+            "use_technique": "perfil flash"
+        }
+
+        return render(
+            request, PanelBasicController.url_panel_basic_pf, view_context)
+
+    @staticmethod
+    def controllPostPF(request: HttpRequest, name_tecnica: str):
+        form = SesionBasicPFForm(request.POST)
+
+        if form.is_valid():
+            print(form.cleaned_data)
+            values = {}
+            for name, value in form.cleaned_data.items():
+                if name == "tipo_escala":
+                    values[name] = value.id
+                else:
+                    values[name] = value
+
+            values["name_tecnica"] = name_tecnica
+            request.session['form_basic'] = values
+            response = redirect(
+                reverse(PanelBasicController.url_next_panel_tags))
+        else:
+            response = render(request, PanelBasicController.url_panel_basic_pf, {
+                "form_sesion": form, "error": "Información no valida"})
+
+        return response

tecnicas/forms/__init__.py

@@ -1,5 +1,6 @@
 from .create_session.sesion_basic_form import SesionBasicForm
 from .create_session.sesiob_basic_cata_form import SesionBasicCATAForm
+from .create_session.sesion_basic_pf_form import SesionBasicPFForm
 from .create_session.sesion_tags_form import SesionTagsForm
 
 from .etiqueta_form import EtiquetaForm

tecnicas/forms/create_session/sesion_basic_pf_form.py

@@ -0,0 +1,36 @@
+from django import forms
+from tecnicas.models import TipoEscala
+
+
+class SesionBasicPFForm(forms.Form):
+    nombre_sesion = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
+        "class": "bg-surface-ligt border-b-1 text-center w-full p-1",
+        "name": "nombre_sesion",
+        "placeholder": "Ej. Mermelada de mango picante"
+    }), required=False)
+
+    numero_productos = forms.IntegerField(widget=forms.NumberInput(attrs={
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
+        "placeholder": "Solo números"
+    }), required=True)
+
+    numero_catadores = forms.IntegerField(widget=forms.NumberInput(attrs={
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
+        "placeholder": "Solo números"
+    }), required=True)
+
+    instrucciones = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
+        "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().__init__(*args, **kwargs)
+
+        self.fields['tipo_escala'] = forms.ModelChoiceField(queryset=TipoEscala.objects.all(), widget=forms.RadioSelect(attrs={
+            "class": "uppercase text-lg tracking-wider font-medium p-2 px-4 active:px-5 transition-all rounded-xl bg-blue-500 text-white",
+        }), required=True, initial=TipoEscala.objects.first())
+
+        self.fields['tamano_escala'] = forms.IntegerField(widget=forms.HiddenInput(attrs={
+            "class": "cts-size-input",
+        }), required=True)

tecnicas/static/js/panel-basic-cata.js

@@ -10,6 +10,7 @@ let radiosStyleWords;
 
 function initRadiosStyleWords() {
   radiosStyleWords = document.getElementsByName("estilo_palabras");
+  console.log(radiosStyleWords);
 
   for (let index = 0; index < radiosStyleWords.length; index++) {
     const radio = radiosStyleWords[index];

tecnicas/static/js/panel-basic.js

@@ -22,12 +22,13 @@ initPanel();
 
 function initPanel() {
   initRadios();
+  initSizeOptions();
 }
 
 function initRadios() {
-  inputsScale = document.getElementsByName("tipo_escala");
   inputTamano = document.getElementsByName("tamano_escala").item(0);
-  sizeOptionsContainer = document.getElementsByClassName("cts-options-size-scale")[0];
+  inputsScale = document.getElementsByName("tipo_escala");
+  inputsScale.item(0).checked = true;
 
   for (let index = 0; index < inputsScale.length; index++) {
     let parent = inputsScale.item(index).parentElement;
@@ -52,14 +53,16 @@ function initRadios() {
       showDescriptionStyle(parent);
     }
   }
-
-  initSizeOptions();
 }
 
 function initSizeOptions() {
+  sizeOptionsContainer = document.getElementsByClassName(
+    "cts-options-size-scale"
+  )[0];
+
   for (let i = 0; i < inputsScale.length; i++) {
     const radio = inputsScale.item(i);
-    radio.addEventListener('change', () => {
+    radio.addEventListener("change", () => {
       const tag = getTagFromLabel(radio);
       populateSizeOptions(tag);
     });
@@ -69,17 +72,21 @@ function initSizeOptions() {
     }
   }
 
-  const form = document.querySelector('form');
+  const form = document.querySelector("form");
   if (!form) return;
 
-  form.addEventListener('submit', (e) => {
-    const chosen = document.querySelector('input[name="option_size_scale"]:checked');
+  form.addEventListener("submit", (e) => {
+    const chosen = document.querySelector(
+      'input[name="option_size_scale"]:checked'
+    );
     if (chosen && inputTamano) {
       inputTamano.value = chosen.value;
     }
 
     if (sizeOptionsContainer) {
-      const toRemove = sizeOptionsContainer.querySelectorAll('input[name="option_size_scale"]');
+      const toRemove = sizeOptionsContainer.querySelectorAll(
+        'input[name="option_size_scale"]'
+      );
       toRemove.forEach((el) => el.remove());
     }
   });
@@ -88,37 +95,42 @@ function initSizeOptions() {
 function getTagFromLabel(radio) {
   try {
     const parent = radio.parentElement;
-    if (!parent) return '';
-    const text = parent.textContent || '';
+    if (!parent) return "";
+    const text = parent.textContent || "";
     return text.trim().split(/\s+/)[0].toLowerCase();
   } catch (err) {
-    return '';
+    return "";
   }
 }
 
 function populateSizeOptions(tag) {
-  const options = SIZE_OPTIONS[tag] || SIZE_OPTIONS['estructurada'];
+  const options = SIZE_OPTIONS[tag] || SIZE_OPTIONS["estructurada"];
   if (!sizeOptionsContainer) return;
-  sizeOptionsContainer.innerHTML = '';
+  sizeOptionsContainer.innerHTML = "";
 
   options.forEach((val) => {
-    const label = document.createElement('label');
-    label.className = 'flex flex-col items-center cursor-pointer';
+    const label = document.createElement("label");
+    label.className = "flex flex-col items-center cursor-pointer";
 
-    const input = document.createElement('input');
-    input.type = 'radio';
-    input.name = 'option_size_scale';
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = "option_size_scale";
     input.value = String(val);
-    input.className = 'radio radio-lg checked:bg-pink-500';
+    input.className = "radio radio-lg checked:bg-pink-500";
 
-    const span = document.createElement('span');
-    span.className = 'mt-2 text-xl text-gray-700 font-medium';
+    const span = document.createElement("span");
+    span.className = "mt-2 text-xl text-gray-700 font-medium";
     span.textContent = String(val);
 
     label.appendChild(input);
     label.appendChild(span);
     sizeOptionsContainer.appendChild(label);
   });
+
+  const firstRadioSize = document
+    .getElementsByName("option_size_scale")
+    .item(0);
+  firstRadioSize.checked = true;
 }
 
 function showDescriptionStyle(label) {

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

@@ -0,0 +1,120 @@
+{% extends 'tecnicas/layouts/base.html' %}
+{% load static %}
+
+{% block title %}Panel Configuracion{% endblock %}
+
+{% block content %}
+<article class="cts-container-main">
+    <article class="cts-wrap-content text-black">
+        <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
+
+        {% if error %}
+        {% include "../components/error-message.html" with message=error %}
+        {% endif %}
+        {% if message %}
+        {% include "../components/error-message.html" with message=message %}
+        {% endif %}
+
+        <form method="post" action="" class="space-y-4">
+            {% csrf_token %}
+            <article>
+                <h2 class="text-2xl mb-2 font-bold">Información Basica</h2>
+                <section class="flex justify-center items-center">
+                    <label for="{{form_sesion.nombre_sesion.id_for_label}}"
+                        class="text-lg flex flex-col items-center px-2 w-fit font-medium tracking-wide mb-4">
+                        <p class="tracking-normal text-xl font-bold">Ingrese el nombre de la sesion si lo desea:</p>
+                        {{ form_sesion.nombre_sesion }}
+                    </label>
+                </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">
+                        <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">
+                        <p class="tracking-normal text-base font-bold">
+                            Número de Catadores:
+                        </p>
+                        {{ form_sesion.numero_catadores }}
+                    </label>
+                </section>
+                <section class="flex justify-center items-center mt-2">
+                    <label for="{{form_sesion.instrucciones.id_for_label}}"
+                        class="text-lg flex flex-col items-center px-2 w-fit font-medium tracking-wide mb-4">
+                        <p class="tracking-normal text-base font-bold">Ingrese las instrucciones para la tecnica:</p>
+                        {{ form_sesion.instrucciones }}
+                    </label>
+                </section>
+            </article>
+
+            <article class="cs-escalas-radio flex flex-col gap-4">
+                <h2 class="text-2xl font-bold">Selecciona una escala</h2>
+                <section class="flex flex-row gap-4 justify-around flex-wrap">
+                    {% for escala in form_sesion.tipo_escala %}
+                    <label for="{{escala.id_for_label}}"
+                        class="ct-radio-escala uppercase text-lg tracking-wider font-bold p-2 px-4 rounded-xl cts-btn-primary btn-push">
+                        {{ escala.tag }}
+                        {{ escala.choice_label }}
+                    </label>
+                    {% endfor %}
+                    {% if form_sesion.tipo_escala.errors %}
+                    <div class="w-full text-center text-red-600 text-xl font-medium tracking-wide">
+                        {{ form_sesion.tipo_escala.errors }}
+                    </div>
+                    {% endif %}
+                </section>
+
+                <section class="py-2 px-5 flex flex-col justify-center items-center gap-2 relative">
+                    <label for="{{ form_sesion.tamano_escala.id_for_label }}"
+                        class="ct-size-scale text-xl flex flex-col items-center px-2 font-bold">
+                        <p>Establece número de segmentos:</p>
+                        {{ form_sesion.tamano_escala }}
+                    </label>
+                    <div class="flex justify-around max-sm:flex-col gap-8 cts-options-size-scale">
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="5"
+                                class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">5</span>
+                        </label>
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="7"
+                                class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">7</span>
+                        </label>
+                        <label class="flex flex-col items-center cursor-pointer">
+                            <input type="radio" name="option_size_scale" value="9"
+                                class="radio radio-lg checked:bg-pink-500" />
+                            <span class="mt-2 text-xl text-gray-700 font-medium">9</span>
+                        </label>
+                    </div>
+                    {% if form_sesion.tamano_escala.errors %}
+                    <article
+                        class="w-fit rounded px-2 py-0.5 text-center text-white text-sm font-medium tracking-wide bg-red-500">
+                        {{ form_sesion.tamano_escala.errors }}
+                    </article>
+                    {% endif %}
+                </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
+                </button>
+                <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1/4 w-full">
+                    <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                        Cancelar la creación
+                    </button>
+                </a>
+            </article>
+        </form>
+    </article>
+</article>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'js/panel-basic.js' %}"></script>
+{% endblock %}

tecnicas/views/sessions_config/configuration_panel_basic.py

@@ -17,6 +17,8 @@ def configurationPanelBasic(req: HttpRequest):
             response = PanelBasicController.controllGetRATA(request=req)
         elif name_tecnica == "cata":
             response = PanelBasicController.controllGetCATA(request=req)
+        elif name_tecnica == "perfil flash":
+            response = PanelBasicController.controllGetPF(request=req)
         else:
             response = redirect(
                 reverse("cata_system:seleccion_tecnica") + "?error=Técnica no valida o sin implementar")
@@ -34,6 +36,9 @@ def configurationPanelBasic(req: HttpRequest):
         elif name_tecnica == "cata":
             response = PanelBasicController.controllPostCATA(
                 request=req, name_tecnica=name_tecnica)
+        elif name_tecnica == "perfil flash":
+            response = PanelBasicController.controllPostPF(
+                request=req, name_tecnica=name_tecnica)
         else:
             response = redirect(
                 reverse("cata_system:seleccion_tecnica") + "?error=¡Oh, vaya! Cambio de técnica repentino, vuelve a elegir otra vez")