SKE-49 filter competitions front-end
This commit is contained in:
parent
dfcb5e97d7
commit
47e4f2be51
25
SystemKonkursow/4.2.1/angular/package-lock.json
generated
25
SystemKonkursow/4.2.1/angular/package-lock.json
generated
@ -123,6 +123,14 @@
|
||||
"tslib": "1.9.2"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "6.4.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.7.tgz",
|
||||
"integrity": "sha512-18x0U66fLD5kGQWZ9n3nb75xQouXlWs7kUDaTd8HTrHpT1s2QIAqlLd1KxfrYiVhsEC2jPQaoiae7VnBlcvkBg==",
|
||||
"requires": {
|
||||
"tslib": "1.9.2"
|
||||
}
|
||||
},
|
||||
"@angular/cli": {
|
||||
"version": "6.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz",
|
||||
@ -354,6 +362,23 @@
|
||||
"tslib": "1.9.2"
|
||||
}
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "6.4.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.7.tgz",
|
||||
"integrity": "sha512-SdNx7Xovi24Kw9eU6lkLhY/7f2M7L9F+/uh6XuPr4jbGgCUVVpeeVI5ztZhsZRbj1sN+/r1p5w8u62apWWl5Ww==",
|
||||
"requires": {
|
||||
"parse5": "5.1.0",
|
||||
"tslib": "1.9.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"parse5": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
|
||||
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.5.tgz",
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^6.0.5",
|
||||
"@angular/cdk": "^6.4.7",
|
||||
"@angular/common": "^6.0.5",
|
||||
"@angular/compiler": "^6.0.5",
|
||||
"@angular/core": "^6.0.5",
|
||||
"@angular/forms": "^6.0.5",
|
||||
"@angular/http": "^6.0.5",
|
||||
"@angular/material": "^6.4.7",
|
||||
"@angular/platform-browser": "^6.0.5",
|
||||
"@angular/platform-browser-dynamic": "^6.0.5",
|
||||
"@angular/router": "^6.0.5",
|
||||
|
||||
@ -38,6 +38,12 @@ import { CompetitionDetailComponent } from '@app/competition-detail/competition-
|
||||
|
||||
import { FilterClassesPipe } from '@app/pipe/filter-classes.pipe';
|
||||
|
||||
import {
|
||||
MatSelectModule,
|
||||
MatOptionModule,
|
||||
MatFormFieldModule
|
||||
} from '@angular/material';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
@ -74,7 +80,10 @@ import { FilterClassesPipe } from '@app/pipe/filter-classes.pipe';
|
||||
AppRoutingModule,
|
||||
ServiceProxyModule,
|
||||
SharedModule,
|
||||
NgxPaginationModule
|
||||
NgxPaginationModule,
|
||||
MatSelectModule,
|
||||
MatOptionModule,
|
||||
MatFormFieldModule,
|
||||
],
|
||||
providers: [
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<div class="flex-container" id="categories-list-area">
|
||||
<div class="flex-item" *ngFor="let category of categoriesList" (click)="goToCompetitions(category)">
|
||||
{{ category.name }}
|
||||
<div id="categories-list-area">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item" *ngFor="let category of categoriesList" (click)="goToCompetitions(category)">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,7 +16,7 @@
|
||||
border: 1px solid gray;
|
||||
border-left: 10px #739CB9 solid;
|
||||
color: darkblue;
|
||||
text-shadow: 2px 2px 6px #ab93ab;
|
||||
text-shadow: 0px 0px 1px #ab93ab;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,11 +1,36 @@
|
||||
<div class="flex-container" id="competitions-list-area">
|
||||
<div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [1, 8])">
|
||||
<p><u>{{ competition.name }}</u></p>
|
||||
<div class="organizer">Organizowany przez: {{ competition.creatorName }}</div>
|
||||
|
||||
<div class="bottom-flex">
|
||||
<p>Czas trwania: {{ competition.startDate | date:"dd/MM/yyyy" }} - {{ competition.endDate | date:"dd/MM/yyyy" }}</p>
|
||||
<p>Przedział klasowy: {{ competition.minClass }}-{{ competition.maxClass }}</p>
|
||||
<div id="competitions-list-area">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Filtr - minimalna klasa" [(ngModel)]="minClassValue">
|
||||
<mat-option *ngFor="let possibleClass of possibleClasses" [value]="possibleClass.value">
|
||||
{{possibleClass.viewValue}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Filtr - maksymalna klasa" [(ngModel)]="maxClassValue">
|
||||
<mat-option *ngFor="let possibleClass of possibleClasses" [value]="possibleClass.value">
|
||||
{{possibleClass.viewValue}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [minClassValue, maxClassValue])">
|
||||
<p><u>{{ competition.name }}</u></p>
|
||||
<div class="organizer">Organizowany przez: {{ competition.creatorName }}</div>
|
||||
|
||||
<div class="bottom-flex">
|
||||
<p>Czas trwania: {{ competition.startDate | date:"dd/MM/yyyy" }} - {{ competition.endDate | date:"dd/MM/yyyy" }}</p>
|
||||
<p>Przedział klasowy: {{ competition.minClass }}-{{ competition.maxClass }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="(competitionsList | filterClasses : [minClassValue, maxClassValue])?.length === 0">
|
||||
Brak konkursów
|
||||
</div>
|
||||
</div>
|
||||
@ -23,6 +23,20 @@ export class CompetitionsListComponent extends AppComponentBase implements OnIni
|
||||
|
||||
public categoryId: number;
|
||||
|
||||
public minClassValue: number = 1;
|
||||
public maxClassValue: number = 8;
|
||||
|
||||
public possibleClasses = [
|
||||
{value: 1, viewValue: 'Klasa 1'},
|
||||
{value: 2, viewValue: 'Klasa 2'},
|
||||
{value: 3, viewValue: 'Klasa 3'},
|
||||
{value: 4, viewValue: 'Klasa 4'},
|
||||
{value: 5, viewValue: 'Klasa 5'},
|
||||
{value: 6, viewValue: 'Klasa 6'},
|
||||
{value: 7, viewValue: 'Klasa 7'},
|
||||
{value: 8, viewValue: 'Klasa 8'}
|
||||
];
|
||||
|
||||
constructor(
|
||||
injector: Injector,
|
||||
private _competitionCategoryService: CompetitionCategoryServiceProxy,
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
/* General */
|
||||
@import "../../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
|
||||
|
||||
|
||||
.clickable-item {
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user