Rename edit/new item component references; Combine css for list-entries
Florian Hartwich
parent
88f1d3130b
commit
efcecf7b13
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
|
|||
import {Subscription} from "rxjs/Subscription";
|
||||
|
||||
@Component({
|
||||
templateUrl: './new-decoration.component.html',
|
||||
styleUrls: ['./new-decoration.component.css', '../../style/new-entry-form.css']
|
||||
templateUrl: './edit-decoration.component.html',
|
||||
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?`);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.preview-image {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
|
|||
|
||||
|
||||
@Component({
|
||||
templateUrl: './new-rank.component.html',
|
||||
styleUrls: ['./new-rank.component.css', '../../style/new-entry-form.css']
|
||||
templateUrl: './edit-rank.component.html',
|
||||
styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css']
|
||||
})
|
||||
export class CreateRankComponent {
|
||||
export class EditRankComponent {
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.preview-image {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -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',
|
||||
component: CreateRankComponent,
|
||||
path: 'edit/:id',
|
||||
component: EditRankComponent,
|
||||
outlet: 'right'
|
||||
}];
|
||||
|
||||
export const ranksRoutingComponents = [RankComponent, RankListComponent, CreateRankComponent];
|
||||
export const ranksRoutingComponents = [RankComponent, RankListComponent, EditRankComponent];
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import {Subscription} from "rxjs/Subscription";
|
|||
|
||||
|
||||
@Component({
|
||||
templateUrl: './new-squad.component.html',
|
||||
styleUrls: ['./new-squad.component.css', '../../style/new-entry-form.css']
|
||||
templateUrl: './edit-squad.component.html',
|
||||
styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css']
|
||||
})
|
||||
export class CreateSquadComponent {
|
||||
export class EditSquadComponent {
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.preview-image {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
||||
|
|
|
|||
|
|
@ -19,3 +19,11 @@ label {
|
|||
margin-left: 10px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
/* enable scrolling for long list of awardings */
|
||||
.overview {
|
||||
position: fixed;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -7,8 +7,8 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
|
|||
|
||||
|
||||
@Component({
|
||||
templateUrl: './user-award.component.html',
|
||||
styleUrls: ['./user-award.component.css'],
|
||||
templateUrl: './award-user.component.html',
|
||||
styleUrls: ['./award-user.component.css'],
|
||||
})
|
||||
export class UserAwardComponent {
|
||||
|
||||
|
|
@ -9,26 +9,24 @@ import {NgForm} from "@angular/forms";
|
|||
|
||||
|
||||
@Component({
|
||||
templateUrl: './user-overview.component.html',
|
||||
styleUrls: ['./user-overview.component.css', '../../style/new-entry-form.css'],
|
||||
templateUrl: './edit-user.component.html',
|
||||
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?`);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
component: UserOverviewComponent,
|
||||
path: 'new',
|
||||
component: EditUserComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'overview/:id',
|
||||
component: UserOverviewComponent,
|
||||
path: 'edit/:id',
|
||||
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];
|
||||
|
|
|
|||
Loading…
Reference in New Issue