Rework management two column layouts
parent
24f6b2a156
commit
e7904315c6
|
@ -1,5 +1,5 @@
|
|||
.overview {
|
||||
padding: 80px 0 0 10% !important;
|
||||
padding-bottom: 50px!important;
|
||||
}
|
||||
|
||||
.trash {
|
||||
|
|
|
@ -105,17 +105,16 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<div style="max-width:18%">
|
||||
<div id="left">
|
||||
<router-outlet name="left"></router-outlet>
|
||||
</div>
|
||||
|
||||
<div id="right">
|
||||
<router-outlet name="right"></router-outlet>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<router-outlet></router-outlet>
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-decorations',
|
||||
templateUrl: './decoration.component.html',
|
||||
styleUrls: ['./decoration.component.css']
|
||||
})
|
||||
export class DecorationComponent {
|
||||
constructor() {
|
||||
}
|
||||
}
|
|
@ -1,19 +1,15 @@
|
|||
import {RouterModule, 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 {ModuleWithProviders} from '@angular/core';
|
||||
import {DecorationItemComponent} from './decoration-list/decoration-item.component';
|
||||
|
||||
export const decorationsRoutes: Routes = [{
|
||||
path: '', component: DecorationComponent,
|
||||
children: [
|
||||
export const decorationsRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DecorationListComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
component: DecorationListComponent,
|
||||
outlet: 'left'
|
||||
},
|
||||
{
|
||||
path: 'new',
|
||||
component: EditDecorationComponent,
|
||||
|
@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
|
|||
|
||||
export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
|
||||
|
||||
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
|
||||
EditDecorationComponent];
|
||||
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<router-outlet></router-outlet>
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-ranks',
|
||||
templateUrl: './ranks.component.html',
|
||||
styleUrls: ['./ranks.component.css']
|
||||
})
|
||||
export class RankComponent {
|
||||
constructor() {
|
||||
}
|
||||
}
|
|
@ -1,19 +1,15 @@
|
|||
import {RouterModule, 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 {RankItemComponent} from './rank-list/rank-item.component';
|
||||
import {ModuleWithProviders} from '@angular/core';
|
||||
|
||||
export const ranksRoutes: Routes = [{
|
||||
path: '', component: RankComponent,
|
||||
children: [
|
||||
export const ranksRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: RankListComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
component: RankListComponent,
|
||||
outlet: 'left'
|
||||
},
|
||||
{
|
||||
path: 'new',
|
||||
component: EditRankComponent,
|
||||
|
@ -27,5 +23,5 @@ export const ranksRoutes: Routes = [{
|
|||
|
||||
export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
|
||||
|
||||
export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent];
|
||||
export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<router-outlet></router-outlet>
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-users',
|
||||
templateUrl: './squads.component.html',
|
||||
styleUrls: ['./squads.component.css']
|
||||
})
|
||||
export class SquadComponent {
|
||||
constructor() {
|
||||
}
|
||||
}
|
|
@ -1,19 +1,15 @@
|
|||
import {RouterModule, 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 {ModuleWithProviders} from '@angular/core';
|
||||
import {SquadItemComponent} from './squad-list/squad-item.component';
|
||||
|
||||
export const squadsRoutes: Routes = [{
|
||||
path: '', component: SquadComponent,
|
||||
children: [
|
||||
export const squadsRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: SquadListComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
component: SquadListComponent,
|
||||
outlet: 'left'
|
||||
},
|
||||
{
|
||||
path: 'new',
|
||||
component: EditSquadComponent,
|
||||
|
@ -27,5 +23,5 @@ export const squadsRoutes: Routes = [{
|
|||
|
||||
export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
|
||||
|
||||
export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
|
||||
export const squadsRoutingComponents = [SquadItemComponent, SquadListComponent, EditSquadComponent];
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ export class StatisticComponent implements OnInit {
|
|||
|
||||
campaigns: Campaign[] = [];
|
||||
|
||||
collapsed: boolean = false;
|
||||
collapsed = false;
|
||||
|
||||
constructor(private campaignService: CampaignService,
|
||||
private router: Router,
|
||||
|
@ -45,4 +45,22 @@ export class StatisticComponent implements OnInit {
|
|||
window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// TODO: REACTIVATE
|
||||
// deleteCampaign(campaign) {
|
||||
// if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
|
||||
// this.campaignService.deleteCampaign(campaign._id)
|
||||
// .subscribe((res) => {
|
||||
// if (this.selectedWarId === campaign._id) {
|
||||
// this.selectOverview('all');
|
||||
// }
|
||||
// this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// editCampaign(selectCampaign) {
|
||||
// this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
|
||||
// }
|
||||
}
|
||||
|
|
|
@ -7,11 +7,7 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
|
|||
import {CampaignService} from '../services/logs/campaign.service';
|
||||
import {PlayerService} from '../services/logs/player.service';
|
||||
import {LogsService} from '../services/logs/logs.service';
|
||||
import {
|
||||
MatButtonToggleModule,
|
||||
MatSortModule,
|
||||
MatTableModule
|
||||
} from '@angular/material';
|
||||
import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
|
@ -19,8 +19,6 @@ export class WarListComponent implements OnInit, OnChanges {
|
|||
|
||||
selectedWarId: string | number;
|
||||
|
||||
campaigns: Campaign[] = [];
|
||||
|
||||
public readonly highscore = 'HIGHSCORE';
|
||||
|
||||
constructor(private warService: WarService,
|
||||
|
@ -31,17 +29,16 @@ export class WarListComponent implements OnInit, OnChanges {
|
|||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.campaign) this.selectedWarId = this.campaign._id;
|
||||
if (changes.campaign) {
|
||||
this.selectedWarId = this.campaign._id;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.campaignService.getAllCampaignsWithWars().subscribe((items) => {
|
||||
const url = this.router.url;
|
||||
const subPathWar = 'war/';
|
||||
const subPathOverview = 'overview/';
|
||||
this.campaignService.campaigns = items;
|
||||
this.campaigns = items;
|
||||
|
||||
const url = this.router.url;
|
||||
if (url.endsWith(RouteConfig.statsPath)) {
|
||||
this.selectOverview(this.campaign._id);
|
||||
} else if (url.indexOf(subPathWar) !== -1) {
|
||||
|
@ -49,7 +46,6 @@ export class WarListComponent implements OnInit, OnChanges {
|
|||
} else if (url.indexOf(subPathOverview) !== -1) {
|
||||
this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectNewCampaign() {
|
||||
|
@ -98,26 +94,8 @@ export class WarListComponent implements OnInit, OnChanges {
|
|||
if (this.selectedWarId === war._id) {
|
||||
this.selectOverview('all');
|
||||
}
|
||||
this.campaigns.forEach(campaign => {
|
||||
campaign.wars.splice(campaign.wars.indexOf(war), 1);
|
||||
});
|
||||
this.campaign.wars.splice(this.campaign.wars.indexOf(war), 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deleteCampaign(campaign) {
|
||||
if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
|
||||
this.campaignService.deleteCampaign(campaign._id)
|
||||
.subscribe((res) => {
|
||||
if (this.selectedWarId === campaign._id) {
|
||||
this.selectOverview('all');
|
||||
}
|
||||
this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
editCampaign(selectCampaign) {
|
||||
this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.overview {
|
||||
overflow: hidden !important;
|
||||
padding-top: 80px !important;
|
||||
width: 20%;
|
||||
width: 30vw;
|
||||
min-width: 380px;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
overflow-x: hidden;
|
||||
border-left: thin solid lightgrey;
|
||||
padding: 20px 0 0 50px;
|
||||
top: 50px;
|
||||
height: 100vh;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<router-outlet></router-outlet>
|
|
@ -1,11 +0,0 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-users',
|
||||
templateUrl: 'users.component.html',
|
||||
styleUrls: ['users.component.css']
|
||||
})
|
||||
export class UsersComponent {
|
||||
constructor() {
|
||||
}
|
||||
}
|
|
@ -1,20 +1,16 @@
|
|||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {UsersComponent} from './users.component';
|
||||
import {EditUserComponent} from './edit-user/edit-user.component';
|
||||
import {UserListComponent} from './user-list/user-list.component';
|
||||
import {AwardUserComponent} from './award-user/award-user.component';
|
||||
import {ModuleWithProviders} from '@angular/core';
|
||||
import {UserItemComponent} from './user-list/user-item.component';
|
||||
|
||||
export const usersRoutes: Routes = [{
|
||||
path: '', component: UsersComponent,
|
||||
children: [
|
||||
export const usersRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: UserListComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
component: UserListComponent,
|
||||
outlet: 'left'
|
||||
},
|
||||
{
|
||||
path: 'new',
|
||||
component: EditUserComponent,
|
||||
|
@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{
|
|||
|
||||
export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
|
||||
|
||||
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
|
||||
AwardUserComponent];
|
||||
export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];
|
||||
|
|
|
@ -40,17 +40,11 @@ form {
|
|||
}
|
||||
|
||||
#left {
|
||||
display: none;
|
||||
width: 20%;
|
||||
min-width: 350px;
|
||||
max-width: 450px;
|
||||
max-width: 20%;
|
||||
min-width: 345px;
|
||||
margin: 0;
|
||||
position: static;
|
||||
float: left;
|
||||
background: #f9f9f9;
|
||||
box-shadow: 2px 1px 5px grey;
|
||||
}
|
||||
|
||||
#left:not(:empty) {
|
||||
display:block!important;
|
||||
}
|
||||
|
||||
#right {
|
||||
|
|
Loading…
Reference in New Issue