api/middleware/limitoffset-middleware-mongo.js

@@ -0,0 +1,69 @@
+/** This module defines a express.Router() instance
+ * - supporting offset=<number> and limit=<number>*
+ * - calls next with error if a impossible offset and/or limit value is given
+ *
+ *  Note: it expects to be called BEFORE any data fetched from DB
+ *  Note: it sets an object { limit: 0, skip: 0 } with the proper number values in req.locals.limitskip
+ *  Note: it sets an Error-Object to next with error.status set to HTTP status code 400
+ *
+ * @author Johannes Konert
+ * @licence CC BY-SA 4.0
+ *
+ * @module restapi/limitoffset-middleware-mongo
+ * @type {Router}
+ */
+
+// remember: in modules you have 3 variables given by CommonJS
+// 1.) require() function
+// 2.) module.exports
+// 3.) exports (which is module.exports)
+"use strict";
+
+const router = require('express').Router();
+const logger = require('debug')('me2:offsetlimit');
+
+
+// the exported router with handler
+router.use((req, res, next) => {
+  let offset = undefined;
+  let limit = undefined;
+  const offsetString = req.query.offset;
+  const limitString = req.query.limit;
+  let err = null;
+
+
+  if (offsetString) {
+    if (!isNaN(offsetString)) {
+      offset = parseInt(offsetString);
+      if (offset < 0) {
+        err = new Error('offset is negative')
+      }
+    }
+    else {
+      err = new Error('given offset is not a valid number ' + offsetString);
+    }
+  }
+  if (limitString) {
+    if (!isNaN(limitString)) {
+      limit = parseInt(limitString);
+      if (limit < 1) {
+        err = new Error('limit is zero or negative')
+      }
+    }
+    else {
+      err = new Error('given limit is not a valid number ' + limitString);
+    }
+  }
+  if (err) {
+    logger('problem occurred with limit/offset values');
+    err.status = 400;
+    next(err)
+  } else {
+    res.locals.limitskip = {}; // mongoDB uses parameter object for skip/limit
+    if (limit) res.locals.limitskip.limit = limit;
+    if (offset) res.locals.limitskip.skip = offset;
+    next()
+  }
+});
+
+module.exports = router;

api/test/users.spec.js

@@ -93,9 +93,8 @@ describe('Users', () => {
           res.should.have.status(codes.created);
           res.body.should.be.a('object');
           res.body.should.have.property('username').eql(user.username);
-          res.body.should.have.property('squad').eql(null);
-          res.body.should.have.property('rank').property('level').eql(0);
-          res.body.should.have.property('awards').eql([]);
+          res.body.should.have.property('squadId').eql(null);
+          res.body.should.have.property('rankLvl').eql(0);
           done();
         });
     });

static/src/app/decorations/decoration-list/decoration-item.component.css

