@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

package/src/lib/components/plans/plans.component.ts

@@ -1,305 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { Zone, Space, Plan, MenuItem, SpaceService, PlanService, getMetaForImage, getSignedFile, downloadFileAsObject, downloadBlob, NavigatorService } from '@smarterplan/ngx-smarterplan-core';
-import panzoom from 'panzoom';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-    selector: 'lib-plans',
-    templateUrl: './plans.component.html',
-    styleUrls: ['./plans.component.scss']
-})
-export class PlansComponent implements OnInit {
-
-    spaceID: string;
-
-    currentSpace: Space;
-
-    plans: Plan[];
-
-    // chosenPlan: Plan;
-
-    indexDetails = -1;
-
-    loading = false;
-
-    uploadingPlan = false;
-
-    planForm: FormGroup;
-
-    isCurrentPlanForZone = false;
-
-    canvas;
-
-    scale: number;
-
-    panzoom: any;
-
-    currentZone: Zone;
-
-    fileToUpload: File;
-
-    chosenPlanIsPdf = false;
-
-    zones: Zone[];
-
-    menuItems: MenuItem[] = [];
-
-    destroy$ = new Subject();
-
-    constructor(
-        private route: ActivatedRoute,
-        private router: Router,
-        private spaceService: SpaceService,
-        private planService: PlanService,
-        private fb: FormBuilder,
-        private translate: TranslateService,
-        private navigatorService: NavigatorService
-    ) {
-        this.navigatorService.locationIDChange
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((spaceID) => {
-                this.router.navigate(["dashboard/localisation", spaceID, "plans"]);
-            });
-
-        this.route.params.subscribe((params) => {
-            this.spaceID = params.id;
-            this.getPlans();
-        });
-    }
-
-    ngOnInit(): void {
-        if (
-            this.planService.getPlanFileCache() &&
-            this.planService.getChosenPlan()
-        ) {
-            this.addPlanFromCache(
-                this.planService.getPlanFileCache(),
-                this.planService.getChosenPlan(),
-            );
-            this.planService.setPlanFileCache(null);
-        }
-        this.planService.setChosenPlan(null);
-    }
-
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-
-    setupMenuItems() {
-        this.menuItems = [
-            { label: "Locations", url: "/localisation" },
-            {
-                label: this.currentSpace.name,
-                url: `/localisation/${this.currentSpace.id}`,
-            },
-            {
-                label: "Plans",
-                url: `/localisation/${this.currentSpace.id}/plans`,
-            },
-        ];
-    }
-
-    onGoBack() { }
-
-    async onPlanClick(plan?: Plan) {
-        if (plan) this.planService.setChosenPlan(plan);
-        this.chosenPlanIsPdf = plan.annexe.includes("pdf");
-        if (!this.chosenPlanIsPdf) {
-            setTimeout(() => {
-                this.configureCanvas().then(() => {
-                    this.panzoom = panzoom(this.canvas, {
-                        bounds: true,
-                        boundsPadding: 0,
-                        maxZoom: 3.5,
-                        minZoom: 0.1,
-                        initialZoom: 0.5,
-                    });
-                });
-            }, 500);
-        }
-    }
-
-    async configureCanvas() {
-        this.uploadingPlan = true;
-        const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
-        const image = await getMetaForImage(this.getChoosenPlan().filepath);
-        canvas.width = image.width;
-        canvas.height = image.height;
-        this.canvas = canvas;
-        this.drawImage(this.getChoosenPlan().filepath);
-        this.uploadingPlan = false;
-    }
-
-    drawImage(url: string, x = 0, y = 0) {
-        const image = new Image();
-        const context = this.canvas.getContext("2d");
-        const imageWidth = this.canvas.width;
-        const imageHeight = this.canvas.height;
-        image.addEventListener("load", () => {
-            context.drawImage(
-                image,
-                0,
-                0,
-                image.width,
-                image.height,
-                x,
-                y,
-                imageWidth,
-                imageHeight,
-            );
-        });
-        image.src = url;
-        // image.crossOrigin = "*"; //need to download as png,
-        // BUT: https://stackoverflow.com/questions/49503171/the-image-tag-with-crossorigin-anonymous-cant-load-success-from-s3
-    }
-
-    async getPlans() {
-        this.loading = true;
-        this.currentSpace = await this.spaceService.getSpace(this.spaceID);
-        this.setupMenuItems();
-
-        this.zones = this.currentSpace.zones.items;
-        this.plans = await this.planService.getSingedPlansForSpace(this.spaceID);
-        this.loading = false;
-        if (this.plans.length === 1) {
-            this.onPlanClick(this.plans[0]);
-        }
-    }
-
-    getChoosenPlan() {
-        return this.planService.getChosenPlan();
-    }
-
-    removeImage() {
-        const context = this.canvas.getContext("2d");
-        context.clearRect(0, 0, 4096, 4096);
-    }
-
-    /**
-     *
-     */
-    onCalibrateClick() {
-        if (this.getChoosenPlan()) {
-            this.router.navigate(
-                ["/dashboard/localisation", this.spaceID, "plan-calibration"],
-                { queryParams: { spaceID: this.spaceID } },
-            );
-        }
-    }
-
-    /**
-     *
-     */
-    onEditClick() {
-        if (this.getChoosenPlan()) {
-            this.router.navigate(
-                ["/dashboard/localisation", this.spaceID, "plan-edit"],
-                { queryParams: { spaceID: this.spaceID } },
-            );
-        }
-    }
-
-    onUploadClick() {
-        const inputFile = document.querySelector(
-            "#upload-file",
-        ) as HTMLInputElement;
-        inputFile.click();
-    }
-
-    addPlan(target: EventTarget) {
-        this.fileToUpload = (target as HTMLInputElement).files[0];
-        this.planForm = this.fb.group({
-            name: [this.fileToUpload.name, [Validators.required]],
-            zoneID: [null, [Validators.required]],
-            spaceID: this.spaceID,
-            isModified: false,
-            calibration: "",
-        });
-    }
-
-    addPlanFromCache(file: File, plan: Plan) {
-        this.fileToUpload = file;
-        this.planForm = this.fb.group({
-            name: [this.fileToUpload.name, [Validators.required]],
-            zoneID: [plan ? plan.zoneID : null, [Validators.required]],
-            spaceID: this.spaceID,
-            isModified: !!plan,
-            calibration:
-                plan && plan.isModified && plan.calibration
-                    ? plan.calibration
-                    : "",
-        });
-    }
-
-    async onSavePlan() {
-        const formValue = this.planForm.value as Plan;
-        formValue.isCurrentForZone = this.isCurrentPlanForZone;
-        const createdPlan = await this.planService.createPlanWithAnnexe(
-            formValue,
-            this.fileToUpload,
-        );
-        const filepath = await getSignedFile(createdPlan.annexe);
-        if (filepath) {
-            createdPlan.filepath = filepath;
-        }
-        if (formValue.isCurrentForZone) {
-            // set all other plans to not current
-            this.planService.setAllPlansForZoneNotCurrent(
-                createdPlan.zoneID,
-                createdPlan.id,
-            );
-        }
-        this.plans.push(createdPlan);
-        this.planForm = null;
-        this.fileToUpload = null;
-    }
-
-    onCancelUpload() {
-        this.fileToUpload = null;
-        this.planForm = null;
-    }
-
-    async onCurrentPlanClick() {
-        await this.planService.updatePlan({
-            id: this.getChoosenPlan().id,
-            isCurrentForZone: this.getChoosenPlan().isCurrentForZone,
-        });
-        if (this.getChoosenPlan().isCurrentForZone) {
-            this.planService.setAllPlansForZoneNotCurrent(
-                this.getChoosenPlan().zoneID,
-                this.getChoosenPlan().id,
-            );
-        }
-    }
-
-    async onDownloadClick() {
-        const signedFile = await downloadFileAsObject(
-            this.getChoosenPlan().annexe,
-        );
-        if (signedFile) {
-            // @ts-ignore
-            downloadBlob(signedFile.Body, this.getChoosenPlan().name);
-        }
-    }
-
-    async onDownloadAsPng() {
-        const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
-        canvas.toBlob(function (blob) {
-            downloadBlob(blob, "plan-as-png.png");
-        });
-    }
-
-    async onRemoveClick() {
-        const message = this.translate.instant("confirm.deletePlan");
-        if (window.confirm(message)) {
-            await this.planService.deletePlan(this.getChoosenPlan());
-            this.removeImage();
-            this.planService.setChosenPlan(null);
-            this.getPlans();
-        }
-    }
-}

