added documentation and img-magnifier

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: '' }

src/app/app.component.html

@@ -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">

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]
 })

src/app/documentation/documentation.component.html

@@ -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>

src/app/documentation/documentation.component.scss

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

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<DocumentationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DocumentationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

src/app/img-magnifier/img-magnifier.component.html

@@ -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>

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;
+}

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<ImgMagnifierComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImgMagnifierComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImgMagnifierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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';
+  }
+}

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
 });