Merge pull request #21 from PDOK/custom-url

Custom url

projects/vectortile-demo/src/app/app.component.html

@@ -13,9 +13,9 @@
 
       <div *ngIf="isShow" id="divshow">
         <div>
-          <div *ngFor="let v of visualisatie" (click)="onSelect(v)">
+          <div *ngFor="let v of visualisatie" (click)="onSelect(v.visualisatie)">
             <button mat-button class="lbutton">
-              <span>{{ v }}</span>
+              <span>{{ v.title }}</span>
             </button>
           </div>
         </div>

projects/vectortile-demo/src/app/app.component.ts

@@ -48,7 +48,7 @@ export class AppComponent implements OnInit {
   receiveTitle(data: Visualisatie) {
     this.currentVis = data
 
-    this.styleurl = getStyleUrl(this.currentVis).url!
+    this.styleurl = getStyleUrl(this.currentVis).styleUrl!
   }
 
   onSelect(vis: Visualisatie): void {

projects/vectortile-demo/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
+import { ReactiveFormsModule } from '@angular/forms';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { ColorPickerModule } from 'ngx-color-picker'
 import { AppRoutingModule } from './app-routing.module'
@@ -19,6 +20,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'
 import { MatDividerModule } from '@angular/material/divider'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { ShowlinkComponent } from './showlink/showlink.component'
+import { CustomTileComponent } from "./custom-tile/custom-tile.component";
 
 
 @NgModule({ declarations: [
@@ -35,12 +37,12 @@ import { ShowlinkComponent } from './showlink/showlink.component'
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     bootstrap: [AppComponent], imports: [BrowserModule,
-        AppRoutingModule,
-        ColorPickerModule,
-        BrowserAnimationsModule,
-        MatTooltipModule,
-        MatDividerModule,
-        //  MatButtonModule,
-        //  MatIconModule,
-        MatSlideToggleModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+    AppRoutingModule,
+    ColorPickerModule,
+    BrowserAnimationsModule,
+    MatTooltipModule,
+    MatDividerModule,
+    //  MatButtonModule,
+    //  MatIconModule,
+    MatSlideToggleModule, CustomTileComponent], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule { }

projects/vectortile-demo/src/app/custom-tile/custom-tile.component.html

@@ -0,0 +1,39 @@
+<form [formGroup]="customtForm" (ngSubmit)="onSubmit()">
+  <table> 
+  <tr>
+    <td><label for="showDebugLayer">showDebugLayer:</label></td>
+    <td><mat-slide-toggle (change)="showDebugLayer()" formControlName="showDebugLayer"></mat-slide-toggle> 
+   </td>
+  </tr>
+  </table>
+
+<table>
+
+  <caption class="techcaption">
+    Aanpasbare Vectortile URL:
+  </caption>
+  <tbody>
+    <tr>
+      <td><label for="customUrlMinZoom">MinZoom:</label></td>
+      <td><input type="text" id="customUrlMinZoom" formControlName="customUrlMinZoom"/></td>
+    </tr>
+
+    <tr>
+      <td><label for="customUrl">URL:</label></td>
+      <td><input type="text" id="customUrl" formControlName="customUrl"/></td>
+    </tr>
+
+    <tr>
+      <td><label for="customUrlxyzTemplate">xyzTemplate:</label></td>
+      <td><input type="text" id="customUrlxyzTemplate" formControlName="customUrlxyzTemplate"/></td>
+    </tr>
+    <tr>
+      <td><label for="customUrlExtension">extension:</label></td>
+      <td><input type="text" id="customUrlExtension" formControlName="customUrlExtension"/></td>
+    </tr>
+  </tbody>
+</table>
+<button type="submit">Aanpassen</button>
+<button type="reset" (click)="onReset()">Reset</button>
+
+</form>

projects/vectortile-demo/src/app/custom-tile/custom-tile.component.scss

@@ -0,0 +1,6 @@
+input{
+    width: 100%
+}
+.lefttable{
+    width: 100%
+}

projects/vectortile-demo/src/app/custom-tile/custom-tile.component.spec.ts

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CustomTileComponent } from './custom-tile.component';
+import { LocalStorageService, storageKey } from '../local-storage-service';
+import { Visualisatie } from '../enumVisualisatie';
+
+describe('CustomTileComponent', () => {
+  let component: CustomTileComponent;
+  let fixture: ComponentFixture<CustomTileComponent>;
+  let localStorageService: jasmine.SpyObj<LocalStorageService>;
+
+  beforeEach(async () => {
+    const localStorageSpy = jasmine.createSpyObj('LocalStorageService', ['Exists', 'get', 'set', 'remove', 'removeAll']);
+
+    await TestBed.configureTestingModule({
+
+      imports: [CustomTileComponent, ReactiveFormsModule],
+      providers: [
+        { provide: LocalStorageService, useValue: localStorageSpy }
+      ]
+    }).compileComponents();
+
+    localStorageService = TestBed.inject(LocalStorageService) as jasmine.SpyObj<LocalStorageService>;
+
+
+
+    localStorageService.Exists.and.callFake((key: storageKey) => key === 'customUrl'|| key === 'customUrlxyzTemplate' || 
+    key === 'customUrlExtension' || key === 'customUrlMinZoom'|| key==='showDebugLayer');
+    localStorageService.get.and.callFake((key: string) => {
+      switch (key) {
+        case 'customUrl': return 'http://example.com';
+        case 'customUrlExtension': return '.json';
+        case 'customUrlMinZoom': return '10';
+        case 'customUrlxyzTemplate' : return 'T{z}{x}{y}'; 
+        case 'showDebugLayer' : return 'True'; 
+
+        default: return '';
+      }
+    });
+
+    fixture = TestBed.createComponent(CustomTileComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize form with values from localStorage', () => {
+    expect(component.customtForm.value).toEqual({
+      customUrl: 'http://example.com',
+      customUrlExtension: '.json',
+      customUrlMinZoom: '10', 
+      customUrlxyzTemplate: 'T{z}{x}{y}', 
+      showDebugLayer: "True"
+    });
+  });
+
+  it('should call localStorageService.set on form submit', () => {
+    component.customtForm.setValue({
+      customUrl: 'http://newexample.com',
+      customUrlExtension: '.xml',
+      customUrlxyzTemplate: 'N{z}{x}{y}', 
+      customUrlMinZoom: '12', 
+            showDebugLayer: "False"
+    });
+
+    component.onSubmit();
+
+    expect(localStorageService.set).toHaveBeenCalledWith({ key: 'customUrl', value: 'http://newexample.com' });
+    expect(localStorageService.set).toHaveBeenCalledWith({ key: 'customUrlExtension', value: '.xml' });
+    expect(localStorageService.set).toHaveBeenCalledWith({ key: 'customUrlMinZoom', value: '12' });
+    expect(localStorageService.set).toHaveBeenCalledWith({ key: 'customUrlxyzTemplate', value: 'N{z}{x}{y}' });
+    expect(localStorageService.set).toHaveBeenCalledWith({ key: 'showDebugLayer', value: 'False' });
+  });
+
+  it('should emit visEmit event on form submit', () => {
+    spyOn(component.visEmit, 'emit');
+
+    component.onSubmit();
+
+    expect(component.visEmit.emit).toHaveBeenCalledWith(Visualisatie.Custom1Blanko);
+  });
+
+  it('should reset form and call localStorageService.remove on reset', () => {
+    component.onReset();
+
+    expect(localStorageService.removeAll).toHaveBeenCalled();
+    expect(component.customtForm.value).toEqual({
+      customUrl: null,
+      customUrlExtension: null,
+      customUrlxyzTemplate: null,
+      customUrlMinZoom: null, 
+      showDebugLayer:null
+
+    });
+  });
+
+  it('should emit visEmit event on reset', () => {
+    spyOn(component.visEmit, 'emit');
+
+    component.onReset();
+
+    expect(component.visEmit.emit).toHaveBeenCalledWith(Visualisatie.BGTachtergrond);
+  });
+});

projects/vectortile-demo/src/app/custom-tile/custom-tile.component.ts

@@ -0,0 +1,66 @@
+import { Component, EventEmitter, Output } from '@angular/core'
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Visualisatie } from '../enumVisualisatie'
+import { LocalStorageService, storageKey } from '../local-storage-service'
+import { MatSlideToggle } from '@angular/material/slide-toggle'
+
+@Component({
+  selector: 'app-custom-tile',
+  standalone: true,
+
+  imports: [FormsModule, ReactiveFormsModule, MatSlideToggle],
+  templateUrl: './custom-tile.component.html',
+  styleUrl: './custom-tile.component.scss'
+})
+export class CustomTileComponent {
+
+  @Output() visEmit: EventEmitter<Visualisatie> = new EventEmitter();
+  @Output() gridEmit: EventEmitter<boolean> = new EventEmitter();
+
+  customtForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder, private localStorageService: LocalStorageService) {
+    this.customtForm = this.formBuilder.group({
+      customUrl: new FormControl(this.getLocalStorageValue('customUrl')),
+      customUrlExtension: new FormControl(this.getLocalStorageValue('customUrlExtension')),
+      customUrlxyzTemplate: new FormControl(this.getLocalStorageValue('customUrlxyzTemplate')),
+      customUrlMinZoom: new FormControl(this.getLocalStorageValue('customUrlMinZoom')), 
+      showDebugLayer:  new FormControl(this.getLocalStorageValue('showDebugLayer'))
+    });
+  }
+
+  private getLocalStorageValue(key: storageKey): string |boolean {
+    return this.localStorageService.Exists(key) ? this.localStorageService.get(key) : '';
+  }
+
+  onSubmit() {
+    const { customUrl, customUrlExtension,  customUrlxyzTemplate,  customUrlMinZoom, showDebugLayer } = this.customtForm.value;
+    this.localStorageService.set({ key: 'customUrl', value: customUrl });
+    this.localStorageService.set({ key: 'customUrlExtension', value: customUrlExtension });
+    this.localStorageService.set({ key: 'customUrlxyzTemplate', value: customUrlxyzTemplate });
+    this.localStorageService.set({ key: 'customUrlMinZoom', value: customUrlMinZoom });
+    this.localStorageService.set({ key: 'showDebugLayer', value: showDebugLayer});
+    console.log(showDebugLayer)
+    this.visEmit.emit(Visualisatie.Custom1Blanko);
+  }
+
+  showDebugLayer() {
+
+    const { customUrl, customUrlExtension,  customUrlxyzTemplate,  customUrlMinZoom, showDebugLayer } = this.customtForm.value;
+
+    console.log(showDebugLayer)
+
+    this.localStorageService.set({ key: 'showDebugLayer', value:  showDebugLayer});
+    this.gridEmit.emit()
+
+
+
+    }
+
+  onReset() {
+    this.localStorageService.removeAll()   
+    this.customtForm.reset();
+    this.visEmit.emit(Visualisatie.BGTachtergrond);
+  }
+}
+

projects/vectortile-demo/src/app/demobox/demobox.component.ts

@@ -3,6 +3,7 @@ import { View } from 'ol'
 import { demoSettings } from '../app.component'
 import { Visualisatie, getRandomEnumValue } from '../enumVisualisatie'
 import { LocationService } from '../location.service'
+import { LocalStorageService } from '../local-storage-service'
 
 @Component({
   selector: 'app-demobox',
@@ -42,11 +43,11 @@ export class DemoboxComponent {
     demoSettings.previewFeature = value
   }
 
-  constructor(private locationService: LocationService) { }
+  constructor(private locationService: LocationService,private localStorageService: LocalStorageService) { }
   ngOnInit(): void {
     this.locationService.currentLocation.subscribe((currentLocation) => {
       // this.currentlocation = currentLocation;
-     console.log ( this.getAllAvailableFonts());
+     //console.log ( this.getAllAvailableFonts());
 
     })
   }
@@ -79,6 +80,7 @@ export class DemoboxComponent {
   }
 
   DemogotoStartLocationOnMap() {
+    this.localStorageService.removeAll()   
     this.visEmit.emit(Visualisatie.BGTstandaard)
     this.isDemoVisualisatieRotate = false
     this.isDemoLocatieRotate = false