Release v1.9.4 #59
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "opt-cc",
|
"name": "opt-cc",
|
||||||
"version": "1.9.3",
|
"version": "1.9.4",
|
||||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http';
|
||||||
import {SpinnerService} from './services/user-interface/spinner/spinner.service';
|
import {SpinnerService} from './services/user-interface/spinner/spinner.service';
|
||||||
import {SettingsService} from './services/settings.service';
|
import {SettingsService} from './services/settings.service';
|
||||||
import {HttpGateway} from './services/http-gateway';
|
import {HttpGateway} from './services/http-gateway';
|
||||||
import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material';
|
import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
|
||||||
import {FlexLayoutModule} from '@angular/flex-layout';
|
import {FlexLayoutModule} from '@angular/flex-layout';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -38,6 +38,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
|
||||||
MatToolbarModule,
|
MatToolbarModule,
|
||||||
MatListModule,
|
MatListModule,
|
||||||
MatMenuModule,
|
MatMenuModule,
|
||||||
|
MatTableModule,
|
||||||
FlexLayoutModule,
|
FlexLayoutModule,
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,40 +25,35 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-left" style="margin-top:20px;">
|
<div class="pull-left" class="table-container">
|
||||||
<div class="table-container" style="min-width: 500px">
|
<mat-table [dataSource]="awards" class="mat-elevation-z8">
|
||||||
<table class="table">
|
<ng-container matColumnDef="award-graphics">
|
||||||
<thead>
|
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
||||||
<tr class="table-head">
|
<mat-cell *matCellDef="let element">
|
||||||
<th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
|
<img src="resource/decoration/{{element.decorationId._id}}.png">
|
||||||
<th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th>
|
</mat-cell>
|
||||||
<th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th>
|
</ng-container>
|
||||||
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
|
|
||||||
{{'public.army.member.awards.date' | translate}}
|
<ng-container matColumnDef="title">
|
||||||
</th>
|
<mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.title' | translate}}</mat-header-cell>
|
||||||
</tr>
|
<mat-cell *matCellDef="let element">{{element.decorationId.name}}</mat-cell>
|
||||||
</thead>
|
</ng-container>
|
||||||
<tbody *ngFor="let award of awards">
|
|
||||||
<tr *ngIf="award.confirmed === 1" class="cell-outline">
|
<ng-container matColumnDef="reason">
|
||||||
<td class="text-center" *ngIf="award.decorationId.isMedal">
|
<mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.reason' | translate}}</mat-header-cell>
|
||||||
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
|
<mat-cell *matCellDef="let element">{{element.reason}}</mat-cell>
|
||||||
</td>
|
</ng-container>
|
||||||
<td class="text-center" *ngIf="!award.decorationId.isMedal">
|
|
||||||
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
|
<ng-container matColumnDef="date">
|
||||||
</td>
|
<mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.date' | translate}}</mat-header-cell>
|
||||||
<td style="font-weight: bold">
|
<mat-cell *matCellDef="let element">
|
||||||
{{award.decorationId.name}}
|
<span class="small text-nowrap">{{element.date | date: 'dd.MM.yyyy'}}</span>
|
||||||
</td>
|
</mat-cell>
|
||||||
<td>
|
</ng-container>
|
||||||
{{award.reason}}
|
|
||||||
</td>
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||||
<td class="text-right">
|
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||||
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
|
</mat-table>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
.army-member-view {
|
.army-member-view {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -18,15 +18,11 @@
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
div.table-container {
|
||||||
overflow-wrap: break-word;
|
margin-top:20px;
|
||||||
table-layout: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-head {
|
.table-head {
|
||||||
|
|
@ -34,14 +30,26 @@
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody {
|
mat-table.mat-table {
|
||||||
background: rgba(255, 255, 255, 0.88);
|
background: rgba(255, 255, 255, 0.70);
|
||||||
|
|
||||||
|
.mat-column-award-graphics {
|
||||||
|
flex: 0 0 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-title {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-reason {
|
||||||
|
flex: 0 0 52%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-date {
|
||||||
|
flex: 0 0 8%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-outline {
|
mat-row.mat-row {
|
||||||
outline: 1px solid #D4D4D4;
|
@extend mat-table.mat-table;
|
||||||
}
|
|
||||||
|
|
||||||
tr.cell-outline:hover {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
|
||||||
import {Award, User} from '../../models/model-interfaces';
|
import {Award, User} from '../../models/model-interfaces';
|
||||||
import {ActivatedRoute, Router} from '@angular/router';
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
import {UserService} from '../../services/army-management/user.service';
|
import {UserService} from '../../services/army-management/user.service';
|
||||||
import {Subscription} from 'rxjs/Subscription';
|
|
||||||
import {AwardingService} from '../../services/army-management/awarding.service';
|
import {AwardingService} from '../../services/army-management/awarding.service';
|
||||||
import {Fraction} from '../../utils/fraction.enum';
|
import {Fraction} from '../../utils/fraction.enum';
|
||||||
import {Location} from '@angular/common';
|
import {Location} from '@angular/common';
|
||||||
|
|
@ -14,8 +13,6 @@ import {Location} from '@angular/common';
|
||||||
})
|
})
|
||||||
export class ArmyMemberComponent implements OnInit {
|
export class ArmyMemberComponent implements OnInit {
|
||||||
|
|
||||||
subscription: Subscription;
|
|
||||||
|
|
||||||
user: User = {};
|
user: User = {};
|
||||||
|
|
||||||
awards: Award[] = [];
|
awards: Award[] = [];
|
||||||
|
|
@ -26,6 +23,8 @@ export class ArmyMemberComponent implements OnInit {
|
||||||
|
|
||||||
readonly fraction = Fraction;
|
readonly fraction = Fraction;
|
||||||
|
|
||||||
|
readonly displayedColumns = ['award-graphics', 'title', 'reason', 'date'];
|
||||||
|
|
||||||
constructor(private router: Router,
|
constructor(private router: Router,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private userService: UserService,
|
private userService: UserService,
|
||||||
|
|
@ -34,17 +33,17 @@ export class ArmyMemberComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.subscription = this.route.params
|
this.route.params
|
||||||
.map(params => params['id'])
|
.map(params => params['id'])
|
||||||
.filter(id => id !== undefined)
|
.filter(id => id !== undefined)
|
||||||
.flatMap(id => this.userService.getUser(id))
|
.flatMap(id => this.userService.getUser(id))
|
||||||
.subscribe(user => {
|
.subscribe(user => {
|
||||||
this.user = user;
|
this.user = user;
|
||||||
this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
|
this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
|
||||||
this.awardingService.getUserAwardings(user._id).subscribe((awards => {
|
this.awardingService.getUserAwardings(user._id).subscribe((awards => {
|
||||||
this.awards = awards;
|
this.awards = awards;
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
backToOverview() {
|
backToOverview() {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
|
<form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
|
<h2>{{'login.headline' | translate}}</h2>
|
||||||
|
|
||||||
<label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
|
<label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
|
||||||
<input #userName id="inputEmail" class="form-control"
|
<input #userName id="inputEmail" class="form-control"
|
||||||
|
|
@ -11,12 +11,10 @@
|
||||||
<input #password type="password" id="inputPassword" class="form-control"
|
<input #password type="password" id="inputPassword" class="form-control"
|
||||||
placeholder="{{'login.password' | translate}}" required="">
|
placeholder="{{'login.password' | translate}}" required="">
|
||||||
|
|
||||||
<div class="form-group">
|
<button mat-stroked-button type="submit">
|
||||||
<button mat-stroked-button type="submit">
|
<span *ngIf="!loading">{{'login.submit' | translate}}</span>
|
||||||
<span *ngIf="!loading">{{'login.submit' | translate}}</span>
|
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
|
||||||
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,53 +2,31 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin > .row {
|
& > .row {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin-heading {
|
& > h2 {
|
||||||
text-align: center;
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
|
input.form-control {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
height: auto;
|
||||||
|
padding: 10px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.form-signin .checkbox {
|
button {
|
||||||
font-weight: normal;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.form-signin .form-control {
|
|
||||||
position: relative;
|
|
||||||
font-size: 16px;
|
|
||||||
height: auto;
|
|
||||||
padding: 10px;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin .form-control:focus {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="text"] {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="password"] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loading Animation */
|
/* Loading Animation */
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,27 @@
|
||||||
<form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
|
<form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
|
||||||
|
|
||||||
<div class="row" style="position: absolute;width: 500px;left: 40%;">
|
<div class="row">
|
||||||
<h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
|
<h2>{{'signup.headline' | translate}}</h2>
|
||||||
|
|
||||||
<p [innerHtml]="'signup.description' | translate"></p>
|
<p [innerHtml]="'signup.description' | translate"></p>
|
||||||
|
|
||||||
<label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
|
<label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
|
||||||
<input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
|
<input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
|
||||||
|
autofocus="">
|
||||||
|
|
||||||
<label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
|
<label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
|
||||||
<input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
|
<input #password type="password" id="inputPassword" class="form-control"
|
||||||
|
placeholder="{{'signup.password' | translate}}" required="">
|
||||||
|
|
||||||
<label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
|
<label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
|
||||||
<input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
|
<input #secret type="text" id="inputSecret" class="form-control"
|
||||||
|
placeholder="{{'signup.secret.placeholder' | translate}}"
|
||||||
required="">
|
required="">
|
||||||
|
|
||||||
<div class="form-group">
|
<button mat-stroked-button type="submit">
|
||||||
<button type="submit" class="btn btn-lg btn-block btn-primary">
|
<span *ngIf="!loading">{{'signup.submit' | translate}}</span>
|
||||||
<span *ngIf="!loading">{{'signup.submit' | translate}}</span>
|
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
|
||||||
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,7 @@ export interface Rank {
|
||||||
|
|
||||||
export interface Award {
|
export interface Award {
|
||||||
_id?: string;
|
_id?: string;
|
||||||
userId: string;
|
userId: string | User;
|
||||||
decorationId?: any; // Decoration or string
|
decorationId?: any; // Decoration or string
|
||||||
reason?: string;
|
reason?: string;
|
||||||
proposer?: AppUser;
|
proposer?: AppUser;
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,68 @@
|
||||||
<form #form="ngForm" class="overview">
|
<div class="request-award-container">
|
||||||
<h3>{{'request.award.headline' | translate}}</h3>
|
<form #form="ngForm" class="overview">
|
||||||
|
<h3>{{'request.award.headline' | translate}}</h3>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="user">{{'request.award.field.user' | translate}}</label>
|
<label for="user">{{'request.award.field.user' | translate}}</label>
|
||||||
<select class="form-control"
|
<select class="form-control"
|
||||||
name="user"
|
name="user"
|
||||||
id="user"
|
id="user"
|
||||||
[(ngModel)]="user"
|
[(ngModel)]="user"
|
||||||
[compareWith]="equals"
|
[compareWith]="equals"
|
||||||
(change)="toggleUser()"
|
(change)="toggleUser()"
|
||||||
required>
|
required>
|
||||||
<option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
|
<option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
|
||||||
<option *ngFor="let user of users" [ngValue]="user">
|
<option *ngFor="let user of users" [ngValue]="user">
|
||||||
{{user.username}}
|
{{user.username}}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="decoration">{{'request.award.field.award' | translate}}</label>
|
|
||||||
<select class="form-control"
|
|
||||||
name="decoration"
|
|
||||||
id="decoration"
|
|
||||||
[(ngModel)]="decoration"
|
|
||||||
[compareWith]="equals"
|
|
||||||
(change)="toggleDecoPreview(decoDescription, decoPreview)"
|
|
||||||
required>
|
|
||||||
<option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
|
|
||||||
<option *ngFor="let deco of decorations" [ngValue]="deco">
|
|
||||||
{{deco.name}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
|
|
||||||
<div class="col-sm-1 decoration-preview">
|
|
||||||
<img class="center-block" #decoPreview>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-2"
|
|
||||||
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
|
<div class="form-group">
|
||||||
|
<label for="decoration">{{'request.award.field.award' | translate}}</label>
|
||||||
|
<select class="form-control"
|
||||||
|
name="decoration"
|
||||||
|
id="decoration"
|
||||||
|
[(ngModel)]="decoration"
|
||||||
|
[compareWith]="equals"
|
||||||
|
(change)="toggleDecoPreview(decoDescription, decoPreview)"
|
||||||
|
required>
|
||||||
|
<option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
|
||||||
|
<option *ngFor="let deco of decorations" [ngValue]="deco">
|
||||||
|
{{deco.name}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
|
||||||
<label for="reason">{{'request.award.field.reason' | translate}}</label>
|
<div class="col-sm-1 decoration-preview">
|
||||||
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
|
<img class="center-block" #decoPreview>
|
||||||
id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
|
</div>
|
||||||
</div>
|
<div class="col-sm-2"
|
||||||
|
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button id="cancel"
|
<div class="form-group">
|
||||||
(click)="cancel()"
|
<label for="reason">{{'request.award.field.reason' | translate}}</label>
|
||||||
class="btn btn-default">
|
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
|
||||||
{{'request.award.button.cancel' | translate}}
|
id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
<button id="save"
|
<button id="cancel"
|
||||||
(click)="addAwarding(decoPreview, decoDescription)"
|
(click)="cancel()"
|
||||||
class="btn btn-default"
|
class="btn btn-default">
|
||||||
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
|
{{'request.award.button.cancel' | translate}}
|
||||||
{{'request.award.button.submit' | translate}}
|
</button>
|
||||||
</button>
|
|
||||||
|
<button id="save"
|
||||||
|
(click)="addAwarding(decoPreview, decoDescription)"
|
||||||
|
class="btn btn-default"
|
||||||
|
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
|
||||||
|
{{'request.award.button.submit' | translate}}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="table-container" *ngIf="showForm">
|
<div class="table-container" *ngIf="showForm">
|
||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
|
|
@ -113,5 +115,4 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,19 @@
|
||||||
@import url('../../style/overview.scss');
|
div.request-award-container {
|
||||||
|
margin: 2em auto;
|
||||||
|
width: 95%;
|
||||||
|
min-width: 835px;
|
||||||
|
|
||||||
.overview {
|
form {
|
||||||
width: 100% !important;
|
width: 33%;
|
||||||
margin-left: 25px !important;
|
min-width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-preview {
|
.decoration-preview {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
@ -21,16 +22,6 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: 90%;
|
|
||||||
min-width: 800px;
|
min-width: 800px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
width: 25%;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 80px 0 20px -20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<form #form="ngForm" class="overview">
|
<div class="confirm-award-container">
|
||||||
<h3>{{'request.confirm.award.headline' | translate}}</h3>
|
<h3>{{'request.confirm.award.headline' | translate}}</h3>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
|
|
@ -58,4 +58,4 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import url('../../style/overview.scss');
|
div.confirm-award-container {
|
||||||
|
margin: 2em auto;
|
||||||
.overview {
|
width: 95%;
|
||||||
margin-left: 25px !important;
|
min-width: 835px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-preview {
|
.decoration-preview {
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
|
|
@ -20,14 +21,5 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: 90%;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 80px 0 20px -20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
confirm(award: Award, decision: boolean, reason: string, rejectReason: string) {
|
confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
|
||||||
const updateObject = {
|
const updateObject = {
|
||||||
_id: award._id,
|
_id: award._id,
|
||||||
confirmed: decision ? 1 : 2
|
confirmed: decision ? 1 : 2
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<form #form="ngForm" class="overview">
|
<div class="confirm-promotion-container">
|
||||||
<h3>{{'request.confirm.promotion.headline' | translate}}</h3>
|
<h3>{{'request.confirm.promotion.headline' | translate}}</h3>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
<td class="text-right">
|
<td class="text-right">
|
||||||
<a class="action" (click)="confirm(promotion, true)">
|
<a class="action" (click)="confirm(promotion, true)">
|
||||||
{{'request.confirm.promotion.table.button.action.accept' | translate}}
|
{{'request.confirm.promotion.table.button.action.accept' | translate}}
|
||||||
</a><br>
|
</a>
|
||||||
<a class="action" (click)="confirm(promotion, false, rejectReason.value)">
|
<a class="action" (click)="confirm(promotion, false, rejectReason.value)">
|
||||||
{{'request.confirm.promotion.table.button.action.reject' | translate}}
|
{{'request.confirm.promotion.table.button.action.reject' | translate}}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -61,4 +61,4 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import url('../../style/overview.scss');
|
div.confirm-promotion-container {
|
||||||
|
margin: 2em auto;
|
||||||
.overview {
|
width: 95%;
|
||||||
margin-left: 25px !important;
|
min-width: 835px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-preview {
|
.decoration-preview {
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
|
|
@ -20,14 +21,5 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: 90%;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 80px 0 20px -20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
confirm(promotion: Promotion, decision: boolean, rejectReason: string) {
|
confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
|
||||||
const updateObject = {
|
const updateObject = {
|
||||||
_id: promotion._id,
|
_id: promotion._id,
|
||||||
confirmed: decision ? 1 : 2
|
confirmed: decision ? 1 : 2
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,63 @@
|
||||||
<form #form="ngForm" class="overview">
|
<div class="request-promotion-container">
|
||||||
<h3>{{'request.promotion.headline' | translate}}</h3>
|
<form #form="ngForm">
|
||||||
|
<h3>{{'request.promotion.headline' | translate}}</h3>
|
||||||
<div class="form-group">
|
|
||||||
<label for="user">{{'request.promotion.field.participant' | translate}}</label>
|
|
||||||
<select class="form-control"
|
|
||||||
name="user"
|
|
||||||
id="user"
|
|
||||||
[(ngModel)]="user"
|
|
||||||
[compareWith]="equals"
|
|
||||||
required
|
|
||||||
(change)="toggleUser()">
|
|
||||||
<option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
|
|
||||||
<option *ngFor="let user of users" [ngValue]="user">
|
|
||||||
{{user.username}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="showForm">
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
|
<label for="user">{{'request.promotion.field.participant' | translate}}</label>
|
||||||
<input class="form-control"
|
|
||||||
[(ngModel)]="selectedUserRank"
|
|
||||||
[ngModelOptions]="{standalone: true}"
|
|
||||||
readonly>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
|
|
||||||
<select class="form-control"
|
<select class="form-control"
|
||||||
name="decoration"
|
name="user"
|
||||||
id="decoration"
|
id="user"
|
||||||
#decorationField
|
[(ngModel)]="user"
|
||||||
[(ngModel)]="newLevel"
|
[compareWith]="equals"
|
||||||
required>
|
required
|
||||||
<option *ngFor="let rank of ranks" [ngValue]="rank.level">
|
(change)="toggleUser()">
|
||||||
{{rank.name}}
|
<option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
|
||||||
|
<option *ngFor="let user of users" [ngValue]="user">
|
||||||
|
{{user.username}}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div *ngIf="showForm">
|
||||||
|
|
||||||
<button id="cancel"
|
<div class="form-group">
|
||||||
(click)="cancel()"
|
<label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
|
||||||
class="btn btn-default">
|
<input class="form-control"
|
||||||
{{'request.promotion.button.cancel' | translate}}
|
[(ngModel)]="selectedUserRank"
|
||||||
</button>
|
[ngModelOptions]="{standalone: true}"
|
||||||
|
readonly>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button id="save"
|
<div class="form-group">
|
||||||
*ngIf="showForm"
|
<label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
|
||||||
(click)="addPromotion()"
|
<select class="form-control"
|
||||||
class="btn btn-default"
|
name="decoration"
|
||||||
[disabled]="newLevel === user.rankLvl">
|
id="decoration"
|
||||||
{{'request.promotion.button.submit' | translate}}
|
#decorationField
|
||||||
</button>
|
[(ngModel)]="newLevel"
|
||||||
|
required>
|
||||||
|
<option *ngFor="let rank of ranks" [ngValue]="rank.level">
|
||||||
|
{{rank.name}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="cancel"
|
||||||
|
(click)="cancel()"
|
||||||
|
class="btn btn-default">
|
||||||
|
{{'request.promotion.button.cancel' | translate}}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button id="save"
|
||||||
|
*ngIf="showForm"
|
||||||
|
(click)="addPromotion()"
|
||||||
|
class="btn btn-default"
|
||||||
|
[disabled]="newLevel === user.rankLvl">
|
||||||
|
{{'request.promotion.button.submit' | translate}}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<label>Beförderungsanträge</label>
|
<label>Beförderungsanträge</label>
|
||||||
|
|
@ -106,6 +108,4 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,19 @@
|
||||||
@import url('../../style/overview.scss');
|
.request-promotion-container {
|
||||||
|
margin: 2em auto;
|
||||||
|
width: 95%;
|
||||||
|
min-width: 835px;
|
||||||
|
|
||||||
.overview {
|
form {
|
||||||
margin-left: 25px !important;
|
width: 33%;
|
||||||
|
min-width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-preview {
|
.decoration-preview {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
@ -20,16 +22,6 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: 90%;
|
|
||||||
min-width: 800px;
|
min-width: 800px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
|
||||||
width: 25%;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 80px 0 20px -20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="overview">
|
<div class="sql-dashboard-container">
|
||||||
<h3>{{'request.sql.dashboard.headline' | translate}}</h3>
|
<h3>{{'request.sql.dashboard.headline' | translate}}</h3>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
|
|
@ -6,11 +6,11 @@
|
||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
|
<th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
|
||||||
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
|
<th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
|
||||||
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
|
<th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
|
||||||
<th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
|
<th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
|
||||||
<th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
|
<th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody *ngFor="let promotion of promotions">
|
<tbody *ngFor="let promotion of promotions">
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
<td>
|
<td>
|
||||||
{{promotion.proposer.username}}
|
{{promotion.proposer.username}}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center">
|
<td class="text-right">
|
||||||
{{promotion.timestamp | date: 'dd.MM.yyyy'}}
|
{{promotion.timestamp | date: 'dd.MM.yyyy'}}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import url('../../style/overview.scss');
|
.sql-dashboard-container {
|
||||||
|
margin: 2em auto;
|
||||||
.overview {
|
width: 95%;
|
||||||
margin-left: 25px !important;
|
min-width: 835px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-preview {
|
.decoration-preview {
|
||||||
|
|
@ -16,11 +16,6 @@
|
||||||
.table-container {
|
.table-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: 90%;
|
|
||||||
min-width: 800px;
|
min-width: 800px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 80px 0 20px -20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,23 @@
|
||||||
<div *ngIf="!isSmallLayout">
|
<div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
|
||||||
<div class="scroll-btn"
|
<div class="scroll-btn-left"
|
||||||
*ngIf="isLeftScrollVisible"
|
*ngIf="isLeftScrollVisible"
|
||||||
(mouseenter)="setRepeater(-10)"
|
(mouseenter)="setRepeater(-10)"
|
||||||
(mouseleave)="clearRepeater()">
|
(mouseleave)="clearRepeater()">
|
||||||
<mat-icon svgIcon="chevron-left"></mat-icon>
|
<mat-icon svgIcon="chevron-left"></mat-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="campaign-horizontal-list" #horizontalList>
|
<div class="campaign-entry"
|
||||||
<div class="campaign-entry"
|
[ngClass]="{active : selectedCampaignId === 'all'}"
|
||||||
[ngClass]="{active : selectedCampaignId === 'all'}"
|
(click)="select({_id:'all'})">
|
||||||
(click)="select({_id:'all'})">
|
{{'stats.campaign.title.all.time.overview' | translate}}
|
||||||
{{'stats.campaign.title.all.time.overview' | translate}}
|
</div>
|
||||||
</div>
|
<div class="campaign-entry"
|
||||||
<div class="campaign-entry"
|
*ngFor="let campaign of campaigns$ | async"
|
||||||
*ngFor="let campaign of campaigns$ | async"
|
[ngClass]="{active : campaign._id === selectedCampaignId}"
|
||||||
[ngClass]="{active : campaign._id === selectedCampaignId}"
|
(click)="select(campaign)">
|
||||||
(click)="select(campaign)">
|
{{campaign.title}}
|
||||||
{{campaign.title}}
|
<span style="display:inline-block;"
|
||||||
<span style="display:inline-block;"
|
*ngIf="loginService.hasPermission(3)">
|
||||||
*ngIf="loginService.hasPermission(3)">
|
|
||||||
<button mat-icon-button
|
<button mat-icon-button
|
||||||
[matMenuTriggerFor]="menu"
|
[matMenuTriggerFor]="menu"
|
||||||
(click)="$event.stopPropagation()"
|
(click)="$event.stopPropagation()"
|
||||||
|
|
@ -36,10 +35,9 @@
|
||||||
</button>
|
</button>
|
||||||
</mat-menu>
|
</mat-menu>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="scroll-btn scroll-btn-right"
|
<div class="scroll-btn-right"
|
||||||
*ngIf="isRightScrollVisible"
|
*ngIf="isRightScrollVisible"
|
||||||
(mouseenter)="setRepeater(10)"
|
(mouseenter)="setRepeater(10)"
|
||||||
(mouseleave)="clearRepeater()">
|
(mouseleave)="clearRepeater()">
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,3 @@
|
||||||
.scroll-btn {
|
|
||||||
position: absolute;
|
|
||||||
height: 46px;
|
|
||||||
width: 32px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn-right {
|
|
||||||
top: 0;
|
|
||||||
left: calc(100vw - 50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn mat-icon {
|
|
||||||
height: 46px;
|
|
||||||
width: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.campaign-horizontal-list {
|
.campaign-horizontal-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -23,29 +6,47 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: #666666 1px 1px 4px;
|
box-shadow: #666666 1px 1px 4px;
|
||||||
}
|
|
||||||
|
|
||||||
.campaign-entry {
|
.scroll-btn-left {
|
||||||
border: 1px solid #222222;
|
position: absolute;
|
||||||
min-width: 20%;
|
height: 46px;
|
||||||
max-height: 4em;
|
width: 32px;
|
||||||
padding: 10px 0;
|
cursor: pointer;
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
float: left;
|
|
||||||
background: #424242;
|
|
||||||
color: #9d9d9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
mat-icon {
|
||||||
background: #222222;
|
height: 46px;
|
||||||
color: white;
|
width: 28px;
|
||||||
border-bottom: 3px solid #ffd740;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.campaign-entry:hover {
|
.scroll-btn-right {
|
||||||
border-bottom: 3px solid #ffd740;
|
@extend .scroll-btn-left;
|
||||||
|
top: 0;
|
||||||
|
left: calc(100vw - 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.campaign-entry {
|
||||||
|
border: 1px solid #222222;
|
||||||
|
min-width: 20%;
|
||||||
|
max-height: 4em;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
float: left;
|
||||||
|
background: #424242;
|
||||||
|
color: #9d9d9d;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 3px solid #ffd740;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #222222;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 3px solid #ffd740;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.campaign-select-small {
|
.campaign-select-small {
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
.slide-chart-container {
|
.slide-chart-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
|
height: 65vh;
|
||||||
margin-top: 105px;
|
margin-top: 105px;
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
@media all and (max-width: 959px) {
|
@media all and (max-width: 959px) {
|
||||||
width: 100%;
|
width: 100%!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html">
|
<div class="fade-in fraction-stats-container">
|
||||||
|
|
||||||
<mat-button-toggle-group class="chart-select-group"
|
<mat-button-toggle-group class="chart-select-group"
|
||||||
#group="matButtonToggleGroup"
|
#group="matButtonToggleGroup"
|
||||||
[(ngModel)]="activeChartSelect"
|
[(ngModel)]="activeChartSelect"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,11 @@
|
||||||
@import url('../../../style/list-entry.scss');
|
@import url('../../../style/list-entry.scss');
|
||||||
@import url('../../../style/hide-scrollbar.scss');
|
@import url('../../../style/hide-scrollbar.scss');
|
||||||
|
|
||||||
|
.fraction-stats-container {
|
||||||
|
border-top: 1px solid #dadada;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-select-group {
|
.chart-select-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -40,16 +45,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 959px) {
|
@media all and (max-width: 959px) {
|
||||||
|
.fraction-stats-container {
|
||||||
|
width: 93%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
width: 150%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: 70vh
|
padding: 0;
|
||||||
|
margin: 10px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-select-group {
|
.chart-select-group {
|
||||||
background: #dadada;
|
|
||||||
max-width: fit-content;
|
|
||||||
width: 200%;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
mat-button-toggle.mat-button-toggle {
|
||||||
|
width: 50%;
|
||||||
|
border: 1px solid #dadada;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,45 @@
|
||||||
<div class="fade-in scoreboard-table">
|
<mat-table matSort
|
||||||
|
[dataSource]="sortedRows"
|
||||||
|
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
|
||||||
|
(matSortChange)="sortScoreboardData($event)"
|
||||||
|
class="mat-elevation-z8 fade-in">
|
||||||
|
|
||||||
<mat-table matSort
|
<ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
|
||||||
[dataSource]="sortedRows"
|
<mat-header-cell *matHeaderCellDef
|
||||||
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
|
mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
|
||||||
(matSortChange)="sortScoreboardData($event)"
|
<mat-cell *matCellDef="let element"
|
||||||
class="mat-elevation-z8">
|
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
||||||
|
{{element.name}}
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="{{tableHead[0].prop}}">
|
<ng-container matColumnDef="{{tableHead[1].prop}}">
|
||||||
<mat-header-cell *matHeaderCellDef
|
<mat-header-cell *matHeaderCellDef
|
||||||
mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
|
mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
|
||||||
<mat-cell *matCellDef="let element"
|
<mat-cell *matCellDef="let element">{{element.fraction ===
|
||||||
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
|
'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
|
||||||
{{element.name}}
|
</ng-container>
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container matColumnDef="{{tableHead[1].prop}}">
|
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
|
||||||
<mat-header-cell *matHeaderCellDef
|
<mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
|
||||||
mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
|
<mat-icon svgIcon="{{column.prop}}">
|
||||||
<mat-cell *matCellDef="let element">{{element.fraction ===
|
</mat-icon>
|
||||||
'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
|
</mat-header-cell>
|
||||||
</ng-container>
|
<mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
|
<ng-container matColumnDef="interact">
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
|
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
||||||
<mat-icon svgIcon="{{column.prop}}">
|
<mat-cell *matCellDef="let element">
|
||||||
</mat-icon>
|
<button mat-icon-button
|
||||||
</mat-header-cell>
|
matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
|
||||||
<mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
|
(click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container matColumnDef="interact">
|
|
||||||
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let element">
|
|
||||||
<button mat-icon-button
|
|
||||||
matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
|
|
||||||
(click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
|
|
||||||
element['steamUUID'] : element['name'])">
|
element['steamUUID'] : element['name'])">
|
||||||
<mat-icon svgIcon="stats-detail"></mat-icon>
|
<mat-icon svgIcon="stats-detail"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</mat-cell>
|
</mat-cell>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||||
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||||
</mat-table>
|
</mat-table>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,12 @@
|
||||||
@import url('../../../style/list-entry.scss');
|
@import url('../../../style/list-entry.scss');
|
||||||
@import url('../../../style/hide-scrollbar.scss');
|
@import url('../../../style/hide-scrollbar.scss');
|
||||||
|
|
||||||
.scoreboard-table {
|
mat-table.mat-table {
|
||||||
width: 1058px;
|
width: 1058px;
|
||||||
margin: auto;
|
|
||||||
height: 68vh;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
margin: auto;
|
||||||
border-bottom: 1px solid #dadada;
|
height: 70vh;
|
||||||
}
|
|
||||||
|
|
||||||
.mat-header-row {
|
|
||||||
width: 1058px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-table > mat-row:first-of-type {
|
|
||||||
padding-top: 56px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-column-name {
|
.mat-column-name {
|
||||||
|
|
@ -50,7 +38,25 @@
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-header-row, .scoreboard-table {
|
.mat-header-row, mat-table.mat-table {
|
||||||
width: 768px;
|
width: 768px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
.mat-column-name {
|
||||||
|
flex: 0 0 130px;
|
||||||
|
padding-left: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
width: 755px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-table.mat-table {
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
|
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
|
||||||
<div class="war-header-container">
|
<div class="war-header-container">
|
||||||
<div class="pull-left head-field" style="width: 250px">
|
<div class="pull-left head-field">
|
||||||
<h4>{{'stats.scoreboard.standings' | translate}}</h4>
|
<h4>{{'stats.scoreboard.standings' | translate}}</h4>
|
||||||
<span [style.color]="fraction.COLOR_BLUFOR"
|
<span [style.color]="fraction.COLOR_BLUFOR"
|
||||||
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
|
||||||
|
|
@ -9,7 +9,16 @@
|
||||||
style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-left head-field-pie-chart">
|
<div class="pull-left head-field" style="margin-top:0" *ngIf="isSmallLayout">
|
||||||
|
<h4>{{'stats.scoreboard.participants' | translate}}</h4>
|
||||||
|
<span [style.color]="fraction.COLOR_BLUFOR"
|
||||||
|
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.playersBlufor}}</span>
|
||||||
|
<span style="font-size: 13px;font-weight: bold;">vs</span>
|
||||||
|
<span [style.color]="fraction.COLOR_OPFOR"
|
||||||
|
style="font-weight: bold; margin-left: 10px;">{{war.playersOpfor}} {{fraction.OPFOR}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
|
||||||
<h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
|
<h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
|
||||||
<ngx-charts-pie-chart
|
<ngx-charts-pie-chart
|
||||||
class="pull-left"
|
class="pull-left"
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,13 @@
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.head-field-pie-chart {
|
.head-field-pie-chart {
|
||||||
@extend .head-field;
|
font-size: 22px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
padding-left: 100px;
|
padding-left: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -119,3 +122,64 @@ span.tab-control {
|
||||||
padding-left: 57px;
|
padding-left: 57px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
.war-header {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
margin-bottom: 34px; /*do not cover anything with back to top bar*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.war-header-container {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.btn-clean-log {
|
||||||
|
padding: 2vw 4vw 38px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
margin: 0 !important;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-field {
|
||||||
|
width: calc(100% - 1.5vw);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1vh;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li {
|
||||||
|
width: 25%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* radio box fraction select */
|
||||||
|
.nav-tabs > li:last-child {
|
||||||
|
width: fit-content;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -38px;
|
||||||
|
margin-left: 27%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -91,8 +91,13 @@
|
||||||
border-right: 1px solid #dadada;
|
border-right: 1px solid #dadada;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: calc(20% - 1px);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 959px) {
|
@media all and (max-width: 959px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,8 @@
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute-label {
|
@media all and (max-width: 959px) {
|
||||||
display: block;
|
.overview {
|
||||||
position: absolute;
|
left: 345px;
|
||||||
font-size: 12px;
|
}
|
||||||
padding: 5px;
|
|
||||||
margin-left: 25%;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue