hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Replace fraction filter radio buttons with ngx-bootstrap radio

pull/14/head
Florian Hartwich 2017-10-08 18:13:20 +02:00
parent 04e7a77233
commit a7f9821a38
15 changed files with 59 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
static/src/app/decorations/decoration-list/decoration-list.component.html
View File

@ -1,43 +1,21 @@
<div class="select-list"> <div class="select-list">
<div class="input-group list-header pull-left"> <div class="input-group list-header pull-left">
<label class="radio-inline"> <div class="btn-group" (click)="filterDecorations()">
<input type="radio" name="fractSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
[(ngModel)]="fractionRadioSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="global" uncheckable>Global</label>
(change)="filterDecorations(query.value, '')">Alle </div>
</label> <a class="pull-right btn btn-success" (click)="openNewDecorationForm()">+</a>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="blufor"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterDecorations(query.value, fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="opfor"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterDecorations(query.value, fractRadioOpfor.value)">CSAT
</label>
<br>
<label class="radio-inline" style="padding-top: 8px;">
<input type="radio" name="fractSelect" value="global"
[(ngModel)]="fractionRadioSelect"
#fractRadioGlobal
(change)="filterDecorations(query.value, fractRadioGlobal.value)">Global
</label>
<a class="pull-right btn btn-success" (click)="openNewDecorationForm()">
Auszeichnung hinzufügen
</a>
</div> </div>
<div class="input-group list-header"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="filterDecorations(query.value, fractionRadioSelect)" (keyup.enter)="filterDecorations()"
[formControl]="searchTerm"> [formControl]="searchTerm">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" <button class="btn btn-default" type="button"
(click)="filterDecorations(query.value, fractionRadioSelect)"> (click)="filterDecorations()">
Suchen Suchen
</button> </button>
</span> </span>

8
static/src/app/decorations/decoration-list/decoration-list.component.ts
View File

@ -20,7 +20,7 @@ export class DecorationListComponent implements OnInit {
searchTerm = new FormControl(); searchTerm = new FormControl();
fractionRadioSelect: string; public radioModel: string;
constructor(private decorationService: DecorationService, constructor(private decorationService: DecorationService,
private router: Router, private router: Router,
@ -42,7 +42,7 @@ export class DecorationListComponent implements OnInit {
Observable.merge(paramsStream, searchTermStream) Observable.merge(paramsStream, searchTermStream)
.distinctUntilChanged() .distinctUntilChanged()
.switchMap(query => this.decorationService.findDecorations(query, this.fractionRadioSelect)) .switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
.subscribe(); .subscribe();
} }
@ -69,8 +69,8 @@ export class DecorationListComponent implements OnInit {
} }
} }
filterDecorations(query, fractionFilter) { filterDecorations() {
this.decorations$ = this.decorationService.findDecorations(query, fractionFilter); this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
} }
adjustBrowserUrl(queryString = '') { adjustBrowserUrl(queryString = '') {

3
static/src/app/decorations/decoration.module.ts
View File

@ -4,10 +4,11 @@ import {CommonModule} from "@angular/common";
import {DecorationStore} from "../services/stores/decoration.store"; import {DecorationStore} from "../services/stores/decoration.store";
import {DecorationService} from "../services/decoration-service/decoration.service"; import {DecorationService} from "../services/decoration-service/decoration.service";
import {NgModule} from "@angular/core"; import {NgModule} from "@angular/core";
import {ButtonsModule} from "ngx-bootstrap";
@NgModule({ @NgModule({
declarations: decorationsRoutingComponents, declarations: decorationsRoutingComponents,
imports: [CommonModule, SharedModule, decorationRoutesModule], imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), decorationRoutesModule],
providers: [DecorationStore, DecorationService] providers: [DecorationStore, DecorationService]
}) })
export class DecorationsModule { export class DecorationsModule {

2
static/src/app/decorations/edit-decoration/edit-decoration.component.html
View File

@ -1,6 +1,6 @@
<form #form="ngForm" class="overview"> <form #form="ngForm" class="overview">
<h3 *ngIf="decoration._id">Auszeichnung editieren</h3> <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
<h3 *ngIf="!decoration._id">Neuen Auszeichnung hinzufügen</h3> <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
<div class="form-group"> <div class="form-group">
<label for="title">Name</label> <label for="title">Name</label>

32
static/src/app/ranks/rank-list/rank-list.component.html
View File

@ -1,38 +1,20 @@
<div class="select-list"> <div class="select-list">
<div class="input-group list-header"> <div class="input-group list-header">
<form class="pull-left"> <div class="btn-group" (click)="filterRanks()">
<label class="radio-inline"> <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
<input type="radio" name="fractSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" </div>
[(ngModel)]="fractionRadioSelect" <a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
(change)="filterRanks(query.value, '')">Alle
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="blufor"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterRanks(query.value, fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="opfor"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterRanks(query.value, fractRadioOpfor.value)">CSAT
</label>
</form>
<a class="pull-right btn btn-success" (click)="openNewRankForm()">
Rang hinzufügen
</a>
</div> </div>
<div class="input-group list-header"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="filterRanks(query.value, fractionRadioSelect)" (keyup.enter)="filterRanks()"
[formControl]="searchTerm"> [formControl]="searchTerm">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" <button class="btn btn-default" type="button"
(click)="filterRanks(query.value, fractionRadioSelect)"> (click)="filterRanks()">
Suchen Suchen
</button> </button>
</span> </span>

8
static/src/app/ranks/rank-list/rank-list.component.ts
View File

@ -20,7 +20,7 @@ export class RankListComponent implements OnInit {
searchTerm = new FormControl(); searchTerm = new FormControl();
fractionRadioSelect: string; public radioModel: string;
constructor(private rankService: RankService, constructor(private rankService: RankService,
private router: Router, private router: Router,
@ -42,7 +42,7 @@ export class RankListComponent implements OnInit {
Observable.merge(paramsStream, searchTermStream) Observable.merge(paramsStream, searchTermStream)
.distinctUntilChanged() .distinctUntilChanged()
.switchMap(query => this.rankService.findRanks(query, this.fractionRadioSelect)) .switchMap(query => this.rankService.findRanks(query, this.radioModel))
.subscribe(); .subscribe();
} }
@ -57,8 +57,8 @@ export class RankListComponent implements OnInit {
this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route}); this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
} }
filterRanks(query, fractionFilter) { filterRanks() {
this.ranks$ = this.rankService.findRanks(query, fractionFilter); this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
} }
deleteRank(rank) { deleteRank(rank) {

3
static/src/app/ranks/ranks.module.ts
View File

@ -4,10 +4,11 @@ import {SharedModule} from "../shared.module";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {RankService} from "../services/rank-service/rank.service"; import {RankService} from "../services/rank-service/rank.service";
import {RankStore} from "../services/stores/rank.store"; import {RankStore} from "../services/stores/rank.store";
import {ButtonsModule} from "ngx-bootstrap";
@NgModule({ @NgModule({
declarations: ranksRoutingComponents, declarations: ranksRoutingComponents,
imports: [CommonModule, SharedModule, rankRouterModule], imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), rankRouterModule],
providers: [RankStore, RankService] providers: [RankStore, RankService]
}) })
export class RanksModule { export class RanksModule {

5
static/src/app/squads/squad-list/squad-list.component.css
View File

@ -1,8 +1,3 @@
.search-bar { .search-bar {
padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.squad-list {
width: 100%;
}

32
static/src/app/squads/squad-list/squad-list.component.html
View File

@ -1,36 +1,20 @@
<div class="select-list"> <div class="select-list">
<div class="input-group list-header pull-left"> <div class="input-group list-header pull-left">
<label class="radio-inline"> <div class="btn-group" (click)="filterSquads()">
<input type="radio" name="fractSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
[(ngModel)]="fractionRadioSelect" </div>
(change)="filterSquads(query.value, '')">Alle <a class="pull-right btn btn-success" (click)="openNewSquadForm()">+</a>
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="blufor"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterSquads(query.value, fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="opfor"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterSquads(query.value, fractRadioOpfor.value)">CSAT
</label>
<a class="pull-right btn btn-success" (click)="openNewSquadForm()">
Squad hinzufügen
</a>
</div> </div>
<div class="input-group search-bar" style="padding-top: 0;"> <div class="input-group search-bar">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="filterSquads(query.value, fractionRadioSelect)" (keyup.enter)="filterSquads()"
[formControl]="searchTerm"> [formControl]="searchTerm">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" <button class="btn btn-default" type="button"
(click)="filterSquads(query.value, fractionRadioSelect)"> (click)="filterSquads()">
Suchen Suchen
</button> </button>
</span> </span>

8
static/src/app/squads/squad-list/squad-list.component.ts
View File

@ -20,7 +20,7 @@ export class SquadListComponent implements OnInit {
searchTerm = new FormControl(); searchTerm = new FormControl();
fractionRadioSelect: string; public radioModel: string;
constructor(private squadService: SquadService, constructor(private squadService: SquadService,
private router: Router, private router: Router,
@ -42,7 +42,7 @@ export class SquadListComponent implements OnInit {
Observable.merge(paramsStream, searchTermStream) Observable.merge(paramsStream, searchTermStream)
.distinctUntilChanged() .distinctUntilChanged()
.switchMap(query => this.squadService.findSquads(query, this.fractionRadioSelect)) .switchMap(query => this.squadService.findSquads(query, this.radioModel))
.subscribe(); .subscribe();
} }
@ -66,8 +66,8 @@ export class SquadListComponent implements OnInit {
} }
} }
filterSquads(query = '', fractionFilter) { filterSquads() {
this.squads$ = this.squadService.findSquads(query, fractionFilter); this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
} }
adjustBrowserUrl(queryString = '') { adjustBrowserUrl(queryString = '') {

3
static/src/app/squads/squads.module.ts
View File

@ -4,10 +4,11 @@ import {SharedModule} from "../shared.module";
import {squadRouterModule, squadsRoutingComponents} from "./squads.routing"; import {squadRouterModule, squadsRoutingComponents} from "./squads.routing";
import {SquadStore} from "../services/stores/squad.store"; import {SquadStore} from "../services/stores/squad.store";
import {SquadService} from "../services/squad-service/squad.service"; import {SquadService} from "../services/squad-service/squad.service";
import {ButtonsModule} from "ngx-bootstrap";
@NgModule({ @NgModule({
declarations: squadsRoutingComponents, declarations: squadsRoutingComponents,
imports: [CommonModule, SharedModule, squadRouterModule], imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), squadRouterModule],
providers: [SquadStore, SquadService] providers: [SquadStore, SquadService]
}) })
export class SquadsModule { export class SquadsModule {

38
static/src/app/users/user-list/user-list.component.html
View File

@ -1,43 +1,21 @@
<div class="select-list"> <div class="select-list">
<div class="input-group list-header pull-left"> <div class="input-group list-header pull-left">
<label class="radio-inline"> <div class="btn-group" (click)="filterUsers()">
<input type="radio" name="fractSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
[(ngModel)]="fractionRadioSelect" <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="unassigned" uncheckable>Ohne Squad</label>
(change)="filterUser(query.value, '')">Alle </div>
</label> <a class="pull-right btn btn-success" (click)="openNewUserForm()">+</a>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="blufor"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterUser(query.value, fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="opfor"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterUser(query.value, fractRadioOpfor.value)">CSAT
</label>
<br>
<label class="radio-inline" style="padding-top: 8px;">
<input type="radio" name="fractSelect" value="unassigned"
[(ngModel)]="fractionRadioSelect"
#fractRadioUnassigned
(change)="filterUser(query.value, fractRadioUnassigned.value)">Ohne Squad
</label>
<a class="pull-right btn btn-success" (click)="openNewUserForm()">
Teilnehmer hinzufügen
</a>
</div> </div>
<div class="input-group list-header"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="filterUser(query.value, fractionRadioSelect)" (keyup.enter)="filterUsers()"
[formControl]="searchTerm"> [formControl]="searchTerm">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button" <button class="btn btn-default" type="button"
(click)="filterUser(query.value, fractionRadioSelect)"> (click)="filterUsers()">
Suchen Suchen
</button> </button>
</span> </span>

8
static/src/app/users/user-list/user-list.component.ts
View File

@ -20,7 +20,7 @@ export class UserListComponent implements OnInit {
searchTerm = new FormControl(); searchTerm = new FormControl();
fractionRadioSelect: string; public radioModel: string;
constructor(private userService: UserService, constructor(private userService: UserService,
private router: Router, private router: Router,
@ -42,7 +42,7 @@ export class UserListComponent implements OnInit {
Observable.merge(paramsStream, searchTermStream) Observable.merge(paramsStream, searchTermStream)
.distinctUntilChanged() .distinctUntilChanged()
.switchMap(query => this.userService.findUsers(query, this.fractionRadioSelect)) .switchMap(query => this.userService.findUsers(query, this.radioModel))
.subscribe(); .subscribe();
} }
@ -70,8 +70,8 @@ export class UserListComponent implements OnInit {
} }
} }
filterUser(query, fractionFilter) { filterUsers() {
this.users$ = this.userService.findUsers(query, fractionFilter); this.users$ = this.userService.findUsers(this.searchTerm.value, this.radioModel);
} }
adjustBrowserUrl(queryString = '') { adjustBrowserUrl(queryString = '') {

7
static/src/app/users/users.module.ts
View File

@ -1,12 +1,13 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {routes, usersRoutingComponents} from './users.routing'; import {usersRouterModule, usersRoutingComponents} from './users.routing';
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {SharedModule} from "../shared.module"; import {SharedModule} from "../shared.module";
import {ButtonsModule} from "ngx-bootstrap";
@NgModule({ @NgModule({
declarations: usersRoutingComponents, declarations: usersRoutingComponents,
imports: [CommonModule, SharedModule, routes], imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), usersRouterModule],
}) })
export class UsersModule { export class UsersModule {
static routes = routes; static routes = usersRouterModule;
} }

2
static/src/app/users/users.routing.ts
View File

@ -32,6 +32,6 @@ export const usersRoutes: Routes = [{
} }
]; ];
export const routes: ModuleWithProviders = RouterModule.forChild(usersRoutes); export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent]; export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];