Stats/src/StatsBundle/Resources/views/Stats/onu_map.html.twig

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

{% block stylesheets %}
{{ parent() }}

<style>

#map {
    width: 100%;
    height: calc(100vh - 157px);
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-style: none;
    border-color: none;
    z-index: 0;
    cursor:default;
}
footer {z-index: 1100;}
.container-fluid {padding-left: 0px; padding-right: 0px;}

</style>
{% endblock %}

{% block actions %}
 {% endblock %}

{% block tab_menu %}
<ol class="nav navbar-top-links breadcrumb">
    <li>
        <a href="{{url('sonata_admin_dashboard')}}"><i class="fa fa-home"></i></a>
    </li>
    <li class="active"><span>{{ 'Mapa ONUs'|trans({}, 'StatsBundle') }}</span></li>
</ol>
{% endblock %}

{% block title %}
{% endblock %}

{% block navbar_title %}
{% endblock %}

{% block list_filters_actions %}
<ul class="nav navbar-nav navbar-right">
    <li>
        <a class="sonata-action-element" href="{{url('admin_stats_onu_list')}}"><i class="fa fa-list" aria-hidden="true"></i>
        {{ 'link_action_list'|trans({}, 'SonataAdminBundle') }}
        </a>
    </li>
</ul>
{% endblock %}

{% block list_filters %}
{% endblock %}

{% block list_table %}
{% endblock %}

{% block sonata_wrapper %}
{{ parent() }}
<footer class="footer">
    <span id="statusBar" class="statusBar">Listo.</span>
</footer>
{% endblock %}

{% block content %}

<div id='wrapper' class="box box-primary">
    <div id='page-content-wrapper'>
        <div class="cms-block cms-block-element" >
            <div id="map"></div>
        </div>
    </div>
</div>


<!-- Page JS -->
{% include 'LeafletBundle:Leaflet:resources_only_leaflet.html.twig' %}

<!-- twig para reemplazar url por crossbrowser de feature geoserver -->
{% include 'LeafletBundle:Leaflet:leaflet_wms.html.twig' %}

<script>

window.SONATA_CONFIG.USE_ICHECK = false;


/* --------------------- PROGRAMA PRINCIPAL ------------------------- */
initializeMap();
/* ------------------- FIN PROGRAMA PRINCIPAL ----------------------- */

/* --------------------- Carga Mapa -------------------------------- */

function initializeMap() {

    window.map = new L.Map('map', { center: new L.LatLng({{map['lat']}}, {{map['lng']}}), zoom: {{map['zoom']}} });

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = '&copy; OpenStreetMap';
    var osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });

    var controlLayers = L.control.layers({
        'OSM': osm.addTo(window.map),
        "Google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {zIndex:1, attribution: '&copy; Google'})
    }, {}, { position: 'topleft', collapsed: false });

    

    layerGeoRx = L.tileLayer.betterWms('http://{{gsHost}}:{{gsPort}}/geoserver/{{ws}}/wms', {
	    layers: '{{ws}}:{{layer}}',
		transparent:true,
		format: 'image/png',
        zIndex: 99,
		maxZoom: 18,
        styles: 'onuRxPowerLabel'
	});
    layerGeoTx = L.tileLayer.betterWms('http://{{gsHost}}:{{gsPort}}/geoserver/{{ws}}/wms', {
	    layers: '{{ws}}:{{layer}}',
		transparent:true,
		format: 'image/png',
        zIndex: 99,
		maxZoom: 18,
        styles: 'onuTxPowerLabel'
	});
    
    layerGeoStatus = L.tileLayer.betterWms('http://{{gsHost}}:{{gsPort}}/geoserver/{{ws}}/wms', {
	    layers: '{{ws}}:{{layer}}',
		transparent:true,
		format: 'image/png',
        zIndex: 99,
		maxZoom: 18,
        styles: 'onuStatus'
	}).addTo(window.map);
    
    var extraLayers = L.control.layers({
        "TX": layerGeoTx,
        'RX': layerGeoRx,
        "Status": layerGeoStatus
    }, {}, { position: 'topleft', collapsed: false });

    extraLayers.addTo(window.map);

}

/* --------------------- Carga Mapa -------------------------------- */

/* --------------------- Show Features wms ------------------------- */

function customPopupFeature(latlng, content) {

    if(content.hasOwnProperty('id')) {
        id = content.id;

        if(content.status == 1) {status = "On";} else {status = "Off";}
        if(content.rx == 0) {rx = "-";} else {rx = content.rx;}
        if(content.tx == 0) {tx = "-";} else {tx = content.tx;}
        if(content.volt == 0) {volt = "-";} else {volt = content.volt;}
        if(content.temp == 0) {temp = "-";} else {temp = content.temp;}

        ponSerialNumber = id.replace("onu.", "").toUpperCase();
        link = "{{path('admin_stats_onu_show',{'id':'IDONU'})}}";
        url = link.replace("IDONU", content.id_stats);
        data = "<a href='" + url + "' target='_blank'><b>" + ponSerialNumber + "</b></a><br /> Tx: <span class='"+txStyle(content.tx)+"'>" + tx + 
               "</span> dBm<br /> Rx: <span class='"+rxStyle(content.rx)+"'>" + rx + 
               "</span> dBm<br /> Status: " + status  + 
               "<br /> Voltage: " + volt + 
               " V<br /> Temperature: " + temp + 
               " ºC<br /> Muestreo: " + content.muestreo;

        popup = L.popup()
            .setLatLng(latlng)
            .setContent(data)
            .openOn(window.map);
    
    }

}

function rxStyle(value) {

    style = "rx_ftth_bordo";

    if (value >= -30 && value < -28) {
        style = "rx_ftth_rojo";
    } else if (value >= -28 && value < -26) {
        style = "rx_ftth_amarillo";
    } else if (value >= -26 && value < -20) {
        style = "rx_ftth_verde";
    } else if (value >= -20 && value < -15) {
        style = "rx_ftth_amarillo";
    } else if (value >= -15 && value < -13) {
        style = "rx_ftth_rojo";
    }

    return style; 

}

function txStyle(value) {

    style = "tx_ftth_bordo";

    if (value < 1) {
        style = "tx_ftth_bordo";
    } else if (value >= 1 && value < 1.5) {
        style = "tx_ftth_amarillo";
    } else if (value >= 1.5 && value < 3.5) {
        style = "tx_ftth_verde";
    } else if (value >= 3.5 && value < 4.5) {
        style = "tx_ftth_amarillo";
    } else if (value >= 4.5 && value < 5) {
        style = "tx_ftth_rojo";
    } 

    return style;
}

/* --------------------- Show Features wms ------------------------- */

</script>
{% endblock %}