diff --git a/src/app/components/auth/auth.component.html b/src/app/components/auth/auth.component.html index 5dea47d..229cf4a 100644 --- a/src/app/components/auth/auth.component.html +++ b/src/app/components/auth/auth.component.html @@ -46,6 +46,12 @@ {{getErrorMessage('licence')}} +
+ + + {{getErrorMessage('poids')}} + +
Informations de connexion diff --git a/src/app/components/auth/auth.component.ts b/src/app/components/auth/auth.component.ts index cced2b3..78c10bb 100644 --- a/src/app/components/auth/auth.component.ts +++ b/src/app/components/auth/auth.component.ts @@ -51,6 +51,7 @@ export class AuthComponent implements OnInit, OnDestroy { lastname: '', phone: '', licence: '', + poids: '', password: ['', Validators.required], confirmPassword: '' }, { validators: this.checkPasswords }); diff --git a/src/app/components/calculator/calculator.component.html b/src/app/components/calculator/calculator.component.html index 7c660c3..cc4d3bf 100644 --- a/src/app/components/calculator/calculator.component.html +++ b/src/app/components/calculator/calculator.component.html @@ -4,100 +4,181 @@ Calcul de taille de voile DT48 - 13 mars 2020 +
+ + Nombre de sauts + + + + Poids nu + + + + Poids équipement + + + + Taille actuelle + + +
- - - - + + + - -
- - Nombre de sauts - - - - Poids nu - - - - Poids équipement - - - - Taille actuelle - - -
+ +
+
+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taille actuelleTaille minTaille min -11%
Taille de voile en ft2 ● {{ info.sizesFeet.current }} ● {{ info.sizesFeet.min }} ● {{ info.sizesFeet.min11 }}
Charge alaire{{ info.charges.current | number : '1.2-3' }}{{ info.charges.min | number : '1.2-3' }}{{ info.charges.min11 | number : '1.2-3' }}
Taille de voile en m2{{ info.sizesMeter.current | number : '1.2-3' }}{{ info.sizesMeter.min | number : '1.2-3' }}{{ info.sizesMeter.min11 | number : '1.2-3' }}
Coefficient kilo/livres{{ coeffKgLbs }}
Coefficient pied/mètre{{ coeffFtM }}
Formule charge alaire + ( ( {{ inputs.weight }} + {{ inputs.gear }} ) * {{ coeffKgLbs }} ) / {{ inputs.current }} = {{ info.charges.current | number : '1.5' }}
+ ( ( poids nu en kg + poids equipement en kg ) * coefficient kg/lbs ) / taille de voile en ft2 +
+
+
+
+

Tailles de voile pour {{ inputs.weight }} kg

+ + + + + + + + + + + + + + + + + + + + + + + + + +
{{ header.name }}
Taille de voile en ft2{{ value }}
Abbattement 11%{{ value }}
Charge alaire{{ charge | number : '1.2-3' }}
Taille de voile en m2{{ value | number : '1.2-2' }}
+
+

Tableau des tailles de voile par poids

- - + + - + - + - + - + - + - + - + - + - + - +
{{tableHeader[0].name}} {{element.weight}} {{tableHeader[0].name}} + {{element.weight}} + {{tableHeader[1].name}} {{element.ranges[0].value}}{{element.ranges[0].value}} {{tableHeader[2].name}} {{element.ranges[1].value}}{{element.ranges[1].value}} {{tableHeader[3].name}} {{element.ranges[2].value}}{{element.ranges[2].value}} {{tableHeader[4].name}} {{element.ranges[3].value}}{{element.ranges[3].value}} {{tableHeader[5].name}} {{element.ranges[4].value}}{{element.ranges[4].value}} {{tableHeader[6].name}} {{element.ranges[5].value}}{{element.ranges[5].value}} {{tableHeader[7].name}} {{element.ranges[6].value}}{{element.ranges[6].value}} {{tableHeader[8].name}} {{element.ranges[7].value}}{{element.ranges[7].value}} {{tableHeader[9].name}} {{element.ranges[8].value}}{{element.ranges[8].value}}
diff --git a/src/app/components/calculator/calculator.component.scss b/src/app/components/calculator/calculator.component.scss index db84270..baf40ae 100644 --- a/src/app/components/calculator/calculator.component.scss +++ b/src/app/components/calculator/calculator.component.scss @@ -38,4 +38,9 @@ appearance: textfield; -moz-appearance: textfield; } + th { + &.first { + width: 180px; + } + } } \ No newline at end of file diff --git a/src/app/components/calculator/calculator.component.ts b/src/app/components/calculator/calculator.component.ts index 00eabfe..d7d0cd0 100644 --- a/src/app/components/calculator/calculator.component.ts +++ b/src/app/components/calculator/calculator.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { RouterLink, RouterModule } from '@angular/router'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatDividerModule } from '@angular/material/divider'; @@ -10,70 +12,238 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatSort, MatSortModule } from '@angular/material/sort'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { NgChartsModule } from 'ng2-charts'; +import { Observable, Subscription } from 'rxjs'; -import { CalcResult, InputParams, Range, WeightSize, weightSizes } from 'src/app/core/models'; +import { MenuItems } from 'src/app/components/shared'; +import { CalculatorInfo, CalculatorResult, InputParams, Jump, LineConfig, Range, TableHeader, User, WeightSize, weightSizes } from 'src/app/core/models'; +import { JumpsService, UserService, UtilitiesService } from 'src/app/core/services'; @Component({ standalone: true, imports: [ - FormsModule, + CommonModule, FormsModule, RouterModule, MatButtonModule, MatCardModule, MatDividerModule, MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule, - MatPaginatorModule, MatSortModule, MatTableModule + MatPaginatorModule, MatSortModule, MatTableModule, + NgChartsModule ], selector: 'huapp-calculator', styleUrls: ['./calculator.component.scss'], templateUrl: './calculator.component.html' }) export class CalculatorComponent implements OnInit, OnDestroy { - title = 'Calcul de taille de voile'; - subtitle = 'DT48 - 13 mars 2020'; - displayedColumns: string[] = [ - "weight", - "range_1", "range_2", "range_3", - "range_4", "range_5", "range_6", - "range_7", "range_8", "range_9" - ]; - tableHeader: {name: string, active: string}[] = [ - {name: "Poids nu", active: ''}, - {name: "0 à 99", active: ''}, - {name: "100 à 249", active: ''}, - {name: "250 à 399", active: ''}, - {name: "400 à 599", active: ''}, - {name: "600 à 799", active: ''}, - {name: "800 à 999", active: ''}, - {name: "1000 à 1399", active: ''}, - {name: "1400 à 1799", active: ''}, - {name: "1800 à 2000", active: ''}, - ];; + private _lastjump: Subscription = new Subscription(); + private _currentUser: Subscription = new Subscription(); + public title = 'Calcul de taille de voile'; + public subtitle = 'DT48 - 13 mars 2020'; + public lastjump: Jump = {} as Jump; + public currentUser: User = {} as User; + public displayedColumns: string[] = ['weight']; + public tableHeader: TableHeader[] = [{name: 'Poids nu en kg', active: ''}]; + public sizesHeader: TableHeader[] = []; + public sizesValues: number[] = []; + public sizesMinValues: number[] = []; + public sizesCharges: number[] = []; + public sizesValuesM: number[] = []; + public displayCharts = false; + public chartConfig: LineConfig = this._utilitiesService.getLineChartConfig(); + public info: CalculatorInfo = { + charges: { + current: 0, + min: 0, + min11: 0 + }, + sizesFeet: { + current: 0, + min: 0, + min11: 0 + }, + sizesMeter: { + current: 0, + min: 0, + min11: 0 + }, + state: { + color: 'danger' + } + } + public coeffKgLbs: number = this._utilitiesService.getCoeffKgLbs(); + public coeffFtM: number = this._utilitiesService.getCoeffFtM(); @Input() canopy_size_table!: MatTableDataSource; @Input() inputs: InputParams = { jumps: 0, weight: 60, gear: 10, - current: 175 + current: 190 } as InputParams; @ViewChild(MatSort) sort!: MatSort; @ViewChild(MatPaginator) paginator!: MatPaginator; - constructor() { } + constructor( + private jumpsService: JumpsService, + private userService: UserService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems + ) { } ngOnInit() { - return this.loadData(); + const currentUser$: Observable = this.userService.currentUser; + const lastjump$: Observable = this.jumpsService.getLastJump(); + this._currentUser = currentUser$.subscribe((userData: User) => { + this.currentUser = userData; + weightSizes[0].ranges.forEach((range: Range) => { + let header: TableHeader = {name: range.label, active: range.active}; + this.tableHeader.push(header) + this.sizesHeader.push(header); + this.displayedColumns.push(range.name); + }); + this._lastjump = lastjump$.subscribe((jump) => { + this.lastjump = jump; + this.inputs.jumps = jump.numero; + this.inputs.weight = this.currentUser.poids!; + this.inputs.current = jump.taille!; + this.canopy_size_table = new MatTableDataSource(weightSizes); + this.refresh(); + }); + }); } ngOnDestroy() { - //this._scavenger.unsubscribe(); + this._currentUser.unsubscribe(); + this._lastjump.unsubscribe(); } - loadData():void { - this.refreshActive(); - this.canopy_size_table = new MatTableDataSource(weightSizes); + private _canopySizeCalc(weight: number, jumps: number): CalculatorResult { + let result: CalculatorResult = { + min: 0, + min11: 0 + }; + if (jumps > 2000) { + this.info.error = '2000Jumps'; + return result; + } + let index: number = (this._getTableLine(weight) - this._getTableLine(0)); + result.min = weightSizes[index].ranges[this._getTableColumn(jumps)].value; + result.min11 = this._reduceLimit(result.min, 11); + + return result; } - refreshActive():void { + private _getCanopyMinSize(weight: number, jumps: number, reduce: number = 0): number { + var result: CalculatorResult = this._canopySizeCalc(weight, jumps); + let size: number = 0; + switch (reduce) { + case 11: + size = result.min11; + break; + case 0: + default: + size = result.min; + break; + } + return size; + } + + private _getCanopySizes(weight: number, eleven = false): number[] { + var data: number[] = []; + if (weight < 60) { + weight = 60; + } + if (weight > 110) { + weight = 110; + } + if (weight >= 60 && weight <= 110) { + const line = (weight - this._getTableLine(0)); + let data = weightSizes[line]; + if (eleven) { + return data.ranges.map((range: Range) => { + return Math.ceil(range.value * (100 - 11) / 100); + }); + } else { + return data.ranges.map((range: Range) => { + return range.value; + }); + } + } + return data; + } + + private _getCharge(canopySize: number, nakedWeight: number, equipementWeight: number): number { + return (((nakedWeight + equipementWeight) * this.coeffKgLbs) / canopySize); + } + + private _getRangeNum(): number { + let data: Range[] = weightSizes[0].ranges; + let num: number = 1; + data.some((range: Range) => { + if (range.start <= this.inputs.jumps && range.end >= this.inputs.jumps) { + num = range.num; + return true; + } + return false; + }); + return num; + } + + private _getTableColumn(jumps: number): number { + let column = 0; + if (jumps < 100) { + column = 0; + } else if (jumps < 250) { + column = 1; + } else if (jumps < 400) { + column = 2; + } else if (jumps < 600) { + column = 3; + } else if (jumps < 800) { + column = 4; + } else if (jumps < 1000) { + column = 5; + } else if (jumps < 1400) { + column = 6; + } else if (jumps < 1800) { + column = 7; + } else { + column = 8; + } + return column; + } + + private _getTableLine(weight: number): number { + let line; + let min = 60; + let max = 110; + if (weight < min) { + line = min; + } else if (weight > max) { + line = max; + } else { + line = weight; + } + return line; + } + + private _convertFeet2Meters(size: number): number { + return (size * this._utilitiesService.getCoeffFtM()); + } + + private _isInRange(nb: number, range: Range): boolean { + return (nb >= range.start && nb < range.end); + } + + private _reduceLimit(surface: number, percentOff: number) { + return Math.ceil(surface * (100 - percentOff) / 100); + } + + public refresh():void { + this._refreshActive(); + this._refreshSizes(); + } + + private _refreshActive(): void { weightSizes.forEach(element => { element.active = ''; element.ranges.forEach(range => { @@ -87,25 +257,80 @@ export class CalculatorComponent implements OnInit, OnDestroy { weightSizes[(this.inputs.weight - 60)].active = 'active'; } if (this.inputs.jumps >= 0) { - var num = this.getRangeNum(); + var num = this._getRangeNum(); this.tableHeader[num].active = 'active'; weightSizes.forEach(element => { element.ranges[(num-1)].active = 'active'; }); } } - - private getRangeNum(): number { - var data: Range[] = weightSizes[0].ranges; - var num: number = 1; - data.some((range: Range) => { - if (range.start <= this.inputs.jumps && range.end >= this.inputs.jumps) { - num = range.num; - return true; - } - return false; + + private _getStateColor(current: number, min: number, min11: number): string { + let color: string = 'danger'; + if (current >= min11 && current < min) { + color = 'warning'; + } + if (current >= min) { + color = 'success'; + } + + return color; + } + private _refreshSizes(): void { + this.sizesValues = this._getCanopySizes(this.inputs.weight, false); + this.sizesMinValues = this._getCanopySizes(this.inputs.weight, true); + this.sizesValues.forEach((value: number, index: number) => { + this.sizesCharges[index] = this._getCharge(value, this.inputs.weight, this.inputs.gear); + this.sizesValuesM[index] = this._convertFeet2Meters(value); }); - return num; + this.info.sizesFeet = this._canopySizeCalc(this.inputs.weight, this.inputs.jumps); + this.info.sizesFeet.current = this.inputs.current; + this.info.sizesMeter = { + current: this._convertFeet2Meters(this.inputs.current), + min: this._convertFeet2Meters(this.info.sizesFeet.min), + min11: this._convertFeet2Meters(this.info.sizesFeet.min11) + } + this.info.charges = { + current: this._getCharge(this.inputs.current, this.inputs.weight, this.inputs.gear), + min: this._getCharge(this.info.sizesFeet.min, this.inputs.weight, this.inputs.gear), + min11: this._getCharge(this.info.sizesFeet.min11, this.inputs.weight, this.inputs.gear) + } + this.info.state.color = this._getStateColor(this.info.sizesFeet.current, this.info.sizesFeet.min, this.info.sizesFeet.min11); + + this.chartConfig.lineChartData.labels = [...this.sizesHeader.map(( + data: { + name: string; + active: string; + } + ): string => { + return data.name; + })]; + this.chartConfig.lineChartData.datasets = [ + { + label: 'Tailles min -11%', + data: this.sizesMinValues, + fill: true, + stepped: true, + pointStyle: false, + borderColor: 'rgba(241, 80, 80, 1)', + backgroundColor: 'rgba(241, 80, 80, 0.3)' + }, + { + label: 'Tailles min', + data: this.sizesValues, + fill: true, + stepped: true, + pointStyle: false, + borderColor: 'rgba(32, 182, 252, 1)', + backgroundColor: 'rgba(32, 182, 252, 0.3)' + } + ]; + this.displayCharts = true; + } + + public setCurrentWeight(weight: number) { + this.inputs.weight = weight; + this.refresh(); } } diff --git a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html index 4b47027..3455d79 100755 --- a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html +++ b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html @@ -1,44 +1,46 @@ - - Aéronefs - Nombre total de sauts par avions -
- -
- + + {{ title }} + {{ subtitle }} + + + + + +
- - - - - - - - - - - - - - - -
{{name}} Total
● {{seriesName[i]}} - {{value}} - {{value}} - - {{seriesValue[i]}} - {{seriesValue[i]}} -
- - + +
+ + + + Historique annuel + + + + + diff --git a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts index 52325ba..ed2d780 100755 --- a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts +++ b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts @@ -1,35 +1,48 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; -import { ChartistModule, Configuration } from 'ng-chartist'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { ChartDataset } from 'chart.js'; +import { NgChartsModule } from 'ng2-charts'; import { Observable, Subscription } from 'rxjs'; -import { BackendService, AeronefsService } from 'src/app/core/services'; -import { chartBar, AeronefByImat, AeronefByYear } from 'src/app/core/models'; +import { MenuItems, HistoryTableComponent } from 'src/app/components/shared'; +import { UtilitiesService, AeronefsService } from 'src/app/core/services'; +import { AeronefByImat, AeronefByYear, BarConfig } from 'src/app/core/models'; @Component({ standalone: true, - imports: [CommonModule, MatCardModule, ChartistModule], + imports: [ + CommonModule, + MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule, + NgChartsModule, + HistoryTableComponent + ], selector: 'huapp-aeronefs-bar', templateUrl: './aeronefs-bar.component.html' }) export class AeronefsBarComponent implements OnInit, OnDestroy { private _aeronefByImat: Subscription = new Subscription(); private _aeronefByYear: Subscription = new Subscription(); - aeronefByImat!: Array; - aeronefByYear!: Array; - aeronefByImatCount = 0; - aeronefByYearCount = 0; - seriesName: string[] = []; - seriesValue: any[] = []; - seriesColor: string[] = this._dataService.getChartColors(); - seriesHeader: string[] = []; - seriesRow: any[] = []; - barChartAeronef: Configuration = chartBar; + private _aeronefsByImat!: Array; + private _aeronefsByYear!: Array; + public title: string = 'Aéronefs'; + public subtitle: string = 'Nombre total de sauts par aéronef'; + public seriesHeader: string[] = []; + public seriesName: string[] = []; + public seriesValue: any[] = []; + public seriesRow: any[] = []; + public seriesColor: string[] = this._utilitiesService.getChartColors(); + public displayCharts = false; + public chartConfig: BarConfig = this._utilitiesService.getHorizontalBarChartConfig(); constructor( - private aeronefsService: AeronefsService, - private _dataService: BackendService + private _aeronefsService: AeronefsService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems ) { } ngOnInit() { @@ -42,102 +55,43 @@ export class AeronefsBarComponent implements OnInit, OnDestroy { } private _loadAeronefByImat(): void { - const aeronefs$: Observable> = this.aeronefsService.getAllByImat(); + let values: Array = []; + const aeronefs$: Observable> = this._aeronefsService.getAllByImat(); this._aeronefByImat = aeronefs$.subscribe((aggregate: Array) => { - this.aeronefByImat = aggregate; - this.aeronefByImatCount = aggregate.length; - this.aeronefByImat.forEach((row) => { + this._aeronefsByImat = aggregate.map((row: AeronefByImat) => { + //this.chartConfig.barChartData.labels!.push(`${row._id.aeronef} ${row._id.imat}`); this.seriesName.push(`${row._id.aeronef} ${row._id.imat}`); this.seriesValue.push(row.count); + return row; }); - this.barChartAeronef = { - type: 'Bar', - data: { - "labels": this.seriesName, - "series": this.seriesValue - }, - options: { - chartPadding: { - top: 15, - right: 20, - bottom: 0, - left: 20 - }, - seriesBarDistance: 15, - horizontalBars: true, - axisX: { - onlyInteger: true, - position: 'end', - labelOffset: { - x: 0, - y: 0 - }, - showGrid: true, - offset: 20 - }, - axisY: { - showGrid: false, - offset: 0, - labelInterpolationFnc: function(): string { - return ''; - } - }, - height: (this.seriesName.length*20) - }, - responsiveOptions: [ - ['screen and (min-width: 1024px)', { - axisX: { - labelInterpolationFnc: function(value: number, index: number): string { - return index % 1 === 0 ? `${value}` : ''; - } - } - }], - ['screen and (min-width: 641px) and (max-width: 1024px)', { - seriesBarDistance: 10, - axisY: { - offset: 30 - }, - axisX: { - labelInterpolationFnc: function(value: any, index: number): string { - return index % 1 === 0 ? `${value[2]}${value[3]}` : ''; - } - } - }], - ['screen and (max-width: 640px)', { - seriesBarDistance: 5, - axisY: { - offset: 20 - }, - axisX: { - labelInterpolationFnc: function(value: any, index: number): string { - return index % 1 === 0 ? `${value[2]}${value[3]}` : ''; - } - } - }] - ] + let data: ChartDataset<'bar'> = { + data: [...this.seriesValue], + label: 'Nombre total de sauts', + backgroundColor: this._utilitiesService.getSeriesColors(0.9), + borderColor: 'rgba(255, 255, 255, 1)', //this._utilitiesService.getSeriesColors(1), + borderWidth: 0 }; + this.chartConfig.barChartData.labels = [...this.seriesName]; + this.chartConfig.barChartData.datasets!.push(data); + this.displayCharts = true; this._loadAeronefByYear(); }); } private _loadAeronefByYear(): void { - let values: Array = []; this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; - this.seriesHeader.forEach(() => { - values.push(0); - }); + let values: Array = this.seriesHeader.map(() => 0); this.seriesName.forEach(() => { this.seriesRow.push([...values]); }); - const dropzones$: Observable> = this.aeronefsService.getAllByDate(); + const dropzones$: Observable> = this._aeronefsService.getAllByDate(); this._aeronefByYear = dropzones$.subscribe((aggregate: Array) => { - this.aeronefByYear = aggregate; - this.aeronefByYearCount = aggregate.length; - this.aeronefByYear.forEach((row: AeronefByYear) => { + this._aeronefsByYear = aggregate.map((row: AeronefByYear) => { let aeronef: string = row._id.aeronef; let imat: string = row._id.imat; let year: string = row._id.year.toString(); this.seriesRow[this.seriesName.indexOf(`${aeronef} ${imat}`)][this.seriesHeader.indexOf(year)] = row.count; + return row; }); }); } diff --git a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html index f707f20..c0e2373 100755 --- a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html +++ b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html @@ -1,36 +1,39 @@ - - Aéronefs - Nombre total de sauts par avions -
- -
- + + {{ title }} + {{ subtitle }} + + + + + +
- - - - - - - - - - - - - - - -
{{name}} Total
● {{seriesName[i]}} - {{value}} - {{value}} - - {{seriesValue[i]}} - {{seriesValue[i]}} -
+
+ + +
+
+ + + + Historique annuel + + + + +
+ + +
+
+ + + + Historique annuel + + + + + diff --git a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts index 0e7d1ad..cda6119 100755 --- a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts +++ b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts @@ -1,37 +1,48 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; -import { ChartistModule, Configuration } from 'ng-chartist'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { NgChartsModule } from 'ng2-charts'; import { Observable, Subscription } from 'rxjs'; -import { BackendService, CanopiesService } from 'src/app/core/services'; -import { chartPieDonute, CanopyBySize, CanopyByYear, ReduceRow } from 'src/app/core/models'; +import { MenuItems, HistoryTableComponent } from 'src/app/components/shared'; +import { UtilitiesService, CanopiesService } from 'src/app/core/services'; +import { CanopyBySize, CanopyByYear, DoughnutConfig } from 'src/app/core/models'; @Component({ standalone: true, - imports: [CommonModule, MatCardModule, ChartistModule], + imports: [ + CommonModule, + MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule, + NgChartsModule, + HistoryTableComponent + ], selector: 'huapp-canopy-sizes', templateUrl: './canopy-sizes.component.html' }) export class CanopySizesComponent implements OnInit, OnDestroy { private _canopyBySize: Subscription = new Subscription(); private _canopyByYear: Subscription = new Subscription(); - canopyBySize!: Array; - canopyByYear!: Array; - canopyBySizeCount = 0; - canopyByYearCount = 0; - rows: Object[] = [] as Array; - seriesName: string[] = []; - seriesValue: number[] = []; - seriesColor: string[] = this._dataService.getChartColors(); - seriesHeader: string[] = []; - seriesRow: any[] = []; - donuteCanopiesSize: Configuration = chartPieDonute; + private _canopiesBySize!: Array; + private _canopiesByYear!: Array; + public title: string = 'Tailles de voile'; + public subtitle: string = 'Nombre total de sauts par taille'; + public seriesHeader: string[] = []; + public seriesName: string[] = []; + public seriesValue: number[] = []; + public seriesRow: any[] = []; + public seriesColor: string[] = this._utilitiesService.getChartColors(); + public displayCharts = false; + public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig(); constructor( - private canopiesService: CanopiesService, - private _dataService: BackendService + private _canopiesService: CanopiesService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems ) { } ngOnInit() { @@ -44,53 +55,33 @@ export class CanopySizesComponent implements OnInit, OnDestroy { } private _loadCanopyBySize(): void { - const canopies$: Observable> = this.canopiesService.getAllBySize(); + const canopies$: Observable> = this._canopiesService.getAllBySize(); this._canopyBySize = canopies$.subscribe((aggregate: Array) => { - this.canopyBySize = aggregate; - this.canopyBySizeCount = aggregate.length; - var labels: string[] = []; - var series: number[] = []; - this.canopyBySize.forEach((row) => { - this.seriesName.push(row._id.taille.toString()); - this.seriesValue.push(row.count); - labels.push(row.count.toString()); - series.push(row.count); + this._canopiesBySize = aggregate.map((row: CanopyBySize) => { + this.chartConfig.doughnutChartLabels.push(row._id.taille.toString()); + this.chartConfig.doughnutChartDatasets[0].data.push(row.count); + return row; }); - this.donuteCanopiesSize = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - startAngle: 330, - showLabel: true - } - }; + this.seriesName = [...this.chartConfig.doughnutChartLabels]; + this.seriesValue = [...this.chartConfig.doughnutChartDatasets[0].data]; + this.displayCharts = true; this._loadCanopyByYear(); }); } private _loadCanopyByYear(): void { - let values: Array = []; this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; - this.seriesHeader.forEach(() => { - values.push(0); - }); + let values: Array = this.seriesHeader.map(() => 0); this.seriesName.forEach(() => { this.seriesRow.push([...values]); }); - const dropzones$: Observable> = this.canopiesService.getAllByYear(); + const dropzones$: Observable> = this._canopiesService.getAllByYear(); this._canopyByYear = dropzones$.subscribe((aggregate: Array) => { - this.canopyByYear = aggregate; - this.canopyByYearCount = aggregate.length; - this.canopyByYear.forEach((row: CanopyByYear) => { + this._canopiesByYear = aggregate.map((row: CanopyByYear) => { let taille: string = row._id.taille.toString(); let year: string = row._id.year.toString(); this.seriesRow[this.seriesName.indexOf(taille)][this.seriesHeader.indexOf(year)] = row.count; + return row; }); }); } diff --git a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html index e32de05..306c7c7 100755 --- a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html +++ b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html @@ -1,25 +1,31 @@ - - Les drop zones - Nombre total de sauts par DZ -
- -
- -
- -
-
-

- {{name}} : {{seriesValue[i]}} -

-
-
- + + {{ title }} + {{ subtitle }} + + + + + +
-
- +
+
+
+ + + + Historique annuel + + + + diff --git a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts index 752454e..d77b8a8 100755 --- a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts +++ b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts @@ -1,39 +1,50 @@ -import { Component, OnInit, OnDestroy, Input, Output } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { NgChartsModule, baseColors } from 'ng2-charts'; import { ChartistModule, Configuration } from 'ng-chartist'; import { Observable, Subscription } from 'rxjs'; -import { BackendService, DropZonesService } from 'src/app/core/services'; -import { chartBar, chartPieDonute, DropZone, DropZoneByOaci, DropZoneByYear } from 'src/app/core/models'; +import { MenuItems, HistoryTableComponent } from 'src/app/components/shared'; +import { UtilitiesService, DropZonesService } from 'src/app/core/services'; +import { DropZoneByOaci, DropZoneByYear } from 'src/app/core/models'; @Component({ standalone: true, - imports: [CommonModule, MatCardModule, ChartistModule], + imports: [ + CommonModule, + MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule, + NgChartsModule, ChartistModule, + HistoryTableComponent + ], selector: 'huapp-drop-zones-bar', templateUrl: './drop-zones-bar.component.html' }) export class DropZonesBarComponent implements OnInit, OnDestroy { private _dropzoneByOaci: Subscription = new Subscription(); private _dropzoneByYear: Subscription = new Subscription(); - dropzoneByOaci!: Array; - dropzoneByYear!: Array; - dropzoneByOaciCount = 0; - dropzoneByYearCount = 0; - dropzones: Object[] = [] as Array; - seriesName: string[] = []; - seriesValue: number[] = []; - seriesColor: string[] = this._dataService.getChartColors(); - seriesHeader: string[] = []; - seriesRow: any[] = []; - donuteDropZones: Configuration = chartPieDonute; - barChartDropZones: Configuration = chartBar; + private _dropzonesByOaci!: Array; + private _dropzonesByYear!: Array; + public title: string = 'Les dropzones'; + public subtitle: string = 'Nombre total de sauts par dropzone'; + public seriesHeader: string[] = []; + public seriesName: string[] = []; + public seriesValue: number[] = []; + public seriesRow: any[] = []; + public seriesColor: string[] = this._utilitiesService.getChartColors(); + public displayCharts = false; + public barChartDropZones: Configuration = this._utilitiesService.getBarConfig(); constructor( - private dropzonesService: DropZonesService, - private _dataService: BackendService - ) { } + private _dropzonesService: DropZonesService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems + ) { } ngOnInit() { this._loadDropZoneByOaci(); @@ -45,54 +56,31 @@ export class DropZonesBarComponent implements OnInit, OnDestroy { } private _loadDropZoneByOaci(): void { - const dropzones$: Observable> = this.dropzonesService.getAllByOaci(); + const dropzones$: Observable> = this._dropzonesService.getAllByOaci(); this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array) => { - this.dropzoneByOaci = aggregate; - this.dropzoneByOaciCount = aggregate.length; - var labels: string[] = []; - var series: number[] = []; - this.dropzoneByOaci.forEach((row) => { + this._dropzonesByOaci = aggregate.map((row: DropZoneByOaci) => { this.seriesName.push(`${row._id.oaci} - ${row._id.lieu}`); this.seriesValue.push(row.count); - labels.push(row.count.toString()); - series.push(row.count); + return row; }); - this.donuteDropZones = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 50, - startAngle: 270, - showLabel: true - } - }; this._loadDropZoneByYear(); }); } private _loadDropZoneByYear(): void { - let values: Array = []; this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; - this.seriesHeader.forEach(() => { - values.push(0); - }); + let values: Array = this.seriesHeader.map(() => 0); this.seriesName.forEach(() => { this.seriesRow.push([...values]); }); - const dropzones$: Observable> = this.dropzonesService.getAllByDate(); + const dropzones$: Observable> = this._dropzonesService.getAllByDate(); this._dropzoneByYear = dropzones$.subscribe((aggregate: Array) => { - this.dropzoneByYear = aggregate; - this.dropzoneByYearCount = aggregate.length; - this.dropzoneByYear.forEach((row: DropZoneByYear) => { + this._dropzonesByYear = aggregate.map((row: DropZoneByYear) => { let lieu: string = row._id.lieu; let oaci: string = row._id.oaci; let year: string = row._id.year.toString(); this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count; + return row; }); this.barChartDropZones = { type: 'Bar', @@ -101,9 +89,9 @@ export class DropZonesBarComponent implements OnInit, OnDestroy { "series": this.seriesRow }, options: { - seriesBarDistance: 9, - horizontalBars: true, - high: 170, + seriesBarDistance: 15, + horizontalBars: false, + high: 180, axisX: { showGrid: false, offset: 20 @@ -112,7 +100,7 @@ export class DropZonesBarComponent implements OnInit, OnDestroy { showGrid: true, offset: 40 }, - height: 207 + height: 300 }, responsiveOptions: [ ['screen and (min-width: 1024px)', { @@ -146,6 +134,7 @@ export class DropZonesBarComponent implements OnInit, OnDestroy { }] ] }; + this.displayCharts = true; }); } } diff --git a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html index 6d734d7..6e3a5c0 100755 --- a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html +++ b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html @@ -1,34 +1,37 @@ - - Les drop zones - Nombre total de sauts par DZ -
- -
- + + {{ title }} + {{ subtitle }} + + + + + +
- - - - - - - - - - - - - - - -
{{name}} Total
✹ {{seriesName[i]}} - {{value}} - {{value}} - - {{seriesValue[i]}} - {{seriesValue[i]}} -
+
+ + +
+
+ + + + Historique annuel + + + + diff --git a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts index 79412c8..262f181 100755 --- a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts +++ b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts @@ -1,37 +1,50 @@ -import { Component, OnInit, OnDestroy, Input, Output } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; -import { ChartistModule, Configuration } from 'ng-chartist'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { ChartConfiguration } from 'chart.js'; +import { NgChartsModule } from 'ng2-charts'; import { Observable, Subscription } from 'rxjs'; -import { BackendService, DropZonesService } from 'src/app/core/services'; -import { DropZoneByOaci, DropZoneByYear, chartPieDonute} from 'src/app/core/models'; +import { MenuItems, HistoryTableComponent } from 'src/app/components/shared'; +import { UtilitiesService, DropZonesService } from 'src/app/core/services'; +import { DropZoneByOaci, DropZoneByYear, DoughnutConfig } from 'src/app/core/models'; @Component({ standalone: true, - imports: [CommonModule, MatCardModule, ChartistModule], + imports: [ + CommonModule, + MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule, + NgChartsModule, + HistoryTableComponent + ], selector: 'huapp-drop-zones', templateUrl: './drop-zones.component.html' }) export class DropZonesComponent implements OnInit, OnDestroy { private _dropzoneByOaci: Subscription = new Subscription(); private _dropzoneByYear: Subscription = new Subscription(); - dropzoneByOaci!: Array; - dropzoneByYear!: Array; - dropzoneByOaciCount = 0; - dropzoneByYearCount = 0; - seriesName: string[] = []; - seriesValue: number[] = []; - seriesColor: string[] = this._dataService.getChartColors(); - seriesHeader: string[] = []; - seriesRow: any[] = []; - donuteDropZones: Configuration = chartPieDonute; + private _dropzonesByOaci!: Array; + private _dropzonesByYear!: Array; + public title: string = 'Les dropzones'; + public subtitle: string = 'Nombre total de sauts par dropzone'; + public seriesHeader: string[] = []; + public seriesName: string[] = []; + public seriesValue: number[] = []; + public seriesRow: any[] = []; + public seriesColor: string[] = this._utilitiesService.getChartColors(); + public displayCharts = false; + public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig(); constructor( - private dropzonesService: DropZonesService, - private _dataService: BackendService - ) { } + private _dropzonesService: DropZonesService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems + ) { } ngOnInit() { this._loadDropZoneByOaci(); @@ -43,54 +56,34 @@ export class DropZonesComponent implements OnInit, OnDestroy { } private _loadDropZoneByOaci(): void { - const dropzones$: Observable> = this.dropzonesService.getAllByOaci(); + const dropzones$: Observable> = this._dropzonesService.getAllByOaci(); this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array) => { - this.dropzoneByOaci = aggregate; - this.dropzoneByOaciCount = aggregate.length; - var labels: string[] = []; - var series: number[] = []; - this.dropzoneByOaci.forEach((row) => { - this.seriesName.push(`${row._id.oaci} - ${row._id.lieu}`); - this.seriesValue.push(row.count); - labels.push(row.count.toString()); - series.push(row.count); + this._dropzonesByOaci = aggregate.map((row: DropZoneByOaci) => { + this.chartConfig.doughnutChartLabels.push(`${row._id.oaci} - ${row._id.lieu}`); + this.chartConfig.doughnutChartDatasets[0].data.push(row.count); + return row; }); - this.donuteDropZones = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 50, - startAngle: 270, - showLabel: true - } - }; + this.seriesName = [...this.chartConfig.doughnutChartLabels]; + this.seriesValue = [...this.chartConfig.doughnutChartDatasets[0].data]; + this.displayCharts = true; this._loadDropZoneByYear(); }); } private _loadDropZoneByYear(): void { - let values: Array = []; this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; - this.seriesHeader.forEach(() => { - values.push(0); - }); + let values: Array = this.seriesHeader.map(() => 0); this.seriesName.forEach(() => { this.seriesRow.push([...values]); }); - const dropzones$: Observable> = this.dropzonesService.getAllByDate(); + const dropzones$: Observable> = this._dropzonesService.getAllByDate(); this._dropzoneByYear = dropzones$.subscribe((aggregate: Array) => { - this.dropzoneByYear = aggregate; - this.dropzoneByYearCount = aggregate.length; - this.dropzoneByYear.forEach((row: DropZoneByYear) => { + this._dropzonesByYear = aggregate.map((row: DropZoneByYear) => { let lieu: string = row._id.lieu; let oaci: string = row._id.oaci; let year: string = row._id.year.toString(); this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count; + return row; }); }); } diff --git a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html index 2cae32e..0db981c 100755 --- a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html +++ b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html @@ -1,19 +1,22 @@ - -
-
- Volume mensuel - Nombre total de sauts par mois de {{min}} à {{max}} -
-
-
- - -
-
+ + {{ title }} + {{ subtitle }} de {{min}} à {{max}} + + + + + + +
+ + +
+ +
- - - - - - - - - - - - - - - - - - - - - - - -
{{name}} Total
● {{seriesName[i]}} - {{value}} - {{value}} - {{seriesRowTotal[i]}}
Total - {{value}} - {{value}} - {{grandTotal}}
- +
+ + + + Historique annuel + + + + + + + + + + + + + + + + + + + + + + + +
{{name}} Total
● {{seriesName[i]}} + {{value}} + {{value}} + {{seriesRowTotal[i]}}
Total + {{value}} + {{value}} + {{grandTotal}}
+ + diff --git a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts index cbaa593..01f80e9 100755 --- a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts +++ b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts @@ -1,42 +1,51 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; import { ChartistModule, Configuration } from 'ng-chartist'; import { Observable, Subscription } from 'rxjs'; -import { BackendService, JumpsService } from 'src/app/core/services'; -import { chartBar, JumpByDate, ReduceRow } from 'src/app/core/models'; - -declare var require: any; -const data= require('./data.json'); +import { MenuItems } from 'src/app/components/shared'; +import { UtilitiesService, JumpsService } from 'src/app/core/services'; +import { JumpByDate } from 'src/app/core/models'; @Component({ standalone: true, - imports: [CommonModule, MatCardModule, ChartistModule], + imports: [ + CommonModule, + MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule, + ChartistModule + ], selector: 'huapp-jumps-by-month', templateUrl: './jumps-by-month.component.html' }) export class JumpsByMonthComponent implements OnInit, OnDestroy { private _jumpByDate: Subscription = new Subscription(); - jumpByDate!: Array; - jumpByDateCount = 0; - rows: Object[] = [] as Array; - min: number = 0; - max: number = 0; - grandTotal: number = 0; - seriesHeader: string[] = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]; - seriesRow: any[] = []; - seriesRowTotal: number[] = []; - seriesColTotal: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; - seriesName: String[] = []; // ["2018", "2019", "2020", "2021", "2022", "2023"]; - seriesColor: String[] = this._dataService.getChartColors(); - barChartJumps: Configuration = chartBar; + private _jumpsByDate!: Array; + private _jumpsByDateCount = 0; + public title: string = 'Volume mensuel'; + public subtitle: string = 'Nombre total de sauts par mois'; + public min = 0; + public max = 0; + public grandTotal = 0; + public seriesHeader: string[] = []; + public seriesName: String[] = []; + public seriesRow: any[] = []; + public seriesColor: String[] = this._utilitiesService.getChartColors(); + public seriesRowTotal: number[] = []; + public seriesColTotal: number[] = []; + public displayCharts = false; + public barChartJumps: Configuration = this._utilitiesService.getBarConfig(); constructor( - private jumpsService: JumpsService, - private _dataService: BackendService - ) { } + private _jumpsService: JumpsService, + private _utilitiesService: UtilitiesService, + public menuItems: MenuItems + ) { } ngOnInit() { this._loadJumpByDate(); @@ -47,17 +56,13 @@ export class JumpsByMonthComponent implements OnInit, OnDestroy { } private _loadJumpByDate() { - let values: Array = []; - this.seriesHeader.forEach(() => { - values.push(0); - }); - const jumps$: Observable> = this.jumpsService.getAllByDate(); + this.seriesHeader = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]; + let values: Array = this.seriesHeader.map(() => 0); + this.seriesColTotal = [...values]; + const jumps$: Observable> = this._jumpsService.getAllByDate(); this._jumpByDate = jumps$.subscribe((aggregate: Array) => { - this.jumpByDate = aggregate; - this.jumpByDateCount = aggregate.length; - console.log(this.jumpByDate); - console.log(this.jumpByDateCount); - this.jumpByDate.forEach((row) => { + this._jumpsByDateCount = aggregate.length; + this._jumpsByDate = aggregate.map((row: JumpByDate) => { let year = row._id.year.toString(); let month = row._id.month; if (this.seriesName.indexOf(year) < 0) { @@ -72,6 +77,7 @@ export class JumpsByMonthComponent implements OnInit, OnDestroy { } this.seriesRow[(this.seriesRow.length-1)][(month-1)] = row.count; this.seriesColTotal[(month-1)] += row.count; + return row; }); this.seriesRow.forEach((row: number[]) => { const total = row.reduce((partialSum, a) => partialSum + a, 0); @@ -129,6 +135,7 @@ export class JumpsByMonthComponent implements OnInit, OnDestroy { }] ] }; + this.displayCharts = true; }); } } diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index ef03c5c..65cd6a4 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,50 +1,33 @@

{{title}}

-
- Connected -
-
- Not connected -
-
-
- +
+ +
+
+ +
+
+ +
-
- +
+
+ +
+
+ +
+ +
+
+ +
+ +
+
+
+
+
-
-
-
- -
-
- -
-
- - -
-
- +
\ No newline at end of file diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index d55ea16..83432ed 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -2,22 +2,22 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Data, Router } from '@angular/router'; -import { Observable, Observer, Subscription } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; import { take } from 'rxjs/operators'; import { User, Errors, Aeronef, AeronefByImat, Canopy, CanopyModelBySize, DropZone, DropZoneByYear } from 'src/app/core/models'; import { AeronefsService, CanopiesService, DropZonesService, UserService } from 'src/app/core/services'; import { ShowAuthedDirective } from 'src/app/components/shared/show-authed.directive'; -import { AeronefsBarComponent, DropZonesComponent, CanopyModelsComponent, CanopySizesComponent, JumpsByMonthComponent } from './dashboard-components'; -//import { JumpsByMonthComponent, AeronefsComponent, AeronefsBarComponent, DropZonesComponent, DropZonesBarComponent, CanopySizesComponent, CanopyModelsComponent} from './dashboard-components'; +import { AeronefsComponent, AeronefsBarComponent, CanopyModelsComponent, CanopySizesComponent, DropZonesComponent, DropZonesBarComponent, JumpsByMonthComponent } from './dashboard-components'; @Component({ standalone: true, imports: [ ShowAuthedDirective, - AeronefsBarComponent, DropZonesComponent, CanopyModelsComponent, CanopySizesComponent, JumpsByMonthComponent - //AeronefsComponent, AeronefsBarComponent, DropZonesComponent, DropZonesBarComponent, - //CanopySizesComponent, CanopyModelsComponent, JumpsByMonthComponent, + AeronefsComponent, AeronefsBarComponent, + CanopyModelsComponent, CanopySizesComponent, + DropZonesComponent, DropZonesBarComponent, + JumpsByMonthComponent ], selector: 'huapp-home', templateUrl: './home.component.html', @@ -34,14 +34,13 @@ export class HomeComponent implements OnInit, OnDestroy { isAuthenticated = false; canModify = false; - aeronefAggregate!: Array + aeronefAggregate!: Array; aeronefs!: Array; aeronefsCount = 0; - canopyAggregate!: Array + canopyAggregate!: Array; canopies!: Array; canopiesCount = 0; - //dropzoneAggregate!: Array - dropzoneAggregate!: Array + dropzoneAggregate!: Array; // Array dropzones!: Array; dropzonesCount = 0; @@ -59,9 +58,8 @@ export class HomeComponent implements OnInit, OnDestroy { ngOnInit() { this.titleService.setTitle(this.title); - const data$: Observable = this.route.data.pipe(take(1)); + const data$: Observable = this.route.data.pipe(take(1)); this._data = data$.subscribe((data: Data) => { - //data: Partial> this.isAuthenticated = data['isAuthenticated']; if (!this.isAuthenticated) { this.router.navigateByUrl('/login'); diff --git a/src/app/components/logbook/logbook.component.html b/src/app/components/logbook/logbook.component.html index 5d573ce..8285a5d 100644 --- a/src/app/components/logbook/logbook.component.html +++ b/src/app/components/logbook/logbook.component.html @@ -1,7 +1,37 @@
-

{{title}}

- - - - + + + + {{ title }} ({{ lastjump.numero }}) + + + + Dernier saut enregistré : # {{ lastjump.numero }} le {{ lastjump.date | date: 'dd/MM/yyyy' }} à {{ lastjump.lieu }} + + + + + + + + + + + + + + + + +
diff --git a/src/app/components/logbook/logbook.component.ts b/src/app/components/logbook/logbook.component.ts index 3fbb3bd..dd6d2c2 100644 --- a/src/app/components/logbook/logbook.component.ts +++ b/src/app/components/logbook/logbook.component.ts @@ -1,9 +1,17 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ActivatedRoute, Router, RouterLink } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { ActivatedRoute, Router, RouterLink, RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatDialog, MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarModule, MatSnackBarVerticalPosition } from '@angular/material/snack-bar'; import { Observable, Subscription } from 'rxjs'; import { take } from 'rxjs/operators'; -import { JumpTableComponent } from 'src/app/components/shared/helpers-jump'; +import { MenuItems, JumpAddDialogComponent, JumpTableComponent } from 'src/app/components/shared'; +//import { JumpTableComponent } from 'src/app/components/shared/helpers-jump'; import { Errors, Jump, JumpListConfig, User } from 'src/app/core/models'; import { JumpsService, UserService } from 'src/app/core/services'; import { environment } from 'src/environments/environment'; @@ -11,7 +19,12 @@ import data from 'src/jumps.json'; @Component({ standalone: true, - imports: [JumpTableComponent], + imports: [ + CommonModule, RouterModule, + MatButtonModule, MatCardModule, MatIconModule, + MatMenuModule, MatDialogModule, MatSnackBarModule, + JumpTableComponent + ], selector: 'huapp-logbook', templateUrl: './logbook.component.html', styleUrls: ['./logbook.component.scss'] @@ -19,22 +32,27 @@ import data from 'src/jumps.json'; export class LogbookComponent implements OnInit, OnDestroy { private _currentUser: Subscription = new Subscription(); private _data: Subscription = new Subscription(); - errors!: Errors; - title = 'Carnet de saut'; - listTitle = 'Liste des sauts'; - listConfig: JumpListConfig = { type: 'all', filters: {} }; - refreshInterval: number = environment.refresh_interval; - isAuthenticated = false; - isUser = true; - canModify = false; - jump: Jump = {} as Jump; - currentUser: User = {} as User; + private _lastjump: Subscription = new Subscription(); + public errors!: Errors; + public title = 'Carnet de sauts'; + public jump: Jump = {} as Jump; + public lastjump: Jump = {} as Jump; + public currentUser: User = {} as User; + public listConfig: JumpListConfig = { type: 'all', filters: {} }; + public refreshInterval: number = environment.refresh_interval; + public isAuthenticated = false; + public isUser = true; + public canModify = false; + public isSubmitting = false; constructor( private route: ActivatedRoute, private router: Router, + private dialog: MatDialog, + private snackBar: MatSnackBar, private jumpsService: JumpsService, - private userService: UserService + private userService: UserService, + public menuItems: MenuItems ) { } ngOnInit() { @@ -51,8 +69,20 @@ export class LogbookComponent implements OnInit, OnDestroy { this.currentUser = userData; this.canModify = this.currentUser.role === 'Admin'; }); + + const lastjump$: Observable = this.jumpsService.getLastJump(); + this._lastjump = lastjump$.subscribe((jump) => { + this.lastjump = jump; + }); }); } + + ngOnDestroy() { + this._data.unsubscribe(); + this._currentUser.unsubscribe(); + this._lastjump.unsubscribe(); + } + importJumps() { try { data.forEach((entry) => { @@ -75,9 +105,52 @@ export class LogbookComponent implements OnInit, OnDestroy { } } - ngOnDestroy() { - this._currentUser.unsubscribe(); - this._data.unsubscribe(); + openAddDialog(): void { + const dialogRef = this.dialog.open(JumpAddDialogComponent, { + width: '60vw', + data: this.jump + }); + dialogRef.afterClosed().pipe(take(1)) + .subscribe(result => { + if (result != undefined) { + this._onEntry(result); + } + }); + } + + + private _onEntry(entry: NonNullable): void { + try { + this.isSubmitting = true; + Object.assign(this.jump, entry); + this.jumpsService.save(this.jump) + .pipe(take(1)) + .subscribe({ + next: (jump) => { + this._openSnackBar(`Le saut n°${jump.numero} a été ajouté !`, 'OK'); + this._resetErrors(); + //this.runQuery(); + }, + error: (err) => { + this.errors = err; + this.isSubmitting = false; + } + }); + } catch (error) { + console.error(error); + } + } + + private _openSnackBar(content: string, title: string) { + this.snackBar.open(content, title, { + horizontalPosition: 'end', + verticalPosition: 'bottom', + duration: 4000, + }); + } + + private _resetErrors(): void { + this.errors = { errors: {} }; } } diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html index eb1e9bd..543690e 100644 --- a/src/app/components/settings/settings.component.html +++ b/src/app/components/settings/settings.component.html @@ -44,6 +44,12 @@
+
+ + Poids + + +
Photo de profil diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts index 3f44a56..a7a7c86 100644 --- a/src/app/components/settings/settings.component.ts +++ b/src/app/components/settings/settings.component.ts @@ -53,6 +53,7 @@ export class SettingsComponent implements OnInit, OnDestroy { password: ['', Validators.required], confirmPassword: ['', Validators.required], licence: '', + poids: '', image: '', bg_image: '' }, { validators: this.checkPasswords }); diff --git a/src/app/components/shared/dialogs/jump-add.dialog.html b/src/app/components/shared/dialogs/jump-add.dialog.html index ce215b1..1057b87 100644 --- a/src/app/components/shared/dialogs/jump-add.dialog.html +++ b/src/app/components/shared/dialogs/jump-add.dialog.html @@ -4,74 +4,74 @@
- + Numéro - + Date - + Lieu - + Aeronef - + Hauteur - + Voile - + Taille - + Categorie - + Module
- + Participants - + Programme - + Oaci - + Imat - + Accessoires - + Zone - + Dossier - + Video @@ -85,6 +85,7 @@
- + + diff --git a/src/app/components/shared/dialogs/jump-delete.dialog.html b/src/app/components/shared/dialogs/jump-delete.dialog.html index b5028cd..0b89239 100644 --- a/src/app/components/shared/dialogs/jump-delete.dialog.html +++ b/src/app/components/shared/dialogs/jump-delete.dialog.html @@ -44,6 +44,7 @@
- + + diff --git a/src/app/components/shared/dialogs/jump-edit.dialog.html b/src/app/components/shared/dialogs/jump-edit.dialog.html index 189bf4d..2444567 100644 --- a/src/app/components/shared/dialogs/jump-edit.dialog.html +++ b/src/app/components/shared/dialogs/jump-edit.dialog.html @@ -79,6 +79,7 @@
- + + diff --git a/src/app/components/shared/helpers-jump/history-table.component.html b/src/app/components/shared/helpers-jump/history-table.component.html new file mode 100644 index 0000000..3ee3345 --- /dev/null +++ b/src/app/components/shared/helpers-jump/history-table.component.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + +
{{name}} Total
● {{names[i]}} + {{value}} + {{value}} + + {{values[i]}} + {{values[i]}} +
\ No newline at end of file diff --git a/src/app/components/shared/helpers-jump/history-table.component.ts b/src/app/components/shared/helpers-jump/history-table.component.ts new file mode 100644 index 0000000..3b6222b --- /dev/null +++ b/src/app/components/shared/helpers-jump/history-table.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; +import { NgIf, NgFor } from '@angular/common'; + +@Component({ + standalone: true, + imports: [ + NgIf, NgFor + ], + selector: 'huapp-history-table', + templateUrl: './history-table.component.html', + styleUrls: [] +}) +export class HistoryTableComponent { + + constructor() {} + + @Input() headers: string[] = []; + @Input() names: string[] = []; + @Input() values: number[] = []; + @Input() rows: any[] = []; + @Input() colors: string[] = []; +} diff --git a/src/app/components/shared/helpers-jump/index.ts b/src/app/components/shared/helpers-jump/index.ts index 7bc416f..f6c4677 100644 --- a/src/app/components/shared/helpers-jump/index.ts +++ b/src/app/components/shared/helpers-jump/index.ts @@ -1,3 +1,4 @@ +export * from './history-table.component'; export * from './jump-list.component'; export * from './jump-meta.component'; export * from './jump-preview.component'; diff --git a/src/app/components/shared/helpers-jump/jump-table.component.html b/src/app/components/shared/helpers-jump/jump-table.component.html index e8bb4cd..0f76f2c 100644 --- a/src/app/components/shared/helpers-jump/jump-table.component.html +++ b/src/app/components/shared/helpers-jump/jump-table.component.html @@ -1,38 +1,37 @@ -
-

{{ title }} ({{ jumpsCount }})

- - -
-Dernier saut enregistré : -Aucun saut à afficher pour le moment. -Actualisation des sauts en cours -
- {{getErrorMessage()}} + {{getErrorMessage()}} + - + + Aucun saut à afficher pour le moment. + Actualisation des sauts en cours
- + +
- +
- + @@ -40,7 +39,10 @@ @@ -48,7 +50,10 @@ @@ -56,7 +61,10 @@ @@ -64,7 +72,10 @@ @@ -72,7 +83,10 @@ @@ -80,7 +94,10 @@ @@ -88,7 +105,10 @@ @@ -96,7 +116,10 @@ @@ -104,7 +127,10 @@ @@ -112,7 +138,10 @@ @@ -120,7 +149,10 @@ @@ -128,7 +160,10 @@ @@ -136,7 +171,10 @@ @@ -144,7 +182,10 @@ @@ -152,7 +193,10 @@ @@ -160,7 +204,10 @@ @@ -176,12 +223,18 @@ - - - + + + + + + - - -
Aucun saut à afficher pour le moment.
Numero # - {{element.numero}} - + {{element.numero}} + + + + + Date {{element.date}} - + + + + Lieu {{element.lieu}} - + + + + Oaci {{element.oaci}} - + + + + Aeronef {{element.aeronef}} - + + + + Imat {{element.imat}} - + + + + Hauteur {{element.hauteur}} - + + + + Voile {{element.voile}} - + + + + Taille {{element.taille}} - + + + + Categorie {{element.categorie}} - + + + + Module {{element.module}} - + + + + Participants {{element.participants}} - + + + + Programme {{element.programme}} - + + + + Accessoires {{element.accessoires}} - + + + + Zone {{element.zone}} - + + + + Dossier {{element.dossier}} - + + + + Video {{element.video}} - + + + +
\ No newline at end of file + + + diff --git a/src/app/components/shared/helpers-jump/jump-table.component.scss b/src/app/components/shared/helpers-jump/jump-table.component.scss index 6a3df31..97a682e 100644 --- a/src/app/components/shared/helpers-jump/jump-table.component.scss +++ b/src/app/components/shared/helpers-jump/jump-table.component.scss @@ -24,3 +24,6 @@ mat-card-content { vertical-align: middle; } } +.mat-mdc-progress-spinner { + display: inline-block; +} diff --git a/src/app/components/shared/helpers-jump/jump-table.component.ts b/src/app/components/shared/helpers-jump/jump-table.component.ts index 5b64f6c..2270c44 100644 --- a/src/app/components/shared/helpers-jump/jump-table.component.ts +++ b/src/app/components/shared/helpers-jump/jump-table.component.ts @@ -3,10 +3,12 @@ import { NgIf, DecimalPipe, DatePipe } from '@angular/common'; import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { Router, RouterLink } from '@angular/router'; import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSort, MatSortModule } from '@angular/material/sort'; @@ -16,18 +18,17 @@ import { Observable, Subscription } from 'rxjs'; import { take } from 'rxjs/operators'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; -import { Errors, Jump, JumpList, JumpListConfig, JumpViewResults } from 'src/app/core/models'; +import { Errors, Jump, JumpList, JumpListConfig } from 'src/app/core/models'; import { JumpsService, BackendService } from 'src/app/core/services'; import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent } from 'src/app/components/shared/dialogs' -import { environment } from 'src/environments/environment'; @Component({ standalone: true, imports: [ NgIf, DecimalPipe, DatePipe, RouterLink, FormsModule, ReactiveFormsModule, NgxSkeletonLoaderModule, MatFormFieldModule, MatInputModule, - MatProgressSpinnerModule, MatButtonModule, MatIconModule, MatPaginatorModule, - MatTableModule, MatSortModule, MatSnackBarModule, MatDialogModule, + MatProgressSpinnerModule, MatButtonModule, MatCardModule, MatIconModule, MatMenuModule, + MatPaginatorModule, MatTableModule, MatSortModule, MatSnackBarModule, MatDialogModule, JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent ], selector: 'huapp-jump-table', @@ -36,10 +37,12 @@ import { environment } from 'src/environments/environment'; }) export class JumpTableComponent implements OnChanges, OnDestroy { private _jumps: Subscription = new Subscription(); + private _lastjump: Subscription = new Subscription(); errors!: Errors; query: JumpListConfig = { type: 'all', filters: {} }; jump: Jump = {} as Jump; jumps!: MatTableDataSource; + lastjump: Jump = {} as Jump; jumpsCount = 0; currentPage = 1; displayedColumns: string[] = [ @@ -93,14 +96,19 @@ export class JumpTableComponent implements OnChanges, OnDestroy { this.loading = true; this.query = this.config; this.runQuery(); - //this.loadJumps(); } ngOnDestroy() { this._jumps.unsubscribe(); + this._lastjump.unsubscribe(); } runQuery() { + const lastjump$: Observable = this.jumpsService.getLastJump(); + this._lastjump = lastjump$.subscribe((jump) => { + this.lastjump = jump; + }); + if (this.limit) { this.query.filters.limit = this.limit; this.query.filters.offset = (this.limit * (this.currentPage - 1)); @@ -126,27 +134,6 @@ export class JumpTableComponent implements OnChanges, OnDestroy { }); } - loadJumps() { - const jumps$: Observable = this._dataService.getJumps(); - this._jumps = jumps$.subscribe((jumpList) => { - //console.log('ngOnInit'); - //console.log(res); - //console.log(res["rows"]); - this.jumpsCount = jumpList.total_rows; - //this.last_jump = jumpList.rows[0]; - this.jumps = new MatTableDataSource(jumpList.rows) - this.jumps.paginator = this.paginator; - this.jumps.sort = this.sort; - console.log(this.jumps); - }); - /* - .subscribe((res) => this.jumps = new MatTableDataSource(res["rows"])); - */ - // - //.subscribe((res) => this.jumps = res["rows"]); - //.subscribe((res) => console.log(res["rows"])); - } - deleteJump(slug: string) { this.isDeleting = true; this.jumpsService.destroy(slug).pipe(take(1)) @@ -209,14 +196,6 @@ export class JumpTableComponent implements OnChanges, OnDestroy { } } - private _openSnackBar(content: string, title: string) { - this.snackBar.open(content, title, { - horizontalPosition: 'end', - verticalPosition: 'bottom', - duration: 4000, - }); - } - private _onDelete(slug: string): void { try { this.isDeleting = true; @@ -280,6 +259,14 @@ export class JumpTableComponent implements OnChanges, OnDestroy { } } + private _openSnackBar(content: string, title: string) { + this.snackBar.open(content, title, { + horizontalPosition: 'end', + verticalPosition: 'bottom', + duration: 4000, + }); + } + private _resetErrors(): void { this.errors = { errors: {} }; } diff --git a/src/app/components/shared/menu-items.ts b/src/app/components/shared/menu-items.ts index b4909ea..f355b09 100755 --- a/src/app/components/shared/menu-items.ts +++ b/src/app/components/shared/menu-items.ts @@ -16,9 +16,27 @@ const MENUITEMS: Menu[] = [ ]; const MENUQCM: Menu[] = [ - { state: 'button', type: 'link', name: 'BPA', icon: 'rule' }, - { state: 'datepicker', type: 'link', name: 'Brevet C', icon: 'rule' }, - { state: 'grid', type: 'link', name: 'Brevet D', icon: 'rule' } + { state: 'qcmbpa', type: 'link', name: 'BPA', icon: 'rule' }, + { state: 'qcmc', type: 'link', name: 'Brevet C', icon: 'rule' }, + { state: 'qcmd', type: 'link', name: 'Brevet D', icon: 'rule' } +]; + +const MENUPANEL: Menu[] = [ + { state: '#', type: 'link', name: 'Retirer du dashboard', icon: 'add_notes', desc: '' }, + { state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' } +]; + +const MENUCALCULATOR: Menu[] = [ + { state: '#', type: 'link', name: 'Recherche avancée', icon: 'search', desc: '' }, + { state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' }, + { state: '#', type: 'link', name: 'Partager', icon: 'share', desc: '' } +]; + +const MENULOGBOOK: Menu[] = [ + { state: '#', type: 'link', name: 'Recherche avancée', icon: 'search', desc: '' }, + { state: '#', type: 'link', name: 'Recherche par participant', icon: 'person_search', desc: '' }, + { state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' }, + { state: '#', type: 'link', name: 'Import CSV', icon: 'upload_file', desc: '' } ]; @Injectable() @@ -26,10 +44,19 @@ export class MenuItems { getMenuAuth(): Menu[] { return MENUAUTH; } + getMenuCalculator(): Menu[] { + return MENUCALCULATOR; + } getMenuItems(): Menu[] { return MENUITEMS; } + getMenuLogbook(): Menu[] { + return MENULOGBOOK; + } getMenuQCM(): Menu[] { return MENUQCM; } + getMenuPanel(): Menu[] { + return MENUPANEL; + } }