nemesiscodex/openfonacide

View on GitHub
templates/map.html

Summary

Maintainability
Test Coverage
<style>
    .tooltip {
        display: block;
        position: absolute;
        border: 1px solid #D9D9D9;
        font: 400 12px/12px Arial;
        border-radius: 3px;
        background: #fff;
        top: -26px;
        padding: 5px;
        left: -9px;
        text-align: center;
        width: 35px;
    }
    .tooltip.left {
        left: -14px;
    }
    .tooltip.right {
        left: 10px;
    }
    .tooltip strong {
        display: block;
        padding: 2px;
    }
    /*Ver donde ubicar las reglas*/
    .ui.loader.map-loader::after {
        border-color: rgba(0, 0, 0, .6) transparent transparent;
        border-top-width: 0.4em;
        border-bottom-width: 4.0em;
    }
    .ui.loader.map-loader::before {
        border-color: rgba(0, 0, 0, .2);
        border-width: 0.4em;
    }
    .ui.loader.map-loader h2 {
        color: #000;
    }
    /*Se define en custom.css línea 81*/
    .sidebar .filtros {
        padding-left: 0 !important;
        margin: 20px 0;
    }
    /*Se define en custom.css línea 70*/
    .sidebar .ui.checkbox label {
        /*color: white !important; cambiamos el color de la letra*/
        color: rgba(0, 0, 0, 0.8) !important;
    }
    /*Se define en semantic.min.css línea 11*/
    .ui.segment {
        margin: 5%;
        pargin: 5%;
    }
    .left.sidebar .ui.segment.attached {
        width: 90%;
        margin-left: 5% !important;
        margin-right: 5% !important;
    }
    .institucion-tab.ng-move,
    .institucion-tab.ng-leave {
        display: none !important;
    }
</style>
<div id="explicacion-mapa" ng-init="ocultar_explicacion = false" ng-hide="ocultar_explicacion" class="ui big filter  basic right attached fixed button"
     style="padding-right: 15px;position: fixed;width: 250px;z-index: 99;background-color: white !important;bottom: 50px; ">
    <a class="ui right white corner label"  ng-click="ocultar_explicacion = true">
        <i class="close icon" ></i>
      </a>
    <div style="text-align: left; font-size: 0.8em; font-weight: normal;">En este mapa podés encontrar el detalle de los requerimientos de infraestructura de las escuelas priorizadas por FONACIDE. <br>
        <b>Podés comenzar haciendo click en "FILTROS"</b>

    </div>
