Se agrega campo para el estilo de palabras en formulario basico

tecnicas/forms/sesion_basic_form.py

@@ -2,6 +2,7 @@ from django import forms
 
 from ..models import TipoEscala
 from ..models import TipoTecnica
+from ..models import EstiloPalabra
 
 class SesionBasicForm(forms.Form):
     id_tecnica = forms.IntegerField(widget=forms.HiddenInput())
@@ -26,6 +27,10 @@ class SesionBasicForm(forms.Form):
             "class": "bg-gray-200 p-1 border-b-1 text-center w-full",
             "placeholder": "Solo números"
         }), required=True)
+    
+    estilo_palabras = forms.ModelChoiceField(queryset=EstiloPalabra.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=EstiloPalabra.objects.first())
 
     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",

tecnicas/static/js/panel-basic.js

@@ -1,12 +1,17 @@
 const descriptons = {
   estructurada: ["Establece número de segmentos:", "Puede ser 5, 7 o 9"],
   continua: ["Establece la longitud de la escala:", "Puede ser 9, 12 o 15"],
+  atributos:
+    "Con el estilo atributos elijes las palabras para evaluar los productos",
+  vocabulario:
+    "Los vocabularios son un conjunto de palabras especificas para evaluar aspectos de un producto.",
 };
 
-let labels;
+let inputsScale;
+let inputTamano;
 
-let pSize;
-let iSize;
+let inputsStyle;
+let helpStyle;
 
 initPanel();
 
@@ -15,31 +20,42 @@ function initPanel() {
 }
 
 function initRadios() {
-  labels = document.getElementsByClassName("ct-radio-escala");
-  pSize = document
-    .getElementsByClassName("ct-size-scale")
-    .item(0)
-    .getElementsByTagName("p")[0];
-  iSize = document
-    .getElementsByClassName("ct-size-scale")
-    .item(0)
-    .getElementsByTagName("input")[0];
-
-  pSize.textContent = descriptons["estructurada"][0];
-  iSize.placeholder = descriptons["estructurada"][1];
-
-  for (let i = 0; i < labels.length; i++) {
-    labels
-      .item(i)
-      .getElementsByTagName("input")[0]
-      .addEventListener("change", () => {
-        showDescriptionTamanoScale(labels.item(i));
-      });
+  inputsScale = document.getElementsByName("tipo_escala");
+  inputTamano = document.getElementsByName("tamano_escala").item(0);
+
+  for (let index = 0; index < inputsScale.length; index++) {
+    let parent = inputsScale.item(index).parentElement;
+    parent.addEventListener("click", () => {
+      showDescriptionTamanoScale(parent);
+    });
+    if (inputsScale.item(index).checked) {
+      showDescriptionTamanoScale(parent);
+    }
   }
+
+  labelsStyle = document.getElementsByClassName("ct-radio-estilo");
+  helpStyle = document.getElementsByClassName("ct-ayuda-estilo")[0];
+  inputsStyle = document.getElementsByName("estilo_palabras");
+
+  for (let index = 0; index < inputsStyle.length; index++) {
+    let parent = inputsStyle.item(index).parentElement;
+    parent.addEventListener("click", () => {
+      showDescriptionStyle(parent);
+    });
+    if (inputsStyle.item(index).checked) {
+      showDescriptionStyle(parent);
+    }
+  }
+}
+
+function showDescriptionStyle(label) {
+  const text = label.textContent.trim();
+  helpStyle.textContent = descriptons[text];
 }
 
 function showDescriptionTamanoScale(label) {
   const text = label.textContent.trim();
-  pSize.textContent = descriptons[text][0];
-  iSize.placeholder = descriptons[text][1];
+  let parent = inputTamano.parentElement;
+  parent.getElementsByTagName("p").textContent = descriptons[text][0];
+  inputTamano.placeholder = descriptons[text][1];
 }

tecnicas/templates/tecnicas/configuracion-panel-basic.html

@@ -54,6 +54,22 @@
                 </section>
             </article>
             <hr>
+            <article class="cs-escalas-radio flex flex-col gap-4">
+                <h2 class="text-2xl font-bold">Selecciona estilo para las palabras</h2>
+                <section class="flex flex-row justify-around flex-wrap">
+                    {% for escala in form_sesion.estilo_palabras %}
+                    <label for="{{escala.id_for_label}}"
+                        class="ct-radio-estilo uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit">
+                        {{ escala.tag }}
+                        {{ escala.choice_label }}
+                    </label>
+                    {% endfor %}
+                </section>
+                <p
+                    class="ct-ayuda-estilo text-lg font-bold tracking-wide bg-gray-600 text-white text-center py-1 px-4 rounded-xl">
+                </p>
+            </article>
+            <hr>
             <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 justify-around flex-wrap">

tecnicas/views/configuration_panel_basic.py

@@ -13,11 +13,11 @@ def configuracionPanelBasic(req: HttpRequest):
                 values = {}
 
                 for name, value in form.cleaned_data.items():
-                    if not name == "tipo_escala":
-                        values[name] = value
-                    else:
+                    if name == "estilo_palabras" or name == "tipo_escala":
                         values[name] = value.id
-                
+                    else:
+                        values[name] = value
+
                 req.session['form_basic'] = values
                 return redirect(reverse("cata_system:panel_configuracion_tags"))
         except KeyError: