{"id":153,"date":"2021-08-04T16:46:33","date_gmt":"2021-08-04T16:46:33","guid":{"rendered":"http:\/\/server3.testwalking.com\/test\/atic-wp\/?page_id=153"},"modified":"2021-08-04T16:46:34","modified_gmt":"2021-08-04T16:46:34","slug":"diagnostic-tips","status":"publish","type":"page","link":"http:\/\/server3.testwalking.com\/test\/atic-wp\/diagnostic-tips\/","title":{"rendered":"Diagnostic tips"},"content":{"rendered":"<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.11.3\/datatables.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/1.11.0\/css\/jquery.dataTables.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/select\/1.3.3\/css\/select.dataTables.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/buttons\/2.0.0\/css\/buttons.dataTables.min.css\" \/>\n\n<style>\n    tbody>tr.odd.selected>td,\n    tbody>tr.even.selected>td {\n        background-color: #0fb9d5a1 !important;\n    }\n\n    button.arrow {\n        width: 50px;\n        margin: 5px;\n    }\n\n    button.arrow>i {\n        color: rgb(83, 0, 216);\n    }\n\n    .controls-container {\n        display: flex;\n        justify-content: center;\n    }\n\n\n    .contenedor {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: flex-end;\n    }\n\n    .columna {\n        display: flex;\n        flex-direction: column;\n        align-items: end;\n        width: 47%;\n    }\n\n    .columna>ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        border: 1px solid #ccc;\n        width: 100%;\n        height: 200px;\n        max-height: 200px;\n        overflow-y: auto;\n    }\n\n    .columna>ul>li {\n        padding: 2px;\n        padding-left: 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #ccc;\n    }\n\n    .columna>ul>li.even {\n        background-color: #f1f1f1;\n    }\n\n    .columna>ul>li.odd {\n        background-color: #fafafa;\n    }\n\n    .columna>ul>li>a {\n        font-family: monospace;\n    }\n\n    .columna>ul>li:hover {\n        background-color: #3ba8e0;\n    }\n\n    .columna .columna-barra-titulo {\n        color: #1b49a1;\n        font-family: 'Montserrat';\n        font-weight: 600;\n        margin: 10px 15px;\n        align-self: flex-start;\n        width: 75%;\n    }\n\n    .columna .columna-barra-superior {\n        display: flex;\n        width: 100%;\n    }\n\n    .columna .columna-barra-botones {\n        display: flex;\n        width: 25%;\n        align-items: center;\n    }\n\n    .columna-barra-botones button {\n        background-color: transparent;\n        color: #1b49a1;\n        font-size: 24px;\n        margin-left: auto\n    }\n\n    .columna-barra-botones button:hover {\n        background-color: #2196f31f;\n    }\n\n    .controles {\n        padding: 5px 10px;\n        background-color: #1b49a1;\n        color: #fff;\n        border: none;\n        cursor: pointer;\n        margin: 5px;\n    }\n\n    .filter_container {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n    .botones {\n        display: flex;\n        flex-direction: column;\n        width: 6%;\n        min-width: 45px;\n    }\n\n    button:hover {\n        background-color: #0056b3;\n    }\n\n\n\n    li.seleccionado {\n        background-color: #007bff !important;\n        color: #fff;\n    }\n\n    .filter_container input[type=\"text\"] {\n        padding: 1px 1px 1px 10px !important;\n        border-radius: 5px;\n        width: 95%\n    }\n\n    .filter_container label {\n        margin: auto 10px;\n    }\n\n    button {\n        margin-top: 10px;\n        padding: 5px 25px;\n        background-color: #1b49a1;\n        color: #fff;\n    }\n\n    td ul {\n        max-height: 65px;\n        overflow: scroll;\n    }\n\n    table td:first-child,\n    table th:first-child {\n        max-width: 80px;\n    }\n\n    table td:last-child,\n    table th:last-child {\n        max-width: 200px;\n    }\n\n    table ul {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    table ul li:not(li:last-child) {\n        padding: 5px 0px;\n        border-bottom: 1px solid #ddd;\n    }\n\n    .modal {\n        display: none;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .atic-modal-content {\n        max-width: 80%;\n        min-height: 40%;\n        max-height: 80%;\n        overflow-y: auto;\n        margin: auto;\n        width: 80%;\n    }\n\n    .modal-title {\n        padding: 10px, 2px, 20px 2px;\n    }\n\n    .close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .modal table td:first-child {\n        width: 50%;\n    }\n\n    label input[type=\"search\"] {\n        padding: 1px 1px 1px 10px !important;\n        border-radius: 5px !important;\n        border: 1px solid #ebebeb !important;\n        margin-bottom: 15px !important;\n    }\n\n    \/*  ATIC-418  *\/\n    .clearable {\n        position: relative;\n        display: inline-block;\n    }\n\n    .clearable input[type=text] {\n        padding-right: 24px;\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .clearable .clear {\n        display: none;\n        color: #444;\n        position: absolute;\n        right: 0;\n        top: 3px;\n        padding: 0 8px;\n        font-style: normal;\n        font-size: 0.9em;\n        user-select: none;\n        cursor: pointer;\n    }\n    \/* ATIC-418  *\/\n<\/style>\n\n<script type=\"text\/javascript\" language=\"javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.5.1.js\"><\/script>\n<script type=\"text\/javascript\" language=\"javascript\" src=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.11.3\/datatables.min.js\"><\/script>\n<div id=\"block_diagnostic_suggestions_19d8093ac37a937c1e368ae3898\" class=\"block_diagnostic_suggestions\">\n    <div id=\"block_diagnostic_suggestions_msg_19d8093ac37a937c1e368ae3898\" class=\"block-msg\"><\/div>\n    <div class=\"card-form card-div-back  \">\n        <div class=\"card\">\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    <div class=\"col-md-12 col-sm-12\">\n                        <h5 class=\"card-title\"><span class=\"title-plate\">Diagnostic tips<\/span><\/h5>\n                    <\/div>\n                <\/div>\n                <hr class=\"hr-not-margin-top\">\n                <div class=\"row\">\n                    <div class=\"contenedor\">\n                        <div class=\"columna\">\n                            <div class=\"columna-barra-superior\">\n                                <h5 class=\"columna-barra-titulo\">Manifestations list<\/h5>\n                                <!-- <div class=\"columna-barra-botones\">\n                                    <button id=\"btn_filtrar_disponibles\" class=\"controles\" title=\"Filtrar elementos\">\n                                        <i class=\"fa fa-filter\" aria-hidden=\"true\"><\/i>\n                                    <\/button>\n                                <\/div> -->\n                                <div class=\"filter_container\">\n                                    <label for=\"filter_suggestions\">\n                                        <i class=\"fa fa-filter\" aria-label=\"hidden\"><\/i>\n                                    <\/label>\n                                    <!-- ATIC-418 -->\n                                    <div class=\"clearable\">\n                                        <input id=\"filter_suggestions\" type=\"text\" class=\"\" \/>\n                                        <i id=\"clear\" class=\"clear\" data-type=\"list-of-demonstrations\">x<\/i>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"botones\"><\/div>\n                        <div class=\"columna\">\n                            <div class=\"columna-barra-superior\">\n                                <h5 class=\"columna-barra-titulo\">Manifestations detected<\/h5>\n\n                                <div class=\"filter_container\">\n                                    <label for=\"filter_suggestions_result\">\n                                        <i class=\"fa fa-filter\" aria-hidden=\"true\"><\/i>\n                                    <\/label>\n                                    <!-- ATIC-418 -->\n                                    <div class=\"clearable\">\n                                        <input id=\"filter_suggestions_result\" type=\"text\" class=\"\" \/>\n                                        <i id=\"another-clear\" class=\"clear\" data-type=\"list-of-manifestations-detected\">x<\/i>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"contenedor\">\n                        <div class=\"columna\">\n                            <ul id=\"lista-izquierda\"><\/ul>\n                        <\/div>\n                        <div class=\"botones\">\n                            <button class=\"controles\" id=\"btn-izquierda-a-derecha\"><i class=\"fa fa-arrow-right\"><\/i><\/button>\n                            <button class=\"controles\" id=\"btn-derecha-a-izquierda\"><i class=\"fa fa-arrow-left\"><\/i><\/button>\n                            <button class=\"controles\" id=\"btn-reset\"><i class=\"fa fa-rotate-left\"><\/i><\/button>\n                        <\/div>\n                        <div class=\"columna\">\n                            <ul id=\"lista-derecha\"><\/ul>\n                        <\/div>\n                    <\/div>\n                    <div class=\"contenedor\">\n                        <div class=\"columna\"><\/div>\n                        <div class=\"botones\"><\/div>\n                        <div class=\"columna\">\n                            <div class=\"row\">\n                                <div class=\"col-md-12 col-sm-12 mt-1\">\n                                    <label class=\"checkboxs\">Show only matching ones                                        <input type=\"checkbox\" id=\"check-is-exclusionary\" value=\"\" checked=\"checked\">\n                                        <span class=\"checkmark\"><\/span>\n                                    <\/label>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"card\" id=\"card-resultado\">\n            <div class=\"card-body\">\n                <div id=\"tables_container\" class=\"row\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div id=\"diagnostic_suggestions_details_modal\">\n        \n    <\/div>\n<\/div>\n<script>\n    const asignTableAncleTagToOpenModal = function(ancle_tag) {\n        ancle_tag.on(\"click\", function(event) {\n            event.preventDefault();\n            const queryParams = this.href.split('?')[1].split('&');\n            const eje = queryParams[0];\n            const id = queryParams[1];\n            $.ajax({\n                url: 'http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-admin\/admin-ajax.php',\n                data: {\n                    action: 'get_eje_with_relations',\n                    id: id,\n                    eje: eje,\n                    lang: '',\n                },\n                type: 'post',\n                dataType: 'JSON',\n                success: function(response, status, jqXHR) {\n                    if (!response) {\n                        return;\n                    }\n\n                    if(response.view){\n                        $('#diagnostic_suggestions_details_modal').empty().html(response.view);\n                    }\n                },\n                error: function(jqXHR, textStatus, errorText) {\n                    console.error('Error ::', textStatus, errorText);\n                    console.log('Details error :: ', jqXHR);\n                }\n            });\n        });\n    }\n<\/script>\n<script>\n    jQuery(document).ajaxSend(function(event, request, options) {\n        $(\"#blocker\").removeClass('hidden');\n    });\n\n    jQuery(document).ajaxComplete(function(event, request, options) {\n        $(\"#blocker\").addClass('hidden');\n    });\n\n    jQuery(document).ready(function($) {\n        $(\"#check-is-exclusionary\").on(\"change\", function() {\n            diagnosticSuggestionsQuery(document.getElementById(\"lista-derecha\"));\n        });\n\n        let list_data;\n\n        const asignOddOrEvenToList = (list_id) => {\n            $(list_id).each((i, e) => {\n                if ($(e).hasClass(\"odd\")) {\n                    $(e).removeClass(\"odd\")\n                }\n                if ($(e).hasClass(\"even\")) {\n                    $(e).removeClass(\"even\")\n                }\n                var item_class = (i % 2 == 0) ? 'odd' : 'even';\n                $(e).addClass(item_class);\n            });\n        }\n\n        const initList = (id, entries) => {\n            entries.forEach((element) => {\n                let li = `<li id=\"${element.id}\">${element.link} <span>${element.tag}<\/span><\/li>`;\n                li = $(li);\n                asignTableAncleTagToOpenModal(li.find('a').first());\n                $(id).append(li);\n            });\n            asignOddOrEvenToList(id.concat(' li'));\n        }\n\n        \/\/ Funci\u00f3n debounce\n        const debounce = (func, wait, args) => {\n            let timeout;\n            return function() {\n                args.input = this;\n                clearTimeout(timeout);\n                timeout = setTimeout(() => {\n                    func.call(this, args);\n                }, wait);\n            };\n        }\n\n        const filterOnList = (args) => {\n            \/\/ Tratar los items basado en el texto\n            let criterial = $(args.input).val().toLowerCase();\n            $(args.id).each((i, e) => {\n                let value = e.textContent.toLowerCase();\n                if (value.includes(criterial)) {\n                    $(e).show()\n                } else {\n                    $(e).hide()\n                }\n\n            })\n        }\n\n        const debounceFilterListOrigin = debounce(filterOnList, 300, {\n            id: '#lista-izquierda li'\n        });\n\n        const debounceFilterListSelection = debounce(filterOnList, 300, {\n            id: '#lista-derecha li'\n        });\n\n        let ajaxPetitionObserver = null\n        const diagnosticSuggestionsQuery = function(ul) {\n            var ids = [];\n            if (ul.hasChildNodes()) {\n                for (const child of ul.children) {\n                    ids.push(child.id);\n                }\n                if (ajaxPetitionObserver) {\n                    ajaxPetitionObserver.abort();\n                }\n                let check_value = $(\"#check-is-exclusionary\").is(\":checked\");\n                ajaxPetitionObserver = $.ajax({\n                    url: 'http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'load_all_diagnostic_suggestions_by_ids',\n                        ids: ids,\n                        is_exclusionary: check_value\n                    },\n                    success: function(response) {\n                        $('#tables_container').empty().html(response);\n\n                    }\n                });\n            }\n        }\n        const observer = new MutationObserver((mutationList, observe) => {\n            var ul = mutationList[0].target;\n            diagnosticSuggestionsQuery(ul);\n\n        })\n        observer.observe($(\"#lista-derecha\")[0], {\n            childList: true,\n            subtree: true\n        })\n\n        $.ajax({\n            url: 'http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-admin\/admin-ajax.php',\n            type: 'POST',\n            dataType: 'JSON',\n            data: {\n                action: 'load_all_diagnostic_manifestations'\n            },\n            success: function(response) {\n                if (response && response.success) {\n                    list_data = response.data;\n                    initList('#lista-izquierda', list_data);\n                }\n            },\n            error: function(jqXHR, textStatus, errorText) {\n                console.error('Error ::', textStatus, errorText);\n                console.log('Details error :: ', jqXHR);\n            }\n        });\n\n        $(\"#btn-izquierda-a-derecha\").click(function() {\n            $(\"#lista-izquierda li\").each(function() {\n                if ($(this).hasClass(\"seleccionado\")) {\n                    $(this).removeClass(\"seleccionado\").show().appendTo(\"#lista-derecha\");\n                }\n            });\n            asignOddOrEvenToList('#lista-izquierda li');\n            asignOddOrEvenToList('#lista-derecha li');\n        });\n\n        \/\/ Mover elementos de derecha a izquierda\n        $(\"#btn-derecha-a-izquierda\").click(function() {\n            $(\"#lista-derecha li\").each(function() {\n                if ($(this).hasClass(\"seleccionado\")) {\n                    $(this).removeClass(\"seleccionado\").show().appendTo(\"#lista-izquierda\");\n                }\n            });\n            asignOddOrEvenToList('#lista-izquierda li');\n            asignOddOrEvenToList('#lista-derecha li');\n        });\n\n        $('#btn-reset').click(function() {\n            $(\"#lista-derecha li\").each(function() {\n                $(this).removeClass(\"seleccionado\").show().appendTo(\"#lista-izquierda\");\n            });\n            asignOddOrEvenToList('#lista-izquierda li');\n            asignOddOrEvenToList('#lista-derecha li');\n\n            const element = document.querySelector('#filter_suggestions_result');\n\n            element.value = '';\n            element.dispatchEvent(new Event('input', {\n                bubbles: true,\n            }));\n        });\n\n        \/\/ Manejar la selecci\u00f3n de elementos\n        $(\"#lista-izquierda, #lista-derecha\").on(\"click\", \"li\", function() {\n            $(this).toggleClass(\"seleccionado\");\n        });\n\n        $(\"#filter_suggestions\").on('input', debounceFilterListOrigin);\n        $(\"#filter_suggestions_result\").on('input', debounceFilterListSelection);\n\n        \/**\n         * Utility for clearing input fields.\n         * ATIC-418\n         *\/\n        const ClearModule = (function(){\n            \/**\n             * Triggers an 'input' event on the specified element to restore any associated functionality.\n             * @private\n             * @param {HTMLElement} element - The HTML element to trigger the event on.\n            *\/\n            function _restore(element) {\n                const event = new Event('input', {\n                    bubbles: true,\n                });\n\n                element.dispatchEvent(event);\n            }\n\n            \/**\n             * Clear input\n             * @private\n             *\/\n            function _clear(selector) {\n                const element = document.querySelector(selector);\n\n                element.value = '';\n                _restore(element)\n            }\n\n            \/**\n            * Adds an event listener to the specified selector that toggles the display of the given element based on the input value\n            * @private\n            * @param {string} selector - The CSS selector for the input field to listen for input events\n            * @param {string} element - The CSS selector for the element whose display will be toggled\n            *\/\n            function _onFilter(selector, element) {\n                document.querySelector(selector).addEventListener('input', (event) => {\n                    const target = event.target;\n                    const input = document.querySelector(element);\n\n                    if (target.value) {\n                        input.style.display = 'block';\n                    } else {\n                        input.style.display = 'none';\n                    }\n                });\n            }\n\n            \/**\n            * Handles the click event to clear input fields based on the data-type attribute of the clicked element\n            * @private\n            * @param {Event} event - The click event object\n            *\/\n            function _onClear(event) {\n                const target = event.target;\n                const type = target.dataset.type;\n                const types = {\n                    'list-of-demonstrations': 'input#filter_suggestions',\n                    'list-of-manifestations-detected': 'input#filter_suggestions_result'\n                }\n\n                _clear(types[type]);\n            }\n\n            \/**\n            * Initializes the ClearModule by adding event listeners to toggle clear buttons and clear input fields\n            * @public\n            *\/\n            function init() {\n                \/\/ Event listeners for toggle clear buttons\n                _onFilter('input#filter_suggestions', '#clear');\n                _onFilter('input#filter_suggestions_result', '#another-clear');\n\n                \/\/ Event listeners to clear buttons\n                document.querySelector('#clear').addEventListener('click', _onClear)\n                document.querySelector('#another-clear').addEventListener('click', _onClear)\n            }\n\n            return {\n                init: init\n            }\n        })();\n\n        ClearModule.init();\n    });\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-customs-blocks.php","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/pages\/153"}],"collection":[{"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":1,"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":154,"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/pages\/153\/revisions\/154"}],"wp:attachment":[{"href":"http:\/\/server3.testwalking.com\/test\/atic-wp\/wp-json\/wp\/v2\/media?parent=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}