SHARE
TWEET

home.html

a guest May 23rd, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {% extends "base.html" %}
  2. {% load staticfiles clima_tags %}
  3.  
  4. {% block head %}
  5.     <link rel="stylesheet" type="text/css" href="{% static 'css/leaflet-search.min.css' %}">
  6.     <link rel="stylesheet" type="text/css" href="{% static 'css/L.Icon.Pulse.css' %}">
  7.     <link rel="stylesheet" type="text/css" href="{% static 'css/leaflet-clima.css' %}">
  8.  
  9.     <style>
  10.         .class_spinner {
  11.             cursor: wait;
  12.         }
  13.     </style>
  14.  
  15. {% endblock %}
  16.  
  17. {% block content %}
  18.     {% get_config_subdomain request.build_absolute_uri as SUBDOMAIN %}
  19.     <div class="container-fluid full-height">
  20.         {% block navbar-li %}
  21.             <li class="dropdown stations_dropdown" id="stations_dropdown">
  22.                 <a href="#0" class="dropdown-toggle nav-item-iconic"
  23.                   style="font-family: 'Open Sans',Helvetica,Arial,sans-serif;" id="stations-dropdown"
  24.                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  25.                     <span title="Estaciones" class="fa fa-arrow">Estaciones</span>
  26.                     <span class="caret"></span>
  27.                 </a>
  28.  
  29.                 <ul class="dropdown-menu stations_dropdown_opt" role="menu" aria-labelledby="stations-dropdown"
  30.                    id="ul_stations_dropdown">
  31.  
  32.                 </ul>
  33.             </li>
  34.         {% endblock %}
  35.  
  36.         <div class="col-sm-4 col-md-4 station-map-row" id="map_container">
  37.             <div id="mapid" class="card-pf card-pf-accented card-pf-aggregate-status"
  38.                 style="height:100%;width:100%;position:absolute;z-index: 0;"></div>
  39.  
  40.             <div id="toggle_map" class="hide" style="position:absolute;z-index:2;top:5;right:0;">
  41.                 <button class="btn btn-primary btn-lg" id="btn_min"><i class="fa fa-window-minimize" id="btn_min-icon"
  42.                                                                       aria-hidden="true"></i></button>
  43.                 <button class="btn btn-primary btn-lg" id="btn_map"><i class="fa fa-window-restore" id="btn_map-icon"
  44.                                                                       aria-hidden="true"></i></button>
  45.                 <button class="btn btn-primary btn-lg" id="btn_max"><i class="fa fa-window-maximize" id="btn_max-icon"
  46.                                                                       aria-hidden="true"></i></button>
  47.             </div>
  48.             {% for layer in filter_layer %}
  49.                 <div id="{{layer.id}}_scale"
  50.                style="position:absolute;z-index:2; bottom:350px;right:0px; font-size:1.1em;" class="hide">
  51.                 <div class="dropdown-menu-left">
  52.                     <ul style="list-style: none;">
  53.                         {% for icon in layer.ranges.all%}
  54.                         <li class="dropdown-item" style="background-color: #{{icon.color}};">{{icon.help_text}}</li>
  55.                         {% endfor %}
  56.                     </ul>
  57.                 </div>
  58.             </div>
  59.             {% endfor %}
  60.             <div id="legend"
  61.            style="background-color:rgba(240,240,240,.5);position:absolute;z-index:2; bottom:100px;right:0px;">
  62.                 <div class="dropdown-menu-left">
  63.                     <ul>
  64.                         <li class="dropdown-item" style="color: red;">Equipo Desconectado</li>
  65.                         <li class="dropdown-item" style="color: orange; padding-right: 15px">Equipo
  66.                             Desactualizado&nbsp;
  67.                         </li>
  68.                         <li class="dropdown-item" style="color: green;">Equipo Conectado</li>
  69.                     </ul>
  70.                 </div>
  71.             </div>
  72.             <hr>
  73.         </div>
  74.         <img src="" alt="" id="signal_gif" style="height: 20px; visibility:  hidden;" alt=""/>
  75.  
  76.         <div id="modules_container" class="col-sm-8 col-md-8 modules_container">
  77.             No hay estación seleccionada.
  78.         </div>
  79.  
  80.     </div><!-- /container -->
  81.  
  82.     <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  83.            integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  84.            crossorigin=""></script>
  85.  
  86.     <script src="{% static 'js/leaflet-search.min.js' %}"></script>
  87.     <script src="{% static 'js/L.Icon.Pulse.js' %}"></script>
  88.     <script src="{% static 'js/leaflet-print.min.js' %}"></script>
  89.     <script src="{% static 'js/leaflet-select-layers.min.js' %}"></script>
  90.     <script src="{% static 'js/leaflet-marker-text.js' %}"></script>
  91.     <script src="{% static 'js/leaflet-clima.js' %}"></script>
  92.  
  93.     <script>
  94.         var station_selected = false;
  95.         var station = "";
  96.         var mymap;
  97.         var markersLayer;
  98.         var rain_marker_layers;
  99.         var none_layers;
  100.  
  101.  
  102.         function getModules(station_id) {
  103.             $('#modules_container').html("Actualizando valores <span class=\"fa fa-spin fa-spinner fa-3x\"></span>");
  104.             $.ajax({
  105.                 url: "{% url 'get_modules' %}", // the endpoint
  106.                 type: "GET", // http method
  107.                 csrfmiddlewaretoken: '{{ csrf_token }}',
  108.                 data: {
  109.                     'station_id': station_id
  110.                 },
  111.                 success: function (result) {
  112.                     stations = result;
  113.                     $('#modules_container').html(result);
  114.                 },
  115.                 error: function (error, hrx) {
  116.                     console.log(error);
  117.                     console.log(hrx);
  118.                     $('#modules_container').html("Se produjo un error. Consulte nuevamente.");
  119.                 }
  120.             });
  121.         }
  122.  
  123.         $("#modules_container").on('click', '#btn-invitation', function () {
  124.             $('#invitation').modal("show")
  125.             $("#stationspi option[value='1']").attr("selected", "selected");
  126.             $("#stationspi").selectpicker("refresh")
  127.         })
  128.  
  129.         $('#btn_max').click(function () {
  130.             interfaceMaxChange();
  131.             mymap.invalidateSize();
  132.         });
  133.  
  134.         $('#btn_min').click(function () {
  135.             $('#btn_map-icon').removeClass('fa-window-restore').addClass('fa-map');
  136.             $('#btn_map').show();
  137.             $('#btn_min').hide();
  138.             $('#btn_max').hide();
  139.             $('#legend').hide();
  140.             $("#mapid").hide();
  141.             $("#map_container").animate({width: '1%'});
  142.             resizeWidgetsToFullScreen();
  143.             restartWidgets();
  144.         });
  145.  
  146.         $('#btn_map').click(function (isinitial) {
  147.             $("#mapid").show();
  148.             resizeWidgetsToHalfScreen();
  149.             //restartWidgets();
  150.             setMapToThirdScreen();
  151.             $('#btn_map').hide();
  152.             $('#btn_min').show();
  153.             $('#btn_max').show();
  154.             $('#legend').show();
  155.             try {
  156.                 restartWidgets();
  157.             } catch (e) {
  158.  
  159.             }
  160.         });
  161.  
  162.         /*
  163.         $('#toggle_map').click(function() {
  164.  
  165.             if(mapClosed){
  166.                 $("#map_container").animate({width:'33.33%'});
  167.                 $("#mapid").show();
  168.                 resizeWidgetsToHalfScreen();
  169.                 restartWidgets();
  170.  
  171.                 $("#map-toggle-icon").addClass('fa-thumb-tack').removeClass('fa-angle-right');
  172.                 mapClosed = false;
  173.             }
  174.             else{
  175.                 $("#map_container").animate({width:'1%'}, 1000, function functionName() {
  176.                     $("#mapid").hide();
  177.                     resizeWidgetsToFullScreen();
  178.                     restartWidgets();
  179.                     $("#map-toggle-icon").addClass('fa-angle-right').removeClass('fa-thumb-tack');
  180.                 });
  181.                 mapClosed = true;
  182.             }
  183.         });
  184.         */
  185.  
  186.         function interfaceMaxChange() {
  187.             $('#btn_max').hide();
  188.             $('#btn_map-icon').removeClass('fa-map').addClass('fa-window-restore');
  189.             $('#btn_map').show();
  190.             $('#btn_min').show();
  191.             setMapToFullScreen();
  192.             $('#modules_container').hide();
  193.         }
  194.  
  195.         function resizeWidgetsToFullScreen() {
  196.             $("#map_container").css('position', 'absolute');
  197.             $('#modules_container').show();
  198.             $('#modules_container').addClass('col-md-12').removeClass('col-md-8');
  199.             // Making all the widgets in teh widget_container.html got from a 3 column grid, to a 4 column one
  200.             $('.clima-widget1').addClass('col-md-2').removeClass('col-md-3');
  201.             $('.clima-widget2').addClass('col-md-4').removeClass('col-md-6');
  202.             $('.clima-widget3').addClass('col-md-6').removeClass('col-md-9');
  203.             $('.clima-widget4').addClass('col-md-8').removeClass('col-md-12');
  204.         }
  205.  
  206.  
  207.         function resizeWidgetsToHalfScreen() {
  208.             $("#map_container").css('position', 'relative');
  209.             $('#modules_container').addClass('col-md-8').removeClass('col-md-12');
  210.             $('#modules_container').show();
  211.             // All the widgets go back to 3
  212.             $('.clima-widget1').addClass('col-md-3').removeClass('col-md-2');
  213.             $('.clima-widget2').addClass('col-md-6').removeClass('col-md-4');
  214.             $('.clima-widget3').addClass('col-md-9').removeClass('col-md-6');
  215.             $('.clima-widget4').addClass('col-md-12').removeClass('col-md-8');
  216.         }
  217.  
  218.         function setMapToFullScreen() {
  219.             $("#map_container").css('position', 'absolute');
  220.             $("#map_container").css('width', '96%');
  221.             $('#modules_container').hide();
  222.         }
  223.  
  224.         function setMapToThirdScreen() {
  225.             $("#map_container").animate({width: 'inherit'});
  226.             $("#map_container").css('position', '');
  227.             $("#map_container").css('width', '');
  228.             $("#map_container").addClass('col-sm-4 col-md-4');
  229.             $("#toggle_map").show();
  230.             $('#modules_container').show();
  231.         }
  232.  
  233.         function put_measures_on_map() {
  234.             /*
  235.                 Put layer icon on map
  236.             */
  237.             var markerLayers = {
  238.                 'Mostrar Estaciones': markersLayer,
  239.             };
  240.            
  241.             var overlayMaps = {
  242.                 "No mostrar valores": none_layers,
  243.             };
  244.  
  245.             $.ajax({
  246.                 url: "{% url 'get_on_map_measures' %}",
  247.                 type: "GET",
  248.                 csrfmiddlewaretoken: '{{ csrf_token }}',
  249.                 dataType: "json",
  250.                 success: function (result) {
  251.                     // the response is {title:[{},{}]}
  252.                     for(var title in result){
  253.                         var layers = new L.LayerGroup();
  254.                         for (var i = 0; i < result[title].length; i++) {
  255.                            console.log(title)
  256.                            var station_icon = result[title][i]
  257.                            //layers._layers._leaflet_id =
  258.                            var icon = L.icon({
  259.                                iconUrl: station_icon.url,
  260.                                iconSize: [14, 20],
  261.                                iconAnchor: [7, 14],
  262.                                popupAnchor: [0, 0],
  263.                            });
  264.                            var marker = new L.marker([parseFloat(station_icon.lat), parseFloat(station_icon.long)],{
  265.                                title: station_icon.station_title,
  266.                                icon: icon,
  267.                            });
  268.                            layers.addLayer(marker)
  269.                            // create new variable to access scale id
  270.                            layers.scale_id = station_icon.id;
  271.                        }
  272.                        overlayMaps[title] = layers;
  273.                        
  274.                        // add scale
  275.                        layers.on('add', (e)=>{
  276.                             var id = e.target.scale_id;
  277.                             $(`#${id}_scale`).removeClass('hide')
  278.                         });
  279.  
  280.                         // remove scale
  281.                         layers.on('remove ', (e)=>{
  282.                             var id = e.target.scale_id;
  283.                             $(`#${id}_scale`).addClass('hide')
  284.                         });
  285.                     }
  286.                     var control_markers = L.control.togglerIcon(overlayMaps, markerLayers, {
  287.                         position: 'topleft',
  288.                         togglerClassName: 'leaflet-marker-selector scale',
  289.                         value:'asd'
  290.                     })
  291.                     control_markers.addTo(mymap);
  292.                     $(".leaflet-control-layers").css('text-align', 'left');
  293.                 },
  294.                 error: function (a, b) {
  295.                     console.log(a)
  296.                     console.log(b)
  297.                 }
  298.             })
  299.         }
  300.  
  301.         $(document).ready(function () {
  302.             markersLayer = new L.LayerGroup();
  303.             none_layers = new L.LayerGroup();
  304.             var stations = [];
  305.             var fullmap = false;
  306.             var currentMarker = new L.marker();
  307.             var map_color = {0: 'green', 1: 'orange', 2: 'red'};
  308.             $.ajax({
  309.                 url: "/api/stations", // the endpoint
  310.                 type: "GET", // http method
  311.                 csrfmiddlewaretoken: '{{ csrf_token }}',
  312.                 data: {},
  313.                 success: function (result) {
  314.                     stations = result;
  315.                     for (var j = 0; j < stations.length; j++) {
  316.                        $("#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>')
  317.                     }
  318.                     $("#toggle_map").removeClass('hide');
  319.                     if (stations.length == 1) {
  320.                         getModules(stations[0].id);
  321.                         $('#btn_map').click();
  322.  
  323.                     }
  324.                     if (stations.length >= 2) {
  325.                         interfaceMaxChange();
  326.                     }
  327.                     mymap = L.map('mapid', {zoomControl: false})
  328.  
  329.                     mymap.setView([-31.3993438, -64.3344309], 1);
  330.  
  331.                     var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  332.                         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  333.                         maxZoom: 15,
  334.                         zoomControl: false,
  335.                     }).addTo(mymap);
  336.  
  337.                     var topo_map = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
  338.                         maxZoom: 17,
  339.                         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>)'
  340.                     });
  341.  
  342.                     var esri_map = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  343.                         attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
  344.                     });
  345.  
  346.  
  347.                     {% if SUBDOMAIN  %}
  348.                         mymap.flyTo([{{ SUBDOMAIN.latitude|convert_to_points }}, {{ SUBDOMAIN.longitude|convert_to_points }}], {{ SUBDOMAIN.init_zoom }}, {
  349.                             animate: true,
  350.                             duration: 5,
  351.                             easeLinearity: .5
  352.                         });
  353.                     {% else %}
  354.                         mymap.flyTo([-31.3993438, -64.3344309], 6, {animate: true, duration: 5, easeLinearity: .5});
  355.                     {% endif %}
  356.  
  357.                     markersLayer.addTo(mymap);
  358.                     none_layers.addTo(mymap);
  359.  
  360.                     setTimeout(function () {
  361.  
  362.                         put_measures_on_map();
  363.  
  364.                         for (var i = 0; i < result.length; i++) {
  365.                            station = result[i];
  366.                            var circleIcon = L.divIcon({
  367.                                className: function () {
  368.                                    switch (station.status) {
  369.                                        case 0:
  370.                                            return "circle_green"
  371.                                            break;
  372.                                        case 1:
  373.                                            return "circle_orange"
  374.                                            break;
  375.                                        case 2:
  376.                                            return "circle_red"
  377.                                            break;
  378.                                        default:
  379.                                            return "circle_red"
  380.                                    }
  381.                                }(), iconSize: [8, 8]
  382.                            });
  383.  
  384.                            var marker = new L.marker([station.latitude, station.longitude], {
  385.                                icon: circleIcon,
  386.                                zIndexOffset: 500,
  387.                                title: station.title + ' (' + station.code + ')'
  388.                            }).bindPopup(station.title, {closeButton: false});//.addTo(mymap);
  389.                            
  390.                            markersLayer.addLayer(marker);
  391.                            marker.title = station.title;
  392.                            marker.color = station.status;
  393.                            marker.code = station.code;
  394.                            marker.station_id = station.id;
  395.                            marker.latitude = station.latitude;
  396.                            marker.longitude = station.longitude;
  397.                            marker.selected = false;
  398.                            marker.on('click', function () {
  399.                                station_selected = true;
  400.                                //station = this.code;
  401.                                $("#toggle_map").removeClass('hide');
  402.                                $('#stationspi').selectpicker('val', [this.station_id]);
  403.                                // Here we set everything back to normal, notice the invalidateSize, it necesarry for leaflet to realize the size has changed
  404.                                $('#btn_map').click();
  405.                                mymap.invalidateSize();
  406.                                mymap.flyTo([this.latitude, this.longitude], 14, {
  407.                                    animate: false,
  408.                                    duration: 3,
  409.                                    easeLinearity: .5
  410.                                });
  411.  
  412.                                getModules(this.station_id);
  413.  
  414.                                currentMarker.setIcon(L.divIcon({
  415.                                    className: function () {
  416.                                        switch (currentMarker.color) {
  417.                                            case 0:
  418.                                                return "circle_green"
  419.                                                break;
  420.                                            case 1:
  421.                                                return "circle_orange"
  422.                                                break;
  423.                                            case 2:
  424.                                                return "circle_red"
  425.                                                break;
  426.                                            default:
  427.                                                return "circle_red"
  428.                                        }
  429.                                    }(), iconSize: [8, 8]
  430.                                }));
  431.  
  432.                                var signalIcon = L.icon.pulse({
  433.                                    iconSize: [10, 10], color: map_color[this.color],
  434.                                    fillColor: map_color[this.color]
  435.                                });
  436.  
  437.                                this.setIcon(signalIcon);
  438.                                currentMarker = this;
  439.  
  440.                            });
  441.                            console.log("Estacion seleccionada: {{ station_selected }}")
  442.                            if (marker.station_id =={{ station_selected }}) {
  443.                                //setTimeout(function(){
  444.                                marker.fire('click');
  445.                                //},500);
  446.                            }
  447.                        }
  448.  
  449.                        var controlSearch = new L.Control.Search({
  450.                            collapsed: false,
  451.                            position: 'topleft',
  452.                            layer: markersLayer,
  453.                            initial: false,
  454.                            zoom: 12,
  455.                            marker: false,
  456.                            textPlaceholder: 'Buscar...',
  457.                            textErr: 'No se encontro la estacion.',
  458.                        });
  459.  
  460.                        controlSearch.on('search:locationfound', function (result) {
  461.                            currentMarker = result.layer;
  462.                            //currentMarker.setIcon(signalIcon);
  463.                            currentMarker.openPopup();
  464.                            currentMarker.fire('click');
  465.                            mymap.fireEvent('click', currentMarker);
  466.  
  467.                        })
  468.  
  469.                        mymap.addControl(controlSearch);
  470.  
  471.                        var printer = L.easyPrint({
  472.                            sizeModes: ['A4Portrait'],
  473.                            filename: 'print_map',
  474.                            exportOnly: true,
  475.                            hideControlContainer: true,
  476.                            customSpinnerClass: 'class_spinner',
  477.                            position: 'topright'
  478.                        }).addTo(mymap);
  479.  
  480.                        var baseLayers = {
  481.                            "Open Street Map": osm_map,
  482.                            "Topográfico": topo_map,
  483.                            "ESRI": esri_map,
  484.                        };
  485.  
  486.                        //var control = L.Control.SelectLayers(baseLayers,overlayMaps,{position:'topleft'})
  487.                        var control_base = L.control.togglerIcon(baseLayers, null, {
  488.                            position: 'topleft',
  489.                            togglerClassName: 'leaflet-layer-selector'
  490.                        })
  491.                        control_base.addTo(mymap);
  492.  
  493.                        {% if SUBDOMAIN and SUBDOMAIN.kml %}
  494.  
  495.                            var kmzUrl = '{{ SUBDOMAIN.kml.url }}';
  496.  
  497.                            if (kmzUrl.endsWith('kml')) {
  498.                                omnivore.kml(kmzUrl).addTo(mymap);
  499.                            } else {
  500.                                JSZipUtils.getBinaryContent(kmzUrl, function (err, data) {
  501.                                    if (err) {
  502.                                        console.log(err);
  503.                                        return;
  504.                                    }
  505.                                    try {
  506.                                        JSZip.loadAsync(data)
  507.                                            .then(function (zip) {
  508.                                                var zipfile = zip.file(/.*\.kml/)[0]
  509.                                                return zipfile.async("string");
  510.                                            })
  511.                                            .then(function success(text) {
  512.                                                var p = omnivore.kml.parse(text).addTo(mymap);
  513.                                                
  514.                                                p.eachLayer(function (layer) {
  515.                                                    layer.bindPopup('<div style="width:300px">' + layer.feature.properties.description + '</div>');
  516.                                                 });
  517.                                             },
  518.                                             function error(e) {
  519.                                                 console.log(e);
  520.                                             });
  521.                                     } catch (e) {
  522.                                         console.log(e);
  523.                                     }
  524.                                 });
  525.                             }
  526.                         {% endif %}
  527.  
  528.                     }, {% if station_selected == 0 %}3000{% else %} 200 {% endif %}
  529.                 );
  530.                 // Sooo... when the screen is too small and the map is hidden it will show the first one
  531.                 if ($(window).width() < 585) {
  532.                    getModules(stations[0].id);
  533.                    $('#btn_map').click();
  534.                }},
  535.            });
  536.        });
  537.    </script>
  538. {% endblock %}
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top