@@ -0,0 +1,82 @@
+div.decoration-list-entry, a.decoration-list-entry {
+  padding: 8px;
+  width: 475px;
+  border-radius: 2px;
+  border: lightgrey solid 1px;
+  cursor: cell;
+  margin-bottom: -1px;
+}
+
+.decoration-list-preview {
+  float: left;
+  margin-right: 12px;
+}
+
+.marked {
+  background: lightgrey;
+}
+
+span {
+  cursor: pointer;
+}
+
+a {
+  font-size: x-large;
+  font-weight: 700;
+}
+
+small {
+  color: grey;
+}
+
+.trash {
+  float:right;
+  padding-top: 18px;
+  font-size: 17px;
+}
+
+.selected {
+  background-color: aliceblue;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0; /* make things invisible upon start */
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -1,4 +1,4 @@
-<div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in decoration-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
     <div class="col-xs-9">

static/src/app/decorations/decoration-list/decoration-item.component.ts

@@ -5,7 +5,7 @@ import {Decoration} from "../../models/model-interfaces";
 @Component({
   selector: 'pjm-decoration-item',
   templateUrl: './decoration-item.component.html',
-  styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./decoration-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['decoration', 'selected'],
   outputs: ['decorationDelete','decorationSelected'],
@@ -42,5 +42,9 @@ export class DecorationItemComponent {
     this.decorationDelete.emit(this.decoration);
   }
 
+  ngAfterViewChecked() {
+    //var taskId = (this.task ? this.task.id : '');
+    // console.log(`Task ${taskId} checked ${++this.checkCounter} times`)
+  }
 }
 

static/src/app/decorations/decoration.routing.ts

@@ -1,7 +1,7 @@
 import {Routes} from "@angular/router";
 import {DecorationComponent} from "./decoration.component";
 import {DecorationListComponent} from "./decoration-list/decoration-list.component";
-import {EditDecorationComponent} from "./edit-decoration/edit-decoration.component";
+import {CreateDecorationComponent} from "./new-decoration/new-decoration.component";
 
 export const decorationsRoutes: Routes = [{
   path: '', component: DecorationComponent,
@@ -14,14 +14,14 @@ export const decorationsRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: EditDecorationComponent,
+    component: CreateDecorationComponent,
     outlet: 'right'
   },
   {
     path: 'edit/:id',
-    component: EditDecorationComponent,
+    component: CreateDecorationComponent,
     outlet: 'right'
   }];
 
-export const decorationsRoutingComponents = [DecorationComponent, DecorationListComponent, EditDecorationComponent];
+export const decorationsRoutingComponents = [DecorationComponent, DecorationListComponent, CreateDecorationComponent];
 

static/src/app/decorations/new-decoration/new-decoration.component.css

@@ -0,0 +1,7 @@
+.preview-image {
+  margin: 10px;
+}
+
+.form-control {
+  height: auto;
+}

static/src/app/decorations/new-decoration/new-decoration.component.ts

@@ -6,10 +6,10 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 import {Subscription} from "rxjs/Subscription";
 
 @Component({
-  templateUrl: './edit-decoration.component.html',
-  styleUrls: ['./edit-decoration.component.css', '../../style/entry-form.css']
+  templateUrl: './new-decoration.component.html',
+  styleUrls: ['./new-decoration.component.css', '../../style/new-entry-form.css']
 })
-export class EditDecorationComponent {
+export class CreateDecorationComponent {
 
   subscription: Subscription;
 
@@ -17,6 +17,8 @@ export class EditDecorationComponent {
 
   fileList: FileList;
 
+  saved = false;
+
   showImageError = false;
 
   imagePreviewSrc;
@@ -62,6 +64,7 @@ export class EditDecorationComponent {
         file = this.fileList[0];
         this.decorationService.submitDecoration(this.decoration, file)
           .subscribe(rank => {
+            this.saved = true;
             this.router.navigate(['..'], {relativeTo: this.route});
           })
       } else {
@@ -91,4 +94,11 @@ export class EditDecorationComponent {
     return false;
   }
 
+  canDeactivate(): boolean {
+    if (this.saved || !this.form.dirty) {
+      return true;
+    }
+    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
+  }
+
 }

static/src/app/ranks/edit-rank/edit-rank.component.css

@@ -1 +0,0 @@
-

static/src/app/ranks/rank-list/rank-item.component.css

@@ -1,5 +1,83 @@
+div.rank-list-entry, a.rank-list-entry {
+  padding: 8px;
+  width: 475px;
+  border-radius: 2px;
+  border: lightgrey solid 1px;
+  cursor: cell;
+  margin-bottom: -1px;
+}
+
 .rank-list-preview {
   height: 54px;
   float: left;
   margin-right: 12px;
 }
+
+.marked {
+  background: lightgrey;
+}
+
+span {
+  cursor: pointer;
+}
+
+a {
+  font-size: x-large;
+  font-weight: 700;
+}
+
+small {
+  color: grey;
+}
+
+.trash {
+  float:right;
+  padding-top: 18px;
+  font-size: 17px;
+}
+
+.selected {
+  background-color: aliceblue;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0; /* make things invisible upon start */
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}

static/src/app/ranks/rank-list/rank-item.component.html

@@ -1,4 +1,4 @@
-<div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in rank-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
     <div class="col-xs-9">

static/src/app/ranks/rank-list/rank-item.component.ts

@@ -5,7 +5,7 @@ import {Rank} from "../../models/model-interfaces";
 @Component({
   selector: 'pjm-rank-item',
   templateUrl: './rank-item.component.html',
-  styleUrls: ['./rank-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./rank-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['rank', 'selected'],
   outputs: ['rankSelected', 'rankDelete'],
@@ -35,5 +35,9 @@ export class RankItemComponent {
     this.rankDelete.emit(this.rank);
   }
 
+  ngAfterViewChecked() {
+    //var taskId = (this.task ? this.task.id : '');
+    // console.log(`Task ${taskId} checked ${++this.checkCounter} times`)
+  }
 }
 

static/src/app/ranks/rank-list/rank-list.component.ts

@@ -54,7 +54,7 @@ export class RankListComponent implements OnInit {
 
   selectRank(rankId: string | number) {
     this.selectedRankId = rankId;
-    this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['new', rankId]}}], {relativeTo: this.route});
   }
 
   filterRanksByFraction(query = '', fractionFilter) {

static/src/app/ranks/rank-new/new-rank.component.css

@@ -0,0 +1,7 @@
+.preview-image {
+  margin: 10px;
+}
+
+.form-control {
+  height: auto;
+}

static/src/app/ranks/rank-new/new-rank.component.ts

@@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
 
 
 @Component({
-  templateUrl: './edit-rank.component.html',
-  styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css']
+  templateUrl: './new-rank.component.html',
+  styleUrls: ['./new-rank.component.css', '../../style/new-entry-form.css']
 })
-export class EditRankComponent {
+export class CreateRankComponent {
 
   subscription: Subscription;
 

static/src/app/ranks/ranks.routing.ts

@@ -1,7 +1,7 @@
 import {Routes} from "@angular/router";
 import {RankComponent} from "./ranks.component";
 import {RankListComponent} from "./rank-list/rank-list.component";
-import {EditRankComponent} from "./edit-rank/edit-rank.component";
+import {CreateRankComponent} from "./rank-new/new-rank.component";
 
 
 export const ranksRoutes: Routes = [{
@@ -15,14 +15,14 @@ export const ranksRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: EditRankComponent,
+    component: CreateRankComponent,
     outlet: 'right'
   },
   {
-    path: 'edit/:id',
-    component: EditRankComponent,
+    path: 'new/:id',
+    component: CreateRankComponent,
     outlet: 'right'
   }];
 
-export const ranksRoutingComponents = [RankComponent, RankListComponent, EditRankComponent];
+export const ranksRoutingComponents = [RankComponent, RankListComponent, CreateRankComponent];
 

static/src/app/squads/new-squad/new-squad.component.css

@@ -0,0 +1,7 @@
+.preview-image {
+  margin: 10px;
+}
+
+.form-control {
+  height: auto;
+}

static/src/app/squads/new-squad/new-squad.component.ts

@@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
 
 
 @Component({
-  templateUrl: './edit-squad.component.html',
-  styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css']
+  templateUrl: './new-squad.component.html',
+  styleUrls: ['./new-squad.component.css', '../../style/new-entry-form.css']
 })
-export class EditSquadComponent {
+export class CreateSquadComponent {
 
   subscription: Subscription;
 

static/src/app/squads/squad-list/squad-item.component.css

@@ -0,0 +1,82 @@
+div.squad-list-entry, a.squad-list-entry {
+  padding: 8px;
+  width: 475px;
+  border-radius: 2px;
+  border: lightgrey solid 1px;
+  cursor: cell;
+  margin-bottom: -1px;
+}
+
+.marked {
+  background: lightgrey;
+}
+
+.squad-list-preview {
+  float: left;
+  margin-right: 12px;
+}
+
+span {
+  cursor: pointer;
+}
+
+a {
+  font-size: x-large;
+  font-weight: 700;
+}
+
+small {
+  color: grey;
+}
+
+.trash {
+  float:right;
+  padding-top: 18px;
+  font-size: 17px;
+}
+
+.selected {
+  background-color: aliceblue;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0; /* make things invisible upon start */
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}

static/src/app/squads/squad-list/squad-item.component.html

@@ -1,4 +1,4 @@
-<div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in squad-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
     <div class="col-xs-9">

static/src/app/squads/squad-list/squad-item.component.ts

@@ -5,7 +5,7 @@ import {Squad} from "../../models/model-interfaces";
 @Component({
   selector: 'pjm-squad-item',
   templateUrl: './squad-item.component.html',
-  styleUrls: ['./squad-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./squad-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['squad', 'selected'],
   outputs: ['squadSelected', 'squadDelete'],
@@ -35,5 +35,9 @@ export class SquadItemComponent {
     this.squadDelete.emit(this.squad);
   }
 
+  ngAfterViewChecked() {
+    //var taskId = (this.task ? this.task.id : '');
+    // console.log(`Task ${taskId} checked ${++this.checkCounter} times`)
+  }
 }
 

static/src/app/squads/squads.routing.ts

@@ -1,7 +1,7 @@
 import {Routes} from "@angular/router";
 import {SquadComponent} from "./squads.component";
 import {SquadListComponent} from "./squad-list/squad-list.component";
-import {EditSquadComponent} from "./edit-squad/edit-squad.component";
+import {CreateSquadComponent} from "./new-squad/new-squad.component";
 
 export const squadsRoutes: Routes = [{
   path: '', component: SquadComponent,
@@ -14,14 +14,14 @@ export const squadsRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: EditSquadComponent,
+    component: CreateSquadComponent,
     outlet: 'right'
   },
   {
     path: 'edit/:id',
-    component: EditSquadComponent,
+    component: CreateSquadComponent,
     outlet: 'right'
   }];
 
-export const squadsRoutingComponents = [SquadComponent, SquadListComponent, EditSquadComponent];
+export const squadsRoutingComponents = [SquadComponent, SquadListComponent, CreateSquadComponent];
 

static/src/app/style/list-entry.css

@@ -1,93 +0,0 @@
-div.list-entry, a.list-entry,
-div.user-list-entry, a.user-list-entry {
-  padding: 8px;
-  width: 475px;
-  border-radius: 2px;
-  border: lightgrey solid 1px;
-  cursor: cell;
-  margin-bottom: -1px;
-}
-
-.user-list-entry a {
-  font-size: large;
-  font-weight: 600;
-}
-
-.user-list-entry small {
-  color: grey;
-  font-size: x-small;
-}
-
-.decoration-list-preview, .squad-list-preview {
-  float: left;
-  margin-right: 12px;
-}
-
-.marked {
-  background: lightgrey;
-}
-
-span {
-  cursor: pointer;
-}
-
-.list-entry a {
-  font-size: x-large;
-  font-weight: 700;
-}
-
-.list-entry small {
-  color: grey;
-}
-
-.trash {
-  float:right;
-  padding-top: 18px;
-  font-size: 17px;
-}
-
-.selected {
-  background-color: aliceblue;
-}
-
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  opacity: 0; /* make things invisible upon start */
-  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-  -moz-animation: fadeIn ease-in 1;
-  animation: fadeIn ease-in 1;
-
-  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-  -moz-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-
-  -webkit-animation-duration: 0.5s;
-  -moz-animation-duration: 0.5s;
-  animation-duration: 0.5s;
-}

static/src/app/style/new-entry-form.css

@@ -19,11 +19,3 @@ label {
   margin-left: 10px;
   height: 100vh;
 }
-
-.preview-image {
-  margin: 10px;
-}
-
-.form-control {
-  height: auto;
-}

static/src/app/style/overview.css

@@ -0,0 +1,87 @@
+h3 {
+  margin-left: 4%;
+  margin-top: 60px;
+}
+
+.overview {
+  position:fixed;
+  overflow-y:scroll;
+  overflow-x:hidden;
+  bottom: 10px;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding-left: 10px;
+  padding-top: 20px;
+  margin-left: 10px;
+  height: 100vh;
+}
+
+.fraction-blufor {
+  font-size: large;
+  color: mediumblue;
+  font-weight: bold;
+}
+
+.fraction-opfor {
+  font-size: large;
+  color: red;
+  font-weight: bold;
+}
+
+.div-table {
+  display: table;
+  border-radius: 10px;
+  margin-left: 8%;
+  width: auto;
+  background-color: rgba(240, 248, 255, 0.29);
+  border-spacing: 5px; /* cellspacing:poor IE support for  this */
+}
+
+.div-table-row {
+  display: table-row;
+  width: auto;
+  clear: both;
+}
+
+.div-table-col {
+  float: left; /* fix for  buggy browsers */
+  display: table-column;
+  padding: 5px 15px 5px 15px;
+}
+
+.div-table-head {
+  font-weight: bold;
+}
+
+.content {
+  font-size: large;
+}
+
+.content-xs {
+  width: 100px;
+}
+
+.content-s {
+  width: 150px;
+}
+
+.content-m {
+  width: 200px;
+}
+
+.content-m-flex {
+  min-width: 200px;
+  max-width: 600px;
+}
+
+.content-l {
+  width: 300px;
+}
+
+.content-xl {
+  width: 350px;
+}
+
+.content-xxl {
+  width: 500px;
+}

static/src/app/users/user-award/user-award.component.css

@@ -18,7 +18,6 @@
   width: 50%;
 }
 
-/* enable scrolling for long list of awardings */
 .overview {
   position: fixed;
   overflow-y: scroll;

static/src/app/users/user-award/user-award.component.ts

@@ -7,8 +7,8 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 
 
 @Component({
-  templateUrl: './award-user.component.html',
-  styleUrls: ['./award-user.component.css'],
+  templateUrl: './user-award.component.html',
+  styleUrls: ['./user-award.component.css'],
 })
 export class UserAwardComponent {
 

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

@@ -1,3 +1,16 @@
+div.user-list-entry, a.user-list-entry {
+  padding: 8px;
+  width: 475px;
+  border-radius: 2px;
+  border: lightgrey solid 1px;
+  cursor: cell;
+  margin-bottom: -1px;
+}
+
+.marked {
+  background: lightgrey;
+}
+
 .icon-award {
   background: url(../../../assets/award.png);
   width: 27px;
@@ -5,3 +18,73 @@
   display: block;
   margin-right: 12px;
 }
+
+.trash {
+  font-size: 19px;
+  margin-left: 12px;
+  margin-top: 2px;
+}
+
+span {
+  cursor: pointer;
+}
+
+a {
+  font-size: large;
+  font-weight: 600;
+}
+
+small {
+  color: grey;
+  font-size: x-small;
+}
+
+.edit {
+  font-size: 22px;
+}
+
+.selected {
+  background-color: aliceblue;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0; /* make things invisible upon start */
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}

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

@@ -5,7 +5,7 @@ import {User} from "../../models/model-interfaces";
 @Component({
   selector: 'pjm-user-item',
   templateUrl: './user-item.component.html',
-  styleUrls: ['./user-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./user-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['user', 'selected'],
   outputs: ['userSelected', 'userAward', 'userDelete']
@@ -35,5 +35,9 @@ export class UserItemComponent {
     this.userDelete.emit(this.user);
   }
 
+  ngAfterViewChecked() {
+    //var taskId = (this.task ? this.task.id : '');
+    // console.log(`Task ${taskId} checked ${++this.checkCounter} times`)
+  }
 }
 

static/src/app/users/user-list/user-list.component.ts

@@ -49,12 +49,12 @@ export class UserListComponent implements OnInit {
 
   openNewUserForm() {
     this.selectedUserId = null;
-    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
   }
 
   selectUser(userId: string) {
     this.selectedUserId = userId;
-    this.router.navigate([{outlets: {'right': ['edit', userId]}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['overview', userId]}}], {relativeTo: this.route});
   }
 
   awardUser(userId) {

static/src/app/users/user-overview/user-overview.component.ts

@@ -9,24 +9,26 @@ import {NgForm} from "@angular/forms";
 
 
 @Component({
-  templateUrl: './edit-user.component.html',
-  styleUrls: ['./edit-user.component.css', '../../style/entry-form.css'],
+  templateUrl: './user-overview.component.html',
+  styleUrls: ['./user-overview.component.css', '../../style/new-entry-form.css'],
 })
-export class EditUserComponent {
+export class UserOverviewComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
   subscription: Subscription;
 
+  showSuccessLabel = false;
+
+  ranksDisplay = 'none';
+
   user: User = {username: '', squad: '0', rank: {level: 0}};
 
   squads: Squad[] = [];
 
   ranks: Rank[] = [];
 
-  showSuccessLabel = false;
-
-  ranksDisplay = 'none';
+  saved = false;
 
   constructor(private router: Router,
               private route: ActivatedRoute,
@@ -59,6 +61,10 @@ export class EditUserComponent {
     });
   }
 
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
   toggleRanks() {
     if (this.user.squad != '0') {
       this.rankService.findRanks('', this.user.squad.fraction).subscribe(
@@ -104,6 +110,7 @@ export class EditUserComponent {
     }
   }
 
+
   cancel() {
     this.router.navigate([this.user._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
@@ -118,4 +125,11 @@ export class EditUserComponent {
     }
   }
 
+  canDeactivate(): boolean {
+    if (this.saved || !this.form.dirty) {
+      return true;
+    }
+    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
+  }
+
 }

static/src/app/users/users.routing.ts

@@ -1,8 +1,8 @@
 import {Routes} from "@angular/router";
 import {UsersComponent} from "./users.component";
-import {EditUserComponent} from "./edit-user/edit-user.component";
+import {UserOverviewComponent} from "./user-overview/user-overview.component";
 import {UserListComponent} from "./user-list/user-list.component";
-import {UserAwardComponent} from "./award-user/award-user.component";
+import {UserAwardComponent} from "./user-award/user-award.component";
 
 export const usersRoutes: Routes = [{
   path: '', component: UsersComponent,
@@ -14,13 +14,13 @@ export const usersRoutes: Routes = [{
   ]
 },
   {
-    path: 'new',
-    component: EditUserComponent,
+    path: 'overview',
+    component: UserOverviewComponent,
     outlet: 'right'
   },
   {
-    path: 'edit/:id',
-    component: EditUserComponent,
+    path: 'overview/:id',
+    component: UserOverviewComponent,
     outlet: 'right'
   },
   {
@@ -30,4 +30,4 @@ export const usersRoutes: Routes = [{
   }
 ];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, EditUserComponent, UserAwardComponent];
+export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, UserAwardComponent];