File

src/app/workspace-admin/workspace.component.ts

Implements

OnInit OnDestroy

Metadata

styleUrls ./workspace.component.css
templateUrl ./workspace.component.html

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, bs: BackendService, mds: MainDataService, wds: WorkspaceDataService)
Parameters :
Name Type Optional
route ActivatedRoute No
bs BackendService No
mds MainDataService No
wds WorkspaceDataService No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

Public mds
Type : MainDataService
Private routingSubscription
Type : Subscription
Default value : null
Public wds
Type : WorkspaceDataService
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { WorkspaceDataService } from './workspacedata.service';
import { BackendService } from './backend.service';
import { MainDataService } from '../maindata.service';

@Component({
  templateUrl: './workspace.component.html',
  styleUrls: ['./workspace.component.css']
})
export class WorkspaceComponent implements OnInit, OnDestroy {
  private routingSubscription: Subscription = null;

  constructor(
    private route: ActivatedRoute,
    private bs: BackendService,
    public mds: MainDataService,
    public wds: WorkspaceDataService
  ) { }

  ngOnInit(): void {
    setTimeout(() => {
      this.mds.appSubTitle$.next('');
      this.routingSubscription = this.route.params.subscribe(params => {
        this.wds.wsId = params.ws;
        this.bs.getWorkspaceData(this.wds.wsId).subscribe(wsData => {
          if (typeof wsData !== 'number') {
            this.wds.wsName = wsData.name;
            this.wds.wsRole = wsData.role;
            this.mds.appSubTitle$.next(`Verwaltung "${this.wds.wsName}" (${this.wds.wsRole})`);
          }
        });
      });
    });
  }

  ngOnDestroy(): void {
    if (this.routingSubscription !== null) {
      this.routingSubscription.unsubscribe();
    }
  }
}
<div class="page-header">
  <p>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</p>
</div>

<div class="page-body">
  <div class="adminbackground">
    <nav mat-tab-nav-bar>
      <a mat-tab-link
          *ngFor="let link of wds.navLinks"
          [routerLink]="link.path"
          routerLinkActive #rla="routerLinkActive"
          [active]="rla.isActive">
        {{link.label}}
      </a>
    </nav>

    <router-outlet></router-outlet>
  </div>
</div>

./workspace.component.css

#buttonsContainer {
  color: white;
  padding: 0 10px 0 0;
}

#buttonsContainer .material-icons {
  font-size: 2.0rem;
}

#buttonsContainer img {
  width: 100px;
}

mat-toolbar {
  position: fixed;
  z-index: 100;
  top: 4px;
  right: 90px;
}

#buttonsContainer .material-icons {
  position: relative;
  top: -8px;
  font-size: 36px;
  padding: 2px;
}

.adminbackground {
  flex:  10 0 900px;
  box-shadow: 5px 10px 20px black;
  background-color: white;
  min-height: 85%;
  margin: 15px;
  padding: 25px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""