package/src/lib/components/tab-navigation/tab-navigation.component.html

@@ -1,7 +0,0 @@
-<span class="menu">
-    <span *ngFor="let item of menuItems; let index = index;">
-        <span class="item" [ngClass]="{'current':index === menuItems.length - 1}"
-            (click)="onClick(item.url,item.back, index)">{{item.label | translate}}</span> <span
-            *ngIf="index !== menuItems.length - 1" class="separator">></span>
-    </span>
-</span>

package/src/lib/components/tab-navigation/tab-navigation.component.scss

@@ -1,27 +0,0 @@
-.item {
-  font-size: 1.35em;
-  color: var(--smarterplan-primary);
-  cursor: pointer;
-}
-
-.current{
-    color: var(--smarterplan-primary) !important;
-    cursor: default !important;
-    text-decoration: none !important;
-}
-
-.separator{
-    font-size: 1.4em;
-    margin-left: 10px;
-    margin-right: 10px;
-    color: var(--smarterplan-primary);
-}
-
-.item:hover {
-  text-decoration: underline;
-}
-
-.menu {
-  margin-top: 15px;
-  margin-bottom: 20px;
-}

package/src/lib/components/tab-navigation/tab-navigation.component.spec.ts

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

package/src/lib/components/tab-navigation/tab-navigation.component.ts

