Separacion de js de templates a static

tecnicas/static/js/catador-craete.js

@@ -0,0 +1,13 @@
+const notifiactions = document.getElementsByClassName("ct-notificacion");
+const inputs = document.getElementsByClassName("ct-inputs-pos-cata");
+
+for (let index = 0; index < inputs.length; index++) {
+  inputs.item(index).addEventListener("change", hiddenErrorAndMessages);
+}
+
+function hiddenErrorAndMessages(e) {
+  for (let index = 0; index < notifiactions.length; index++) {
+    console.log("Oculto");
+    notifiactions.item(index).classList.add("hidden");
+  }
+}

tecnicas/static/js/catador-search.js

@@ -0,0 +1,39 @@
+const inputs = document.getElementsByClassName("ct-inputs-pos-cata");
+disableInputs();
+setTimeout(() => {
+  const notifications = document.getElementsByClassName("ct-notifica");
+  for (let index = 0; index < notifications.length; index++) {
+    notifications.item(index).classList.add("hidden");
+  }
+}, 1800);
+
+function disableInputs() {
+  for (let index = 0; index < inputs.length; index++) {
+    inputs.item(index).disabled = true;
+  }
+}
+
+function enableInputs() {
+  for (let index = 0; index < inputs.length; index++) {
+    inputs.item(index).disabled = false;
+  }
+  changeButtons();
+}
+
+function changeButtons(callBack = function () {}) {
+  const btnUpdate = document.getElementsByClassName("ct-btn-actualizar")[0];
+  const btnSave = document.getElementsByClassName("ct-btn-guardar")[0];
+  const btnCancel = document.getElementsByClassName("ct-btn-cancel")[0];
+
+  if (btnUpdate.classList.contains("hidden")) {
+    btnUpdate.classList.remove("hidden");
+    btnSave.classList.add("hidden");
+    btnCancel.classList.add("hidden");
+  } else {
+    btnUpdate.classList.add("hidden");
+    btnSave.classList.remove("hidden");
+    btnCancel.classList.remove("hidden");
+  }
+
+  callBack();
+}

tecnicas/static/js/panel-basic.js

@@ -0,0 +1,45 @@
+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"],
+};
+
+let labels;
+
+let pSize;
+let iSize;
+
+initPanel();
+
+function initPanel() {
+  initRadios();
+}
+
+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));
+      });
+  }
+}
+
+function showDescriptionTamanoScale(label) {
+  const text = label.textContent.trim();
+  pSize.textContent = descriptons[text][0];
+  iSize.placeholder = descriptons[text][1];
+}

tecnicas/static/js/panel-tags.js

@@ -0,0 +1,66 @@
+const itemsSelects = document.getElementsByClassName("ct-select-op");
+const options = itemsSelects.item(0).getElementsByTagName("option");
+const values = [];
+
+const extraPanel = document.getElementsByClassName("ct-new-tags")[0];
+function showHiddeExtraTags() {
+  if (extraPanel.classList.contains("hidden")) {
+    extraPanel.classList.remove("hidden");
+  } else {
+    extraPanel.classList.add("hidden");
+  }
+}
+
+const formNewTag = document.getElementsByClassName("ct-form-new-tag")[0];
+if (formNewTag) {
+  formNewTag.addEventListener("submit", postNewTag);
+}
+
+async function postNewTag(e) {
+  e.preventDefault();
+
+  const dataForm = new FormData(this);
+  const url = "/cata/nueva-etiqueta";
+
+  try {
+    const respone = await fetch(url, {
+      method: "POST",
+      headers: {
+        "X-CSRFToken": dataForm.get("csrfmiddlewaretoken"),
+      },
+      body: dataForm,
+    });
+
+    const jsonResponse = await respone.json();
+
+    if (jsonResponse.error) {
+      const errorp = document.getElementsByClassName("ct-error-tag")[0];
+      errorp.textContent = `error: ${jsonResponse.error}`;
+      errorp.classList.remove("hidden");
+      return;
+    }
+
+    const inputTag = document.getElementsByName("nueva_etiqueta")[0];
+    inputTag.value = "";
+    showHiddeExtraTags();
+
+    const newTag = jsonResponse["new_tag"];
+    addNewOptionToSelect(newTag);
+  } catch (error) {
+    console.log("Error:", error);
+  }
+}
+
+function createOptionSelect(value = 0, text = "define texto") {
+  const option = document.createElement("option");
+  option.value = value;
+  option.textContent = text;
+  return option;
+}
+
+function addNewOptionToSelect(newValues) {
+  for (let i = 0; i < itemsSelects.length; i++) {
+    const newOption = createOptionSelect(newValues.id, newValues.valor);
+    itemsSelects.item(i).appendChild(newOption);
+  }
+}

tecnicas/templates/tecnicas/catador-buscar.html

@@ -1,4 +1,5 @@
 {% extends 'tecnicas/base.html' %}
+{% load static %}
 
 {% block title %}Buscar Catador{% endblock %}
 
