reconstructed reports architecture, created stand-alone csvCreator class,...

reconstructed reports architecture, created stand-alone csvCreator class, created stand-alone chartCreator class
parent c4db9416
......@@ -6,15 +6,18 @@ import { Router } from '@angular/router';
@Component({
selector: 'breadcrubs',
template: ` <div [hidden]="currentUrl !== '/epal-class-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Τάξης </p></div>
template: `
<div [hidden]="currentUrl !== '/epal-class-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Τάξης </p></div>
<div [hidden]="currentUrl !== '/sector-fields-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Τoμέα</p></div>
<div [hidden]="currentUrl !== '/region-schools-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Σχολείου ανα Περιφερειακή Διεύθυνση</p></div>
<div [hidden]="currentUrl !== '/sectorcourses-fields-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Επιλογή Ειδικότητας ανα τoμέα</p></div>
<div [hidden]="currentUrl !== '/schools-order-select'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Σειρά Προτίμησης Επιλεχθέντων Σχολείων</p></div>
<div [hidden]="currentUrl !== '/student-application-form-main'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Προσωπικά Στοιχεία</p></div>
<div [hidden]="currentUrl !== '/application-submit'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Προεπισκόπη αίτησης</p></div>
<div [hidden]="currentUrl !== '/submited-preview'" class="col-sm-12"><p class="crumb" > Υποβληθείσες αιτήσεις</p></div>
<div [hidden]="currentUrl !== '/application-submit'" class="col-sm-12"><p class="crumb" >Νέα Αίτηση -> Προεπισκόπη αίτησης</p></div>
<div [hidden]="currentUrl !== '/submited-preview'" class="col-sm-12"><p class="crumb" > Υποβληθείσες αιτήσεις</p></div>
<div [hidden]="currentUrl !== '/ministry'" class="col-sm-12"><p class="crumb" > Διαχειριστής Υπουργείου Παιδείας -> Σύνδεση</p></div>
`
})
......@@ -25,7 +28,7 @@ constructor(private _router:Router) {}
ngOnInit() {
this.currentUrl = this._router.url;
}
}
import * as d3 from 'd3';
import { ElementRef, ViewChild } from "@angular/core";
export class chartCreator {
//d3 test
@ViewChild('chart') public chartContainer: ElementRef;
//@Input() private d3data: Array<any>;
public d3data: Array<any>;
private margin: any = { top: 20, bottom: 20, left: 20, right: 20};
private chart: any;
private width: number;
private height: number;
private xScale: any;
private yScale: any;
private colors: any;
private xAxis: any;
private yAxis: any;
createChart() {
let element = this.chartContainer.nativeElement;
this.width = element.offsetWidth - this.margin.left - this.margin.right;
this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
let svg = d3.select(element).append('svg')
.attr('width', element.offsetWidth)
.attr('height', element.offsetHeight);
// chart plot area
this.chart = svg.append('g')
.attr('class', 'bars')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
// define X & Y domains
let xDomain = this.d3data.map(d => d[0]);
let yDomain = [0, d3.max(this.d3data, d => d[1])];
//let yDomain = [0, 1000];
// create scales
this.xScale = d3.scaleBand().padding(0.1).domain(xDomain).rangeRound([0, this.width]);
this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);
//this.yScale = d3.scaleLinear().domain(yDomain).range([1000, 0]);
// bar colors
this.colors = d3.scaleLinear().domain([0, this.d3data.length]).range(<any[]>['red', 'blue']);
// x & y axis
this.xAxis = svg.append('g')
.attr('class', 'axis axis-x')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
.call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.call(d3.axisLeft(this.yScale));
}
updateChart() {
// update scales & axis
this.xScale.domain(this.d3data.map(d => d[0]));
this.yScale.domain([0, d3.max(this.d3data, d => d[1])]);
this.colors.domain([0, this.d3data.length]);
this.xAxis.transition().call(d3.axisBottom(this.xScale));
this.yAxis.transition().call(d3.axisLeft(this.yScale));
let update = this.chart.selectAll('.bar')
.data(this.d3data);
// remove exiting bars
update.exit().remove();
// update existing bars
this.chart.selectAll('.bar').transition()
.attr('x', d => this.xScale(d[0]))
.attr('y', d => this.yScale(d[1]))
.attr('width', d => this.xScale.bandwidth())
.attr('height', d => this.height - this.yScale(d[1]))
.style('fill', (d, i) => this.colors(i));
// add new bars
update
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => this.xScale(d[0]))
.attr('y', d => this.yScale(0))
.attr('width', this.xScale.bandwidth())
.attr('height', 0)
.style('fill', (d, i) => this.colors(i))
.transition()
.delay((d, i) => i * 10)
.attr('y', d => this.yScale(d[1]))
.attr('height', d => this.height - this.yScale(d[1]));
}
}
import {reportsSchema, TableColumn} from './reports-schema';
import { LocalDataSource } from 'ng2-smart-table';
import { Input } from "@angular/core";
export class csvCreator {
public source: LocalDataSource;
columnMap: Map<string,TableColumn> = new Map<string,TableColumn>();
@Input() settings: any;
private reportSchema = new reportsSchema();
onSearch(query: string = '') {
this.source.setFilter([
// fields we want to include in the search
{
field: 'name',
search: query
}
], false);
// second parameter specifying whether to perform 'AND' or 'OR' search
// (meaning all columns should contain search query or at least one)
// 'AND' by default, so changing to 'OR' by setting false here
}
export2Csv(): void {
const columns: TableColumn[] = Array.from(this.columnMap.values());
let encodedStr = columns.reduce((acct, current: TableColumn) => {
if (current.isExport != false) {
return acct += '"' + current.title + '",';
}
else {
return acct;
}
}, '');
encodedStr = encodedStr.slice(0, -1);
encodedStr += '\r\n';
let fields: string[] = columns.reduce((acct, column: TableColumn) => {
if (column.isExport != false) {
acct.push(column.field);
}
return acct;
}, []);
this.source.getAll().then((rows) => {
rows.forEach((row) => {
fields.forEach((field) => {
if (row.hasOwnProperty(field)) {
let value = row[field];
if (!value) {
value = "";
}
let valuePrepare = this.columnMap.get(field).valuePrepareFunction;
if (valuePrepare) {
value = valuePrepare.call(null, value, row);
}
encodedStr += '"' + value + '",'
}
});
encodedStr = encodedStr.slice(0, -1);
encodedStr += '\r\n';
});
let a = document.createElement("a");
a.setAttribute('style', 'display:none;');
document.body.appendChild(a);
//Set utf-8 header to let excel recognize its encoding
let blob = new Blob(["\ufeff", encodedStr], {type: 'text/csv'});
a.href = window.URL.createObjectURL(blob);
a.download = (this.settings.fileName || 'epalSystemReport') + "all_stat" + '.csv';
a.click();
});
}
prepareColumnMap(): void {
for (const key in this.settings.columns) {
if (!this.settings.columns.hasOwnProperty(key)) {
continue;
}
const title: string = this.settings.columns[key]['title'];
let column: TableColumn = new TableColumn();
column.type = this.settings.columns[key]['type'];
column.title = this.settings.columns[key]['title'];
column.field = key;
column.isDisplay = this.settings.columns[key]['isDisplay'];
column.isExport = this.settings.columns[key]['isExport'];
column.valuePrepareFunction = this.settings.columns[key]['valuePrepareFunction'];
this.columnMap.set(column.field, column);
if (this.settings.columns[key].isDisplay == false) {
delete this.settings.columns[key];
}
}
}
}
......@@ -36,6 +36,7 @@ import { API_ENDPOINT } from '../../app.settings';
<div>
<!--
<form [formGroup]="formGroup" #form>
<h5> >Επιλογή Φίλτρων <br><br></h5>
<div class="form-group">
......@@ -61,59 +62,35 @@ import { API_ENDPOINT } from '../../app.settings';
Δημιουργία Αναφοράς
</button>
</form>
<!--
<div
class = "loading" *ngIf="(!validCreator && reportId)" >
</div>
-->
<h5><br> >Επιλογή Αναφοράς<br><br></h5>
<!-- btn-block "btn btn-default -->
<div class="col-md-1">
<!--
<button type="button" class="btn btn-alert" (click)="createReport('/ministry/general-report/', regsel)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Κατανομή Μαθητών με Βάση τη Σειρά Προτίμησης
</button>
<br><br>
<button type="button" class="btn btn-alert" (click)="createReport('/ministry/report-completeness/', regsel)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Πληρότητα Σχολείων
</button>
<br><br>
<button type="button" class="btn btn-alert" (click)="createReport('/ministry/report-all-stat/', regsel)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Μαθητές ανά Τάξη/Τομέα/Ειδικότητα
</button>
<br><br>
-->
<button type="button" class="btn btn-alert" (click)="selectreport(1)" [hidden]="minedu_userName == ''" >
<button type="button" class="btn btn-alert" (click)="nav_to_reportpath(1)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Κατανομή Μαθητών με Βάση τη Σειρά Προτίμησης
</button>
<br><br>
<button type="button" class="btn btn-alert" (click)="selectreport(2)" [hidden]="minedu_userName == ''" >
<button type="button" class="btn btn-alert" (click)="nav_to_reportpath(2)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Πληρότητα Σχολείων
</button>
<br><br>
<button type="button" class="btn btn-alert" (click)="selectreport(3)" [hidden]="minedu_userName == ''" >
<button type="button" class="btn btn-alert" (click)="nav_to_reportpath(3)" [hidden]="minedu_userName == ''" >
<i class="fa fa-file-text"></i>
Μαθητές ανά Τάξη/Τομέα/Ειδικότητα
</button>
<br><br>
</div>
<!--
<button type="submit" class="btn btn-default btn-block" (click)="showFilters()" [hidden]="minedu_userName == ''" >
Μαθητές ανά Τάξη/Τομέα/Ειδικότητα
</button>
-->
<div *ngIf="validCreator ">
<input #search class="search" type="text" placeholder="Αναζήτηση..." (keydown.enter)="onSearch(search.value)">
<div class="smart-table-container" reportScroll>
......@@ -129,11 +106,14 @@ import { API_ENDPOINT } from '../../app.settings';
<i class="fa fa-bar-chart"></i>
Διάγραμμα
</button>
-->
</div>
<!--
<div class="d3-chart" *ngIf = "!charIsHidden() && validCreator" #chart>
</div>
-->
......@@ -266,10 +246,15 @@ import { API_ENDPOINT } from '../../app.settings';
}
selectreport(repId) {
nav_to_reportpath(repId) {
this.reportId = repId;
console.log("...");
console.log(repId);
if (this.reportId == 1)
this.router.navigate(['/ministry/report-general', this.reportId]);
if (this.reportId == 2 || this.reportId == 3)
this.router.navigate(['/ministry/report-all-stat', this.reportId]);
}
......
......@@ -27,29 +27,13 @@ import { API_ENDPOINT } from '../../app.settings';
selector: 'minister-view',
template: `
<!--
<div *ngIf="(isModalShownMy)" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Auto shown modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Καλημέρα σας.</p>
<p>Αυτό είναι ένα μήνυμα</p>
<p>από το ng2-bootstrap/modal</p>
</div>
</div>
</div>
<div class="row">
<breadcrubs></breadcrubs>
</div>
-->
<div
class = "loading" *ngIf=" distStatus === 'STARTED'" >
</div>
<div
class = "loading" *ngIf=" distStatus === 'STARTED'" >
</div>
<div class="alert alert-info" *ngIf="distStatus === 'STARTED'">
Παρακαλώ περιμένετε...Η εκτέλεση της κατανομής ενδέχεται να διαρκέσει μερικά λεπτά. Παρακαλώ μην εκτελείται οποιαδήποτε ενέργεια μετακίνησης στον φυλλομετρητή σας, μέχρι να ολοκληρωθεί η κατανομή.
......
This diff is collapsed.
This diff is collapsed.
......@@ -41,6 +41,10 @@ genReportSchema = {
reportAllStatSchema = {
actions: false,
pager : {
display : true,
perPage:10
},
columns: {
name: {
title: 'Σχολείο',
......
<div class = "loading" *ngIf="(epalUserData$ | async) === {}"></div>
<div *ngIf="(isModalShown | async)" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
......
......@@ -26,6 +26,8 @@ import PerfectureView from '../components/infoviews/perfecture-view';
import DirectorClassCapacity from '../components/director/director-classcapacity';
import MinisterView from '../components/minister/minister-view';
import MinisterReports from '../components/minister/minister-reports';
import ReportAllStat from '../components/minister/report-all-stat';
import ReportGeneral from '../components/minister/report-general';
import InformStudents from '../components/minister/minister-informstudents';
import SchoolAuthGuard from '../guards/school.auth.guard';
import StudentAuthGuard from '../guards/student.auth.guard';
......@@ -54,6 +56,8 @@ export const MainRoutes: Routes = [
{ path: 'school/director-classcapacity', component: DirectorClassCapacity, canActivate: [SchoolAuthGuard] },
{ path: 'ministry/minister-view', component: MinisterView },
{ path: 'ministry/minister-reports', component: MinisterReports },
{ path: 'ministry/report-all-stat/:reportId', component: ReportAllStat },
{ path: 'ministry/report-general/:reportId', component: ReportGeneral },
{ path: 'ministry/minister-informstudents', component: InformStudents },
{ path: 'school/perfecture-view', component: PerfectureView, canActivate: [RegionEduAuthGuard] },
];
......@@ -81,6 +85,8 @@ export const MainDeclarations = [
DirectorClassCapacity,
MinisterView,
MinisterReports,
ReportAllStat,
ReportGeneral,
InformStudents,
PerfectureView,
Breadcrubs
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment