added documentation and img-magnifier

This commit is contained in:
VLE2FE 2020-07-14 15:58:33 +02:00
parent e6e5c22ece
commit 18bbf14596
13 changed files with 175 additions and 3 deletions

View File

@ -4,6 +4,7 @@ import {HomeComponent} from './home/home.component';
import {LoginService} from './services/login.service';
import {SampleComponent} from './sample/sample.component';
import {SamplesComponent} from './samples/samples.component';
import {DocumentationComponent} from './documentation/documentation.component';
const routes: Routes = [
@ -12,6 +13,7 @@ const routes: Routes = [
{path: 'samples', component: SamplesComponent, canActivate: [LoginService]},
{path: 'samples/new', component: SampleComponent, canActivate: [LoginService]},
{path: 'samples/edit/:id', component: SampleComponent, canActivate: [LoginService]},
{path: 'documentation', component: DocumentationComponent},
// if not authenticated
{ path: '**', redirectTo: '' }

View File

@ -2,6 +2,7 @@
<nav *rbMainNavItems>
<a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
<a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="loginService.isLoggedIn">Samples</a>
<a routerLink="/documentation" routerLinkActive="active" rbLoadingLink>Documentation</a>
</nav>
<ng-container *ngIf="loginService.isLoggedIn">

View File

@ -18,6 +18,8 @@ import {CommonModule} from '@angular/common';
import { ErrorComponent } from './error/error.component';
import { ObjectPipe } from './object.pipe';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { DocumentationComponent } from './documentation/documentation.component';
import { ImgMagnifierComponent } from './img-magnifier/img-magnifier.component';
@NgModule({
declarations: [
@ -28,7 +30,9 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
SampleComponent,
ValidateDirective,
ErrorComponent,
ObjectPipe
ObjectPipe,
DocumentationComponent,
ImgMagnifierComponent
],
imports: [
LocalStorageModule.forRoot({
@ -48,7 +52,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
ChartsModule
],
providers: [
ModalService
ModalService,
{ provide: Window, useValue: window }
],
bootstrap: [AppComponent]
})

View File

@ -0,0 +1,9 @@
<h2>Samples</h2>
<p>
Find the API documentation here: <a href="https://definma-api.apps.de1.bosch-iot-cloud.com/api-doc/">https://definma-api.apps.de1.bosch-iot-cloud.com/api-doc/</a>
</p>
<h4>Database model</h4>
<app-img-magnifier src="assets/imgs/db_structure_latest.svg" zoom="2" [magnifierSize]="{width: 400, height: 300}" id="db-structure"></app-img-magnifier>

View File

@ -0,0 +1,7 @@
p {
margin-bottom: 20px;
}
img#db-structure {
width: 100%;
}

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DocumentationComponent } from './documentation.component';
describe('DocumentationComponent', () => {
let component: DocumentationComponent;
let fixture: ComponentFixture<DocumentationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DocumentationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DocumentationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-documentation',
templateUrl: './documentation.component.html',
styleUrls: ['./documentation.component.scss']
})
export class DocumentationComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1,17 @@
<div class="img-container">
<div class="magnifier"
[ngStyle]="{
'background-size': backgroundSize,
'background-image': 'url(\'' + src + '\')',
'background-position': '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
left: magnifierPos.x + 'px',
top: magnifierPos.y + 'px',
width: magnifierSize.width + 'px',
height: magnifierSize.height + 'px'
}"
(mousemove)="calcPos($event)"
(mouseleave)="showMagnifier = false"
*ngIf="showMagnifier">
</div>
<img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
</div>

View File

@ -0,0 +1,20 @@
@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
.img-container {
position:relative;
overflow: hidden;
& > img {
width: 100%;
}
}
.magnifier {
position: absolute;
background: #FFF;
background-repeat: no-repeat;
background-position: -500px -500px;
z-index: 99;
border: 1px solid #FFF;
box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;
}

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ImgMagnifierComponent } from './img-magnifier.component';
describe('ImgMagnifierComponent', () => {
let component: ImgMagnifierComponent;
let fixture: ComponentFixture<ImgMagnifierComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ImgMagnifierComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ImgMagnifierComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,41 @@
import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-img-magnifier',
templateUrl: './img-magnifier.component.html',
styleUrls: ['./img-magnifier.component.scss']
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {
@Input('src') src: string;
@Input('zoom') zoom: number;
@Input('magnifierSize') magnifierSize: {width: number, height: number};
@ViewChild('mainImg') mainImg: ElementRef;
backgroundSize;
magnifierPos = {x: 0, y: 0};
showMagnifier = false;
constructor(
private window: Window
) { }
ngOnInit(): void {
}
ngAfterViewInit() {
setTimeout(() => {
this.calcBackgroundSize();
}, 1);
}
calcPos(event) {
const img = this.mainImg.nativeElement.getBoundingClientRect();
this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2));
this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2));
}
calcBackgroundSize() {
this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
}
}

View File

@ -46,7 +46,7 @@ describe('ApiService', () => {
modalServiceSpy.openComponent.and.returnValue({instance: {message: ''}} as any);
apiService.get('/testurl');
expect(httpClientSpy.get).toHaveBeenCalledWith('/api/testurl', {});
expect(httpClientSpy.get).toHaveBeenCalledWith('/api/testurl', jasmine.any(Object));
expect(modalServiceSpy.openComponent.calls.count()).toBe(1);
});
@ -133,4 +133,6 @@ describe('ApiService', () => {
expect(localStorageServiceSpy.get).toHaveBeenCalledWith('basicAuth');
});
}));
// TODO: test return headers
});

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 90 KiB