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

Redesign user editing

pull/1/head
Florian Hartwich 2017-05-13 14:57:40 +02:00
parent 7c55d14538
commit 5201463751
16 changed files with 520 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
api/routes/users.js
View File

@ -171,6 +171,61 @@ users.route('/:id')
})
})
.put(apiAuthenticationMiddleware, (req, res,next) => {
// first check that the given element id is the same as the URL id
if (!req.body || req.body._id !== req.params.id) {
// the URL does not fit the given element
var err = new Error('id of PATCH resource and send JSON body are not equal ' + req.params.id + " " + req.body._id);
err.status = codes.notfound;
next(err);
return; // prevent node to process this function further after next() has finished.
}
// main difference of PUT and PATCH is that PUT expects all data in request: checked by using the schema
var video = new UserModel(req.body);
UserModel.findById(req.params.id, req.body, {new: true}, function (err, item) {
// with parameter {new: true} the TweetNModel will return the new and changed object from the DB and not the old one.
if (err) {
err.status = codes.wrongrequest;
return next(err);
}
else if (!item) {
err = new Error("item not found");
err.status = codes.notfound;
return next(err);
}
// optional task 3b: check that version is still accurate
else if (video.__v !== item.__v) {
err = new Error("version outdated. Meanwhile update on item happened. Please GET resource again")
err.status = codes.conflict;
return next(err);
}
// now update all fields in DB item with body data in variable video
for (var field in UserModel.schema.paths) {
if ((field !== '_id') && (field !== '__v')) {
// this includes undefined. is important to reset attributes that are missing in req.body
item.set(field, video[field]);
}
}
// optional task 3: update updatedAt and increase version
item.updatedAt = new Date();
item.increment(); // this sets __v++
item.save(function (err) {
if (!err) {
res.locals.items = item;
} else {
err.status = codes.wrongrequest;
err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
}
getExtendedUser(item, next, (extUser) => {
res.locals.items = extUser;
res.locals.processed = true;
return next();
})
});
})
})
.delete(apiAuthenticationMiddleware, (req, res, next) => {
UserModel.findByIdAndRemove(req.params.id, (err, item) => {
if (err) {
@ -241,7 +296,7 @@ let getExtendedUser = (user, next, callback) => {
})
})
} else {
extUser.rank = null;
extUser.rank = {level: user.rankLvl};
addAwards(extUser).then(() => {
callback(extUser);
})

2
static/src/app/app.component.css
View File

@ -20,5 +20,5 @@ li {
.left {
float: left;
width: calc(100% - 300px);
width: calc(100% - 400px);
}

7
static/src/app/services/http-client.ts
View File

@ -39,6 +39,13 @@ export class HttpClient {
});
}
put(url, data) {
let headers = this.createAuthorizationHeader();
return this.http.put(url, data, {
headers: headers
});
}
patch(url, data) {
let headers = this.createAuthorizationHeader();
return this.http.patch(url, data, {

2
static/src/app/services/user-service/user.service.ts
View File

@ -48,7 +48,7 @@ export class UserService {
}
updateUser(user) {
return this.http.patch(this.config.apiUrl + this.config.apiUserPath + user._id, user)
return this.http.put(this.config.apiUrl + this.config.apiUserPath + user._id, user)
.map(res => res.json())
.do(savedUser => {
const action = {type: EDIT, data: savedUser};

4
static/src/app/users/user-award/user-award.component.css Normal file
View File

@ -0,0 +1,4 @@
.decoration-preview {
background-color: white;
padding: 5px;
}

127
static/src/app/users/user-award/user-award.component.html Normal file
View File

@ -0,0 +1,127 @@
<form #form="ngForm" class="overview">
<h3>Teilnehmer auszeichnen</h3>
<div class="form-group">
<label for="title">Name</label>
<input type="text" class="form-control"
[(ngModel)]="user.username"
name="title"
id="title"
required maxlength="50"/>
<show-error text="Name" path="title"></show-error>
</div>
<div class="form-group">
<label for="squad">Squad</label>
<select class="form-control"
name="squad"
id="squad"
[(ngModel)]="user.squad"
[compareWith]="equals"
(change)="toggleRanks()">
<option [value]="0">Ohne Fraktion/ Squad</option>
<option *ngFor="let squad of squads" [ngValue]="squad">
{{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
</option>
</select>
<show-error text="Squad" path="squad"></show-error>
</div>
<div class="form-group" [style.display]="ranksDisplay">
<label for="rank">Rang</label>
<select class="form-control"
name="rank"
id="rank" [ngModel]="user.rank?.level"
#rankLevel
style="min-width: 200px;">
<option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
</select>
<show-error text="Squad" path="squad"></show-error>
</div>
<button id="cancel"
(click)="cancel()"
class="btn btn-default">
Abbrechen
</button>
<button id="save"
(click)="saveUser(rankLevel.value)"
class="btn btn-default"
[disabled]="!form.valid">
Bestätigen
</button>
<br>
<br>
<div class="section-content">
<div class="container">
<div class="table-responsive table-responsive-dropdowns">
<table class="table table-hover">
<thead>
<tr>
<th class="col-sm-2">Grafik</th>
<th class="col-sm-3">Bezeichnung</th>
<th class="col-sm-3">Begründung</th>
<th class="col-sm-3 text-right">Datum</th>
<th class="col-sm-2 text-center">LÖschen</th>
<th></th>
</tr>
</thead>
<tbody>
<!--begin forEach-->
<tr>
<td class="table-cell-id">
1
</td>
<td>
<a class="small text-nowrap">2016-04-16 12:02:12</a>
</td>
<td>
Herman
Melville
</td>
<td class="text-right">
222
</td>
<td class="text-center">
<span class="label label-default">Paid online</span>
</td>
<td class="table-cell-actions">
<a href="/orders/edit/1" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action" title="Mark as delivered">
<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
</a>
<div class="btn-group">
<button class="item-action" type="button" id="itemOptions1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="itemOptions1">
<li>
<button type="button" class="btn btn-dropdown" data-toggle="confirm"
data-confirm-message="Do you really want to cancel this order?" data-confirm-yes="Yes"
data-confirm-no="No">
<span class="glyphicon glyphicon-remove-sign offset-right" aria-hidden="true"></span>
Cancel order
</button>
</li>
</ul>
</div>
</td>
</tr>
<!--end forEach-->
</tbody>
</table>
</div>
</div>
</div>
</form>

134
static/src/app/users/user-award/user-award.component.ts Normal file
View File

@ -0,0 +1,134 @@
import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import * as model from "../../models/model-interfaces";
import {Rank, Squad, User} from "../../models/model-interfaces";
import {UserService} from "../../services/user-service/user.service";
import {SquadService} from "../../services/squad-service/squad.service";
import {RankService} from "../../services/rank-service/rank.service";
import {Subscription} from "rxjs";
import {NgForm} from "@angular/forms";
@Component({
templateUrl: './user-award.component.html',
styleUrls: ['./user-award.component.css', '../../style/new-entry-form.css'],
})
export class UserAwardComponent {
@ViewChild(NgForm) form: NgForm;
subscription: Subscription;
id: string;
model = model;
showSuccessLabel = false;
ranksDisplay = 'none';
user: User = {squad: {}};
squads: Squad[] = [];
ranks: Rank[] = [];
saved = false;
constructor(private router: Router,
private route: ActivatedRoute,
private userService: UserService,
private squadService: SquadService,
private rankService: RankService) {
}
ngOnInit() {
// this.subscription = this.route.params
// .map(params => params['id'])
// .filter(id => id != undefined)
// .flatMap(id => this.userService.getUser(id))
// .subscribe(user => {
// if (user.squad === null) {
// user.squad = "0";
// this.ranksDisplay = 'none';
// } else {
// this.rankService.findRanks('', user.squad.fraction).subscribe(ranks => {
// this.ranks = ranks;
// this.ranksDisplay = 'block';
// });
// }
// this.user = user;
// });
//
// this.squadService.findSquads().subscribe(squads => {
// this.squads = squads;
// });
}
ngOnDestroy() {
// this.subscription.unsubscribe();
}
toggleRanks() {
if (this.user.squad != '0') {
this.rankService.findRanks('', this.user.squad.fraction).subscribe(
ranks => {
this.ranks = ranks;
this.ranksDisplay = 'block';
}
);
} else {
this.ranksDisplay = 'none';
}
}
saveUser(rankLevel) {
const updateObject = {
_id: this.user._id,
username: this.user.username,
squadId: this.user.squad._id,
rankLvl: rankLevel
};
this.userService.updateUser(updateObject)
.subscribe(user => {
this.user = user;
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
}
cancel() {
this.router.navigate(['../..'], {relativeTo: this.route});
return false;
}
/**
* compare ngValue with ngModel to assign selected element
*/
equals(o1: Squad, o2: Squad) {
if (o1 && o2) {
return o1._id === o2._id;
}
}
deleteUser(confirm) {
if (confirm.toLowerCase() === this.user.username.toLocaleLowerCase()) {
this.userService.deleteUser(this.user)
.subscribe((res) => {
this.router.navigate(['../..'], {relativeTo: this.route});
})
}
}
canDeactivate(): boolean {
if (this.saved || !this.form.dirty) {
return true;
}
return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
}
}

24
static/src/app/users/user-list/user-item.component.css
View File

@ -3,7 +3,6 @@ div.user-list-entry, a.user-list-entry {
width: 475px;
border-radius: 2px;
border: lightgrey solid 1px;
cursor: pointer;
margin-bottom: -1px;
}
@ -11,23 +10,36 @@ div.user-list-entry, a.user-list-entry {
background: lightgrey;
}
.icon-award {
background: url(../../../assets/award.png);
width: 18px;
height: 29px;
display: block;
margin-left: 12px;
}
span {
cursor: pointer;
}
a {
font-size: x-large;
font-weight: 700;
font-size: large;
font-weight: 600;
}
small {
color: grey;
font-size: x-small;
}
.trash {
padding-top: 18px;
font-size: 17px;
margin-left: -10px;
font-size: 19px;
margin-left: 12px;
margin-top: 2px;
}
.edit {
font-size: 22px;
}
.selected {

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

@ -1,14 +1,20 @@
<div class="fade-in user-list-entry" [ngClass]="{selected : selected}" (click)="select()">
<div class="fade-in user-list-entry" [ngClass]="{selected : selected}">
<div class="row">
<div class="col-xs-11">
<div class="col-xs-9">
<span>
<a>{{user.username}}</a>
<a (click)="select()">{{user.username}}</a>
</span>
<br>
<small *ngIf="user.squad && user.squad.fraction == 'OPFOR'">CSAT - {{user.squad.name}}</small>
<small *ngIf="user.squad && user.squad.fraction == 'BLUFOR'">NATO - {{user.squad.name}}</small>
<small *ngIf="!user.squad">ohne Squad/Fraktion</small>
</div>
<div class="col-xs-3">
<span (click)="select()" class="glyphicon glyphicon-pencil pull-left edit"></span>
<span (click)="award()" class="icon-award pull-left"></span>
<span (click)="delete(); $event.stopPropagation()" class="glyphicon glyphicon-trash trash"></span>
</div>
</div>
</div>

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

@ -8,7 +8,7 @@ import {User} from "../../models/model-interfaces";
styleUrls: ['./user-item.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: ['user', 'selected'],
outputs: ['userSelected', 'userDelete']
outputs: ['userSelected', 'userAward', 'userDelete']
})
export class UserItemComponent {
@ -16,6 +16,7 @@ export class UserItemComponent {
user: User;
userSelected = new EventEmitter();
userAward = new EventEmitter();
userDelete = new EventEmitter();
constructor(private router: Router) {
@ -26,6 +27,10 @@ export class UserItemComponent {
this.userSelected.emit(this.user._id)
}
award() {
this.userAward.emit(this.user._id)
}
delete() {
this.userDelete.emit(this.user);
}

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

@ -44,6 +44,7 @@
[user]="user"
(userDelete)="deleteUser(user)"
(userSelected)="selectUser($event)"
(userAward)="awardUser($event)"
[selected]="user._id == selectedUserId">
</pjm-user-item>
</div>

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

@ -51,11 +51,16 @@ export class UserListComponent implements OnInit {
this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
}
selectUser(userId: string | number) {
selectUser(userId: string) {
this.selectedUserId = userId;
this.router.navigate([{outlets: {'right': ['overview', userId]}}], {relativeTo: this.route});
}
awardUser(userId: string) {
this.selectedUserId = userId;
this.router.navigate([{outlets: {'right': ['award', userId]}}], {relativeTo: this.route});
}
filterUsersByFraction(query = '', fractionFilter) {
this.users$ = this.userService.findUsers(query, fractionFilter);
}

251
static/src/app/users/user-overview/user-overview.component.html
View File

@ -1,200 +1,57 @@
<div class="overview">
<h3 style="margin-bottom: 25px">Teilnehmer-Details
<span *ngIf="showSuccessLabel"
class="label label-success label-small"
style="margin-left: inherit">
Erfolgreich gespeichert
</span>
</h3>
<div *ngIf="user">
<div class="col-xs-12">
<form #form="ngForm" class="overview">
<h3>Teilnehmer editieren</h3>
<div class="form-group">
<label for="title">Name</label>
<input type="text" class="form-control"
[(ngModel)]="user.username"
name="title"
id="title"
required maxlength="50"/>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col content-s">
<label>Name:</label>
</div>
<div class="div-table-col content content-m" >
{{user.username}}
</div>
<div class="div-table-col content-l">
<input class="form-control" width="250px" placeholder="Neuer Name" #newNameInput>
</div>
<div class="div-table-col content-s">
<a class="pull-right btn btn-sm btn-block btn-default" (click)="update('username',newNameInput.value, newNameInput)" >Bestätigen</a>
</div>
</div>
<div class="div-table-row">
<div class="div-table-col content-s">
<label>Fraktion:</label>
</div>
<div class="div-table-col content-m" *ngIf="!user.squad">
Ohne Fraktion
</div>
<div class="div-table-col fraction-opfor content-m" *ngIf="user.squad && user.squad.fraction == 'OPFOR'">
CSAT
</div>
<div class="div-table-col fraction-blufor content-m" *ngIf="user.squad && user.squad.fraction == 'BLUFOR'">
NATO
</div>
<div class="div-table-col">
</div>
</div>
</div>
<hr>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col content-s">
<label>Squad:</label>
</div>
<div class="div-table-col content-m" *ngIf="!user.squad">Ohne Squad</div>
<div class="div-table-col content content-m" *ngIf="user.squad">{{user.squad.name}}</div>
<div class="div-table-col content content-l">
<select class="form-control" [ngModel]="user.squad?._id" style="min-width: 200px;" #squadSelector>
<option [value]="">---</option>
<option *ngFor="let squad of squads" [value]="squad._id">{{squad.fraction}}: {{squad.name}}</option>
</select>
</div>
<div class="div-table-col content-s">
<a class="pull-right btn btn-sm btn-default btn-block" (click)="update('squadId', squadSelector.value)">Bestätigen</a>
</div>
</div>
</div>
<hr>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col content-s">
<label>Rang:</label>
</div>
<div class="div-table-col content-m" *ngIf="!user.rank">Ohne Rang</div>
<div class="div-table-col content-m content" *ngIf="user.rank">{{user.rank.name}}</div>
<div class="div-table-col content-l" *ngIf="user.rank"><img src="resource/rank/{{user.rank._id}}.png" class="center-block"></div>
<div class="div-table-col content-s" *ngIf="user.rank">
<a class="btn btn-sm btn-default btn-block pull-right" (click)="update('rankLvl', user.rank.level + 1)">
Befördern
</a>
<br><br>
<a class="btn btn-sm btn-default btn-block pull-right" (click)="update('rankLvl', user.rank.level - 1)">
Degradieren
</a>
</div>
</div>
</div>
<hr>
<div class="div-table">
<!--row 1 - label and dropdown-->
<div class="div-table-row">
<div class="div-table-col content-s">
<label style="white-space: pre-wrap">Auszeichnung
verleihen:</label>
</div>
<div class="div-table-col content-m">
<select #decoSelector class="form-control" [ngModel]="undefined" style="min-width: 200px"
(change)="toggleDecoPreview(decoDescription, decoSelector.value, decoPreview)">
<option *ngFor="let deco of decorations" [value]="deco._id">{{deco.fraction}}: {{deco.name}}</option>
</select>
</div>
<div class="div-table-col content-l">
&nbsp;
</div>
</div>
<!--row 2 - decoration preview-->
<div class="div-table-row" [style.display]="decoPreviewDisplay">
<div class="div-table-col content-s">
&nbsp;
</div>
<div class="div-table-col content-m-flex decoration-preview" style="border-radius: 15px 0px 0px 15px;">
<img class="center-block" #decoPreview>
</div>
<div class="div-table-col content-l decoration-preview" style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
&nbsp;
</div>
<div class="div-table-col content-s">
&nbsp;
</div>
</div>
<!--row 3 - input and submit-->
<div class="div-table-row">
<div class="div-table-col content-s">
&nbsp;
</div>
<div class="div-table-col content-xxl">
<textarea class="form-control center-block" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
</div>
<div class="div-table-col content-s">
<a class="pull-right btn btn-sm btn-default btn-block" style="position: relative; bottom: -40px;"
(click)="addAwarding(decoSelector, awardTextArea, decoPreview, decoDescription)">
Bestätigen</a>
</div>
</div>
</div>
<hr>
<label style="margin-left: calc(8% + 15px);">Auszeichnungen:</label>
<div class="div-table table-bordered" style="min-width: 852px; border-collapse: collapse;">
<div class="div-table-row table-bordered">
<div class="div-table-col div-table-head content-xs">
Bild
</div>
<div class="div-table-col div-table-head content-m">
Bezeichnung
</div>
<div class="div-table-col div-table-head content-xl">
Begründung
</div>
<div class="div-table-col div-table-head content-xs">
Datum
</div>
<div class="div-table-col content-xs">
&nbsp;
</div>
</div>
<div class="div-table-row table-bordered"*ngFor="let award of user.awards">
<div class="div-table-col content-xs" *ngIf="award.decorationId.isMedal">
<img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">
</div>
<div class="div-table-col content-xs" *ngIf="!award.decorationId.isMedal">
<img width="60px" src="resource/decoration/{{award.decorationId._id}}.png">
</div>
<div class="div-table-col content-m">
{{award.decorationId.name}}
</div>
<div class="div-table-col content-xl">
{{award.reason}}
</div>
<div class="div-table-col content-xs">
{{award.date | date: 'dd.MM.yyyy'}}
</div>
<div class="div-table-col content-xs">
<span title="Löschen" (click)="deleteAwarding(award._id)" class="pull-right btn glyphicon glyphicon-trash trash"></span>
</div>
</div>
</div>
<hr>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col content-s">
<label>Löschen:</label>
</div>
<div class="div-table-col content-l" align="center">
<input class="form-control" #confirmInput placeholder="Teilnehmernamen zur Bestätigung eingeben" style="width:320px">
</div>
<div class="div-table-col content-s">
&nbsp;
</div>
<div class="div-table-col content-m">
<a class="pull-right btn btn-sm btn-block btn-default" (click)="deleteUser(confirmInput.value)" >Teilnehmer Löschen</a>
</div>
</div>
</div>
</div>
<show-error text="Name" path="title"></show-error>
</div>
</div>
<div class="form-group">
<label for="squad">Squad</label>
<select class="form-control"
name="squad"
id="squad"
[(ngModel)]="user.squad"
[compareWith]="equals"
(change)="toggleRanks()">
<option [value]="0">Ohne Fraktion/ Squad</option>
<option *ngFor="let squad of squads" [ngValue]="squad">
{{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
</option>
</select>
<show-error text="Squad" path="squad"></show-error>
</div>
<div class="form-group" [style.display]="ranksDisplay">
<label for="rank">Rang</label>
<select class="form-control"
name="rank"
id="rank" [ngModel]="user.rank?.level"
#rankLevel
style="min-width: 200px;">
<option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
</select>
<show-error text="Squad" path="squad"></show-error>
</div>
<button id="cancel"
(click)="cancel()"
class="btn btn-default">
Abbrechen
</button>
<button id="save"
(click)="saveUser(rankLevel.value)"
class="btn btn-default"
[disabled]="!form.valid">
Bestätigen
</button>
</form>

172
static/src/app/users/user-overview/user-overview.component.ts
View File

@ -1,87 +1,125 @@
import {Component} from "@angular/core";
import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import * as model from "../../models/model-interfaces";
import {Decoration, Squad, User} from "../../models/model-interfaces";
import {Rank, Squad, User} from "../../models/model-interfaces";
import {UserService} from "../../services/user-service/user.service";
import {SquadService} from "../../services/squad-service/squad.service";
import {DecorationService} from "../../services/decoration-service/decoration.service";
import {AwardingService} from "../../services/awarding-service/awarding.service";
import {RankService} from "../../services/rank-service/rank.service";
import {Subscription} from "rxjs";
import {NgForm} from "@angular/forms";
@Component({
templateUrl: './user-overview.component.html',
styleUrls: ['./user-overview.component.css', '../../style/overview.css'],
styleUrls: ['./user-overview.component.css', '../../style/new-entry-form.css'],
})
export class UserOverviewComponent {
@ViewChild(NgForm) form: NgForm;
subscription: Subscription;
id: string;
model = model;
showSuccessLabel = false;
decoPreviewDisplay = 'none';
ranksDisplay = 'none';
user: User;
user: User = {squad: {}};
squads: Squad[];
squads: Squad[] = [];
decorations: Decoration[];
ranks: Rank[] = [];
saved = false;
constructor(private router: Router,
private route: ActivatedRoute,
private userService: UserService,
private squadService: SquadService,
private decorationService: DecorationService,
private awardingService: AwardingService) {
private rankService: RankService) {
}
ngOnInit() {
this.route.params.subscribe((params) => {
this.userService.getUser(params['id']).subscribe(user => {
this.subscription = this.route.params
.map(params => params['id'])
.filter(id => id != undefined)
.flatMap(id => this.userService.getUser(id))
.subscribe(user => {
console.log(user.squad)
if (!user.squad) {
user.squad = "0";
this.ranksDisplay = 'none';
} else {
this.rankService.findRanks('', user.squad.fraction).subscribe(ranks => {
this.ranks = ranks;
this.ranksDisplay = 'block';
});
}
this.user = user;
});
});
this.squadService.findSquads().subscribe(squads => {
this.squads = squads;
});
this.decorationService.findDecorations().subscribe(decorations => {
this.decorations = decorations;
});
}
toggleDecoPreview(descriptionField, decorationId, image) {
this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
const description = this.decorations.find(
decoration => decoration._id === decorationId
).description;
image.src = 'resource/decoration/' + decorationId + '.png';
descriptionField.innerHTML = description;
ngOnDestroy() {
this.subscription.unsubscribe();
}
update(attrName, value, inputField?) {
if (attrName === 'squadId' && value === '---') {
value = null;
toggleRanks() {
if (this.user.squad != '0') {
this.rankService.findRanks('', this.user.squad.fraction).subscribe(
ranks => {
this.ranks = ranks;
this.ranksDisplay = 'block';
}
);
} else {
this.ranksDisplay = 'none';
}
if (value !== '' && (attrName !== 'rankLvl' || attrName === 'rankLvl' && value >= 0 && value <= 22)) {
const updateObject = {_id: this.user._id};
updateObject[attrName] = value;
this.userService.updateUser(updateObject)
.subscribe(user => {
this.user = user;
if (inputField) {
inputField.value = '';
}
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
}
saveUser(rankLevel) {
const updateObject = {
_id: this.user._id,
username: this.user.username,
rankLvl: rankLevel,
squadId: null
};
if (this.user.squad._id !== '0') {
updateObject.squadId = this.user.squad._id
}
console.log(updateObject)
this.userService.updateUser(updateObject)
.subscribe(user => {
if (!user.squad) {
user.squad = '0';
}
this.user = user;
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
}
cancel() {
this.router.navigate(['../..'], {relativeTo: this.route});
return false;
}
/**
* compare ngValue with ngModel to assign selected element
*/
equals(o1: Squad, o2: Squad) {
if (o1 && o2) {
return o1._id === o2._id;
}
}
@ -94,47 +132,11 @@ export class UserOverviewComponent {
}
}
deleteAwarding(awardingId) {
this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
this.awardingService.getUserAwardings(this.user._id)
.map((res) => res.json())
.subscribe((awards) => {
this.user.awards = awards;
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
})
}
addAwarding(decorationField, reasonField, previewImage, descriptionField) {
const decorationId = decorationField.value;
const reason = reasonField.value;
if (decorationId && reason.length > 0) {
const award = {
"userId": this.user._id,
"decorationId": decorationId,
"reason": reason,
"date": Date.now()
};
this.awardingService.addAwarding(award).subscribe(() => {
this.awardingService.getUserAwardings(this.user._id)
.map((res) => res.json())
.subscribe(awards => {
this.user.awards = awards;
this.decoPreviewDisplay = 'none';
decorationField.value = undefined;
reasonField.value = '';
previewImage.src = '';
descriptionField.innerHTML = '';
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
})
canDeactivate(): boolean {
if (this.saved || !this.form.dirty) {
return true;
}
return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
}
}

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

@ -3,6 +3,7 @@ import {UsersComponent} from "./users.component";
import {UserOverviewComponent} from "./user-overview/user-overview.component";
import {UserListComponent} from "./user-list/user-list.component";
import {CreateUserComponent} from "./new-user/new-user.component";
import {UserAwardComponent} from "./user-award/user-award.component";
export const usersRoutes: Routes = [{
path: '', component: UsersComponent,
@ -22,6 +23,12 @@ export const usersRoutes: Routes = [{
path: 'overview/:id',
component: UserOverviewComponent,
outlet: 'right'
}];
},
{
path: 'award/:id',
component: UserAwardComponent,
outlet: 'right'
}
];
export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent];
export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent, UserAwardComponent];

BIN
static/src/assets/award.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB