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

Rework basic nav header incl functionality

pull/57/head
HardiReady 2019-02-23 20:53:17 +01:00
parent dfdfee44da
commit 2e193dff32
20 changed files with 550 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.9.2", "version": "1.9.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

28
server/package-lock.json generated
View File

@ -3984,14 +3984,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4006,20 +4004,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4136,8 +4131,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4149,7 +4143,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4164,7 +4157,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -4172,14 +4164,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4198,7 +4188,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4279,8 +4268,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4292,7 +4280,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -4414,7 +4401,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",

42
static/package-lock.json generated
View File

@ -533,6 +533,14 @@
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"@angular/flex-layout": {
"version": "6.0.0-beta.18",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.18.tgz",
"integrity": "sha512-1Alv3YSIZYp0CTUIESIaSQLoSVyLzuNKPa5bGM/RzOmeSrndm5plVgI9wopGfJUDiwM18R97rq/4XjDvNT/+ig==",
"requires": {
"tslib": "^1.7.1"
}
},
"@angular/forms": { "@angular/forms": {
"version": "6.1.10", "version": "6.1.10",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.10.tgz",
@ -4636,13 +4644,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4655,18 +4661,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4769,8 +4772,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4780,7 +4782,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4793,20 +4794,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4823,7 +4821,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4896,8 +4893,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4907,7 +4903,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5013,7 +5008,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -11767,9 +11761,9 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
}, },
"typescript": { "typescript": {
"version": "2.7.2", "version": "2.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
"integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==" "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w=="
}, },
"underscore": { "underscore": {
"version": "1.7.0", "version": "1.7.0",

5
static/package.json
View File

@ -22,6 +22,7 @@
"@angular/compiler": "^6.1.10", "@angular/compiler": "^6.1.10",
"@angular/compiler-cli": "^6.1.10", "@angular/compiler-cli": "^6.1.10",
"@angular/core": "^6.1.10", "@angular/core": "^6.1.10",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.10", "@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10", "@angular/http": "^6.1.10",
"@angular/material": "^6.1.10", "@angular/material": "^6.1.10",
@ -42,6 +43,7 @@
"ngx-infinite-scroll": "^7.0.1", "ngx-infinite-scroll": "^7.0.1",
"rxjs-compat": "^6.2.1", "rxjs-compat": "^6.2.1",
"ts-helpers": "^1.1.2", "ts-helpers": "^1.1.2",
"typescript": "^2.9.2",
"zone.js": "^0.8.26" "zone.js": "^0.8.26"
}, },
"devDependencies": { "devDependencies": {
@ -58,7 +60,6 @@
"protractor": "^5.4.1", "protractor": "^5.4.1",
"protractor-jasmine2-screenshot-reporter": "^0.3.2", "protractor-jasmine2-screenshot-reporter": "^0.3.2",
"ts-node": "1.2.1", "ts-node": "1.2.1",
"tslint": "^5.10.0", "tslint": "^5.10.0"
"typescript": "^2.7.2"
} }
} }

293
static/src/app/app.component.html
View File

@ -1,131 +1,9 @@
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="padding-top: 2px">
<mat-icon svgIcon="opt-logo"></mat-icon>
</a>
<span class="version-label">{{version}}</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active">
<a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">{{'navigation.top.ranks' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">{{'navigation.top.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
</li>
<li *ngIf="loginService.hasPermission(2)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.management' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageSquadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageDecorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
<a href="#"
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request.manage' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li *ngIf="loginService.hasPermission(4)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.admin' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.adminPanelAppUsersPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
<a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
</li>
<li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
<a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
</li>
<li class="dropdown" *ngIf="features.localization">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="text-uppercase">{{language}}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li *ngFor="let lang of languages" style="cursor: pointer">
<a (click)="setLanguage(lang)"><mat-icon svgIcon="flag-{{lang}}"></mat-icon></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div> <div>
<mat-sidenav-container>
<mat-sidenav-content>
<app-header (sidenavToggle)="sidenav.toggle()"></app-header>
<main>
<div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<div id="left"> <div id="left">
@ -135,14 +13,19 @@
<div id="right"> <div id="right">
<router-outlet name="right"></router-outlet> <router-outlet name="right"></router-outlet>
</div> </div>
</div> </div>
</main>
</mat-sidenav-content>
<mat-sidenav #sidenav role="navigation">
<app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
</mat-sidenav>
</mat-sidenav-container>
<div *ngIf="loading" class="load-indicator"> <div *ngIf="loading" class="load-indicator">
<div class="opt-loader"></div> <div class="opt-loader"></div>
<mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon> <mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>
</div> </div>
<button mat-icon-button <button mat-icon-button
mat-mini-fab mat-mini-fab
id="scrollTopBtn" id="scrollTopBtn"
@ -151,3 +34,155 @@
(click)="scrollToTop()"> (click)="scrollToTop()">
<mat-icon svgIcon="arrow-up"></mat-icon> <mat-icon svgIcon="arrow-up"></mat-icon>
</button> </button>
</div>
<!--<div class="container">-->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<!--<div class="container-fluid">-->
<!--<div class="navbar-header">-->
<!--</div>-->
<!--<div class="collapse navbar-collapse">-->
<!--<ul class="nav navbar-nav">-->
<!--<li routerLinkActive="active">-->
<!--<a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">{{'navigation.top.ranks' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">{{'navigation.top.decorations' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>-->
<!--</li>-->
<!--<li *ngIf="loginService.hasPermission(2)"-->
<!--class="dropdown">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
<!--aria-expanded="false">-->
<!--{{'navigation.top.management' | translate}}-->
<!--<span class="caret"></span>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.manageSquadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.manageDecorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>-->
<!--</li>-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"-->
<!--class="dropdown">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
<!--aria-expanded="false">-->
<!--{{'navigation.top.request' | translate}}-->
<!--<span class="caret"></span>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li>-->
<!--<a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>-->
<!--</li>-->
<!--<li>-->
<!--<a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>-->
<!--</li>-->
<!--<li>-->
<!--<a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">-->
<!--<a href="#"-->
<!--[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"-->
<!--class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
<!--aria-expanded="false">-->
<!--{{'navigation.top.request.manage' | translate}}-->
<!--<span class="caret"></span>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li>-->
<!--<a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"-->
<!--routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>-->
<!--</li>-->
<!--<li>-->
<!--<a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"-->
<!--routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--<ul class="nav navbar-nav pull-right">-->
<!--<li *ngIf="loginService.hasPermission(4)"-->
<!--class="dropdown">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
<!--aria-expanded="false">-->
<!--{{'navigation.top.admin' | translate}}-->
<!--<span class="caret"></span>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li routerLinkActive="active">-->
<!--<a routerLink='{{config.adminPanelAppUsersPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">-->
<!--<a (click)="logout()">{{'navigation.top.logout' | translate}}</a>-->
<!--</li>-->
<!--<li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">-->
<!--<a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>-->
<!--</li>-->
<!--<li class="dropdown" *ngIf="features.localization">-->
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">-->
<!--<span class="text-uppercase">{{language}}</span>-->
<!--<span class="caret"></span>-->
<!--</a>-->
<!--<ul class="dropdown-menu">-->
<!--<li *ngFor="let lang of languages" style="cursor: pointer">-->
<!--<a (click)="setLanguage(lang)"><mat-icon svgIcon="flag-{{lang}}"></mat-icon></a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</nav>-->
<!--</div>-->
<!--<div>-->
<!--<router-outlet></router-outlet>-->
<!--<div id="left">-->
<!--<router-outlet name="left"></router-outlet>-->
<!--</div>-->
<!--<div id="right">-->
<!--<router-outlet name="right"></router-outlet>-->
<!--</div>-->
<!--</div>-->
<!--<div *ngIf="loading" class="load-indicator">-->
<!--<div class="opt-loader"></div>-->
<!--<mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>-->
<!--</div>-->
<!--<button mat-icon-button-->
<!--mat-mini-fab-->
<!--id="scrollTopBtn"-->
<!--*ngIf="scrollTopVisible"-->
<!--matTooltip="{{'navigation.button.scroll.top' | translate}}"-->
<!--(click)="scrollToTop()">-->
<!--<mat-icon svgIcon="arrow-up"></mat-icon>-->
<!--</button>-->

23
static/src/app/app.component.scss
View File

@ -1,5 +1,13 @@
@import "style/load-indicator.scss"; @import "style/load-indicator.scss";
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
height: 100%;
}
mat-sidenav {
width: 250px;
}
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -21,21 +29,6 @@ li {
overflow-x: hidden; overflow-x: hidden;
} }
.navbar-brand mat-icon {
color: #dadada;
width: 135px;
height: 40px;
stroke: #dadada;
}
.version-label {
position: absolute;
top: 27px;
left: 115px;
font-size: 12px;
color: #bebebe;
}
#scrollTopBtn { #scrollTopBtn {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;

60
static/src/app/app.component.ts
View File

@ -1,19 +1,12 @@
import {Component, HostListener, Inject, OnInit} from '@angular/core'; import {Component, Inject, OnInit} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router'; import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {LoginService} from './services/app-user-service/login-service';
import {PromotionService} from './services/army-management/promotion.service';
import {AwardingService} from './services/army-management/awarding.service';
import {RouteConfig} from './app.config';
import {DOCUMENT} from '@angular/common'; import {DOCUMENT} from '@angular/common';
import {DomSanitizer} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material'; import {MatIconRegistry} from '@angular/material';
import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SpinnerService} from './services/user-interface/spinner/spinner.service';
import {TranslateService} from '@ngx-translate/core';
import {SettingsService} from './services/settings.service';
import {environment} from '../environments/environment';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {Observable} from 'rxjs';
declare function require(url: string);
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -22,10 +15,6 @@ declare function require(url: string);
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
readonly features = environment.features;
config = RouteConfig;
loading = false; loading = false;
scrollTopVisible = false; scrollTopVisible = false;
@ -37,6 +26,7 @@ export class AppComponent implements OnInit {
svgIcons = { svgIcons = {
'opt-logo': 'general/opt-logo', 'opt-logo': 'general/opt-logo',
'opt-logo-core': 'general/opt-logo-core', 'opt-logo-core': 'general/opt-logo-core',
'menu': 'baseline-menu-24px',
'add': 'outline-add_box-24px', 'add': 'outline-add_box-24px',
'add-user': 'twotone-person_add-24px', 'add-user': 'twotone-person_add-24px',
'award': 'award', 'award': 'award',
@ -73,21 +63,10 @@ export class AppComponent implements OnInit {
'flag-en': 'locale/en', 'flag-en': 'locale/en',
}; };
language; constructor(private router: Router,
languages = ['de', 'en'];
version = 'v'.concat(require('./../../../package.json').version);
constructor(public loginService: LoginService,
private promotionService: PromotionService,
private awardingService: AwardingService,
private router: Router,
private iconRegistry: MatIconRegistry, private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
private spinnerService: SpinnerService, private spinnerService: SpinnerService,
private translate: TranslateService,
private settingsService: SettingsService,
private snackBarService: SnackBarService, private snackBarService: SnackBarService,
@Inject(DOCUMENT) private document) { @Inject(DOCUMENT) private document) {
this.initMaterialSvgIcons(); this.initMaterialSvgIcons();
@ -112,15 +91,10 @@ export class AppComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.settingsService.getLanguage().subscribe((language) => { Observable.fromEvent(this.document, "scroll").subscribe(e => {
this.language = language; this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
this.translate.setDefaultLang(language) || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
}); });
if (this.loginService.hasPermission(2)) {
const fraction = this.loginService.getCurrentUser().squad.fraction;
this.promotionService.checkUnconfirmedPromotions(fraction);
this.awardingService.checkUnprocessedAwards(fraction);
}
} }
toggleSpinner(active) { toggleSpinner(active) {
@ -134,29 +108,9 @@ export class AppComponent implements OnInit {
}); });
} }
@HostListener('window:scroll', [])
onWindowScroll() {
this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
|| document.documentElement.scrollTop > this.scrollBtnVisibleVal;
}
logout() {
this.loginService.logout();
setTimeout(() => {
this.router.navigate([RouteConfig.overviewPath]);
}, 500);
}
scrollToTop() { scrollToTop() {
this.document.body.scrollTop = 0; // For Safari this.document.body.scrollTop = 0; // For Safari
this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} }
setLanguage(language: string) {
if (language) {
this.language = language;
this.settingsService.setLanguage(language);
}
}
} }