@@ -1,35 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Router } from '@angular/router';
-import { MenuItem } from '@smarterplan/ngx-smarterplan-core';
-
-@Component({
-    selector: 'lib-tab-navigation',
-    templateUrl: './tab-navigation.component.html',
-    styleUrls: ['./tab-navigation.component.scss']
-})
-export class TabNavigationComponent {
-
-    @Output() onGoBack = new EventEmitter<void>();
-
-    @Input() menuItems: MenuItem[] = [];
-
-    constructor(private router: Router) { }
-
-    onClick(url: string, parameter: any, index: number) {
-        if (index === this.menuItems.length - 1) {
-            return;
-        }
-        if (url) {
-            const newURL = `/dashboard${url}`;
-            if (this.router.url !== newURL) {
-                console.log('new url', newURL);
-                this.router.navigate([newURL]);
-            } else {
-                this.onGoBack.emit(parameter);
-            }
-        } else {
-            this.onGoBack.emit(parameter);
-        }
-    }
-
-}

package/src/lib/components/visits/visits.component.html

@@ -1,134 +0,0 @@
-<div class="container-fluid" class="dashboard-tab">
-    <div class="m-3">
-        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)="onGoBack()"></lib-tab-navigation>
-    </div>
-
-    <div class="row main-form-container">
-        <div class="col-md-6 form-container">
-            <ul class="list-group list-group-flush" *ngIf="!visitForm">
-                <li class="list-group-item list-group-item-action" *ngFor="let visit of visits; index as index">
-                    <div class="d-flex justify-content-between align-items-center" (click)="onToggleDetail(index)">
-                        {{visit.name ? visit.name : visit.model3d }}
-                        <lib-chevron [conditionShowing]="index==visitIndexDetails"></lib-chevron>
-                    </div>
-                    <div *ngIf="index==visitIndexDetails">
-                        <ul class="list-group list-group-flush">
-                            <li class="list-group-item bg-transparent">{{'Name' | translate}} : {{ visit.name ?
-                                visit.name : "Not provided" | translate}}</li>
-                            <li class="list-group-item bg-transparent">{{'3D Model' | translate}} : {{ visit.model3d }}
-                            </li>
-                            <li class="list-group-item bg-transparent">{{'Surface' | translate}}, m<sup>2</sup>: {{
-                                visit.surface ?
-                                visit.surface : 'Not provided' | translate}}</li>
-                            <li class="list-group-item bg-transparent">{{'Viewer' | translate}} : {{ visit.viewer }}
-                            </li>
-                            <li class="list-group-item bg-transparent">{{'Date of capture' | translate}} : {{
-                                visit.takenAt | timeDateString | async}}
-                            <li class="list-group-item bg-transparent">{{'Images imported' | translate}} : {{
-                                visit.nmbImagesImported }}
-                            </li>
-                        </ul>
-                        
-                        <lib-loader *ngIf="isProcessing"></lib-loader>
-                        <button type="button" class="btn btn-outline-primary rounded-pill me-2" (click)="onImport(visit)" [disabled]="isProcessing">{{'Import images' |
-                            translate}}</button>
-                        <button type="button" class="btn btn-outline-primary rounded-pill me-2" [disabled]="isProcessing"
-                            (click)="onEdit(visit)">{{'Edit' | translate}}</button>
-                        <button type="button" class="btn btn-outline-primary rounded-pill" [disabled]="isProcessing"
-                            (click)="onDelete(visit)">{{'Delete' | translate}}</button>
-                    </div>
-                </li>
-            </ul>
-            <div *ngIf="visitForm">
-                <form (ngSubmit)="onSubmitVisit()" [formGroup]="visitForm">
-                    <div class="mb-3 row">
-                        <label class="col-sm-2 col-form-label">{{'Name' | translate}}</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" formControlName="name">
-                        </div>
-                    </div>
-                    <div class="mb-3 row">
-                        <label class="col-sm-2 col-form-label">{{'Reference 3D model' | translate}} *</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" [readonly]="isEditing"
-                                [class.is-invalid]="model3D.invalid && visitSubmitted" required
-                                formControlName="model3D">
-                            <div class="invalid-feedback">
-                                <ngb-alert data-testid="new-location-name-invalid" [dismissible]="false" type="danger" 
-                                *ngIf="validatorsService.isControlError(visitForm.controls['name']) 
-                                    ||  isFormError(visitForm.controls['name'])">
-                                      {{validatorsService.getError(visitForm.controls['name']) | translate}}
-                                </ngb-alert>
-                            </div>
-                            <div *ngIf="isEditing" class="text-danger">
-                                {{'Cannot change 3D model reference. Please add new model.' | translate}}
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="mb-3 row">
-                        <label class="col-sm-2 col-form-label">{{'Viewer' | translate}}</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" formControlName="viewer">
-                        </div>
-                    </div>
-
-                    <div class="mb-3 row">
-                        <label class="col-sm-2 col-form-label">{{'Surface' | translate}}</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" formControlName="surface">
-                        </div>
-                    </div>
-
-                    <div class="mb-3 row">
-                        <label class="col-sm-2 col-form-label">{{'Capture Date' | translate}}</label>
-                        <div class="input-group">
-                            <input class="form-control" placeholder="dd/mm/yyyy" [(ngModel)]="captureDate" ngbDatepicker
-                                #d1="ngbDatepicker" [ngModelOptions]="{standalone: true}">
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-secondary calendar" (click)="d1.toggle()"
-                                    type="button"></button>
-                            </div>
-                        </div>
-                    </div>
-                    <button type="submit" class="btn btn-outline-primary rounded-pill me-2">{{'Save' |
-                        translate}}</button>
-                    <button type="button" (click)="onCancel()" class="btn btn-outline-primary rounded-pill">{{'Cancel' |
-                        translate}}</button>
-                    <div class="invalid-feedback" *ngIf="errorForm">
-                            <ngb-alert data-testid="new-location-form-invalid" [dismissible]="false" type="danger">
-                              {{'errorForm.infoBtn' |translate}}
-                      
-                            </ngb-alert>
-                    </div>
-                </form>
-            </div>
-            <div *ngIf="!visitForm">
-                <button class="btn btn-outline-primary rounded-pill" (click)="onAddVisit()">{{'Add 3D visit' |
-                    translate}}</button>
-            </div>
-        </div>
-        <div id="viewer-frame" style="width: 100%; aspect-ratio: 2/1;"></div>
-    </div>
-    <ng-template #content let-modal>
-        <div class="modal-header">
-            <h4 class="modal-title" id="modal-basic-title">{{'Importing Data' | translate}}</h4>
-            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            {{'Please do not leave or refresh this page...' | translate}}
-            <div *ngIf="totalImages != 0">Imported {{imagesProcessed}} out of {{totalImages}} images.</div>
-            <div class="d-flex justify-content-center">
-                <div class="spinner-border" role="status">
-                    <span class="visually-hidden">{{'Loading' | translate}}...</span>
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-outline-dark" [disabled]="!canCancelImport"
-                (click)="modal.close('Cancel click')">{{'Cancel import of images' | translate}}</button>
-        </div>
-    </ng-template>
-</div>

package/src/lib/components/visits/visits.component.scss

@@ -1,24 +0,0 @@
-.col-form-label {
-  width: 180px;
-  margin-bottom: 1rem;
-}
-
-.btn-outline-primary {
-  width: 200px;
-  margin-right: 1rem;
-}
-.input-group {
-  width: 83%;
-  height: fit-content;
-}
-.main-form-container {
-  width: 60vw;
-  display: flex;
-  flex-direction: column;
-  @media screen and (max-width: 765px) {
-    width: 90vw;
-  } 
-  .form-container {
-    width: 100%;
-  }
-}

package/src/lib/components/visits/visits.component.spec.ts

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