Skip to content

Commit

Permalink
Export session data
Browse files Browse the repository at this point in the history
  • Loading branch information
@jggoebel
jggoebel committed May 6, 2024
1 parent d492925 commit f49d471
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 82 deletions.
4 changes: 3 additions & 1 deletion src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ import {
timesIcon,
buildingIcon,
numberListIcon,
downloadIcon,
} from '@cds/core/icon';

ClarityIcons.addIcons(
Expand Down Expand Up @@ -183,7 +184,8 @@ ClarityIcons.addIcons(
clockIcon,
timesIcon,
buildingIcon,
numberListIcon
numberListIcon,
downloadIcon
);

const appInitializerFn = (appConfig: AppConfigService) => {
Expand Down
188 changes: 115 additions & 73 deletions src/app/dashboards/progress-dashboard/progress-dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,125 @@
<div class="content-area">
<div class="clr-row clr-align-items-center clr-justify-content-between">
<div class="card clr-col-9">
<div class="clr-row clr-align-items-center">
<div class="clr-col">
<clr-toggle-container id="includeFinishedToggle">
<clr-toggle-wrapper>
<input type="checkbox" clrToggle name="includeFinished" [disabled]="selectedEvent?.finished"
[(ngModel)]="includeFinished" (change)="refresh()">
<label>Include finished</label>
</clr-toggle-wrapper>
<clr-control-helper>Whether finished sessions should be included.
</clr-control-helper>
</clr-toggle-container>
</div>
<div class="clr-col ">
<input id="userFilter" clrInput placeholder="filter users" name="userFilter"
[(ngModel)]="userFilter" (ngModelChange)="filter()"
[disabled]="filteredProgress.length == 0 && userFilter.length == 0" />
<span class="clr-subtext">Filter by users email</span>
</div>
<div class="clr-col">
<clr-dropdown>
<button class="dropdown-toggle btn btn-link" clrDropdownTrigger
[disabled]="scenarioList.size < 2">
<span *ngIf="this.scenarioFilterList.size == 0">Filter
scenario(s)</span>
<span *ngIf="this.scenarioFilterList.size == 1">1 Scenario
selected</span>
<span *ngIf="this.scenarioFilterList.size > 1">{{this.scenarioFilterList.size}}
Scenarios selected</span>
<cds-icon shape="angle" direction="down"></cds-icon>
</button>

<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<clr-row *ngFor="let sc of scenarioList" clrDropdownItem (click)="filterScenario(sc)"
[ngClass]="{'selected' : this.scenarioFilterList.has(sc)}">
{{sc}}
<span class="filter-selected">
<cds-icon *ngIf="this.scenarioFilterList.has(sc)" shape="check">
</cds-icon>
</span>
</clr-row>
</clr-dropdown-menu>
</clr-dropdown>
</div>
<div class="clr-col">
<p>Showing {{filteredProgress.length}} of {{currentProgress.length}} Sessions
</p>
<button class="btn btn-icon btn-warning" (click)="removeFilter()">
<cds-icon shape="trash"></cds-icon> Clear Filter
</button>
</div>
</div>
<div class="clr-row clr-align-items-center clr-justify-content-between">
<div class="card clr-col-9">
<div class="clr-row clr-align-items-center">
<div class="clr-col">
<clr-toggle-container id="includeFinishedToggle">
<clr-toggle-wrapper>
<input
type="checkbox"
clrToggle
name="includeFinished"
[disabled]="selectedEvent?.finished"
[(ngModel)]="includeFinished"
(change)="refresh()"
/>
<label>Include finished</label>
</clr-toggle-wrapper>
<clr-control-helper
>Whether finished sessions should be included.
</clr-control-helper>
</clr-toggle-container>
</div>
<div class="clr-col buttonCol">
<button class="btn btn-link userlistIcon" [disabled]="users?.length < 1" (click)="openUserList()">
<cds-icon shape="users" size="48" solid></cds-icon>{{users?.length}}
<div class="clr-col">
<input
id="userFilter"
clrInput
placeholder="[email protected]"
name="userFilter"
[(ngModel)]="userFilter"
(ngModelChange)="filter()"
[disabled]="filteredProgress.length == 0 && userFilter.length == 0"
/>
<span class="clr-subtext">Filter by username</span>
<clr-dropdown>
<button
class="dropdown-toggle btn btn-link"
clrDropdownTrigger
[disabled]="scenarioList.size < 2"
>
<span *ngIf="this.scenarioFilterList.size == 0"
>Filter scenario(s)</span
>
<span *ngIf="this.scenarioFilterList.size == 1"
>1 Scenario selected</span
>
<span *ngIf="this.scenarioFilterList.size > 1"
>{{ this.scenarioFilterList.size }} Scenarios selected</span
>
<cds-icon shape="angle" direction="down"></cds-icon>
</button>

<clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
<clr-row
*ngFor="let sc of scenarioList"
clrDropdownItem
(click)="filterScenario(sc)"
[ngClass]="{ selected: this.scenarioFilterList.has(sc) }"
>
{{ sc }}
<span class="filter-selected">
<cds-icon
*ngIf="this.scenarioFilterList.has(sc)"
shape="check"
>
</cds-icon>
</span>
</clr-row>
</clr-dropdown-menu>
</clr-dropdown>
</div>
<div class="clr-col">
<interval-timer (intervalElapsed)="refresh()"></interval-timer>
<p>
Showing {{ filteredProgress.length }} of
{{ currentProgress.length }} Sessions
</p>
<button class="btn btn-icon btn-warning" (click)="removeFilter()">
<cds-icon shape="trash"></cds-icon> Clear Filter
</button>
<button class="btn btn-icon btn-icon" (click)="exportCSV()">
<cds-icon shape="download"></cds-icon> Export CSV
</button>
</div>
</div>
</div>
<div class="clr-row">
<ng-container *ngIf="currentProgress?.length > 0; else no_sessions">
<div class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3" *ngFor="let p of filteredProgress">
<progress-card [progress]="p" [pause]="pause" (nameClickedEvent)="filterName($event)"></progress-card>
</div>
</ng-container>
<div class="clr-col buttonCol">
<button
class="btn btn-link userlistIcon"
[disabled]="users?.length < 1"
(click)="openUserList()"
>
<cds-icon shape="users" size="48" solid></cds-icon>{{ users?.length }}
</button>
</div>
<ng-template #no_sessions>
<div class="clr-col-12">
<p>
No sessions found.
</p>
</div>
</ng-template>
<div class="clr-col">
<interval-timer (intervalElapsed)="refresh()"></interval-timer>
</div>
</div>
<div class="clr-row">
<ng-container *ngIf="currentProgress?.length > 0; else no_sessions">
<div
class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3"
*ngFor="let p of filteredProgress"
>
<progress-card
[progress]="p"
[pause]="pause"
(nameClickedEvent)="filterName($event)"
></progress-card>
</div>
</ng-container>
</div>
<ng-template #no_sessions>
<div class="clr-col-12">
<p>No sessions found.</p>
</div>
</ng-template>
</div>


<event-user-list #userList [users]="users" [progress]="currentProgress" (userSelected)="filterName($event.email)">
</event-user-list>
<event-user-list
#userList
[users]="users"
[progress]="currentProgress"
(userSelected)="filterName($event.email)"
>
</event-user-list>
51 changes: 43 additions & 8 deletions src/app/dashboards/progress-dashboard/progress-dashboard.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import {
Component,
OnInit,
ViewChild,
Input,
SimpleChanges,
} from '@angular/core';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { ProgressService } from 'src/app/data/progress.service';
import { Progress, ProgressCount } from 'src/app/data/progress';
import { Progress } from 'src/app/data/progress';
import { UserService } from '../../data/user.service';
import { ScheduledEvent } from '../../data/scheduledevent';
import { ScheduledeventService } from '../../data/scheduledevent.service';
Expand Down Expand Up @@ -156,4 +150,45 @@ export class ProgressDashboardComponent implements OnInit {
this.filter();
});
}

exportCSV() {
let progressCSV = '';
this.filteredProgress.forEach((progress) => {
progressCSV = progressCSV.concat(
progress.id +
', ' +
progress.user +
', ' +
progress.username +
', ' +
progress.scenario +
', ' +
progress.scenario_name +
', ' +
progress.course +
', ' +
progress.course_name +
', ' +
progress.total_step +
', ' +
progress.max_step +
', ' +
progress.started +
', ' +
progress.last_update +
'\n'
);
});
const filename = this.selectedEvent.event_name + '_sessions.csv';
var element = document.createElement('a');
element.setAttribute(
'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(progressCSV)
);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}

0 comments on commit f49d471

Please sign in to comment.