Creacion de ruta pra formulario style-words

tecnicas/forms/__init__.py

@@ -1,5 +1,5 @@
 from .sesion_basic_form import SesionBasicForm
 from .sesion_tags_form import SesionTagsForm
 from .etiqueta_form import EtiquetaForm
-from .palabras_form import PalabrasForm
+from .codes_form import CodesForm
 from .catador_form import CatadorForm

tecnicas/forms/{palabras_form.py → codes_form.py}

@@ -1,10 +1,10 @@
 from django import forms
 
-class PalabrasForm(forms.Form):
+class CodesForm(forms.Form):
     def __init__(self, *args, codes = [], **kwargs):
         super().__init__(*args, **kwargs)
 
         for index, code in enumerate(codes):
             self.fields[f'producto_{index+1}'] = forms.CharField(max_length=3, required=True, min_length=3, initial=code, label=f"codigo {index+1}", widget=forms.TextInput(attrs={
-                "class": "ct-palabra bg-gray-300 p-1 border-b-1 text-center w-full disabled:bg-gray-500 uppercase"
+                "class": "ct-code bg-gray-300 p-1 border-b-1 text-center w-full disabled:bg-gray-500 uppercase"
             }))

tecnicas/static/js/panel-codes.js

@@ -0,0 +1,156 @@
+let inWords = document
+  .getElementsByClassName("ct-codes-form")[0]
+  .getElementsByClassName("ct-code");
+let codes = [];
+let numCata = document.getElementsByClassName("ct-num-cata")[0].value;
+
+let sortData;
+
+initIU();
+
+function submitData(e) {
+  const codesInput = document.createElement("input");
+  codesInput.type = "hidden";
+  codesInput.name = "sort_codes";
+  codesInput.value = JSON.stringify(sortData);
+  this.appendChild(codesInput);
+}
+
+function initIU() {
+  setCodes();
+  definePermutations();
+  addIUPermutations();
+
+  const formWords = document.getElementsByClassName("ct-codes-form")[0];
+  formWords.addEventListener("submit", submitData);
+}
+
+function setCodes() {
+  if (codes) {
+    codes = [];
+  }
+  for (let i = 0; i < inWords.length; i++) {
+    codes.push(inWords.item(i).value.toUpperCase());
+  }
+}
+
+function setPermutations() {
+  definePermutations();
+  addIUPermutations();
+}
+
+function definePermutations() {
+  setCodes();
+  const permutations = generatePermutations(codes);
+  const newPer = shuffle(permutations);
+
+  const usePermutations = [];
+  let index = 0;
+
+  while (true) {
+    if (usePermutations.length == numCata) {
+      break;
+    } else if (index < newPer.length) {
+      usePermutations.push(newPer[index]);
+      index++;
+    } else if (index >= newPer.length) {
+      index = 0;
+    }
+  }
+
+  const permutationsSort = [];
+
+  usePermutations.forEach((permutation) => {
+    let newValue = [];
+    let index = 1;
+
+    permutation.forEach((cod) => {
+      newValue.push({
+        code: cod,
+        position: index,
+      });
+
+      index++;
+    });
+
+    permutationsSort.push(newValue);
+  });
+
+  sortData = permutationsSort.slice();
+}
+
+function generatePermutations(objetos) {
+  var result = [];
+
+  var backtrack = (index, objetos) => {
+    if (index === objetos.length) {
+      result.push(objetos.slice());
+      return;
+    }
+
+    for (let j = index; j < objetos.length; j++) {
+      [objetos[index], objetos[j]] = [objetos[j], objetos[index]];
+      backtrack(index + 1, objetos);
+      [objetos[index], objetos[j]] = [objetos[j], objetos[index]];
+    }
+  };
+
+  backtrack(0, objetos);
+  return result;
+}
+
+function shuffle(arr) {
+  const arrSuffle = arr.slice();
+
+  for (let i = arrSuffle.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arrSuffle[i], arrSuffle[j]] = [arrSuffle[j], arrSuffle[i]];
+  }
+
+  return arrSuffle;
+}
+
+function addIUPermutations() {
+  const container = document.getElementsByClassName("ct-orden-list")[0];
+  const itemsChild = [];
+  container.replaceChildren();
+
+  let index = 1;
+
+  sortData.forEach((permuta) => {
+    const paragraph = document.createElement("p");
+    paragraph.classList.add("px-3", "font-bold", "text-xl", "text-black");
+    paragraph.textContent = `orden ${index}`;
+
+    const unlist = document.createElement("ul");
+    unlist.classList.add(
+      "flex",
+      "flex-wrap",
+      "gap-3",
+      "px-3",
+      "py-1",
+      "text-white"
+    );
+
+    permuta.forEach((obj) => {
+      const itemList = document.createElement("li");
+      itemList.classList.add(
+        "px-2",
+        "bg-gray-600",
+        "font-bold",
+        "tracking-wide"
+      );
+      itemList.textContent = `${obj.position}: ${obj.code}`;
+      unlist.appendChild(itemList);
+    });
+
+    const section = document.createElement("section");
+    section.classList.add("bg-gray-400", "py-2");
+
+    section.appendChild(paragraph);
+    section.appendChild(unlist);
+
+    container.appendChild(section);
+    index++;
+  });
+}

