237 lines
10 KiB
HTML
237 lines
10 KiB
HTML
<div class="content">
|
|
<div class="py-2">
|
|
<!--<button type="button" class="ds-btn ds-btn--primary" (click)="exportReportesGeneralesUserExcel()">Exportar como Excel</button>
|
|
<button type="button" class="ds-btn ds-btn--primary" (click)="exportReportesGeneralesUserPDF()">Exportar como PDF</button>-->
|
|
<button type="button" [hidden]="reportForEncuestas" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
|
|
Ver reportes generales
|
|
</button>
|
|
<button type="button" [hidden]="reportsGeneral" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
|
|
Ver reportes por encuestas
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="py-2" [hidden]="reportsGeneral">
|
|
<h1>Reportes generales</h1>
|
|
<h2>En esta sección encontrará los reportes generales de todas sus encuestas</h2>
|
|
</div>
|
|
|
|
<div class="py-2" [hidden]="reportForEncuestas">
|
|
<h1>Reportes por encuesta</h1>
|
|
<h2>En esta sección encontrará los reportes de cada una de sus encuestas</h2>
|
|
</div>
|
|
<hr />
|
|
|
|
<!--REPORTES GENERALES-->
|
|
<div class="container-fluid py-5" [hidden]="reportsGeneral">
|
|
<div class="">
|
|
<div class="row justify-content-around">
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="row">
|
|
<div class="col-xs-5 w-25 px-1">
|
|
<div class="icon-big icon-success text-center">
|
|
<fa-icon [icon]="faListAlt"></fa-icon>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-7 w-50">
|
|
<div class="numbers">
|
|
<p class="ds-title--small">Cantidad de encuestas creadas</p>
|
|
{{ cantEncuestas }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<hr />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="row">
|
|
<div class="col-xs-5 w-25 px-1">
|
|
<div class="icon-big icon-users-active text-center">
|
|
<fa-icon [icon]="faUser"></fa-icon>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-7 w-50">
|
|
<div class="numbers">
|
|
<p class="ds-title--small">Cantidad de usuario que han completado las encuestas</p>
|
|
{{ cantPersonas }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<hr />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-around por-categoria">
|
|
<div class="col-md-5">
|
|
<div class="grafico-encuestas-fecha">
|
|
<div class="card" height="300" width="300">
|
|
<h1 class="ds-title">Cantidad de encuestas por estado</h1>
|
|
|
|
<div id="chartEstado" class="ct-chart ct-major-tenth"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<div class="grafico-encuestas-fecha">
|
|
<div class="card" height="300" width="300">
|
|
<h1 class="ds-title">Cantidad de encuestas por acceso</h1>
|
|
|
|
<div id="chartAcceso" class="ct-chart ct-major-tenth"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--REPORTE POR ENCUESTA-->
|
|
|
|
<div class="container-fluid" [hidden]="reportForEncuestas">
|
|
<div class="row gx-5" *ngIf="encuestas && encuestas.length > 0">
|
|
<div class="col-xl-4 col-lg-4 col-md-6 mb-5" *ngFor="let encuesta of encuestas">
|
|
<div class="card-encuesta lift h-100" [attr.data-id]="encuesta.id">
|
|
<div class="card-body p-3">
|
|
<div class="card-title mb-0">{{ encuesta.nombre }}</div>
|
|
<div class="entity-body--row m-2">
|
|
<span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<div class="entity-body">
|
|
<div class="entity-body--row m-2">
|
|
<span class="mt-2" *ngIf="duracion! > 0"
|
|
><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: {{
|
|
duracion
|
|
}}</span
|
|
>
|
|
<span class="mt-2" *ngIf="duracion! == 0"
|
|
><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: Un día o
|
|
menos</span
|
|
>
|
|
|
|
<span class="mt-2" *ngIf="duracion! == -1"
|
|
><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: No ha
|
|
finalizado</span
|
|
>
|
|
</div>
|
|
|
|
<div class="entity-body--row m-2">
|
|
<p>Calificación:</p>
|
|
<fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon>
|
|
<fa-icon
|
|
*ngFor="let i of [].constructor(5 - encuesta.calificacion!)"
|
|
class="entity-icon--star--off"
|
|
[icon]="faStar"
|
|
></fa-icon>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<button (click)="detallesPreguntas()" class="ds-btn btn-card ds-btn--primary">
|
|
<fa-icon [icon]="faEye"></fa-icon> Reporte de contenido
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--REPORTES DE LAS PREGUNTAS-->
|
|
|
|
<div class="container-fluid" *ngIf="encuesta">
|
|
<div>
|
|
<div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
|
|
<span>No se encontraron preguntas</span>
|
|
</div>
|
|
|
|
<div class="ds-survey preview-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
|
|
<div class="ds-survey--all-question-wrapper col-8">
|
|
<div
|
|
class="ds-survey--question-wrapper card-encuesta lift"
|
|
*ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId"
|
|
>
|
|
<div
|
|
[attr.data-index]="ePregunta.id"
|
|
[attr.data-tipo]="ePregunta.tipo"
|
|
[attr.data-opcional]="ePregunta.opcional"
|
|
class="ds-survey--question"
|
|
>
|
|
<div class="ds-survey--titulo">
|
|
<span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
|
|
</div>
|
|
<div>
|
|
<span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
|
|
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
|
|
{{ ePregunta.opcional ? '(opcional)' : '' }}</span
|
|
>
|
|
<span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
|
|
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}
|
|
{{ ePregunta.opcional ? '(opcional)' : '' }}</span
|
|
>
|
|
<span *ngIf="!ePregunta.tipo" class="ds-subtitle"
|
|
>Pregunta de respuesta abierta {{ ePregunta.opcional ? '(opcional)' : '' }}</span
|
|
>
|
|
</div>
|
|
<ng-container *ngIf="ePregunta.tipo">
|
|
<ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
|
|
<ng-container *ngFor="let ePreguntaOpcionFinal of ePreguntaOpcion">
|
|
<ng-container *ngIf="ePregunta.id === ePreguntaOpcionFinal.epreguntaCerrada.id">
|
|
<div
|
|
class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete"
|
|
[attr.data-id]="ePreguntaOpcionFinal.id"
|
|
>
|
|
<div class="radio" *ngIf="ePregunta.tipo === 'SINGLE'">
|
|
<input
|
|
type="radio"
|
|
(change)="onCheck(ePreguntaOpcionFinal)"
|
|
[value]="ePreguntaOpcionFinal.id"
|
|
style="border-radius: 3px"
|
|
name="{{ 'radio' + ePregunta.id }}"
|
|
id="{{ 'radio' + ePreguntaOpcionFinal.id }}"
|
|
/>
|
|
<label for="{{ 'radio' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
|
|
</div>
|
|
<div class="checkbox" *ngIf="ePregunta.tipo === 'MULTIPLE'">
|
|
<input
|
|
(change)="toggleOption(ePreguntaOpcionFinal)"
|
|
type="checkbox"
|
|
style="border-radius: 3px"
|
|
id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
|
|
/>
|
|
<label for="{{ 'checkbox' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<div class="ds-survey--option ds-survey--option--base ds-survey--open-option" *ngIf="!ePregunta.tipo">
|
|
<textarea id="{{ ePregunta.id }}" cols="33" rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|