FTTH/src/FTTHBundle/Resources/views/ONU/form.html.twig

{% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}


{% block formactions %}
    {{ parent() }}

    <script src="{{ asset('bundles/baseadmin') }}/ace_editor/src-noconflict/ace.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="{{ asset('bundles/baseadmin') }}/ace_editor/textarea-as-ace-editor.js" type="text/javascript"
            charset="utf-8"></script>

    <style type="text/css" media="screen">
        .ace_editor {
            height: 450px !important;
            border: 1px solid #CCCCCC;
        }
    </style>

    <script type="text/javascript">
        var modificacion = false;
        $(function () {
            // buscar la direccion del cliente y la muestra en el mapa.
            var objSelectClient = $('input:hidden[id="{{ admin.uniqid }}_clientId"]');

            if (objSelectClient.val() != "" &&
                !isNaN(objSelectClient.val()) &&
                parseInt(objSelectClient.val()) > 0) {
                modificacion = true;
                var extradata = $('textarea[id="{{ admin.uniqid }}_extraData"]').val();
                try {
                    extradata = JSON.parse(extradata);
                    if (extradata.lat == undefined || extradata.lng == undefined) {
                        extradata = null;
                    }
                } catch (ignore) {
                    extradata = null;
                }
                if (extradata) {
                    drawMap(extradata.lat, extradata.lng);
                    calcularDistanciaNap();
                    $('input[class="search-input"]').val(extradata.address);
                } else {
                    // no hay direcciones cargadas, entonces la busco desde el cliente
                    callbackClientId(objSelectClient.val());
                }
            } else {
                if (_MAP_LATITUDE == 0 && _MAP_LONGITUDE == 0) {
                    setCoordinatesFromConfig(true);
                } else {
                    drawMap(_MAP_LATITUDE, _MAP_LONGITUDE);
                }
                $("div[id*='_nap']").find(".select2-chosen").html("");
                $("select[id*='_nap']").val(0);
            }

            $("textarea").asAceEditor();
            editor = $('textarea').data('ace-editor');

            editor.setTheme("ace/theme/github");
            editor.getSession().setMode("ace/mode/json");
            editor.setFontSize(14);
            editor.setShowInvisibles(true);
            editor.getSession().setTabSize(2);
            editor.getSession().setUseSoftTabs(true);
            editor.getSession().setUseWrapMode(true);
            editor.setShowPrintMargin(false);

        });

        // Al seleccionar una OLT se muestra la config avanzada
        // según la marca del modelo
        function ajax_olt_model_mark() {
            var olt = $('[id="{{ admin.uniqid }}_olt"]').val();
            $.ajax({
                url: '{{ path('ajax_olt_model_mark') }}',
                type: 'POST',
                data: {
                    id: olt
                },
                success: function (result) {
                    if(result.mark !== 'ERROR') {
                        $('.olt_mark').addClass('hidden');
                        $('.' + result.mark).removeClass('hidden');
                        $("div." + result.mark + " div div.box-header h4.box-title").html(result.mark);

                        // FiberHome and FiberLink have vlans but in FiberHome vlans is required (at least vlanid_data)
                        if(result.mark === 'FiberHome') {
                            $('#{{ admin.uniqid ~ "_vlans" }}').attr('required',true)
                            $("label[for='{{ admin.uniqid ~ '_vlans' }}']").addClass('required');
                        } else {
                            $('#{{ admin.uniqid ~ "_vlans" }}').attr('required',false)
                            $("label[for='{{ admin.uniqid ~ '_vlans' }}']").removeClass('required');
                        }
                        
                        $('.zte_v4').addClass('hidden');
                        // El modelo de OLT es ZTE V4, entonces muestro los campos
                        if (result.name.includes('ZTE') && result.name.includes('V4')) {
                            $('.zte_v4').removeClass('hidden');
                        }
                    }
                }
            });
        }

        // ajax_olt_model_mark();
        {#$('[id="{{ admin.uniqid }}_olt"]').on('click', ajax_olt_model_mark);#}

        {# Se chequea la position si esta libre, según el nap seleccionado #}

        $('#{{ admin.uniqid ~ "_position" }}').on('change', checkPosition);

        function checkPosition() {
            $('#{{ admin.uniqid ~ "_position" }}').parent().find('#error_position').remove();
            var $position = $('#{{ admin.uniqid ~ "_position" }}').val();
            var $nap = $('#{{ admin.uniqid ~ "_nap" }}').val();
            if ($position && $nap) {
                $.ajax({
                    url: '{{ path('ajax_check_position') }}',
                    type: 'POST',
                    data: {
                        position: $position,
                        nap: $nap,
                    },
                    async: false,
                    success: function (data) {
                        if (data.result === 'error') {
                            message = '{{ 'error_onu_position'|trans({}, 'FTTHBundle') }}';
                            div = '<div id="error_position" class="alert alert-danger alert-dismissable">\
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
                                + message + '</div>'
                            $('#{{ admin.uniqid ~ "_position" }}').parent().append(div);
                        }
                    }
                });
            }
        }

        function callbackClientId(clientId) {
            $.ajax({
                url: '{{ path('ajax_client_data') }}',
                dataType: 'json',
                delay: 250,
                data: {
                    q: clientId
                }
            }).done(function (data) {
                var extradata = null;
                if (data.results[0].location) {
                    try {
                        extradata = JSON.parse(data.results[0].location.extraData);
                        if (extradata.lat == undefined || extradata.lng == undefined) {
                            extradata = null;
                        }
                    } catch (ignore) {
                    }
                }
                if (extradata === null) {
                    googleSearchDirectionAndShowMaps(data.results[0].address);
                } else {
                    $('input[class="search-input"]').val(data.results[0].address);
                    drawMap(extradata.lat, extradata.lng);
                }
                calcularDistanciaNap();
            });
        }

        /**
         * funcion que busca una direccion y la muestra en el mapa.
         * @param address Contiene la direccion.
         */
        function googleSearchDirectionAndShowMaps(address) {
            $('input[class="search-input"]').val(address);
            $.ajax({
                url: "https://maps.googleapis.com/maps/api/geocode/json?address='" + address + "'&key=AIzaSyDYPe_h1T_5ThFNZukx05FJY21IAejj_LA",
                type: "POST"
            }).done(function (res) {
                if (res != undefined && res.status == google.maps.GeocoderStatus.OK) {
                    drawMap(res.results[0].geometry.location.lat, res.results[0].geometry.location.lng);
                } else {
                    // direccion no encontrada por google
                    var msg = "{{ 'error.address_not_found'|trans({}, 'FTTHBundle') }}";
                    showError(msg.replace('%client_address%', address));
                }
            }).error(function (res) {
                // direccion no encontrada por google, esto se puede deber a la cantidad de consultas que se
                // realizan al webservice de google
            });
        }

        /**
         * Funcion que dibuja el mapa.
         * @param lat
         * @param lng
         */
        function drawMap(lat, lng) {
            loc = new L.latLng(lat, lng);
            drawMarker();
            setDataValue();
        }

        /**
         * Busca y calcula la distancia a los nap y la cantidad de puertos libres.
         */
        function calcularDistanciaNap() {
            var origin = null;
            try {
                origin = JSON.parse($("input[id*='_location_extraData']").attr('value'));
            } catch (ignore) {
            }
            if (origin != null) {
                $.ajax({
                    url: '{{ path('ajax_distance_nap_onu') }}',
                    dataType: 'json',
                    type: "GET",
                    data: {
                        lat: origin.lat,
                        lng: origin.lng,
                        napId: modificacion ? $("select[id*='_nap']").val() : 0
                    }
                }).done(function (res) {
                    var select = $("select[id*='_nap']");
                    var span = $("div[id*='_nap']").find(".select2-chosen");
                    var codigoNap = select.val(), nap = "";
                    span.html("");
                    select.find("option").remove().end();
                    $.each(res, function (i, obj) {
                        obj = JSON.parse(obj);
                        for (var i = 0; i < obj.length; i++) {
                            if (obj[i].distance != -1) {
                                var tmp = obj[i].name +
                                    " ({{ 'Free Port'|trans({}, 'FTTHBundle') }}: " + obj[i].freePort + " - " +
                                    "OLT: " + obj[i].olt + " - " +
                                    "Slot: " + obj[i].slot + " - " +
                                    "Link: " + obj[i].link + " - " +
                                    "{{ 'Distance'|trans({}, 'FTTHBundle') }}: " + obj[i].distance + " KM. - " +
                                    "{{ 'Address'|trans({}, 'FTTHBundle') }}: " + obj[i].address + " )";
                                select.append(
                                    '<option value="' + obj[i].id + '" >' + tmp +
                                    '</option>'
                                );
                                if (codigoNap == obj[i].id) {
                                    nap = tmp;
                                }
                            }
                        }
                        for (var i = 0; i < obj.length; i++) {
                            if (obj[i].distance == -1) {
                                var tmp = obj[i].name + " ({{ 'Free Port'|trans({}, 'FTTHBundle') }}: " + obj[i].freePort + " - ";
                                tmp +=
                                    "OLT: " + obj[i].olt + " - " +
                                    "Slot: " + obj[i].slot + " - " +
                                    "Link: " + obj[i].link + " - ";
                                tmp += "{{ 'Distance'|trans({}, 'FTTHBundle') }}: " + obj[i].distanceMessage;
                                if (obj[i].address != null && obj[i].address.length > 0) {
                                    tmp += " - {{ 'Address'|trans({}, 'FTTHBundle') }}: " + obj[i].address;
                                }
                                tmp += ")";
                                select.append(
                                    '<option value="' + obj[i].id + '" >' + tmp +
                                    '</option>'
                                );
                                if (codigoNap == obj[i].id) {
                                    nap = tmp;
                                }
                            }
                        }
                    });
                    span.html(nap);
                    select.val(codigoNap);
                });
            }
        }


        // Al cambiar un valor de ONU Template se envía como parámetro el id
        // y se recarga la página
        function onuTemplateReloadPage() {
            if ($('#{{ admin.uniqid  ~ "_onuTemplate" }}')) {
                var onuTemplateId = $('#{{ admin.uniqid  ~ "_onuTemplate" }}').val();
                var url = '{{ path('admin_ftth_onu_create') }}';
                if (onuTemplateId) {
                    var parameters = ['onu_template=' + onuTemplateId];
                    if (window.location.href.includes('?')) {
                        var pieces = window.location.href.split('?');
                        var parametersSplit = pieces[1].split('&');
                        for (var i = 0; i < parametersSplit.length; i++) {
                            var parameter = parametersSplit[i].split('=');
                            if (parameter[0] != 'onu_template') {
                                parameters.push(parametersSplit[i]);
                            }
                        }
                    }
                    window.location = url + '?' + parameters.join('&');
                }
            }
        }

        $('#{{ admin.uniqid  ~ "_onuTemplate" }}').on('change', onuTemplateReloadPage);

        // Al seleccionar un NAP se selecciona la OLT y se debe cargar la configuracion avanzada
        function ajax_nap_olt() {
            var nap = $('[id="{{ admin.uniqid }}_nap"]').val();
            $.ajax({
                url: '{{ path('ajax_nap_olt') }}',
                dataType: 'json',
                type: "GET",
                data: {
                    id: nap
                },
                success: function (result) {
                    if (result && result.result > 0) {
                        $('[id="{{ admin.uniqid }}_olt"]').val(result.result);
                        ajax_olt_model_mark();
                    } else {
                        var msg = "{{ 'error.nap_relation_olt_not_found'|trans({}, 'FTTHBundle') }}";
                        showError(msg);
                    }
                }
            });
        }

        $('[id="{{ admin.uniqid }}_nap"]').on('click', ajax_nap_olt);
        ajax_nap_olt();
        ajax_olt_model_mark();

        function checkLengthPonSerialNumber() {
            var obj = $('[id="{{ admin.uniqid }}_ponSerialNumber"]');
            var objClas = $('[required="required"][class*="form-group"][id*="ponSerialNumber"]');
            var pon = obj.val();
            var claseError = " has-error";
            var clas = objClas.attr('class');
            if (pon && (pon.length == 12 || pon.length == 16)) {
                objClas.attr('class', objClas.attr('class').replace(claseError, ""));
            } else {
                // addClassError(id, claseError);
                if (clas.indexOf(claseError) === -1) {
                    objClas.attr('class', clas + claseError);
                }
            }
        }

        $('[id="{{ admin.uniqid }}_ponSerialNumber"]').on('blur', checkLengthPonSerialNumber);

        function addAddressToExtraData(){
            var address = $('input[class="search-input"]').val();
            var extradata = $('textarea[id="{{ admin.uniqid }}_extraData"]').val();
            try {
                extradata = JSON.parse(extradata);
                extradata.address = address;
                $('textarea[id="{{ admin.uniqid }}_extraData"]').val(JSON.stringify(extradata));
            } catch (ignore) {
            }
        }


        $('#{{ admin.uniqid ~ "_radiusAuth" }}').on('change', function() {
            validateMac();
        });
        
        $('#{{ admin.uniqid ~ "_mac" }}').on('change', function() {
            validateMac();
        });

        function validateMac() {
            let uniqid = '{{ admin.uniqid }}';
            
            let radiusAuth = $(`#${uniqid}_radiusAuth`).val();
            let macObj = $(`#${uniqid}_mac`);
            let macLabel = $(`label[for=${uniqid}_mac]`);
            let macDiv = $(`#sonata-ba-field-container-${uniqid}_mac`);

            macObj.attr('placeholder','cafecafecafe');
            if(radiusAuth === 'mac') {
                if(macObj.val().length != 12) {
                    macDiv.addClass("has-error");
                } else {
                    macDiv.removeClass("has-error");
                }

                macObj.attr('maxlength',12);
                macObj.attr('minlength',12);
                macObj.attr('required','required');
                macDiv.attr('required','required');
                macLabel.addClass('required');
            } else {
                macObj.removeAttr("maxlength");
                macObj.removeAttr("minlength");
                macObj.removeAttr("required");
                macDiv.removeAttr("required");
                macLabel.removeClass('required');
            }
        }

        validateMac();

    </script>

{% endblock %}