tecnicas/static/js/panel-words.js

@@ -1,156 +1,68 @@
-let inWords = document
-  .getElementsByClassName("ct-palabras-form")[0]
-  .getElementsByClassName("ct-palabra");
-let codes = [];
-let numCata = document.getElementsByClassName("ct-num-cata")[0].value;
-
-let sortData;
-
-initIU();
-
-function submitData(e) {
-  const codesInput = document.createElement("input");
-  codesInput.type = "hidden";
-  codesInput.name = "sort_codes";
-  codesInput.value = JSON.stringify(sortData);
-  this.appendChild(codesInput);
-}
-
-function initIU() {
-  setCodes();
-  definePermutations();
-  addIUPermutations();
-
-  const formWords = document.getElementsByClassName("ct-palabras-form")[0];
-  formWords.addEventListener("submit", submitData);
-}
-
-function setCodes() {
-  if (codes) {
-    codes = [];
-  }
-  for (let i = 0; i < inWords.length; i++) {
-    codes.push(inWords.item(i).value.toUpperCase());
-  }
-}
-
-function setPermutations() {
-  definePermutations();
-  addIUPermutations();
-}
-
-function definePermutations() {
-  setCodes();
-  const permutations = generatePermutations(codes);
-  const newPer = shuffle(permutations);
-
-  const usePermutations = [];
-  let index = 0;
-
-  while (true) {
-    if (usePermutations.length == numCata) {
-      break;
-    } else if (index < newPer.length) {
-      usePermutations.push(newPer[index]);
-      index++;
-    } else if (index >= newPer.length) {
-      index = 0;
-    }
-  }
-
-  const permutationsSort = [];
-
-  usePermutations.forEach((permutation) => {
-    let newValue = [];
-    let index = 1;
-
-    permutation.forEach((cod) => {
-      newValue.push({
-        code: cod,
-        position: index,
-      });
-
-      index++;
-    });
-
-    permutationsSort.push(newValue);
+const selectWordsContainer = document.querySelector(".ct-words-select");
+const tagsWords = document.querySelectorAll(".word");
+let numberWords = 3;
+const allWords = [];
+
+for (let i = 0; i < tagsWords.length; i++) {
+  let atributes = tagsWords.item(i).children;
+  allWords.push({
+    id: atributes[1].innerText,
+    name: atributes[0].innerText,
+    selected: false,
   });
-
-  sortData = permutationsSort.slice();
 }
 
-function generatePermutations(objetos) {
-  var result = [];
-
-  var backtrack = (index, objetos) => {
-    if (index === objetos.length) {
-      result.push(objetos.slice());
-      return;
-    }
-
-    for (let j = index; j < objetos.length; j++) {
-      [objetos[index], objetos[j]] = [objetos[j], objetos[index]];
-      backtrack(index + 1, objetos);
-      [objetos[index], objetos[j]] = [objetos[j], objetos[index]];
-    }
-  };
-
-  backtrack(0, objetos);
-  return result;
+for (let i = 1; i <= numberWords; i++) {
+  const select = creadSelect(i);
+  selectWordsContainer.appendChild(select);
 }
 
-function shuffle(arr) {
-  const arrSuffle = arr.slice();
-
-  for (let i = arrSuffle.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [arrSuffle[i], arrSuffle[j]] = [arrSuffle[j], arrSuffle[i]];
-  }
-
-  return arrSuffle;
-}
-
-function addIUPermutations() {
-  const container = document.getElementsByClassName("ct-orden-list")[0];
-  const itemsChild = [];
-  container.replaceChildren();
-
-  let index = 1;
-
-  sortData.forEach((permuta) => {
-    const paragraph = document.createElement("p");
-    paragraph.classList.add("px-3", "font-bold", "text-xl", "text-black");
-    paragraph.textContent = `orden ${index}`;
-
-    const unlist = document.createElement("ul");
-    unlist.classList.add(
-      "flex",
-      "flex-wrap",
-      "gap-3",
-      "px-3",
-      "py-1",
-      "text-white"
-    );
-
-    permuta.forEach((obj) => {
-      const itemList = document.createElement("li");
-      itemList.classList.add(
-        "px-2",
-        "bg-gray-600",
-        "font-bold",
-        "tracking-wide"
-      );
-      itemList.textContent = `${obj.position}: ${obj.code}`;
-      unlist.appendChild(itemList);
-    });
-
-    const section = document.createElement("section");
-    section.classList.add("bg-gray-400", "py-2");
+function creadSelect(index) {
+  const label = document.createElement("label");
+  label.attributes["form"] = `palabra-${index}`;
+  label.classList.add(
+    "font-medium",
+    "py-2",
+    "px-3",
+    "bg-gray-200",
+    "capitalize",
+    "rounded",
+    "text-center"
+  );
+
+  const p = document.createElement("p");
+  p.innerText = `Palabra ${index}`;
+
+  const select = document.createElement("select");
+  select.attributes["id"] = `palabra-${index}`;
+  select.name = `palabra-${index}`;
+  select.required = true;
+  select.classList.add(
+    "ct-select-op",
+    "p-1",
+    "rounded",
+    "bg-gray-500",
+    "[*]:capitalize",
+    "[*]:text-white"
+  );
+
+  const emtpyOption = document.createElement("option");
+  emtpyOption.value = "";
+  emtpyOption.innerText = "Seleccione palabra";
+  emtpyOption.attributes["selected"] = true;
+  emtpyOption.attributes["disabled"] = true;
+
+  select.appendChild(emtpyOption);
+
+  allWords.forEach((dataWord, i) => {
+    const option = document.createElement("option");
+    option.value = dataWord.id;
+    option.innerText = dataWord.name;
+    select.appendChild(option);
+  });
 
-    section.appendChild(paragraph);
-    section.appendChild(unlist);
+  label.appendChild(p);
+  label.appendChild(select);
 
-    container.appendChild(section);
-    index++;
-  });
+  return label;
 }

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-codes.html

@@ -10,7 +10,7 @@
         {% if error %}
         <p class="text-2xl">{{ error }}</p>
         {% endif %}
-        <form method="post" action="" class="ct-palabras-form flex flex-col gap-5">
+        <form method="post" action="" class="ct-codes-form flex flex-col gap-5">
             {% csrf_token %}
             <h2 class="text-2xl mb-2 font-bold">Codificar productos</h2>
             <article class="flex flex-row flex-wrap gap-4 items-center justify-center">
@@ -51,5 +51,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script src="{% static 'js/panel-words.js' %}"></script>
+<script src="{% static 'js/panel-codes.js' %}"></script>
 {% endblock %}

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-words.html

@@ -0,0 +1,62 @@
+{% extends 'tecnicas/layouts/base.html' %}
+{% load static %}
+
+{% block title %}Panel Configuracion{% endblock %}
+
+{% block content %}
+<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
+    <section class="w-fit h-fit relative">
+        <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+            <ul class="all-words hidden">
+                {% for word in words %}
+                <li class="word">
+                    <p>{{ word.nombre_palabra }}</p>
+                    <p>{{ word.id }}</p>
+                </li>
+                {% endfor %}
+            </ul>
+            <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
+            <hr>
+            {% if error %}
+            <p class="bg-red-400 font-bold text-lg tracking-wide text-white capitalize text-center py-2">
+                {{ error }}
+            </p>
+            {% endif %}
+
+            <article class="flex flex-col md:flex-row gap-5 justify-between items-center">
+                <section class="flex-1/3 bg-gray-600 text-white p-4 rounded-lg text-center">
+                    <p>Soy una palabra</p>
+                </section>
+                <section class="flex-2/3 w-full">
+                    <form action="" method="get" class="h-full w-full">
+                        {% csrf_token %}
+                        <label for="search">
+                            <input type="text" name="search" id="search" placeholder="Buscar palabra"
+                                class="p-2 px-4 bg-gray-200 rounded-lg w-full text-lg">
+                        </label>
+                    </form>
+                </section>
+            </article>
+
+
+            <form action="" method="post" class="flex flex-col gap-5">
+                {% csrf_token %}
+                <article class="p-4 flex flex-col items-center gap-2 rounded">
+                    <h2 class="text-2xl mb-2 text-center font-bold">Estilo Atributos<br>Seleccion de palabras</h2>
+                    <div class="ct-words-select flex flex-row flex-wrap justify-center items-center gap-5 text-lg">
+                    </div>
+                    <hr>
+                    <button type="button"
+                        class="ct-gen-or text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit capitalize">
+                        Agregar otra palabra
+                    </button>
+                </article>
+            </form>
+        </article>
+    </section>
+</article>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'js/panel-words.js' %}"></script>
+{% endblock %}

tecnicas/urls.py

@@ -9,11 +9,12 @@ urlpatterns = [
     path("autenticacion", views.autentication, name="autenticacion"),
     path("catador-login", views.catadorLogin, name="catador_login"),
     path("panel-catadores", views.managementCatadores, name="panel_catadores"),
-    path("panel-sesiones", views.sesionesPanel, name="panel_sesiones"),
+    path("panel-sesiones", views.sesionsPanel, name="panel_sesiones"),
     path("seleccion-tecnica", views.selecionTecnica, name="seleccion_tecnica"),
-    path("panel-configuracion-basic", views.configuracionPanelBasic, name="panel_configuracion_basic"),
-    path("panel-configuracion-tags", views.configuracionPanelTags, name="panel_configuracion_tags"),
-    path("panel-configuracion-codes", views.configurationsPanelCodes, name="panel_configuracion_codes"),
+    path("panel-configuracion-basic", views.configurationPanelBasic, name="panel_configuracion_basic"),
+    path("panel-configuracion-tags", views.configurationPanelTags, name="panel_configuracion_tags"),
+    path("panel-configuracion-codes", views.configurationPanelCodes, name="panel_configuracion_codes"),
+    path("panel-configuracion-words", views.configurationPanelWords, name="panel_configuracion_words"),
     path("nueva-etiqueta", views.newTag, name="nueva_etiqueta"),
     path("crear-catador", views.testerCreate, name="crear_catador"),
     path("buscar-catador", views.testerSearch, name="buscar_catador"),

tecnicas/views/__init__.py

@@ -5,8 +5,9 @@ from .management_catadores import managementCatadores
 from .sessions_panel import sesionsPanel
 from .seleccion_tecnica import selecionTecnica
 from .configuration_panel_basic import configurationPanelBasic
-from .configuration_panel_tags import configuracionPanelTags
+from .configuration_panel_tags import configurationPanelTags
 from .configuration_panel_codes import configurationPanelCodes
+from .configuration_panel_words import configurationPanelWords
 from .api_tag import newTag
 from .tester_create import testerCreate
 from .tester_search import testerSearch

tecnicas/views/configuration_panel_codes.py

@@ -2,7 +2,7 @@ from django.http import HttpRequest
 from django.shortcuts import render, redirect
 from django.urls import reverse
 from ..utils import generarCodigos
-from ..forms import PalabrasForm
+from ..forms import CodesForm
 import json
 
 
@@ -20,7 +20,7 @@ def configurationPanelCodes(req: HttpRequest):
     if req.method == "GET":
         codes_products = generarCodigos(num_products)
 
-        form_worlds = PalabrasForm(codes=codes_products)
+        form_worlds = CodesForm(codes=codes_products)
 
         context_worlds_form = {
             "form_worlds": form_worlds,
@@ -37,7 +37,7 @@ def configurationPanelCodes(req: HttpRequest):
             if name.__contains__("producto_"):
                 codes.append(value)
 
-        form_worlds = PalabrasForm(req.POST, codes=codes)
+        form_worlds = CodesForm(req.POST, codes=codes)
 
         context_worlds_form = {
             "form_worlds": form_worlds,
@@ -51,9 +51,8 @@ def configurationPanelCodes(req: HttpRequest):
                 codes_sort["product_codes"].append({name: value})
 
             codes_sort["sort_codes"] = sorts_code
-
             req.session["form_codes"] = codes_sort
-            print("Todo ok")
+            return redirect(reverse("cata_system:panel_configuracion_words"))
         else:
             context_worlds_form["error"] = "error en los datos recibidos"
 

tecnicas/views/configuration_panel_words.py

@@ -1,8 +1,11 @@
 from django.http import HttpRequest
-from ..utils import general_error
+from django.shortcuts import render
+from ..models.palabra import Palabra
 
 def configurationPanelWords(req: HttpRequest):
     if req.method == "GET":
-        return general_error("This endpoint is not implemented yet.")
-    else:
-        return general_error("Method not allowed.")
+        allWords =  Palabra.objects.all()
+        context = {
+            "words": allWords
+        }
+        return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)