added documentation and img-magnifier
This commit is contained in:
parent
e6e5c22ece
commit
18bbf14596
@ -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: '' }
|
||||
|
@ -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">
|
||||
|
@ -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]
|
||||
})
|
||||
|
9
src/app/documentation/documentation.component.html
Normal file
9
src/app/documentation/documentation.component.html
Normal 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>
|
7
src/app/documentation/documentation.component.scss
Normal file
7
src/app/documentation/documentation.component.scss
Normal file
@ -0,0 +1,7 @@
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
img#db-structure {
|
||||
width: 100%;
|
||||
}
|
25
src/app/documentation/documentation.component.spec.ts
Normal file
25
src/app/documentation/documentation.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
15
src/app/documentation/documentation.component.ts
Normal file
15
src/app/documentation/documentation.component.ts
Normal 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 {
|
||||
}
|
||||
|
||||
}
|
17
src/app/img-magnifier/img-magnifier.component.html
Normal file
17
src/app/img-magnifier/img-magnifier.component.html
Normal 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>
|
20
src/app/img-magnifier/img-magnifier.component.scss
Normal file
20
src/app/img-magnifier/img-magnifier.component.scss
Normal 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;
|
||||
}
|
25
src/app/img-magnifier/img-magnifier.component.spec.ts
Normal file
25
src/app/img-magnifier/img-magnifier.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
41
src/app/img-magnifier/img-magnifier.component.ts
Normal file
41
src/app/img-magnifier/img-magnifier.component.ts
Normal 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';
|
||||
}
|
||||
}
|
@ -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
|
||||
});
|
||||
|
3
src/assets/imgs/db_structure_latest.svg
Normal file
3
src/assets/imgs/db_structure_latest.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 90 KiB |
Loading…
Reference in New Issue
Block a user