home.html

{% extends "base.html" %}
{% load staticfiles clima_tags %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/leaflet-search.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/L.Icon.Pulse.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/leaflet-clima.css' %}">

    <style>
        .class_spinner {
            cursor: wait;
        }
    </style>

{% endblock %}

{% block content %}
    {% get_config_subdomain request.build_absolute_uri as SUBDOMAIN %}
    <div class="container-fluid full-height">
        {% block navbar-li %}
            <li class="dropdown stations_dropdown" id="stations_dropdown">
                <a href="#0" class="dropdown-toggle nav-item-iconic"
                   style="font-family: 'Open Sans',Helvetica,Arial,sans-serif;" id="stations-dropdown"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span title="Estaciones" class="fa fa-arrow">Estaciones</span>
                    <span class="caret"></span>
                </a>

                <ul class="dropdown-menu stations_dropdown_opt" role="menu" aria-labelledby="stations-dropdown"
                    id="ul_stations_dropdown">

                </ul>
            </li>
        {% endblock %}

        <div class="col-sm-4 col-md-4 station-map-row" id="map_container">
            <div id="mapid" class="card-pf card-pf-accented card-pf-aggregate-status"
                 style="height:100%;width:100%;position:absolute;z-index: 0;"></div>

            <div id="toggle_map" class="hide" style="position:absolute;z-index:2;top:5;right:0;">
                <button class="btn btn-primary btn-lg" id="btn_min"><i class="fa fa-window-minimize" id="btn_min-icon"
                                                                       aria-hidden="true"></i></button>
                <button class="btn btn-primary btn-lg" id="btn_map"><i class="fa fa-window-restore" id="btn_map-icon"
                                                                       aria-hidden="true"></i></button>
                <button class="btn btn-primary btn-lg" id="btn_max"><i class="fa fa-window-maximize" id="btn_max-icon"
                                                                       aria-hidden="true"></i></button>
            </div>
            {% for layer in filter_layer %}
                <div id="{{layer.id}}_scale"
                style="position:absolute;z-index:2; bottom:350px;right:0px; font-size:1.1em;" class="hide">
                <div class="dropdown-menu-left">
                    <ul style="list-style: none;">
                        {% for icon in layer.ranges.all%}
                        <li class="dropdown-item" style="background-color: #{{icon.color}};">{{icon.help_text}}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endfor %}
            <div id="legend"
            style="background-color:rgba(240,240,240,.5);position:absolute;z-index:2; bottom:100px;right:0px;">
                <div class="dropdown-menu-left">
                    <ul>
                        <li class="dropdown-item" style="color: red;">Equipo Desconectado</li>
                        <li class="dropdown-item" style="color: orange; padding-right: 15px">Equipo
                            Desactualizado&nbsp;
                        </li>
                        <li class="dropdown-item" style="color: green;">Equipo Conectado</li>
                    </ul>
                </div>
            </div>
            <hr>
        </div>
        <img src="" alt="" id="signal_gif" style="height: 20px; visibility:  hidden;" alt=""/>

        <div id="modules_container" class="col-sm-8 col-md-8 modules_container">
            No hay estación seleccionada.
        </div>

    </div><!-- /container -->

    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
            integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
            crossorigin=""></script>

    <script src="{% static 'js/leaflet-search.min.js' %}"></script>
    <script src="{% static 'js/L.Icon.Pulse.js' %}"></script>
    <script src="{% static 'js/leaflet-print.min.js' %}"></script>
    <script src="{% static 'js/leaflet-select-layers.min.js' %}"></script>
    <script src="{% static 'js/leaflet-marker-text.js' %}"></script>
    <script src="{% static 'js/leaflet-clima.js' %}"></script>

    <script>
        var station_selected = false;
        var station = "";
        var mymap;
        var markersLayer;
        var rain_marker_layers;
        var none_layers;


        function getModules(station_id) {
            $('#modules_container').html("Actualizando valores <span class=\"fa fa-spin fa-spinner fa-3x\"></span>");
            $.ajax({
                url: "{% url 'get_modules' %}", // the endpoint
                type: "GET", // http method
                csrfmiddlewaretoken: '{{ csrf_token }}',
                data: {
                    'station_id': station_id
                },
                success: function (result) {
                    stations = result;
                    $('#modules_container').html(result);
                },
                error: function (error, hrx) {
                    console.log(error);
                    console.log(hrx);
                    $('#modules_container').html("Se produjo un error. Consulte nuevamente.");
                }
            });
        }

        $("#modules_container").on('click', '#btn-invitation', function () {
            $('#invitation').modal("show")
            $("#stationspi option[value='1']").attr("selected", "selected");
            $("#stationspi").selectpicker("refresh")
        })

        $('#btn_max').click(function () {
            interfaceMaxChange();
            mymap.invalidateSize();
        });

        $('#btn_min').click(function () {
            $('#btn_map-icon').removeClass('fa-window-restore').addClass('fa-map');
            $('#btn_map').show();
            $('#btn_min').hide();
            $('#btn_max').hide();
            $('#legend').hide();
            $("#mapid").hide();
            $("#map_container").animate({width: '1%'});
            resizeWidgetsToFullScreen();
            restartWidgets();
        });

        $('#btn_map').click(function (isinitial) {
            $("#mapid").show();
            resizeWidgetsToHalfScreen();
            //restartWidgets();
            setMapToThirdScreen();
            $('#btn_map').hide();
            $('#btn_min').show();
            $('#btn_max').show();
            $('#legend').show();
            try {
                restartWidgets();
            } catch (e) {

            }
        });

        /*
        $('#toggle_map').click(function() {

            if(mapClosed){
                $("#map_container").animate({width:'33.33%'});
                $("#mapid").show();
                resizeWidgetsToHalfScreen();
                restartWidgets();

                $("#map-toggle-icon").addClass('fa-thumb-tack').removeClass('fa-angle-right');
                mapClosed = false;
            }
            else{
                $("#map_container").animate({width:'1%'}, 1000, function functionName() {
                    $("#mapid").hide();
                    resizeWidgetsToFullScreen();
                    restartWidgets();
                    $("#map-toggle-icon").addClass('fa-angle-right').removeClass('fa-thumb-tack');
                });
                mapClosed = true;
            }
        });
        */

        function interfaceMaxChange() {
            $('#btn_max').hide();
            $('#btn_map-icon').removeClass('fa-map').addClass('fa-window-restore');
            $('#btn_map').show();
            $('#btn_min').show();
            setMapToFullScreen();
            $('#modules_container').hide();
        }

        function resizeWidgetsToFullScreen() {
            $("#map_container").css('position', 'absolute');
            $('#modules_container').show();
            $('#modules_container').addClass('col-md-12').removeClass('col-md-8');
            // Making all the widgets in teh widget_container.html got from a 3 column grid, to a 4 column one
            $('.clima-widget1').addClass('col-md-2').removeClass('col-md-3');
            $('.clima-widget2').addClass('col-md-4').removeClass('col-md-6');
            $('.clima-widget3').addClass('col-md-6').removeClass('col-md-9');
            $('.clima-widget4').addClass('col-md-8').removeClass('col-md-12');
        }


        function resizeWidgetsToHalfScreen() {
            $("#map_container").css('position', 'relative');
            $('#modules_container').addClass('col-md-8').removeClass('col-md-12');
            $('#modules_container').show();
            // All the widgets go back to 3
            $('.clima-widget1').addClass('col-md-3').removeClass('col-md-2');
            $('.clima-widget2').addClass('col-md-6').removeClass('col-md-4');
            $('.clima-widget3').addClass('col-md-9').removeClass('col-md-6');
            $('.clima-widget4').addClass('col-md-12').removeClass('col-md-8');
        }

        function setMapToFullScreen() {
            $("#map_container").css('position', 'absolute');
            $("#map_container").css('width', '96%');
            $('#modules_container').hide();
        }

        function setMapToThirdScreen() {
            $("#map_container").animate({width: 'inherit'});
            $("#map_container").css('position', '');
            $("#map_container").css('width', '');
            $("#map_container").addClass('col-sm-4 col-md-4');
            $("#toggle_map").show();
            $('#modules_container').show();
        }

        function put_measures_on_map() {
            /*
                Put layer icon on map
            */
            var markerLayers = {
                'Mostrar Estaciones': markersLayer,
            };

            var overlayMaps = {
                "No mostrar valores": none_layers,
            };

            $.ajax({
                url: "{% url 'get_on_map_measures' %}",
                type: "GET",
                csrfmiddlewaretoken: '{{ csrf_token }}',
                dataType: "json",
                success: function (result) {
                    // the response is {title:[{},{}]}
                    for(var title in result){
                        var layers = new L.LayerGroup();
                        for (var i = 0; i < result[title].length; i++) {
                            console.log(title)
                            var station_icon = result[title][i]
                            //layers._layers._leaflet_id =
                            var icon = L.icon({
                                iconUrl: station_icon.url,
                                iconSize: [14, 20],
                                iconAnchor: [7, 14],
                                popupAnchor: [0, 0],
                            });
                            var marker = new L.marker([parseFloat(station_icon.lat), parseFloat(station_icon.long)],{
                                title: station_icon.station_title,
                                icon: icon,
                            });
                            layers.addLayer(marker)
                            // create new variable to access scale id
                            layers.scale_id = station_icon.id;
                        }
                        overlayMaps[title] = layers;

                        // add scale
                        layers.on('add', (e)=>{
                            var id = e.target.scale_id;
                            $(`#${id}_scale`).removeClass('hide')
                        });

                        // remove scale
                        layers.on('remove ', (e)=>{
                            var id = e.target.scale_id;
                            $(`#${id}_scale`).addClass('hide')
                        });
                    }
                    var control_markers = L.control.togglerIcon(overlayMaps, markerLayers, {
                        position: 'topleft',
                        togglerClassName: 'leaflet-marker-selector scale',
                        value:'asd'
                    })
                    control_markers.addTo(mymap);
                    $(".leaflet-control-layers").css('text-align', 'left');
                },
                error: function (a, b) {
                    console.log(a)
                    console.log(b)
                }
            })
        }

        $(document).ready(function () {
            markersLayer = new L.LayerGroup();
            none_layers = new L.LayerGroup();
            var stations = [];
            var fullmap = false;
            var currentMarker = new L.marker();
            var map_color = {0: 'green', 1: 'orange', 2: 'red'};
            $.ajax({
                url: "/api/stations", // the endpoint
                type: "GET", // http method
                csrfmiddlewaretoken: '{{ csrf_token }}',
                data: {},
                success: function (result) {
                    stations = result;
                    for (var j = 0; j < stations.length; j++) {
                        $("#ul_stations_dropdown").append('<li role="presentation" onclick="getModules(' + stations[j].id + ')"><a style="color:white;" role="menuitem" tabindex="-1" href="#">' + stations[j].title + '</a></li>')
                    }
                    $("#toggle_map").removeClass('hide');
                    if (stations.length == 1) {
                        getModules(stations[0].id);
                        $('#btn_map').click();

                    }
                    if (stations.length >= 2) {
                        interfaceMaxChange();
                    }
                    mymap = L.map('mapid', {zoomControl: false})

                    mymap.setView([-31.3993438, -64.3344309], 1);

                    var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                        maxZoom: 15,
                        zoomControl: false,
                    }).addTo(mymap);

                    var topo_map = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
                        maxZoom: 17,
                        attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
                    });

                    var esri_map = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
                    });


                    {% if SUBDOMAIN  %}
                        mymap.flyTo([{{ SUBDOMAIN.latitude|convert_to_points }}, {{ SUBDOMAIN.longitude|convert_to_points }}], {{ SUBDOMAIN.init_zoom }}, {
                            animate: true,
                            duration: 5,
                            easeLinearity: .5
                        });
                    {% else %}
                        mymap.flyTo([-31.3993438, -64.3344309], 6, {animate: true, duration: 5, easeLinearity: .5});
                    {% endif %}

                    markersLayer.addTo(mymap);
                    none_layers.addTo(mymap);

                    setTimeout(function () {

                        put_measures_on_map();

                        for (var i = 0; i < result.length; i++) {
                            station = result[i];
                            var circleIcon = L.divIcon({
                                className: function () {
                                    switch (station.status) {
                                        case 0:
                                            return "circle_green"
                                            break;
                                        case 1:
                                            return "circle_orange"
                                            break;
                                        case 2:
                                            return "circle_red"
                                            break;
                                        default:
                                            return "circle_red"
                                    }
                                }(), iconSize: [8, 8]
                            });

                            var marker = new L.marker([station.latitude, station.longitude], {
                                icon: circleIcon,
                                zIndexOffset: 500,
                                title: station.title + ' (' + station.code + ')'
                            }).bindPopup(station.title, {closeButton: false});//.addTo(mymap);

                            markersLayer.addLayer(marker);
                            marker.title = station.title;
                            marker.color = station.status;
                            marker.code = station.code;
                            marker.station_id = station.id;
                            marker.latitude = station.latitude;
                            marker.longitude = station.longitude;
                            marker.selected = false;
                            marker.on('click', function () {
                                station_selected = true;
                                //station = this.code;
                                $("#toggle_map").removeClass('hide');
                                $('#stationspi').selectpicker('val', [this.station_id]);
                                // Here we set everything back to normal, notice the invalidateSize, it necesarry for leaflet to realize the size has changed
                                $('#btn_map').click();
                                mymap.invalidateSize();
                                mymap.flyTo([this.latitude, this.longitude], 14, {
                                    animate: false,
                                    duration: 3,
                                    easeLinearity: .5
                                });

                                getModules(this.station_id);

                                currentMarker.setIcon(L.divIcon({
                                    className: function () {
                                        switch (currentMarker.color) {
                                            case 0:
                                                return "circle_green"
                                                break;
                                            case 1:
                                                return "circle_orange"
                                                break;
                                            case 2:
                                                return "circle_red"
                                                break;
                                            default:
                                                return "circle_red"
                                        }
                                    }(), iconSize: [8, 8]
                                }));

                                var signalIcon = L.icon.pulse({
                                    iconSize: [10, 10], color: map_color[this.color],
                                    fillColor: map_color[this.color]
                                });

                                this.setIcon(signalIcon);
                                currentMarker = this;

                            });
                            console.log("Estacion seleccionada: {{ station_selected }}")
                            if (marker.station_id =={{ station_selected }}) {
                                //setTimeout(function(){
                                marker.fire('click');
                                //},500);
                            }
                        }

                        var controlSearch = new L.Control.Search({
                            collapsed: false,
                            position: 'topleft',
                            layer: markersLayer,
                            initial: false,
                            zoom: 12,
                            marker: false,
                            textPlaceholder: 'Buscar...',
                            textErr: 'No se encontro la estacion.',
                        });

                        controlSearch.on('search:locationfound', function (result) {
                            currentMarker = result.layer;
                            //currentMarker.setIcon(signalIcon);
                            currentMarker.openPopup();
                            currentMarker.fire('click');
                            mymap.fireEvent('click', currentMarker);

                        })

                        mymap.addControl(controlSearch);

                        var printer = L.easyPrint({
                            sizeModes: ['A4Portrait'],
                            filename: 'print_map',
                            exportOnly: true,
                            hideControlContainer: true,
                            customSpinnerClass: 'class_spinner',
                            position: 'topright'
                        }).addTo(mymap);

                        var baseLayers = {
                            "Open Street Map": osm_map,
                            "Topográfico": topo_map,
                            "ESRI": esri_map,
                        };

                        //var control = L.Control.SelectLayers(baseLayers,overlayMaps,{position:'topleft'})
                        var control_base = L.control.togglerIcon(baseLayers, null, {
                            position: 'topleft',
                            togglerClassName: 'leaflet-layer-selector'
                        })
                        control_base.addTo(mymap);

                        {% if SUBDOMAIN and SUBDOMAIN.kml %}

                            var kmzUrl = '{{ SUBDOMAIN.kml.url }}';

                            if (kmzUrl.endsWith('kml')) {
                                omnivore.kml(kmzUrl).addTo(mymap);
                            } else {
                                JSZipUtils.getBinaryContent(kmzUrl, function (err, data) {
                                    if (err) {
                                        console.log(err);
                                        return;
                                    }
                                    try {
                                        JSZip.loadAsync(data)
                                            .then(function (zip) {
                                                var zipfile = zip.file(/.*\.kml/)[0]
                                                return zipfile.async("string");
                                            })
                                            .then(function success(text) {
                                                var p = omnivore.kml.parse(text).addTo(mymap);

                                                p.eachLayer(function (layer) {
                                                    layer.bindPopup('<div style="width:300px">' + layer.feature.properties.description + '</div>');
                                                });
                                            },
                                            function error(e) {
                                                console.log(e);
                                            });
                                    } catch (e) {
                                        console.log(e);
                                    }
                                });
                            }
                        {% endif %}

                    }, {% if station_selected == 0 %}3000{% else %} 200 {% endif %}
                );
                // Sooo... when the screen is too small and the map is hidden it will show the first one
                if ($(window).width() < 585) {
                    getModules(stations[0].id);
                    $('#btn_map').click();
                }},
            });
        });
    </script>
{% endblock %}