</div>
<div class="detalle ui verde1 right vertical overlay sidebar push uncover"
     style="z-index: 1002;height: 96%  !important;" du-scroll-container>
    <div class="ui top attached tabular menu">


        <a class="item institucion-tab" ng-class="{active:institucion.codigo_institucion == $parent.institucion_actual}"
           establecimiento="{$ institucion.codigo_establecimiento $}"
           ng-click="showInfoPopUp(institucion.codigo_establecimiento,institucion.codigo_institucion)"
           ng-repeat="institucion in infoData.instituciones" data-tab="inst-{$ institucion.codigo_institucion $}">
            <label class="ui teal label" title="Codigo de institución"> {$ institucion.codigo_institucion $}</label> {$
            institucion.nombre_institucion $}
        </a>
    </div>


    <div class="ui bottom attached active tab segment stackable grid" style="padding-left:30px" ng-init="search = {}">
        <div class="ui black basic button" ng-class="{active:periodo == 2012}" ng-click="periodo='2012'"
             style="margin-left: 10px; margin-top:15px">2012
        </div>

        <div class="ui black basic button" ng-class="{active:periodo == 2015}" ng-click="periodo='2015'"
             style=" margin-top:15px">2015
        </div>
        <!--
                 <a href="http://datos.mec.gov.py/doc/instituciones/{$ institucion_actual $}" target="_blank" ><div class=" ui button teal" > Más info</div></a>
                <div class=" ui button teal"  href="#disqus_thread" du-smooth-scroll>  Hacer comentarios</div>
                <div class=" ui button teal" ng-click="mostrarAdjudicaciones()" > Adjudicaciones</div>
                 <div class=" ui button teal" ng-click="mostrarContraloria()" > Documentos de contraloría</div> -->

        <div class="ui buttons">


            <div class="ui button"><a style="color:rgba(0, 0, 0, 0.6);"
                                      href="http://datos.mec.gov.py/doc/instituciones/{$ institucion_actual $}"
                                      target="_blank"> Más info</a></div>
            <div class="ui button" href="#disqus_thread" du-smooth-scroll>Hacer comentarios</div>
            <div class="ui button" ng-click="mostrarAdjudicaciones()">Adjudicaciones</div>
{#            <div class="ui button" ng-click="mostrarContraloria()"> Documentos de contraloría</div>#}
        </div>


        <div class="one columns row">
            <div class="ui big launch basic right attached fixed button"
                 onclick="$('.detalle').sidebar('toggle');$('#map').css('width', '100%');window.map.invalidateSize();"
                 style="padding-right: 10px;position: fixed;left:0;;top: 200px;z-index: 99;background-color: white !important;">
                <div style="text-align: center; font-size: 0.6em; font-weight: bold;">C<br/>E<br/>R<br/>R<br/>A<br/>R
                </div>
            </div>

            <div ng-show="show_adjudicaciones" class="ui requerimiento" style="padding-top: 10px">
                    <div class="ui stackable grid">
                        <div class="eight wide column left aligned">
                            <h3>Adjudicaciones</h3>
                        </div>
                        <div class="three wide column"/>
                        <div class="four wide column right aligned">
                            <!-- verificar el permiso para agregar información de fonacide -->
{#                            {% if user.is_authenticated %}#}
                            {% if 'openfonacide.verificar_estado' in user.get_all_permissions or 'openfonacide.cambiar_estado' in user.get_all_permissions %}
                                <div class="fluid ui button teal"
                                     ng-click="agregarAdjudicacion()" > Agregar Adjudicacion
                                </div>
                            {% endif %}
{#                        {% endif %}#}
                        </div>
                    </div>

                    <div class="sixteen wide column">
                        <div class="ui segment" style="padding: 10px; margin-bottom: 10px; font-size: small">

                                <h4 ng-if="adjudicaciones_actual.length == 0 && planificaciones_actual == 0">No hay adjudicaciones</h4>
                            <ul>
                                <li ng-repeat=" p in planificaciones_actual">{$ p.nombre_licitacion $} - Fue planificada
                                    para realizarse en la fecha estimada <i>{$ p.fecha_estimada $}</i>. Categoría: <i>{$ p.categoria $}</i>.
                                    <a href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado={$ p.id_llamado $}"
                                       target="_blank"> Ver estado </a>
                                </li>
                              <!--  <li>Construccion de Baños en el Colegio Nacional- <span class="ui teal label">Gs. 60.000.000</span>
                                    <a href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"
                                       target="_blank"> ver estado </a></li>
                                <li>Adquisición de Muebles para Escuelas - <span
                                        class="ui teal label">Gs. 60.000.000</span> <a
                                        href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"
                                        target="_blank"> ver estado </a></li>
                                <li>Construcción Modulo para la Escuela de Danzas - <span class="ui teal label">Gs. 60.000.000</span><a
                                        href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"
                                        target="_blank"> ver estado </a></li> -->

                            </ul>
                            <ul>
                                <li ng-repeat=" a in adjudicaciones_actual">{$ a.nombre_licitacion $} - Fue adjudicada
                                    por un monto de {$ a.moneda $} <span class="ui teal label">{$ formatoDinero(a.monto_total_adjudicado) $}</span>. Categoría: <i>{$ a.categoria $}</i>
                                    <a href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado={$ a.id_llamado $}"
                                       target="_blank"> Ver estado </a>
                                    <!-- en la fecha <i>{$ a.fecha_publicacion $}</i>. -->
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>


{#            <div class="column" ng-show="show_contraloria">#}
{#                <div class="ui requerimiento stackable grid segment" style="padding-top: 10px;"#}
{#                     >#}
{#                    <h3>Documentos de Contraloría</h3>#}
{##}
{#                    <div class="sixteen wide column">#}
{#                        <div class="ui  segment">#}
{#                             <h4>No hay documentos</h4>#}
{#                            <ul>#}
{#                                <!-- <li>Construccion de Baños en el Colegio Nacional- <span class="ui teal label">Gs. 60.000.000</span>#}
{#                                    <a href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"#}
{#                                       target="_blank"> ver estado </a></li>#}
{#                                <li>Adquisición de Muebles para Escuelas - <span#}
{#                                        class="ui teal label">Gs. 60.000.000</span> <a#}
{#                                        href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"#}
{#                                        target="_blank"> ver estado </a></li>#}
{#                                <li>Construcción Modulo para la Escuela de Danzas - <span class="ui teal label">Gs. 60.000.000</span><a#}
{#                                        href="https://www.contrataciones.gov.py/datos/visualizaciones/etapas-licitacion-emb?id_llamado=272219"#}
{#                                        target="_blank"> ver estado </a></li> -->#}
{##}
{#                            </ul>#}
{#                        </div>#}
{#                    </div>#}
{##}
{#                </div>#}
{#            </div>#}


            <!-- AULAS BEGIN -->
            <div class="column">
                <div class="ui tertiary inverted teal segment" style="margin: 0">
                    <div class="ui top left attached teal label"><i class="student large icon">
                        Aulas</i></div>

                    <div class="ui teal segment"
                         ng-repeat="item in prioridades_aulas = (prioridades.aulas | filter:{'periodo': periodo, 'codigo_institucion': institucion_actual}:true | filter:{nombre_espacio:null})"
                         ng-if="item.codigo_institucion==institucion_actual" style="margin:0">
                        <div class="ui item">
                            <div class="ui stackable grid">
                                <div class="two wide column center aligned"
                                     style="float:left; /* padding-right: 0; */">
                                    <div class="column center aligned" style="padding-bottom: 5px">
                                        <h4>Prioridad
                                        </h4>
                                            <span class="ui white massive fluid circular label" style="
                background-color: white;
                border: solid 0.06em #BBB;
                font-size:2.4rem;
                width: 100%;
        "><b>{$ item.numero_prioridad $}</b></span>

                                    </div>

                                </div>

                                <div class="seven wide column left aligned content auto-height" style="
                                        {#    border-left: solid 0.1em #ddd;#}
                                        {#    border-right: solid 0.1em #ddd;#}
                                        ">
                                     <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'NUEVO'">Construcción de Aulas</h3>

                                         <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'REPARACION'">Reparación de Aulas</h3>

                                         <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'ADECUACION'">Reparación de Aulas</h3>


                                    <div class="description">
                                        <b>Justificación:</b> {$ item.justificacion | capitalize $}
                                    </div>
                                </div>
                                <div class="four wide column left aligned">
                                    <div class="ui horizontal statistic">

                                        <div class="value">
                                            {$ item.cantidad_requerida $}
                                        </div>
                                        <div class="label">
                                            Cantidad requerida
                                        </div>
                                    </div>
                                    <div class="ui divider"></div>
                                    <div class="ui horizontal statistic" style="margin-left: 0; margin-top: 5px">
                                        <div class="value">
                                            {$ item.numero_beneficiados $}
                                        </div>
                                        <div class="label">
                                            Potenciales beneficiados
                                        </div>
                                    </div>
                                </div>
                                <div class="three wide column left aligned auto-height"
                                        {#                                         style="border-left: solid 0.1em #ddd;"#}
                                        >
                                    <div class="ui fluid basic buttons">
                                        <div class="ui icon basic fluid button with-popup"
                                             {% if 'openfonacide.verificar_estado' in user.get_all_permissions or 'openfonacide.cambiar_estado' in user.get_all_permissions %}
                                             ng-click="modificarEstado(item,'Aulas')"{% endif %}>
                                                <i class="ui empty circular label"
                                                         ng-class="{basic: item.estado_de_obra==='priorizado',
                                                         orange: item.estado_de_obra==='planificado',
                                                          blue: item.estado_de_obra==='adjudicado',
                                                          green: item.estado_de_obra==='terminado'}">&nbsp;</i>
                                                    &nbsp;
                                                    {$ item.estado_de_obra | capitalize $}
                                        </div>
                                        <div class="ui special popup" ng-if="item.cambiado_por">
                                            Modificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.cambiado_por_user.username $}</b>.
                                        </div>
                                        <div class="ui 2 fluid buttons">
                                            <a class="ui basic icon button with-popup">
                                                <i class="list circle grey icon" ng-hide="item.verificado_por"></i>
                                                <i class="check circle green icon" ng-show="item.verificado_por"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="!item.verificado_por && item.cambiado_por">
                                                Este estado aún no ha sido verificado.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.verificado_por && !item.cambiado_por">
                                                El estado es priorizado.
                                            </div>
                                            <div class="ui special popup" ng-if="item.verificado_por">
                                                Verificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.verificado_por_user.username $}</b>.
                                            </div>
                                            <a class="ui basic icon button with-popup" target="_blank" ng-href="{$ item.documento $}" >
                                                <i class="attach circle grey icon" ng-hide="item.documento"></i>
                                                <i class="file green icon" ng-show="item.documento"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="item.documento">
                                                1 archivo adjunto.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.documento">
                                                Sin archivos adjuntos.
                                            </div>
                                        </div>
                                    </div>

{#                                    <div class="ui divider" style="margin: 5px"></div>#}
                                    <div class="fluid ui button teal" ng-click="reportar(item, 'aulas')"
                                         style="margin-top: 10px"> Esta obra se realizo?
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui center aligned header" style="margin: 0 !important;"
                         ng-show="!prioridades_aulas.length">Sin Requerimientos.
                    </div>
                </div>
            </div>
            <!-- AULAS END -->


            <div class="column"><br></div>
            <!-- SANITARIOS BEGIN -->
            <div class="column">
                <div class="ui tertiary inverted teal segment" style="margin: 0">
                    <div class="ui top left attached teal label"><i class="female large icon"
                                                                    style="margin-right: 0">|</i><i
                            class="male large icon">
                        Sanitarios</i></div>
                    <div class="ui teal segment"
                         ng-repeat="item in prioridades_sanitarios = (prioridades.sanitarios | filter:{'periodo': periodo, 'codigo_institucion':institucion_actual}:true)"
                         ng-if="item.codigo_institucion==institucion_actual" style=" margin:0">
                        <div class="ui item">
                            <div class="ui stackable grid">
                                <div class="two wide column center aligned"
                                     style="float:left; /* padding-right: 0; */">
                                    <div class="column center aligned" style="padding-bottom: 5px">
                                        <h4>Prioridad
                                        </h4>
                                            <span class="ui white massive fluid circular label" style="
                background-color: white;
                border: solid 0.06em #BBB;
                font-size:2.4rem;
                width: 100%;
        "><b>{$ item.numero_prioridad $}</b></span>

                                    </div>

                                </div>

                                <div class="seven wide column left aligned content auto-height" style="
                                        {#    border-left: solid 0.1em #ddd;#}
                                        {#    border-right: solid 0.1em #ddd;#}
                                        ">
                                    <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'NUEVO'">Construcción de Sanitarios</h3>

                                         <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'REPARACION'">Reparación de Sanitarios</h3>

                                         <h3 class="header" ng-if="item.tipo_requerimiento_infraestructura == 'ADECUACION'">Adecuacion de Sanitarios</h3>

                                    <div class="description">
                                        <b>Justificación:</b> {$ item.justificacion | capitalize $}
                                    </div>
                                </div>
                                <div class="four wide column left aligned">
                                    <div class="ui horizontal statistic">

                                        <div class="value">
                                            {$ item.cantidad_requerida $}
                                        </div>
                                        <div class="label">
                                            Cantidad requerida
                                        </div>
                                    </div>
                                    <div class="ui divider"></div>
                                    <div class="ui horizontal statistic" style="margin-left: 0; margin-top: 5px">
                                        <div class="value">
                                            {$ item.numero_beneficiados $}
                                        </div>
                                        <div class="label">
                                            Potenciales beneficiados
                                        </div>
                                    </div>
                                </div>
                                <div class="three wide column left aligned auto-height"
                                        {#                                         style="border-left: solid 0.1em #ddd;"#}
                                        >
                                    <div class="ui fluid basic buttons">
                                        <div class="ui icon basic fluid button with-popup"
                                             {% if 'openfonacide.verificar_estado' in user.get_all_permissions or 'openfonacide.cambiar_estado' in user.get_all_permissions %}
                                             ng-click="modificarEstado(item,'Sanitarios')"{% endif %}>
                                                <i class="ui empty circular label"
                                                         ng-class="{basic: item.estado_de_obra==='priorizado',
                                                         orange: item.estado_de_obra==='planificado',
                                                          blue: item.estado_de_obra==='adjudicado',
                                                          green: item.estado_de_obra==='terminado'}">&nbsp;</i>
                                                    &nbsp;
                                                    {$ item.estado_de_obra | capitalize $}
                                        </div>
                                        <div class="ui special popup" ng-if="item.cambiado_por">
                                            Modificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.cambiado_por_user.username $}</b>.
                                        </div>
                                        <div class="ui 2 fluid buttons">
                                            <a class="ui basic icon button with-popup">
                                                <i class="list circle grey icon" ng-hide="item.verificado_por"></i>
                                                <i class="check circle green icon" ng-show="item.verificado_por"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="!item.verificado_por && item.cambiado_por">
                                                Este estado aún no ha sido verificado.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.verificado_por && !item.cambiado_por">
                                                El estado es priorizado.
                                            </div>
                                            <div class="ui special popup" ng-if="item.verificado_por">
                                                Verificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.verificado_por_user.username $}</b>.
                                            </div>
                                            <a class="ui basic icon button with-popup" target="_blank" ng-href="{$ item.documento $}" >
                                                <i class="attach circle grey icon" ng-hide="item.documento"></i>
                                                <i class="file green icon" ng-show="item.documento"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="item.documento">
                                                1 archivo adjunto.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.documento">
                                                Sin archivos adjuntos.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fluid ui button teal" ng-click="reportar(item, 'sanitarios')"
                                         style="margin-top: 10px"> Esta obra se realizo?
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui center aligned header" style="margin: 0 !important;"
                         ng-show="!prioridades_sanitarios.length">Sin Requerimientos.
                    </div>
                </div>
            </div>
            <!-- SANITARIOS END -->


            <div class="column"><br></div>

            <!-- MOBILIARIOS BEGIN -->
            <div class="column">
                <div class="ui tertiary inverted teal segment" style="margin: 0">
                    <div class="ui top left attached teal label"><i class="columns large icon">
                        Mobiliario</i></div>
                    <div class="ui teal segment"
                         ng-repeat="item in prioridades_mobiliarios = (prioridades.mobiliarios | filter:{'periodo': periodo, 'codigo_institucion':institucion_actual}:true)"
                         ng-if="item.codigo_institucion==institucion_actual" style=" margin:0">
                        <div class="ui item">
                            <div class="ui stackable grid">
                                <div class="two wide column center aligned"
                                     style="float:left; /* padding-right: 0; */">
                                    <div class="column center aligned" style="padding-bottom: 5px">
                                        <h4>Prioridad
                                        </h4>
                                            <span class="ui white massive fluid circular label" style="
                background-color: white;
                border: solid 0.06em #BBB;
                font-size:2.4rem;
                width: 100%;
        "><b>{$ item.numero_prioridad $}</b></span>

                                    </div>

                                </div>

                                <div class="seven wide column left aligned content auto-height" style="
                                        {#    border-left: solid 0.1em #ddd;#}
                                        {#    border-right: solid 0.1em #ddd;#}
                                        ">
                                    <h4 class="header">{$ item.nombre_mobiliario | capitalize $}</h4>

                                    <div class="description">
                                        <b>Justificación:</b> {$ item.justificacion | capitalize $}
                                    </div>
                                </div>
                                <div class="four wide column left aligned">
                                    <div class="ui horizontal statistic">

                                        <div class="value">
                                            {$ item.cantidad_requerida $}
                                        </div>
                                        <div class="label">
                                            Cantidad requerida
                                        </div>
                                    </div>
                                    <div class="ui divider"></div>
                                    <div class="ui horizontal statistic" style="margin-left: 0; margin-top: 5px">
                                        <div class="value">
                                            {$ item.numero_beneficiados $}
                                        </div>
                                        <div class="label">
                                            Potenciales beneficiados
                                        </div>
                                    </div>
                                </div>
                                <div class="three wide column left aligned auto-height"
                                        {#                                         style="border-left: solid 0.1em #ddd;"#}
                                        >
                                    <div class="ui fluid basic buttons">
                                        <div class="ui icon basic fluid button with-popup"
                                             {% if 'openfonacide.verificar_estado' in user.get_all_permissions or 'openfonacide.cambiar_estado' in user.get_all_permissions %}
                                             ng-click="modificarEstado(item,'Mobiliarios')"{% endif %}>
                                                <i class="ui empty circular label"
                                                         ng-class="{basic: item.estado_de_obra==='priorizado',
                                                         orange: item.estado_de_obra==='planificado',
                                                          blue: item.estado_de_obra==='adjudicado',
                                                          green: item.estado_de_obra==='terminado'}">&nbsp;</i>
                                                    &nbsp;
                                                    {$ item.estado_de_obra | capitalize $}
                                        </div>
                                        <div class="ui special popup" ng-if="item.cambiado_por">
                                            Modificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.cambiado_por_user.username $}</b>.
                                        </div>
                                        <div class="ui 2 fluid buttons">
                                            <a class="ui basic icon button with-popup">
                                                <i class="list circle grey icon" ng-hide="item.verificado_por"></i>
                                                <i class="check circle green icon" ng-show="item.verificado_por"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="!item.verificado_por && item.cambiado_por">
                                                Este estado aún no ha sido verificado.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.verificado_por && !item.cambiado_por">
                                                El estado es priorizado.
                                            </div>
                                            <div class="ui special popup" ng-if="item.verificado_por">
                                                Verificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.verificado_por_user.username $}</b>.
                                            </div>
                                            <a class="ui basic icon button with-popup" target="_blank" ng-href="{$ item.documento $}" >
                                                <i class="attach circle grey icon" ng-hide="item.documento"></i>
                                                <i class="file green icon" ng-show="item.documento"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="item.documento">
                                                1 archivo adjunto.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.documento">
                                                Sin archivos adjuntos.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fluid ui button teal" ng-click="reportar(item, 'mobiliarios')"
                                         style="margin-top: 10px"> Esta obra se realizo?
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui center aligned header" style="margin: 0 !important;"
                         ng-show="!prioridades_mobiliarios.length">Sin Requerimientos.
                    </div>
                </div>
            </div>
            <!-- MOBILIARIOS END -->

            <div class="column"><br></div>

            <!-- OTROS BEGIN -->
            <div class="column">
                <div class="ui tertiary inverted teal segment" style="margin: 0">
                    <div class="ui top left attached teal label"><i class="lab large icon">
                        Otros Espacios</i></div>
                    <div class="ui teal segment"
                         ng-repeat="item in prioridades_otros = (prioridades.aulas | filter:{'periodo': periodo, 'codigo_institucion': institucion_actual}:true | filter:es_otros)"
                         ng-if="item.codigo_institucion==institucion_actual" style=" margin:0">
                        <div class="ui item">
                            <div class="ui stackable grid">
                                <div class="two wide column center aligned"
                                     style="float:left; /* padding-right: 0; */">
                                    <div class="column center aligned" style="padding-bottom: 5px">
                                        <h4>Prioridad
                                        </h4>
                                            <span class="ui white massive fluid circular label" style="
                background-color: white;
                border: solid 0.06em #BBB;
                font-size:2.4rem;
                width: 100%;
        "><b>{$ item.numero_prioridad $}</b></span>

                                    </div>

                                </div>

                                <div class="seven wide column left aligned content auto-height" style="
                                        {#    border-left: solid 0.1em #ddd;#}
                                        {#    border-right: solid 0.1em #ddd;#}
                                        ">
                                    <h3 class="header">{$ item.nombre_espacio | capitalize $} - {$
                                        item.tipo_requerimiento_infraestructura | capitalize $}</h3>

                                    <div class="description">
                                        <b>Justificación:</b> {$ item.justificacion | capitalize $}
                                    </div>
                                </div>
                                <div class="four wide column left aligned">
                                    <div class="ui horizontal statistic">

                                        <div class="value">
                                            {$ item.cantidad_requerida $}
                                        </div>
                                        <div class="label">
                                            Cantidad requerida
                                        </div>
                                    </div>
                                    <div class="ui divider"></div>
                                    <div class="ui horizontal statistic" style="margin-left: 0; margin-top: 5px">
                                        <div class="value">
                                            {$ item.numero_beneficiados $}
                                        </div>
                                        <div class="label">
                                            Potenciales beneficiados
                                        </div>
                                    </div>
                                </div>
                                <div class="three wide column left aligned auto-height"
                                        {#                                         style="border-left: solid 0.1em #ddd;"#}
                                        >
                                    <div class="ui fluid basic buttons">
                                        <div class="ui icon basic fluid button with-popup"
                                             {% if 'openfonacide.verificar_estado' in user.get_all_permissions or 'openfonacide.cambiar_estado' in user.get_all_permissions %}
                                             ng-click="modificarEstado(item,'Otros Espacios')"{% endif %}>
                                                <i class="ui empty circular label"
                                                         ng-class="{basic: item.estado_de_obra==='priorizado',
                                                         orange: item.estado_de_obra==='planificado',
                                                          blue: item.estado_de_obra==='adjudicado',
                                                          green: item.estado_de_obra==='terminado'}">&nbsp;</i>
                                                    &nbsp;
                                                    {$ item.estado_de_obra | capitalize $}
                                        </div>
                                        <div class="ui special popup" ng-if="item.cambiado_por">
                                            Modificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.cambiado_por_user.username $}</b>.
                                        </div>
                                        <div class="ui 2 fluid buttons">
                                            <a class="ui basic icon button with-popup">
                                                <i class="list circle grey icon" ng-hide="item.verificado_por"></i>
                                                <i class="check circle green icon" ng-show="item.verificado_por"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="!item.verificado_por && item.cambiado_por">
                                                Este estado aún no ha sido verificado.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.verificado_por && !item.cambiado_por">
                                                El estado es priorizado.
                                            </div>
                                            <div class="ui special popup" ng-if="item.verificado_por">
                                                Verificado el <b>{$ item.fecha_modificacion | date:'dd/MM/yyyy @ h:mma' $}</b> por el usuario <b>{$ item.verificado_por_user.username $}</b>.
                                            </div>
                                            <a class="ui basic icon button with-popup" target="_blank" ng-href="{$ item.documento $}" >
                                                <i class="attach circle grey icon" ng-hide="item.documento"></i>
                                                <i class="file green icon" ng-show="item.documento"></i>
                                            </a>
                                            <div class="ui special popup" ng-if="item.documento">
                                                1 archivo adjunto.
                                            </div>
                                            <div class="ui special popup" ng-if="!item.documento">
                                                Sin archivos adjuntos.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fluid ui button teal" ng-click="reportar(item, 'otros')"
                                         style="margin-top: 10px"> Esta obra se realizo?
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui center aligned header" style="margin: 0 !important;"
                         ng-show="!prioridades_otros.length">Sin Requerimientos.
                    </div>
                </div>
            </div>
            <!-- OTROS END -->

            <div class="column"><br></div>


            <div class="column">
                <div id="disqus_thread"></div>
            </div>

            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES * * */
                var disqus_shortname = 'contralorfonacidepy';
                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function () {
                    var prev = document.getElementById('disqus_stuff');
                    if (prev !== null) {
                        DISQUS.reset({
                            reload: true
                        });
                        return;
                    }
                    var dsq = document.createElement('script');
                    dsq.type = 'text/javascript';
                    dsq.async = true;
                    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                    dsq.id = 'disqus_stuff';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments
                powered by Disqus.</a></noscript>


        </div>


    </div>
</div>

<!--
<div class="two column ">
                    <div class="ui checkbox">
                        <input type="checkbox" name="fun">
                        <label>Mobiliario</label>
                    </div>
                    <div class="ui checkbox">
                        <input type="checkbox" name="fun">
                        <label>Otros Espacios</label>
                    </div>
                </div>
-->

<div class="ui left  vertical  overlay filtro sidebar push uncover"
     style="z-index: 1002; background: #f7f7f7;height: 96% !important;">
    <div class="ui big filter launch basic left attached fixed button"
         style="padding-left: 10px;position: relative; float: right; top: 200px;z-index: 99;background-color: white !important;">
        <div style="text-align: center; font-size: 0.6em; font-weight: bold;">F<br/>I<br/>L<br/>T<br/>R<br/>O<br/>S
        </div>
    </div>
    <h2 class="header" style="margin-left: 5%; margin-top: 12px">Filtros
        <button class="ui circular icon button teal right floated" data-content="Hello. This is a small popup"
                data-variation="small" ng-click="filtro()" style="margin-right: -5%">Actualizar <i
                class="refresh icon"></i></button>
    </h2>

    <div class="ui segment">
 <p> <b>1.</b> Seleccioná la ubicación, tipo de prioridad u otros filtros. <br>
 <b>2.</b> Hacé click en activado/desactivado <br>
 <b>3.</b> Hacé click en el botón actualizar


  </p>
 <p></p>
 <p></p>


 </div>


    <div class="ui segment labels teal"> <!--Agrupamos por tipo -->
        <label class="ui teal label">Fonacide <i class="circular info icon link"
                                                 data-content="Seleccioná uno o más tipos de requerimientos y el rango de prioridad que quieras ver "
                                                 data-variation="small"></i></label>

        <div class="ui  checkbox" style="float: right; opacity: 0.99">

            <input id="prioridad-check" ng-model="prioridadesSeleccionadas.check" ng-checked="prioridadesSeleccionadas.check" ng-change="activar_filtro()"
                   type="checkbox">
            <label for="prioridad-check"></label>
        </div>

        <b ng-if="prioridadesSeleccionadas.check" ng-click="prioridadesSeleccionadas.check = false; activar_filtro()" style="float: right;">Activado&nbsp;&nbsp;</b>
        <b ng-if="!prioridadesSeleccionadas.check" ng-click="prioridadesSeleccionadas.check = true; activar_filtro()" style="float: right; opacity: 0.5">Desactivado&nbsp;&nbsp;</b>

        <div class="item filtros">
            <h4>Tipo de Requerimiento </h4>

            <div class="ui two column grid">
                <div class="column">
                    <div class="ui checkbox column">
                        <input ng-model="prioridadesSeleccionadas.sanitarios" ng-change="activar_filtro()"
                               id="prioridad-sanitarios" type="checkbox" name="fun">
                        <label for="prioridad-sanitarios">Sanitarios</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui checkbox column">
                        <input ng-model="prioridadesSeleccionadas.aulas" ng-change="activar_filtro()"
                               id="prioridad-aulas" type="checkbox" name="fun">
                        <label for="prioridad-aulas">Aulas</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui checkbox column">
                        <input ng-model="prioridadesSeleccionadas.mobiliarios" ng-change="activar_filtro()"
                               id="prioridad-mobiliarios" type="checkbox" name="fun">
                        <label for="prioridad-mobiliarios">Mobiliario</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui checkbox column">
                        <input ng-model="prioridadesSeleccionadas.otros" ng-change="activar_filtro()"
                               id="prioridad-otros" type="checkbox" name="fun">
                        <label for="prioridad-otros">Otros Espacios</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="item filtros">
            <h4>Prioridad</h4>

            <div class="content" style="padding: 20px">
                <div class="range slider"></div>
                <input id="slider-upper" type="hidden" name="upper"/>
                <input id="slider-lower" type="hidden" name="lower"/>
            </div>

        </div>


    </div>

      <div style="position:relative; z-index:1200" filtro-ubicacion callback="activar_filtro" seleccionado="ubicacionSeleccionada"
                      multiple="false"></div>

    <div class="ui segment labels teal"> <!--Agrupamos por tipo -->
        <label class="ui teal label">Otros <i class="circular info icon link"
                                              data-content="Seleccioná para ver las instituciones que fueron reportadas y/o las que cuentan con informe de contraloría."
                                              data-variation="small"></i></label>

        <div class="ui  checkbox" style="float: right;  opacity: 0.99;">
            <input id="otros-check" ng-model="otrosSeleccionados.check" ng-checked="otrosSeleccionados.check" ng-change="activar_filtro()" type="checkbox">
            <label for="otros-check"></label>
        </div>
        <b ng-if="otrosSeleccionados.check" ng-click="otrosSeleccionados.check = false; activar_filtro()" style="float: right">Activado&nbsp;&nbsp;</b>
        <b ng-if="!otrosSeleccionados.check" ng-click="otrosSeleccionados.check = true; activar_filtro()" style="float: right; opacity: 0.5">Desactivado&nbsp;&nbsp;</b>



        <div class="item filtros">
            <div class="ui checkbox">
                <input id="reportados" type="checkbox" ng-model="otrosSeleccionados.reportadas" ng-change="activar_filtro()">
                <label for="reportados">Instituciones Reportadas</label>
            </div>
        </div>
{#        <div class="item filtros">#}
{#            <div class="ui checkbox">#}
{#                <input id="adjudicaciones" type="checkbox" ng-model="otrosSeleccionados.adjudicaciones" ng-change="activar_filtro()">#}
{#                <label for="adjudicaciones">Instituciones con Adjudicaciones</label>#}
{#            </div>#}
{#        </div>#}
{#        <div class="item filtros">#}
{#            <div class="ui checkbox">#}
{#                <input id="planificaciones" type="checkbox" ng-model="otrosSeleccionados.planificaciones" ng-change="activar_filtro()">#}
{#                <label for="planificaciones">Instituciones con Planificaciones</label>#}
{#            </div>#}
{#        </div>#}
        <div class="item filtros">
            <div class="ui checkbox">
                <input id="planificaciones" type="checkbox" ng-model="otrosSeleccionados.documentos" ng-change="activar_filtro()">
                <label for="planificaciones">Instituciones con Documentos de la Contraloría</label>
            </div>
        </div>

        <div class="item filtros" style="margin-bottom: 5px">
            <label for="estado_de_obras">Estado de obras</label>
            <select id="estado_de_obras" ng-model="otrosSeleccionados.estado" class="ui fluid upward dropdown">
              <option value="">Estado</option>
              <option value="todos">Todos</option>
              <option value="priorizado">Priorizado</option>
              <option value="planificado">Planificado</option>
              <option value="adjudicado">Adjudicado</option>
              <option value="terminado">Terminado</option>
            </select>
        </div>
    </div>
</div>
<!-- <div class="ui dimmer" ng-class="{active: loading}" style="z-index:1001"> -->

<!-- </div> -->
<div id="menu-launch" class="ui big filter launch basic right attached fixed button"
     style="padding-right: 10px;position: fixed;top: 200px;z-index: 99;background-color: white !important;">
    <div style="text-align: center; font-size: 0.6em; font-weight: bold;">F<br/>I<br/>L<br/>T<br/>R<br/>O<br/>S</div>
</div>


<div class="pusher mapContainer" style="background-color: #00b5ad;"
     onClick="$('#map').css('width', '100%'); window.map.invalidateSize();">
    <div id="map" style="height: 96%">
        <div class="ui indeterminate large text active loader map-loader">
            <h2>Cargando</h2>
        </div>
    </div>
</div>
<script>
    (function () {
        $('.circular.info')
                .popup({
                    on: 'hover'
                })
        ;
        $('.filtros .upward.ui.dropdown').dropdown();
        angular.element(".filter.launch").click(function () {
            angular.element('.left.sidebar')
                    .sidebar({
                        context: angular.element('[ng-view]'),
                        dimPage: false,
                        closable: false
                    })
                    .sidebar('toggle');
        });
        $('#map').click(function (event) {
            event.stopPropagation();
        });
        var rangeSlider = $('.range.slider').noUiSlider({
            start: [0, 200],
            step: 10,
            snap: true,
            connect: true,
            range: {
                min: 0,
                '5%': 10,
                '10%': 20,
                '15%': 30,
                '20%': 40,
                '25%': 50,
                '30%': 60,
                '35%': 70,
                '40%': 80,
                '45%': 90,
                '50%': 100,
                '55%': 110,
                '60%': 120,
                '65%': 130,
                '70%': 140,
                '75%': 150,
                '80%': 160,
                '85%': 170,
                '90%': 180,
                '95%': 190,
                max: 200
            }
        }, true).noUiSlider_pips({
            mode: 'range',
            filter: function (value) {
                return value % 100 ? (value % 50 ? 0 : 2 ) : 1;
            },
            density: 3
        });
        rangeSlider.Link('upper').to('-inline-<div class="tooltip right"></div>', function (value) {
            // The tooltip HTML is 'this', so additional
            // markup can be inserted here.
            $(this).html(
                    '<span>' + parseInt(value) + '</span>'
            );
        });
        rangeSlider.Link('upper').to($('#slider-upper'));
        rangeSlider.Link('lower').to('-inline-<div class="tooltip left"></div>', function (value) {
            // The tooltip HTML is 'this', so additional
            // markup can be inserted here.
            $(this).html(
                    '<span>' + parseInt(value) + '</span>'
            );
        });
        rangeSlider.Link('lower').to($('#slider-lower'));
        rangeSlider.on({
            change: function () {
                angular.element('#map').scope().activar_filtro();
            }
        });
    })();