jQuery(document).ready(function($) { // initialize and set to default values all filters const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; let timeframe = ""; let from = ""; let to = ""; let plants = ""; let ates = ""; let customers = ""; let workOrders = ""; let thresholds = ""; let lastId = 0; let refreshInterval = ""; init(); getThresholds(); $("#rtaSearch").click(function(e) { e.preventDefault(); generateStationBoxes(); }); // initialize and set to default values all filters function init() { const title = document.querySelector(".title"); title.addEventListener("click", () => { const filter = document.querySelector(".filters"); filter.classList.toggle("open"); }); const timeframeInput = document.getElementById("timeframe"); timeframeInput.selectedIndex = 0; let plantsSelect = document.getElementById("plants"); if (plantsSelect) { for (let i = 0; i < plantsSelect.options.length; i++) { plantsSelect.options[i].selected = true; } } let atesSelect = document.getElementById("ates"); for (let i = 0; i < atesSelect.options.length; i++) { atesSelect.options[i].selected = true; } let customersSelect = document.getElementById("customers"); if (customersSelect) { for (let i = 0; i < customersSelect.options.length; i++) { customersSelect.options[i].selected = true; } } let workOrdersSelect = document.getElementById("workOrders"); if (workOrdersSelect) { for (let i = 0; i < workOrdersSelect.options.length; i++) { workOrdersSelect.options[i].selected = true; } } const today = new Date(); const toDate = today.toISOString().split("T")[0]; const fromDate = new Date(today.getTime() - 24 * 60 * 60 * 1000); const fromDateString = fromDate.toISOString().split("T")[0]; document.getElementById("from").value = fromDateString; document.getElementById("to").value = toDate; $(".selectpicker").selectpicker("refresh"); getDataFromInputs(); } function getDataFromInputs() { timeframe = $("#timeframe").val(); from = $("#from").val(); to = $("#to").val(); plants = $("#plants").val(); ates = $("#ates").val(); customers = $("#customers").val(); workOrders = $("#workOrders").val(); } function isValidFilters() { getDataFromInputs(); let values = []; if (document.getElementById("customers")) { values = [timeframe, from, to, ates, customers, workOrders]; } else { values = [timeframe, from, to, plants, ates]; } const allValuesFilled = values.every(value => { if (Array.isArray(value)) { return value.length > 0; } return value.trim() !== ""; }); if (!allValuesFilled) { return false; } } function getThresholds() { $("#dashboard").html('
'); generateStationBoxes(); } // Function to generate the station boxes dynamically function generateStationBoxes() { // Sample data for the stations // Get the container where the boxes will be displayed const container = document.getElementById("dashboard"); if (!container) { console.error("Dashboard container not found"); return; } container.innerHTML = ""; // Clear previous boxes // check all the filters and return message if some filter is invalid if (isValidFilters() === false) { bootbox.alert("All filters are required!"); return; } const searchBtn = $(this); searchBtn.prop("disabled", true).html("Loading..."); $("#dashboard").html('
'); // AJAX request to fetch data from the server $.ajax({ url: QL_HOST + "real_time_analytics_clock/?AJX_RTACACTO=getDataTestingStation", type: "POST", data: { timeframe, from, to, plants, ates, customers, workOrders, userTimezone }, success: function(response) { // Parse the JSON response const data = JSON.parse(response); if (data["error"]) { bootbox.alert("Error: " + data["error"]); return; } // Ensure the container is available const container = document.getElementById("dashboard"); if (!container) { console.error( "Container element with id 'dashboard' not found." ); return; } if (data.length === 0) { container.classList.add("text-center"); container.innerHTML = "

No data available

"; } else { container.classList.remove("text-center"); } // Clear previous content container.innerHTML = ""; if (data.length === 0) { container.innerHTML = "

No data available

"; return; } // Generate station boxes with received data data.forEach(station => { // Calculate the color for the FPY based on percentage let fpyColor = "green"; if (station.fpy < 90) { fpyColor = "red"; } else if (station.fpy < 95) { fpyColor = "yellow"; } // Create the station box HTML with inline CSS for background color const stationBox = `
${station.id} - ${station.name}
Qty: ${station.qty}
FPY: ${station.fpy.toFixed(2)}%
`; // Insert the station box into the container container.insertAdjacentHTML("beforeend", stationBox); }); }, error: function(xhr, status, error) { console.error("Error fetching data:", error); bootbox.alert("An error occurred while fetching data."); } }); } });