Evaluacion Fase 3 PF, manejo de notificaciones y prevencion de envio datos

tecnicas/static/js/span-notification.js

@@ -0,0 +1,14 @@
+function spanNotifaction(messageError, isError = true, time = 4500) {
+  const span = document.createElement("span");
+  span.textContent = messageError;
+
+  const div = document.createElement("div");
+  div.classList.add("alert", isError ? "alert-error" : "alert-success");
+  div.appendChild(span);
+
+  document.querySelector(".toast").append(div);
+
+  setTimeout(() => {
+    document.querySelector(".toast").removeChild(div);
+  }, time);
+}

tecnicas/static/js/test_pf_rating_list.js

@@ -0,0 +1,142 @@
+let dragged = null;
+const nextProduct = `
+<h2 class="text-2xl font-bold text-center">Éxito al guardar los datos</h2>
+<div class="flex justify-center">
+  <button class="cts-btn-general cts-btn-primary btn-push" onclick="window.location.reload()">
+      Evaluar siguiente atributo
+  </button>
+</div>`;
+
+document.querySelectorAll(".draggable").forEach((el) => {
+  el.addEventListener("dragstart", () => {
+    dragged = el;
+    setTimeout(() => el.classList.add("opacity-50"), 0);
+  });
+
+  el.addEventListener("dragend", () => {
+    dragged = null;
+    el.classList.remove("opacity-50");
+  });
+});
+
+document.querySelectorAll(".dropzone").forEach((zone) => {
+  zone.addEventListener("dragover", (e) => e.preventDefault());
+
+  zone.addEventListener("drop", () => {
+    zone.appendChild(dragged);
+  });
+});
+
+document
+  .getElementById("question-save")
+  .addEventListener("click", showOptionsSave);
+
+document
+  .getElementById("cancel-save")
+  .addEventListener("click", showQuestionSave);
+
+document.getElementById("save-data").addEventListener("click", async () => {
+  showLoading();
+  const currentDataRatend = [];
+
+  document.querySelectorAll(".dropzone").forEach((zone) => {
+    const index = parseInt(zone.dataset.index);
+    const children = zone.querySelectorAll(".draggable");
+
+    children.forEach((el) => {
+      currentDataRatend.push({
+        name: el.dataset.code,
+        container: index,
+      });
+    });
+  });
+
+  if (!currentDataRatend.length) {
+    cancelLoading();
+    spanNotifaction("No has ordenado los productos");
+  } else if (
+    currentDataRatend.length != document.querySelectorAll(".draggable").length
+  ) {
+    cancelLoading();
+    spanNotifaction("Faltan productos por calificar");
+  } else {
+    saveData(currentDataRatend);
+  }
+});
+
+async function saveData(dataToSend = []) {
+  const URL = "/cata/testers/api/ratingword/pf/list";
+
+  const csrfToken = document.querySelector("[name=csrfmiddlewaretoken]").value;
+
+  const requestData = {
+    phase: parseInt(document.querySelector(".cts-phase-pf").dataset.phase),
+    word: document.querySelector(".cts-phase-pf").dataset.nameWord,
+    data: dataToSend,
+  };
+
+  console.log(requestData);
+
+  try {
+    // const response = await fetch(URL, {
+    //   method: "POST",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //     "X-CSRFToken": csrfToken,
+    //     "X-Requested-With": "XMLHttpRequest",
+    //   },
+    //   body: JSON.stringify(requestData),
+    // });
+
+    // if (!response.ok) {
+    //   spanNotifaction("Fallo con la respuesta recibida");
+    //   cancelLoading();
+    //   return false;
+    // }
+
+    // const result = await response.json();
+
+    // const messError = result.error;
+
+    // if (messError) {
+    //   spanNotifaction(messError);
+    //   cancelLoading();
+    //   return false;
+    // }
+
+    // spanNotifaction(result.message, false);
+    const containerRatings = document.querySelector(".container-rating-word");
+    containerRatings.innerHTML = "";
+    containerRatings.innerHTML = nextProduct;
+    cancelLoading();
+    return true;
+  } catch (error) {
+    console.log(error);
+    cancelLoading();
+    spanNotifaction("¡Oh! Ocurrió un error al tratar de guardar los datos");
+    return false;
+  }
+}
+
+function showLoading() {
+  document.getElementById("save-data").classList.add("hidden");
+  document.getElementById("cancel-save").classList.add("hidden");
+  document.getElementById("loading-data-save").classList.remove("hidden");
+}
+
+function cancelLoading() {
+  document.getElementById("loading-data-save").classList.add("hidden");
+  document.getElementById("question-save").classList.remove("hidden");
+}
+
+function showOptionsSave() {
+  document.getElementById("question-save").classList.add("hidden");
+  document.getElementById("save-data").classList.remove("hidden");
+  document.getElementById("cancel-save").classList.remove("hidden");
+}
+
+function showQuestionSave() {
+  document.getElementById("question-save").classList.remove("hidden");
+  document.getElementById("save-data").classList.add("hidden");
+  document.getElementById("cancel-save").classList.add("hidden");
+}

tecnicas/templates/tecnicas/components/toast-container.html

@@ -0,0 +1,3 @@
+{% load static %}
+<div class="toast toast-center"></div>
+<script src="{% static 'js/span-notification.js' %}"></script>

tecnicas/templates/tecnicas/forms_tester/test_pf_rating_list.html

@@ -4,34 +4,6 @@
 
 {% block title %}Convencional{% endblock %}
 
-{% block extra_css %}
-<style>
-    input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background: var(--color-blue-500);
-        cursor: pointer;
-    }
-
-    input[type="range"]::-moz-range-thumb {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background: #3b82f6;
-        cursor: pointer;
-    }
-
-    @media (width < 40rem) {
-        .container-forms {
-            width: inherit;
-        }
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <article class="cts-container-main">
     <article class="cts-wrap-content text-black">
@@ -88,29 +60,72 @@
                 </div>
             </section>
 
-            <section class="flex flex-col bg-red-200 py-2 px-4 rounded-lg min-sm:hidden">
-                <p>
-                    El largo de estas escalas puede afectar la vista en dispositivos móviles. Para ver el resto de la
-                    escala puede deslizar con el dedo a la derecha o la izquierda sin tocar la escala.
-                </p>
+            <section class="flex items-center justify-center flex-wrap gap-4">
+                <div class="bg-surface-ligt p-2 rounded-lg flex-1">
+                    <p class="text-lg font-bold text-center">
+                        El atributo que se está evaluando:
+                    </p>
+                    <p class="word-rating text-2xl font-bold text-center" data-name-word="{{ word }}">
+                        {{ word }}
+                    </p>
+                </div>
             </section>
         </article>
 
-        <article class="rounded flex flex-col gap-4">
-            <p>Palabra a evaluar: {{ word }}</p>
-            <div>
-                <p>Productos a ordenar:</p>
-                <ul>
+        <article class="container-rating-word p-6 space-y-6 bg-surface-ligt rounded">
+            <!-- Definir toddos los productos para la escala -->
+            <h2 class="text-xl font-bold">Productos en la sesión</h2>
+            <div id="items" class="flex gap-4 flex-wrap justify-center">
+                {% for product in products %}
+                <div class="draggable bg-surface-sweet text-black font-bold px-4 py-2 rounded cursor-grab"
+                    draggable="true" data-code="{{ product.codigoProducto }}">{{ product.codigoProducto }}</div>
+                {% endfor %}
+            </div>
+
+            <section>
+                <!-- Definir toddos los espacion de escala ordinaria -->
+                <h2 class="text-xl font-bold mb-6">Escala ordinaria</h2>
+                <div id="containers" class="flex gap-6 flex-wrap justify-center">
                     {% for product in products %}
-                    <li>{{ product }}</li>
+                    <section class="w-fit space-y-2">
+                        <div class="dropzone w-32 min-h-16 bg-surface-alter-card border-2 border-dashed border-gray-500 rounded p-2 space-y-2"
+                            data-index="{{ forloop.counter }}"></div>
+                        <p class="text-center text-2xl">{{ forloop.counter }}</p>
+                    </section>
                     {% endfor %}
-                </ul>
-            </div>
+                </div>
+
+                <!-- Linea de menor a mayor -->
+                <section>
+                    <div class="flex justify-center items-center gap-4">
+                        <span class="text-2xl">➖</span>
+                        <hr class="border-2 flex-1">
+                        <SPan class="text-2xl">➕</SPan>
+                    </div>
+                    <p class="text-center text-sm">Valores de menor a mayor</p>
+                </section>
+            </section>
+
+            <section class="flex justify-end gap-4">
+                <button id="question-save" class="cts-btn-general cts-btn-secondary btn-push">
+                    ¿Guardar datos actuales?
+                </button>
+                <button id="save-data" class="cts-btn-general cts-btn-primary btn-push hidden">
+                    Guardar
+                </button>
+                <button id="cancel-save" class="cts-btn-general cts-btn-error btn-push hidden">
+                    Cancelar
+                </button>
+                <span id="loading-data-save" class="loading loading-spinner loading-xl text-accent hidden"></span>
+            </section>
         </article>
+
+        {% include "../components/toast-container.html" %}
     </article>
 </article>
 {% endblock %}
 
 {% block extra_js %}
 <script src="{% static 'js/actions-form.js' %}"></script>
+<script src="{% static 'js/test_pf_rating_list.js' %}"></script>
 {% endblock %}