9
static/src/app/app.module.ts
View File

@ -20,9 +20,10 @@ import {CookieService} from 'ngx-cookie-service';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {HttpClientModule} from '@angular/common/http'; 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 {MatSelectModule, MatSnackBarModule} from '@angular/material';
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, MatSidenavModule, MatToolbarModule} from '@angular/material';
import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({ @NgModule({
imports: [ imports: [
@ -33,8 +34,10 @@ import {HttpGateway} from './services/http-gateway';
HttpModule, HttpModule,
HttpClientModule, HttpClientModule,
ClipboardModule, ClipboardModule,
MatSnackBarModule, MatSidenavModule,
MatSelectModule, MatToolbarModule,
MatListModule,
FlexLayoutModule,
], ],
providers: [ providers: [

5
static/src/app/app.routing.ts
View File

@ -4,6 +4,8 @@ import {LoginComponent, LoginGuardAdmin, LoginGuardHL, LoginGuardMT} from './log
import {armyRoutes, armyRoutingComponents} from './army/army.routing'; import {armyRoutes, armyRoutingComponents} from './army/army.routing';
import {SignupComponent} from './login/signup.component'; import {SignupComponent} from './login/signup.component';
import {RouteConfig} from './app.config'; import {RouteConfig} from './app.config';
import {NavigationHeaderComponent} from './common/navigation/navigation-header.component';
import {SidenavListComponent} from './common/navigation/sidenav-list.component';
export const appRoutes: Routes = [ export const appRoutes: Routes = [
{ {
@ -58,6 +60,7 @@ export const appRoutes: Routes = [
export const appRouting = RouterModule.forRoot(appRoutes); export const appRouting = RouterModule.forRoot(appRoutes);
export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent]; export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent,
NavigationHeaderComponent, SidenavListComponent];
export const routingProviders = [LoginGuardHL, LoginGuardMT, LoginGuardAdmin]; export const routingProviders = [LoginGuardHL, LoginGuardMT, LoginGuardAdmin];

134
static/src/app/common/navigation/navigation-header.component.html Normal file
View File

@ -0,0 +1,134 @@
<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button (click)="onToggleSidenav()">
<mat-icon svgIcon="menu"></mat-icon>
</button>
</div>
<div class="brand-logo">
<a href="#">
<mat-icon svgIcon="opt-logo"></mat-icon>
</a>
<span class="version-label">v{{version}}</span>
</div>
<div fxHide.xs>
<ul fxLayout="row" fxLayoutGap="15px" class="navigation-items">
<li routerLinkActive="active">
<a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
class="link">{{'navigation.top.ranks' | translate}}</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
class="link">{{'navigation.top.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
</li>
<li *ngIf="loginService.hasPermission(2)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.management' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageSquadPath}}'
class="link">{{'navigation.top.management.squads' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageDecorationPath}}'
class="link">{{'navigation.top.management.decorations' | translate}}</a>
</li>
<li routerLinkActive="active">
<a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
<a href="#"
[ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.request.manage' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
</li>
<li>
<a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
</li>
</ul>
</li>
</ul>
</div>
<div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-lg>
<ul fxLayout fxLayoutGap="15px" class="navigation-items">
<li *ngIf="loginService.hasPermission(4)"
class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
{{'navigation.top.admin' | translate}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li routerLinkActive="active">
<a routerLink='{{config.adminPanelAppUsersPath}}'
class="link">{{'navigation.top.management.users' | translate}}</a>
</li>
</ul>
</li>
<li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
<a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
</li>
<li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
<a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
</li>
<li class="dropdown" *ngIf="features.localization">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<span class="text-uppercase">{{language}}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li *ngFor="let lang of languages" style="cursor: pointer">
<a (click)="setLanguage(lang)">
<mat-icon svgIcon="flag-{{lang}}"></mat-icon>
</a>
</li>
</ul>
</li>
</ul>
</div>
</mat-toolbar>

57
static/src/app/common/navigation/navigation-header.component.scss Normal file
View File

@ -0,0 +1,57 @@
li {
height: 50px;
line-height: 46px;
}
li > a {
font-size: 16px;
text-decoration: none;
color: #9d9d9d;
padding: 16px 5px;
}
li:hover, li.active{
> a {
color: white;
}
}
.navigation-items{
list-style-type: none;
padding: 0;
margin: 0;
}
.mat-toolbar.mat-primary {
background: #222222;
}
mat-toolbar{
height: 2.5em;
min-height: 50px;
}
.brand-logo {
padding-top: 6px;
margin-right: -10px;
}
.brand-logo mat-icon {
color: #dadada;
width: 135px;
height: 40px;
stroke: #dadada;
}
.version-label {
position: relative;
left: -42px;
font-size: 12px;
color: #bebebe;
}
@media all and (max-width : 599px) {
.brand-logo {
margin: auto;
}
}

71
static/src/app/common/navigation/navigation-header.component.ts Normal file
View File

@ -0,0 +1,71 @@
import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
import {RouteConfig} from '../../app.config';
import {environment} from '../../../environments/environment';
import {LoginService} from '../../services/app-user-service/login-service';
import {Router} from '@angular/router';
import {PromotionService} from '../../services/army-management/promotion.service';
import {AwardingService} from '../../services/army-management/awarding.service';
import {SettingsService} from '../../services/settings.service';
import {TranslateService} from '@ngx-translate/core';
import {DOCUMENT} from '@angular/common';
declare function require(url: string);
@Component({
selector: 'app-header',
templateUrl: 'navigation-header.component.html',
styleUrls: ['navigation-header.component.scss']
})
export class NavigationHeaderComponent implements OnInit {
@Output() public sidenavToggle = new EventEmitter();
readonly features = environment.features;
config = RouteConfig;
language;
languages = ['de', 'en'];
version = require('./../../../../../package.json').version;
constructor(public loginService: LoginService,
private router: Router,
private promotionService: PromotionService,
private awardingService: AwardingService,
private translate: TranslateService,
private settingsService: SettingsService,
@Inject(DOCUMENT) private document) {
}
ngOnInit() {
this.settingsService.getLanguage().subscribe((language) => {
this.language = language;
this.translate.setDefaultLang(language)
});
if (this.loginService.hasPermission(2)) {
const fraction = this.loginService.getCurrentUser().squad.fraction;
this.promotionService.checkUnconfirmedPromotions(fraction);
this.awardingService.checkUnprocessedAwards(fraction);
}
}
public onToggleSidenav = () => {
this.sidenavToggle.emit();
};
setLanguage(language: string) {
if (language) {
this.language = language;
this.settingsService.setLanguage(language);
}
}
logout() {
this.loginService.logout();
setTimeout(() => {
this.router.navigate([RouteConfig.overviewPath]);
}, 500);
}
}

11
static/src/app/common/navigation/sidenav-list.component.html Normal file
View File

@ -0,0 +1,11 @@
<mat-nav-list>
<a mat-list-item routerLink="/home" (click)="onSidenavClose()">
<mat-icon>home</mat-icon> <span class="nav-caption">Home</span>
</a>
<a mat-list-item routerLink="/owner" (click)="onSidenavClose()">
<mat-icon>assignment_ind</mat-icon> <span class="nav-caption">Owner Actions</span>
</a>
<a mat-list-item routerLink="#" (click)="onSidenavClose()">
<mat-icon>account_balance</mat-icon><span class="nav-caption">Account Actions</span>
</a>
</mat-nav-list>

13
static/src/app/common/navigation/sidenav-list.component.scss Normal file
View File

@ -0,0 +1,13 @@
a {
text-decoration: none;
color: white;
}
a:hover, a:active{
color: lightgray;
}
.nav-caption{
display: inline-block;
padding-left: 6px;
}

20
static/src/app/common/navigation/sidenav-list.component.ts Normal file
View File

@ -0,0 +1,20 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-sidenav-list',
templateUrl: './sidenav-list.component.html',
styleUrls: ['./sidenav-list.component.scss']
})
export class SidenavListComponent implements OnInit {
@Output() sidenavClose = new EventEmitter();
constructor() { }
ngOnInit() {
}
public onSidenavClose = () => {
this.sidenavClose.emit();
}
}

11
static/src/app/common/not-found/not-found.component.ts
View File

@ -1,16 +1,9 @@
import {Component, OnInit} from '@angular/core'; import {Component} from '@angular/core';
@Component({ @Component({
selector: 'app-not-found', selector: 'app-not-found',
templateUrl: 'not-found.component.html', templateUrl: 'not-found.component.html',
styleUrls: ['not-found.component.scss'] styleUrls: ['not-found.component.scss']
}) })
export class NotFoundComponent implements OnInit { export class NotFoundComponent {
constructor() {
}
ngOnInit() {
}
} }

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

@ -4,8 +4,10 @@ import {ShowErrorComponent} from './common/show-error/show-error.component';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component'; import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component'; import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
import {MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule, import {
MatInputModule} from '@angular/material'; MatButtonToggleModule, MatTooltipModule, MatSlideToggleModule, MatFormFieldModule, MatOptionModule, MatSelectModule,
MatInputModule, MatSidenavModule, MatSnackBarModule
} from '@angular/material';
import {MatButtonModule} from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
@ -35,6 +37,7 @@ export function createTranslateLoader(http: HttpClient) {
MatFormFieldModule, MatFormFieldModule,
MatOptionModule, MatOptionModule,
MatSelectModule, MatSelectModule,
MatSnackBarModule,
MatInputModule, MatInputModule,
TranslateModule.forRoot({ TranslateModule.forRoot({

2
static/src/app/style/background-image.scss
View File

@ -4,8 +4,6 @@
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
margin-top: -23px;
padding-top: 23px;
padding-bottom: 23px; padding-bottom: 23px;
background-image: url('../../assets/bg.jpg'); background-image: url('../../assets/bg.jpg');
background-size: cover; background-size: cover;

1
static/src/assets/icon/baseline-menu-24px.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 183 B

13
static/src/styles.scss
View File

@ -1,5 +1,14 @@
body { // mat-core() mixin:
padding-top: 50px; @import '~@angular/material/theming';
$custom-typography: mat-typography-config(
$font-family: 'Roboto, monospace'
);
@include mat-core($custom-typography);
/* for sidenav to take a whole page */
html, body {
margin: 0;
height: 100%;
} }
.tabs-container { .tabs-container {