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

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

source/components/main/breadcrubs.ts

@@ -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;
-   			
+
  			}
 
 }

source/components/minister/chart-creator.ts

+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]));
+   }
+
+}

source/components/minister/csv-creator.ts

+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];
+    }
+  }
+}
+
+}

source/components/minister/minister-reports.ts

@@ -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]);
+
 }
 
 

source/components/minister/minister-view.ts

@@ -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'">
       Παρακαλώ περιμένετε...Η εκτέλεση της κατανομής ενδέχεται να διαρκέσει μερικά λεπτά. Παρακαλώ μην εκτελείται οποιαδήποτε ενέργεια μετακίνησης στον φυλλομετρητή σας, μέχρι να ολοκληρωθεί η κατανομή.

source/components/minister/report-all-stat.ts

+import { Component, OnInit, OnDestroy, ElementRef, ViewChild, Input } from "@angular/core";
+import { Injectable } from "@angular/core";
+import { AppSettings } from '../../app.settings';
+import { HelperDataService } from '../../services/helper-data-service';
+import { Observable} from "rxjs/Observable";
+import { Http, Headers, RequestOptions} from '@angular/http';
+import { NgRedux, select } from 'ng2-redux';
+import { IAppState } from '../../store/store';
+import { Router, ActivatedRoute, Params} from '@angular/router';
+import { BehaviorSubject, Subscription } from 'rxjs/Rx';
+import { ILoginInfo } from '../../store/logininfo/logininfo.types';
+import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
+import {reportsSchema, TableColumn} from './reports-schema';
+import { LOGININFO_INITIAL_STATE } from '../../store/logininfo/logininfo.initial-state';
+import {csvCreator} from './csv-creator';
+
+import {
+    FormBuilder,
+    FormGroup,
+    FormControl,
+    FormArray,
+    Validators,
+} from '@angular/forms';
+
+//import * as d3 from 'd3';
+//import * as _ from '..
+
+import { API_ENDPOINT } from '../../app.settings';
+
+@Component({
+    selector: 'report-all-stat',
+    //encapsulation: ViewEncapsulation.None,
+    template: `
+
+  <div>
+
+        <div
+          class = "loading" *ngIf="validCreator == 0" >
+        </div>
+
+        <form [formGroup]="formGroup"  #form>
+
+          <h5> >Επιλογή Φίλτρων <br><br></h5>
+
+          <div class="form-group">
+                <label>Περιφερειακή Διεύθυνση</label>
+                <select #regsel class="form-control" (change)="checkregion(regsel)" formControlName="region">
+                  <option *ngFor="let RegionSelection$  of RegionSelections$ | async; let i=index"  [value] = "RegionSelection$.id"> {{RegionSelection$.name}} </option>
+                </select>
+          </div>
+          <div class="form-group">
+                <label *ngIf="showAdminList | async">Διεύθυνση Εκπαίδευσης</label>
+                <select #admsel class="form-control"  *ngIf="showAdminList | async"  (change)="checkadminarea(admsel)" formControlName="adminarea">
+                  <option *ngFor="let AdminAreaSelection$  of AdminAreaSelections$ | async; let i=index" [value] = "AdminAreaSelection$.id"> {{AdminAreaSelection$.name}}</option>
+                </select>
+          </div>
+          <div class="form-group">
+                <label *ngIf="showAdminList | async">Σχολείο</label>
+                <select #schsel class="form-control"  *ngIf="showAdminList | async"  (change)="checkschool(schsel)" formControlName="schoollist">
+                  <option *ngFor="let SchoolSelection$  of SchoolSelections$ | async; let i=index" [value] = "SchoolSelection$.epal_id"> {{SchoolSelection$.epal_name}} </option>
+                </select>
+          </div>
+          <br>
+          <button type="submit" class="btn btn-alert"  (click)="createReport(regsel)" [hidden]="minedu_userName == ''" >
+          <i class="fa fa-file-text"></i>
+              Δημιουργία Αναφοράς
+          </button>
+          <button type="submit" class="btn btn-alert pull-right"  (click)="navigateBack()" [hidden]="minedu_userName == ''" >
+              Επιστροφή
+          </button>
+          <br><br>
+        </form>
+
+        <div *ngIf="validCreator == 1 ">
+          <input #search class="search" type="text" placeholder="Αναζήτηση..." (keydown.enter)="onSearch(search.value)">
+          <div class="smart-table-container" reportScroll>
+            <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
+          </div>
+        </div>
+
+        <button type="button" class="alert alert-info pull-right" (click)="export2Csv()" [hidden]="validCreator != 1">
+        <i class="fa fa-download"></i>
+            <br>Εξαγωγή σε csv
+        </button>
+
+    </div>
+
+   `
+})
+
+@Injectable() export default class ReportAllStat implements OnInit, OnDestroy {
+
+    public formGroup: FormGroup;
+    loginInfo$: BehaviorSubject<ILoginInfo>;
+    loginInfoSub: Subscription;
+    private generalReport$: BehaviorSubject<any>;
+    private RegionSelections$: BehaviorSubject<any>;
+    private AdminAreaSelections$: BehaviorSubject<any>;
+    private SchoolSelections$: BehaviorSubject<any>;
+    private generalReportSub: Subscription;
+    private RegionSelectionsSub: Subscription;
+    private AdminAreaSelectionsSub: Subscription;
+    private SchoolSelectionsSub: Subscription;
+    private apiEndPoint = API_ENDPOINT;
+    private minedu_userName: string;
+    private minedu_userPassword: string;
+    private distStatus = "READY";
+    private data;
+    private validCreator: number;
+    //private createGraph: boolean;
+    private reportId: number;
+    private source: LocalDataSource;
+    private showAdminList: BehaviorSubject<boolean>;
+    private adminAreaSelected: number;
+    private schSelected: number;
+
+    columnMap: Map<string,TableColumn> = new Map<string,TableColumn>();
+    @Input() settings: any;
+    private reportSchema = new  reportsSchema();
+
+    //csvObj:csvCreator ;
+    private csvObj = new csvCreator();
+
+    //private repid: number;
+    private routerSub: any;
+
+    constructor(private fb: FormBuilder,
+        private _ngRedux: NgRedux<IAppState>,
+        private _hds: HelperDataService,
+        private activatedRoute: ActivatedRoute,
+        private router: Router) {
+
+          this.formGroup = this.fb.group({
+              region: ['', []],
+              adminarea: ['', []],
+              schoollist: ['', []],
+          });
+
+          this.loginInfo$ = new BehaviorSubject(LOGININFO_INITIAL_STATE);
+          this.generalReport$ = new BehaviorSubject([{}]);
+          this.RegionSelections$ = new BehaviorSubject([{}]);
+          this.AdminAreaSelections$ = new BehaviorSubject([{}]);
+          this.SchoolSelections$ = new BehaviorSubject([{}]);
+          this.minedu_userName = '';
+          this.validCreator = -1;
+          //this.createGraph = false;
+          //this.reportId = 0;
+          this.showAdminList = new BehaviorSubject(false);
+          this.adminAreaSelected = 0;
+          this.schSelected = 0;
+          //this.source = new LocalDataSource(this.data);
+
+
+
+
+    }
+
+    ngOnInit() {
+
+      this.loginInfoSub = this._ngRedux.select(state => {
+          if (state.loginInfo.size > 0) {
+              state.loginInfo.reduce(({}, loginInfoToken) => {
+                this.minedu_userName = loginInfoToken.minedu_username;
+                this.minedu_userPassword = loginInfoToken.minedu_userpassword;
+                  return loginInfoToken;
+              }, {});
+          }
+          return state.loginInfo;
+      }).subscribe(this.loginInfo$);
+
+      this.routerSub = this.activatedRoute.params.subscribe(params => {
+       this.reportId = +params['reportId'];
+       console.log("Hello");
+       console.log(this.reportId);
+     });
+
+
+      this.showFilters();
+
+      //this.csvObj = new csvCreator();
+
+    }
+
+    ngOnDestroy() {
+
+      if (this.loginInfoSub)
+        this.loginInfoSub.unsubscribe();
+      if (this.generalReportSub)
+          this.generalReportSub.unsubscribe();
+      if (this.RegionSelectionsSub)
+          this.RegionSelectionsSub.unsubscribe();
+      if (this.AdminAreaSelectionsSub)
+          this.AdminAreaSelectionsSub.unsubscribe();
+      if (this.SchoolSelectionsSub)
+          this.SchoolSelectionsSub.unsubscribe();
+      if (this.showAdminList)
+          this.showAdminList.unsubscribe();
+
+    }
+
+
+createReport(regionSel) {
+
+  this.validCreator = 0;
+
+  //console.log("Testing1..");
+  //console.log(this.reportId);
+