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

pull/1/head
Florian Hartwich 2017-05-17 15:55:22 +02:00
parent 88f1d3130b
commit efcecf7b13
39 changed files with 150 additions and 589 deletions

View File

@ -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;

View File

@ -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;
}

View File

@ -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="row">
<div class="col-xs-9"> <div class="col-xs-9">

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1 @@

View File

@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
@Component({ @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; subscription: Subscription;

View File

@ -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 { .rank-list-preview {
height: 54px; height: 54px;
float: left; float: left;
margin-right: 12px; 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;
}

View File

@ -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="row">
<div class="col-xs-9"> <div class="col-xs-9">

View File

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

View File

@ -54,7 +54,7 @@ export class RankListComponent implements OnInit {
selectRank(rankId: string | number) { selectRank(rankId: string | number) {
this.selectedRankId = rankId; 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) { filterRanksByFraction(query = '', fractionFilter) {

View File

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

View File

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

View File

@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
@Component({ @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; subscription: Subscription;

View File

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

View File

@ -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;
}

View File

@ -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="row">
<div class="col-xs-9"> <div class="col-xs-9">

View File

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

View File

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

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

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

View File

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

View File

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

View File

@ -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 { .icon-award {
background: url(../../../assets/award.png); background: url(../../../assets/award.png);
width: 27px; width: 27px;
@ -18,73 +5,3 @@ div.user-list-entry, a.user-list-entry {
display: block; display: block;
margin-right: 12px; 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;
}

View File

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

View File

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

View File

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