Rename edit/new item component references; Combine css for list-entries

api/middleware/limitoffset-middleware-mongo.js

@@ -1,69 +0,0 @@
-/** 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;

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

@@ -1,82 +0,0 @@
-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 decoration-list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in 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'],
+  styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['decoration', 'selected'],
   outputs: ['decorationDelete','decorationSelected'],
@@ -42,9 +42,5 @@ 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 {CreateDecorationComponent} from "./new-decoration/new-decoration.component";
+import {EditDecorationComponent} from "./edit-decoration/edit-decoration.component";
 
 export const decorationsRoutes: Routes = [{
   path: '', component: DecorationComponent,
@@ -14,14 +14,14 @@ export const decorationsRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: CreateDecorationComponent,
+    component: EditDecorationComponent,
     outlet: 'right'
   },
   {
     path: 'edit/:id',
-    component: CreateDecorationComponent,
+    component: EditDecorationComponent,
     outlet: 'right'
   }];
 
-export const decorationsRoutingComponents = [DecorationComponent, DecorationListComponent, CreateDecorationComponent];
+export const decorationsRoutingComponents = [DecorationComponent, DecorationListComponent, EditDecorationComponent];
 

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

@@ -6,10 +6,10 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 import {Subscription} from "rxjs/Subscription";
 
 @Component({
-  templateUrl: './new-decoration.component.html',
+  templateUrl: './edit-decoration.component.html',
-  styleUrls: ['./new-decoration.component.css', '../../style/new-entry-form.css']
+  styleUrls: ['./edit-decoration.component.css', '../../style/entry-form.css']
 })
-export class CreateDecorationComponent {
+export class EditDecorationComponent {
 
   subscription: Subscription;
 
@@ -17,8 +17,6 @@ export class CreateDecorationComponent {
 
   fileList: FileList;
 
-  saved = false;
-
   showImageError = false;
 
   imagePreviewSrc;
@@ -64,7 +62,6 @@ export class CreateDecorationComponent {
         file = this.fileList[0];
         this.decorationService.submitDecoration(this.decoration, file)
           .subscribe(rank => {
-            this.saved = true;
             this.router.navigate(['..'], {relativeTo: this.route});
           })
       } else {
@@ -94,11 +91,4 @@ export class CreateDecorationComponent {
     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/decorations/new-decoration/new-decoration.component.css

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

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

@@ -0,0 +1 @@
+

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

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

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

@@ -1,83 +1,5 @@
-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 rank-list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in 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'],
+  styleUrls: ['./rank-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['rank', 'selected'],
   outputs: ['rankSelected', 'rankDelete'],
@@ -35,9 +35,5 @@ 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': ['new', rankId]}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
   }
 
   filterRanksByFraction(query = '', fractionFilter) {

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

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

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 {CreateRankComponent} from "./rank-new/new-rank.component";
+import {EditRankComponent} from "./edit-rank/edit-rank.component";
 
 
 export const ranksRoutes: Routes = [{
@@ -15,14 +15,14 @@ export const ranksRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: CreateRankComponent,
+    component: EditRankComponent,
     outlet: 'right'
   },
   {
-    path: 'new/:id',
+    path: 'edit/:id',
-    component: CreateRankComponent,
+    component: EditRankComponent,
     outlet: 'right'
   }];
 
-export const ranksRoutingComponents = [RankComponent, RankListComponent, CreateRankComponent];
+export const ranksRoutingComponents = [RankComponent, RankListComponent, EditRankComponent];
 

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

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

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

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

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

@@ -1,82 +0,0 @@
-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 squad-list-entry" [ngClass]="{selected : selected}" (click)="select()">
+<div class="fade-in 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'],
+  styleUrls: ['./squad-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['squad', 'selected'],
   outputs: ['squadSelected', 'squadDelete'],
@@ -35,9 +35,5 @@ 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 {CreateSquadComponent} from "./new-squad/new-squad.component";
+import {EditSquadComponent} from "./edit-squad/edit-squad.component";
 
 export const squadsRoutes: Routes = [{
   path: '', component: SquadComponent,
@@ -14,14 +14,14 @@ export const squadsRoutes: Routes = [{
 },
   {
     path: 'new',
-    component: CreateSquadComponent,
+    component: EditSquadComponent,
     outlet: 'right'
   },
   {
     path: 'edit/:id',
-    component: CreateSquadComponent,
+    component: EditSquadComponent,
     outlet: 'right'
   }];
 
-export const squadsRoutingComponents = [SquadComponent, SquadListComponent, CreateSquadComponent];
+export const squadsRoutingComponents = [SquadComponent, SquadListComponent, EditSquadComponent];
 

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

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

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

@@ -0,0 +1,93 @@
+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/overview.css

@@ -1,87 +0,0 @@
-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/award-user/award-user.component.css

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

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

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

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

@@ -9,26 +9,24 @@ import {NgForm} from "@angular/forms";
 
 
 @Component({
-  templateUrl: './user-overview.component.html',
+  templateUrl: './edit-user.component.html',
-  styleUrls: ['./user-overview.component.css', '../../style/new-entry-form.css'],
+  styleUrls: ['./edit-user.component.css', '../../style/entry-form.css'],
 })
-export class UserOverviewComponent {
+export class EditUserComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
   subscription: Subscription;
 
-  showSuccessLabel = false;
-
-  ranksDisplay = 'none';
-
   user: User = {username: '', squad: '0', rank: {level: 0}};
 
   squads: Squad[] = [];
 
   ranks: Rank[] = [];
 
-  saved = false;
+  showSuccessLabel = false;
+
+  ranksDisplay = 'none';
 
   constructor(private router: Router,
               private route: ActivatedRoute,
@@ -61,10 +59,6 @@ export class UserOverviewComponent {
     });
   }
 
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
-
   toggleRanks() {
     if (this.user.squad != '0') {
       this.rankService.findRanks('', this.user.squad.fraction).subscribe(
@@ -110,7 +104,6 @@ export class UserOverviewComponent {
     }
   }
 
-
   cancel() {
     this.router.navigate([this.user._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
@@ -125,11 +118,4 @@ export class UserOverviewComponent {
     }
   }
 
-  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/user-list/user-item.component.css

@@ -1,16 +1,3 @@
-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;
@@ -18,73 +5,3 @@ div.user-list-entry, a.user-list-entry {
   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'],
+  styleUrls: ['./user-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['user', 'selected'],
   outputs: ['userSelected', 'userAward', 'userDelete']
@@ -35,9 +35,5 @@ 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': ['overview']}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
   }
 
   selectUser(userId: string) {
     this.selectedUserId = userId;
-    this.router.navigate([{outlets: {'right': ['overview', userId]}}], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['edit', userId]}}], {relativeTo: this.route});
   }
 
   awardUser(userId) {

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

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