<div class="row">
<div class="box-body" style="text-transform: uppercase;">
<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
<h2>{% if PlanesProgramas %}
{{ PlanesProgramas.programaCODIGO }} - {{ PlanesProgramas.programaTITULO }}
{% elseif PlanesAcciones %}
{{ PlanesAcciones.accionCODIGO }} - {{ PlanesAcciones.accionTITULO }}
{% elseif Actividad %}
{{Actividad.actividadCODIGO}} - {{Actividad.actividadTITULO}}
{% endif %}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 1cm;">
{% if PlanesProgramas %}
<h5>Estado : <span class="badge bg-green"><strong>{{ PlanesProgramas.estadoProgramaTITULO }}</strong></span></h5>
{% elseif PlanesAcciones %}
<button type="button" class="btn btn-default" onclick="cargarDescripcion('programaID={{PlanesAcciones.programaID}}','tipoPlanID={{TipoPlanID}}')" style="text-transform: uppercase;" >
<strong >Programa:</strong> {{ PlanesAcciones.programaTITULO }}
</button>
<h5>Responsable : <span class="pull-right"><strong>{{ PlanesAcciones.cargoTITULO }}</strong></span></h5>
{% elseif Actividad %}
<button type="button" class="btn btn-default" onclick="cargarDescripcion('accionID={{Actividad.accionID}}','tipoPlanID={{TipoPlanID}}')" style="text-transform: uppercase;">
<strong >Acción:</strong> {{ Actividad.accionTITULO }}
</button>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-1"></div>
<div class="col-md-4 offset-md-2">
<table class="table table-bordered table-hover table-responsive" style="text-align:center;">
<thead class="{% if PlanesProgramas %} bg-green {% elseif PlanesAcciones %} bg-aqua {% elseif Actividad %} bg-yellow {% endif %} ">
<tr><th style="text-align:center;">Fecha Inicio</th></tr>
</thead>
<tbody>
<tr><td>
{% if PlanesProgramas.programaFCHINICIA %}
{{ PlanesProgramas.programaFCHINICIA }}
{% else %}
No está definida
{% endif %}</td></tr>
</tbody>
</table>
</div>
<div class="col-md-4 offset-md-2">
<table class="table table-bordered table-hover table-responsive" style="text-align:center;">
<thead class="bg-red">
<tr><th style="text-align:center;">Fecha Finalización</th></tr>
</thead>
<tbody>
<tr><td>{% if PlanesProgramas.programaFCHTERMINA %}
{{ PlanesProgramas.programaFCHTERMINA }}
{% else %}
No está definida
{% endif %}</td></tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box {% if PlanesProgramas %} box-success {% elseif PlanesAcciones %} box-info {% elseif Actividad %} box-warning {% endif %} collapsed-box">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">JUSTIFICACIÓN - DESCRIPCIÓN</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none;">
<p style="text-align:justify;">
{% if PlanesProgramas %}
{{ PlanesProgramas.programaJUSTIFICACION|striptags }}
{% elseif PlanesAcciones %}
{{PlanesAcciones.accionJUSTIFICACION|striptags }}
{% elseif Actividad %}
{{Actividad.actividadJUSTIFICACION| striptags }}
{% endif %}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-default collapsed-box">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">ESTADÍSTICAS</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none;">
<div class="col-md-5" style="padding-top:2cm;">
<div class="info-box" style="box-shadow: 0 1px 1px rgba(0, 166, 90, 0.3);">
<span class="info-box-icon {% if PlanesProgramas %} bg-green {% elseif PlanesAcciones %} bg-aqua {% elseif Actividad %} bg-yellow {% endif %} "><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Presupuestado</span>
<span class="info-box-number">
{% if PlanesProgramas %}
{{ PlanesProgramas.Total.TOTAL }}
{% elseif PlanesAcciones %}
{{ PlanesAcciones.Total.TOTAL }}
{% elseif Actividad %}
{{ Actividad.Total.TOTAL }}
{% endif %}
</span>
</div>
</div>
</div>
<div class="col-md-7">
<canvas id="estadisticas" height="130px"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box{% if PlanesProgramas %} box-success {% elseif PlanesAcciones %} box-info {% elseif Actividad %} box-warning {% endif %} ">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;"> {% if PlanesProgramas.Acciones %}ACCIONES{% elseif PlanesAcciones %}ACTIVIDADES{% elseif Actividad %}OPERACIONES{% endif %}</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="">
<table class="table table-bordered table-hover table-responsive">
<thead>
<tr>
<th>Código</th>
{% if not Actividad %}
<th>Título</th>
<th>Justificación</th>
{% else %}
<th>Tipo Operación</th>
<th>Descripción</th>
{% endif %}
{% if (PlanesAcciones or Actividad) %}
<th>Fecha Inicia</th>
<th>Fecha Termina</th>
{% endif %}
<th>Costo</th>
{% if not Actividad %}
<th>Ver</th>
{% endif %}
</tr>
</thead>
<tbody>
{% if PlanesProgramas.Acciones %}
{% for planAccion in PlanesProgramas.Acciones %}
<tr>
<td>
{{ planAccion.accionCODIGO }}
</td>
<td>
{{ planAccion.accionTITULO }}
</td>
<td>
{{ planAccion.accionJUSTIFICACION| striptags[0:50] }}...
</td>
<td>
{{ planAccion.Total.TOTAL }}
</td>
<td >
<a data-skin="skin-blue" class="btn btn-info btn-xs" onclick="cargarDescripcion('accionID={{planAccion.accionID}}','tipoPlanID={{TipoPlanID}}')"><i class="fa fa-eye"></i></a>
</td>
</tr>
{% endfor %}
{% elseif PlanesAcciones %}
{% for planActividad in PlanesAcciones.Actividades %}
<tr>
<td>
{{ planActividad.actividadCODIGO }}
</td>
<td>
{{ planActividad.actividadTITULO }}
</td>
<td>
{{ planActividad.actividadJUSTIFICACION| striptags[0:50] }}...
</td>
<td>
{{ planActividad.actividadFCHINICIAL }}
</td>
<td>
{{ planActividad.actividadFCHFINAL }}
</td>
<td>
{{ planActividad.Total.TOTAL }}
</td>
<td >
<a data-skin="skin-blue" class="btn btn-info btn-xs" onclick="cargarDescripcion('actividadID={{planActividad.actividadID}}','tipoPlanID={{TipoPlanID}}')"><i class="fa fa-eye"></i></a>
</td>
</tr>
{% endfor %}
{% elseif Actividad %}
{% for planOperacion in Actividad.Operaciones %}
<tr>
<td>
{{ planOperacion.planOperacionCODIGO }}
</td>
<td>
{{ planOperacion.tipoOperacionTITULO }}
</td>
<td>
{{ planOperacion.planOperacionDESCRIPCION| striptags[0:50] }}...
</td>
<td>
{{ planOperacion.planOperacionFCHINICIO }}
</td>
<td>
{{ planOperacion.planOperacionFCHFINAL }}
</td>
<td>
{{ planOperacion.planOperacionPRESUPUESTADO }}
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% if Actividad %}
<div class="row">
<div class="col-md-12">
<div class="box box-danger">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">INGRESOS</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Plan</th>
<th>Clase de Ingreso</th>
<th>Presupuesto</th>
<th>Fecha Proyectada</th>
<th>Usuario Proyectado</th>
</tr>
</thead>
<tbody>
{% for registroIngresoActividades in Actividad.PlanesIngresos %}
<tr>
<td>{{ registroIngresoActividades.planCODIGO }}</td>
<td>{{ registroIngresoActividades.claseIngresoTITULO }}</td>
<td>{{ registroIngresoActividades.planIngresoPRESUPUESTO }}</td>
<td>{{ registroIngresoActividades.planIngresoFCHPROYECTADO }}</td>
<td>{{ registroIngresoActividades.planIngresoUSRPROYECTADO }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var ctx = document.getElementById("estadisticas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Gastado", "Restante"],
datasets: [{
{% if PlanesProgramas %}
data: [2000000, {{ PlanesProgramas.Total.TOTAL - 2000000}}],
{% elseif PlanesAcciones %}
data: [2000000, {{ PlanesAcciones.Total.TOTAL - 2000000}}],
{% elseif Actividad %}
data: [2000000, {{ Actividad.Total.TOTAL - 2000000}}],
{% endif %}
backgroundColor: [
'rgba(0, 166, 90, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(0, 127, 69, 1)',
'rgba(255,99,132,1)'
],
borderWidth: 2
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
}
}
}
}
});
});
</script>