@@ -115,46 +116,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    const inputs = document.getElementsByClassName("ct-inputs-pos-cata")
-    disableInputs()
-    setTimeout(() => {
-        const notifications = document.getElementsByClassName("ct-notifica")
-        for (let index = 0; index < notifications.length; index++) {
-            notifications.item(index).classList.add("hidden")
-        }
-    }, 1800)
-
-    function disableInputs () {
-        for (let index = 0; index < inputs.length; index++) {
-            inputs.item(index).disabled = true
-        }
-    }
-
-    function enableInputs () {
-        for (let index = 0; index < inputs.length; index++) {
-            inputs.item(index).disabled = false
-        }
-        changeButtons()
-    }
-
-    function changeButtons (callBack = function () { }) {
-        const btnUpdate = document.getElementsByClassName("ct-btn-actualizar")[0]
-        const btnSave = document.getElementsByClassName("ct-btn-guardar")[0]
-        const btnCancel = document.getElementsByClassName("ct-btn-cancel")[0]
-
-        if (btnUpdate.classList.contains("hidden")) {
-            btnUpdate.classList.remove("hidden")
-            btnSave.classList.add("hidden")
-            btnCancel.classList.add("hidden")
-        } else {
-            btnUpdate.classList.add("hidden")
-            btnSave.classList.remove("hidden")
-            btnCancel.classList.remove("hidden")
-        }
-
-        callBack()
-    }
-
-</script>
+<script src="{% static 'js/catador-search.js' %}"></script>
 {% endblock %}

tecnicas/templates/tecnicas/catador-crear.html

@@ -1,4 +1,5 @@
 {% extends 'tecnicas/base.html' %}
+{% load static %}
 
 {% block title %}Crear Catador{% endblock %}
 
@@ -84,19 +85,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    const notifiactions = document.getElementsByClassName("ct-notificacion")
-    const inputs = document.getElementsByClassName("ct-inputs-pos-cata")
-
-    for (let index = 0; index < inputs.length; index++) {
-        inputs.item(index).addEventListener("change", hiddenErrorAndMessages)
-    }
-
-    function hiddenErrorAndMessages (e) {
-        for (let index = 0; index < notifiactions.length; index++) {
-            console.log("Oculto")
-            notifiactions.item(index).classList.add("hidden")
-        }
-    }
-</script>
+<script src="{% static 'js/catador-craete.js' %}"></script>
 {% endblock %}

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

@@ -1,4 +1,5 @@
 {% extends 'tecnicas/base.html' %}
+{% load static %}
 
 {% block title %}Panel Configuracion{% endblock %}
 
@@ -96,42 +97,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    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"]
-    }
-
-    let labels
-
-    let pSize
-    let iSize
-
-    initPanel()
-
-    function initPanel () {
-        initRadios()
-    }
-
-    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))
-            })
-        }
-    }
-
-    function showDescriptionTamanoScale (label) {
-        const text = label.textContent.trim()
-        pSize.textContent = descriptons[text][0]
-        iSize.placeholder = descriptons[text][1]
-    }
-</script>
+<script src="{% static 'js/panel-basic.js' %}"></script>
 {% endblock %}

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

@@ -1,4 +1,5 @@
 {% extends 'tecnicas/base.html' %}
+{% load static %}
 
 {% block title %}Panel Configuracion{% endblock %}
 
@@ -79,75 +80,7 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    const itemsSelects = document.getElementsByClassName("ct-select-op")
-    const options = itemsSelects.item(0).getElementsByTagName("option")
-    const values = []
-
-    const extraPanel = document.getElementsByClassName("ct-new-tags")[0]
-    function showHiddeExtraTags () {
-        if (extraPanel.classList.contains("hidden")) {
-            extraPanel.classList.remove("hidden")
-        } else {
-            extraPanel.classList.add("hidden")
-        }
-    }
-
-    const formNewTag = document.getElementsByClassName("ct-form-new-tag")[0]
-    if (formNewTag) {
-        formNewTag.addEventListener("submit", postNewTag)
-    }
-
-    async function postNewTag (e) {
-        e.preventDefault()
-
-        const dataForm = new FormData(this)
-        const url = "/cata/nueva-etiqueta"
-
-        try {
-            const respone = await fetch(url, {
-                method: "POST",
-                headers: {
-                    'X-CSRFToken': dataForm.get('csrfmiddlewaretoken'),
-                },
-                body: dataForm
-            })
-
-            const jsonResponse = await respone.json()
-
-            if (jsonResponse.error) {
-                const errorp = document.getElementsByClassName("ct-error-tag")[0]
-                errorp.textContent = `error: ${jsonResponse.error}`
-                errorp.classList.remove("hidden")
-                return
-            }
-
-            const inputTag = document.getElementsByName("nueva_etiqueta")[0]
-            inputTag.value = ""
-            showHiddeExtraTags()
-
-            const newTag = jsonResponse["new_tag"]
-            addNewOptionToSelect(newTag)
-        } catch (error) {
-            console.log("Error:", error)
-
-        }
-    }
-
-    function createOptionSelect (value = 0, text = "define texto") {
-        const option = document.createElement("option")
-        option.value = value
-        option.textContent = text
-        return option
-    }
-
-    function addNewOptionToSelect(newValues) {
-        for (let i = 0; i < itemsSelects.length; i++) {
-            const newOption = createOptionSelect(newValues.id, newValues.valor)
-            itemsSelects.item(i).appendChild(newOption)
-        }
-    }
-</script>
+<script src="{% static 'js/panel-tags.js' %}"></script>
 
 {%if escala == "estructurada"%}
 <script>