Skip to content
Snippets Groups Projects
Commit 4a7f94dc authored by OZGCloud's avatar OZGCloud
Browse files

Merge branch 'master' of git.ozg-sh.de:mgm/goofy

parents 4d9ac773 3e487a4f
Branches
Tags
No related merge requests found
Showing
with 106 additions and 54 deletions
<ng-container *ngIf="apiRoot$ | async as apiRoot"> <ng-container *ngIf="apiRoot$ | async as apiRoot">
<!-- TODO replace by spinner-component --> <!-- TODO replace by spinner-component -->
<ng-container *ngIf="apiRoot.loaded"> <ng-container *ngIf="apiRoot.loaded">
<goofy-client-header
[darkMode]="darkMode$ | async" <goofy-client-header-container></goofy-client-header-container>
[navigationCollapse]="navigationCollapse$ | async"
(toggleMenuEvent)="toggleNavigation($event)"
(darkModeEmitter)="changeColorMode($event)"
>
</goofy-client-header>
<div class="container"> <div class="container">
<goofy-client-navigation [isSmall]="navigationCollapse$ | async"></goofy-client-navigation> <goofy-client-navigation></goofy-client-navigation>
<main><router-outlet></router-outlet></main> <main><router-outlet></router-outlet></main>
<section> <section>
<goofy-client-build-info [apiRoot]="apiRoot.resource"></goofy-client-build-info> <goofy-client-build-info [apiRoot]="apiRoot.resource"></goofy-client-build-info>
......
import { DOCUMENT } from '@angular/common'; import { Component } from '@angular/core';
import { Component, Inject, Renderer2 } from '@angular/core';
import { ApiRootResource, ApiRootService } from '@goofy-client/api-root-shared'; import { ApiRootResource, ApiRootService } from '@goofy-client/api-root-shared';
import { StateResource } from '@goofy-client/tech-shared'; import { StateResource } from '@goofy-client/tech-shared';
import { IconService } from '@goofy-client/ui'; import { IconService } from '@goofy-client/ui';
import { Observable, of } from 'rxjs'; import { Observable } from 'rxjs';
import { AppService, localStorageDark } from '@goofy-client/app-shared';
@Component({ @Component({
selector: 'goofy-client-root', selector: 'goofy-client-root',
...@@ -16,42 +14,11 @@ export class AppComponent { ...@@ -16,42 +14,11 @@ export class AppComponent {
apiRoot$: Observable<StateResource<ApiRootResource>>; apiRoot$: Observable<StateResource<ApiRootResource>>;
navigationCollapse$: Observable<boolean>;
darkMode$: Observable<boolean>;
constructor( constructor(
iconService: IconService, apiRootService: ApiRootService,
private appService: AppService, iconServie: IconService
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
apiRootService: ApiRootService
) { ) {
this.navigationCollapse$ = this.appService.getNavigationCollapse();
this.darkMode$ = this.appService.getDarkMode();
this.apiRoot$ = apiRootService.getApiRoot(); this.apiRoot$ = apiRootService.getApiRoot();
iconServie.registerIcons();
iconService.registerIcons();
this.subscribeToDarkMode();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe(darkMode => darkMode ? this.addClass(localStorageDark) : this.removeClass(localStorageDark));
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
toggleNavigation(isToggle: boolean): void {
this.appService.setNavigationCollapse(isToggle);
}
changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
} }
} }
\ No newline at end of file
.l-scroll-area { .l-scroll-area {
height: calc(100vh - 112px); height: calc(100vh - 112px);
background-color: #fff; background-color: #fff;
display: block;
} }
body.dark .l-scroll-area { body.dark .l-scroll-area {
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@import "layout/main"; @import "layout/main";
@import "~libs/vorgang/src/lib/vorgang-detail/vorgang-detail.theme"; @import "~libs/vorgang/src/lib/vorgang-detail/vorgang-detail.theme";
@import "~libs/navigation/src/lib/navigation/navigation.theme"; @import "~libs/navigation/src/lib/navigation/navigation.theme";
@import "~libs/navigation/src/lib/header/header.theme"; @import "~libs/navigation/src/lib/header-container/header/header.theme";
@import "~libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item"; @import "~libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item";
@include mat-core(); @include mat-core();
......
import { TestBed } from "@angular/core/testing"; import { TestBed } from '@angular/core/testing';
import { ApiRootModule } from './api-root.module'; import { ApiRootModule } from './api-root.module';
describe('ApiRootModule', () => { describe('ApiRootModule', () => {
......
import { Mock, mock, useFromMock } from '@goofy-client/test-utils'; import { Mock, mock, useFromMock } from '@goofy-client/test-utils';
import { HttpService } from '@ngxp/rest'; import { HttpService } from '@ngxp/rest';
import { Environment } from 'libs/environment-shared/src/lib/environment.model'; import { Environment } from 'libs/environment-shared/src/lib/environment.model';
import { ApiRootRepository } from "./api-root.repository" import { createEnvironment } from '../../../environment-shared/test/environment';
import { createEnvironment } from "../../../environment-shared/test/environment"; import { ApiRootRepository } from './api-root.repository';
var repository: ApiRootRepository; var repository: ApiRootRepository;
var httpService: Mock<HttpService>; var httpService: Mock<HttpService>;
......
import { TestBed } from "@angular/core/testing"; import { TestBed } from '@angular/core/testing';
import { AppSharedModule } from './app-shared.module'; import { AppSharedModule } from './app-shared.module';
describe('AppSharedModule', () => { describe('AppSharedModule', () => {
......
import { AppService } from "./app.service"; import { AppService } from './app.service';
describe('AppService', () => { describe('AppService', () => {
let service: AppService; let service: AppService;
......
<p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime | date: 'dd.MM.yy HH:mm:ss' }}</p> <p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime | date: "dd.MM.yy HH:mm:ss" }}</p>
\ No newline at end of file \ No newline at end of file
<goofy-client-header
[darkMode]="darkMode$ | async"
[navigationCollapse]="navigationCollapse$ | async"
(toggleMenuEvent)="toggleNavigation($event)"
(darkModeEmitter)="changeColorMode($event)">
</goofy-client-header>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppService } from '@goofy-client/app-shared';
import { BehaviorSubject } from 'rxjs';
import { HeaderContainerComponent } from './header-container.component';
import { mock, mockComponent, headerMockComponent } from '@goofy-client/test-utils';
describe('HeaderContainerComponent', () => {
let component: HeaderContainerComponent;
let fixture: ComponentFixture<HeaderContainerComponent>;
const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
HeaderContainerComponent,
mockComponent(headerMockComponent),
],
providers: [
{
provide: AppService,
useValue: appService
}
]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HeaderContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
\ No newline at end of file
import { DOCUMENT } from '@angular/common';
import { Component, Inject, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs';
import { AppService, localStorageDark } from '@goofy-client/app-shared';
@Component({
selector: 'goofy-client-header-container',
templateUrl: './header-container.component.html',
styleUrls: ['./header-container.component.scss']
})
export class HeaderContainerComponent {
navigationCollapse$: Observable<boolean>;
darkMode$: Observable<boolean>;
constructor(
private appService: AppService,
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
) {
this.navigationCollapse$ = this.appService.getNavigationCollapse();
this.darkMode$ = this.appService.getDarkMode();
this.subscribeToDarkMode();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe(darkMode => darkMode ? this.addClass(localStorageDark) : this.removeClass(localStorageDark));
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
toggleNavigation(isToggle: boolean): void {
this.appService.setNavigationCollapse(isToggle);
}
changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment