From 18bbf145960215f866db4e7a4167705be0e1afc8 Mon Sep 17 00:00:00 2001 From: VLE2FE Date: Tue, 14 Jul 2020 15:58:33 +0200 Subject: [PATCH] added documentation and img-magnifier --- src/app/app-routing.module.ts | 2 + src/app/app.component.html | 1 + src/app/app.module.ts | 9 +++- .../documentation.component.html | 9 ++++ .../documentation.component.scss | 7 ++++ .../documentation.component.spec.ts | 25 +++++++++++ .../documentation/documentation.component.ts | 15 +++++++ .../img-magnifier.component.html | 17 ++++++++ .../img-magnifier.component.scss | 20 +++++++++ .../img-magnifier.component.spec.ts | 25 +++++++++++ .../img-magnifier/img-magnifier.component.ts | 41 +++++++++++++++++++ src/app/services/api.service.spec.ts | 4 +- src/assets/imgs/db_structure_latest.svg | 3 ++ 13 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 src/app/documentation/documentation.component.html create mode 100644 src/app/documentation/documentation.component.scss create mode 100644 src/app/documentation/documentation.component.spec.ts create mode 100644 src/app/documentation/documentation.component.ts create mode 100644 src/app/img-magnifier/img-magnifier.component.html create mode 100644 src/app/img-magnifier/img-magnifier.component.scss create mode 100644 src/app/img-magnifier/img-magnifier.component.spec.ts create mode 100644 src/app/img-magnifier/img-magnifier.component.ts create mode 100644 src/assets/imgs/db_structure_latest.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e11eb05..d3071c5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -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: '' } diff --git a/src/app/app.component.html b/src/app/app.component.html index 405c832..eadcb78 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,6 +2,7 @@ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 663e8e9..9e1268c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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] }) diff --git a/src/app/documentation/documentation.component.html b/src/app/documentation/documentation.component.html new file mode 100644 index 0000000..3ff12b0 --- /dev/null +++ b/src/app/documentation/documentation.component.html @@ -0,0 +1,9 @@ +

Samples

+ +

+ Find the API documentation here: https://definma-api.apps.de1.bosch-iot-cloud.com/api-doc/ +

+ +

Database model

+ + diff --git a/src/app/documentation/documentation.component.scss b/src/app/documentation/documentation.component.scss new file mode 100644 index 0000000..58a9ed8 --- /dev/null +++ b/src/app/documentation/documentation.component.scss @@ -0,0 +1,7 @@ +p { + margin-bottom: 20px; +} + +img#db-structure { + width: 100%; +} diff --git a/src/app/documentation/documentation.component.spec.ts b/src/app/documentation/documentation.component.spec.ts new file mode 100644 index 0000000..fec102e --- /dev/null +++ b/src/app/documentation/documentation.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DocumentationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DocumentationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts new file mode 100644 index 0000000..c3f6071 --- /dev/null +++ b/src/app/documentation/documentation.component.ts @@ -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 { + } + +} diff --git a/src/app/img-magnifier/img-magnifier.component.html b/src/app/img-magnifier/img-magnifier.component.html new file mode 100644 index 0000000..a547720 --- /dev/null +++ b/src/app/img-magnifier/img-magnifier.component.html @@ -0,0 +1,17 @@ +
+
+
+ +
diff --git a/src/app/img-magnifier/img-magnifier.component.scss b/src/app/img-magnifier/img-magnifier.component.scss new file mode 100644 index 0000000..f72791e --- /dev/null +++ b/src/app/img-magnifier/img-magnifier.component.scss @@ -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; +} diff --git a/src/app/img-magnifier/img-magnifier.component.spec.ts b/src/app/img-magnifier/img-magnifier.component.spec.ts new file mode 100644 index 0000000..753cad6 --- /dev/null +++ b/src/app/img-magnifier/img-magnifier.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ImgMagnifierComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ImgMagnifierComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/img-magnifier/img-magnifier.component.ts b/src/app/img-magnifier/img-magnifier.component.ts new file mode 100644 index 0000000..5a339db --- /dev/null +++ b/src/app/img-magnifier/img-magnifier.component.ts @@ -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'; + } +} diff --git a/src/app/services/api.service.spec.ts b/src/app/services/api.service.spec.ts index 58212b6..3782e9a 100644 --- a/src/app/services/api.service.spec.ts +++ b/src/app/services/api.service.spec.ts @@ -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 }); diff --git a/src/assets/imgs/db_structure_latest.svg b/src/assets/imgs/db_structure_latest.svg new file mode 100644 index 0000000..5dccaf4 --- /dev/null +++ b/src/assets/imgs/db_structure_latest.svg @@ -0,0 +1,3 @@ + + +
measurements
measurements
materials
materials
samples
samples
_id
_id
_id
_id
values
values
_id
_id
number
number
numbers
numbers
material_name
material_name
batch
batch
comment
comment
location
location
models
models
name
name
status
status
notes
notes
data
data
_id
_id
users
users
name
name
pass
pass
level
level
_id
_id
type
type
measurement_templates
measurement_templates
_id
_id
parameters
parameters
range
range
name
name
name
name
color
color
sample_references
sample_references
device_name
device_name
condition_templates
condition_templates
_id
_id
parameters
parameters
range
range
name
name
name
name
custom fields
custom fields
key
key
email
email
note_fields
note_fields
name
name
qty
qty
sample_id
sample_id
relation
relation
version
version
version
version
status
status
status
status
condition
condition
parameters
parameters
material_groups
material_groups
material_suppliers
material_suppliers
_id
_id
name
name
_id
_id
name
name
first_id
first_id
first_id
first_id
changelog
changelog
_id
_id
collection
collection
data
data
condition
condition
action
action
material_templates
material_templates
_id
_id
parameters
parameters
range
range
name
name
name
name
version
version
first_id
first_id
properties
properties
parameters
parametersViewer does not support full SVG 1.1 \ No newline at end of file