@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

package/src/lib/components/plans/edit-plan/edit-plan.component.spec.ts

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

package/src/lib/components/plans/edit-plan/edit-plan.component.ts

@@ -1,421 +0,0 @@
-import { Component, HostListener, NgZone, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateService } from '@ngx-translate/core';
-import { getDocument } from "pdfjs-dist";
-import { PDFDocumentProxy } from "ng2-pdf-viewer";
-import { Zone, Plan, Space, MenuItem, PlanService, ZoneService, VisitService, SpaceService, sortAlphabeticallyOnName, downloadFileAsObject } from '@smarterplan/ngx-smarterplan-core';
-
-@Component({
-    selector: 'lib-edit-plan',
-    templateUrl: './edit-plan.component.html',
-    styleUrls: ['./edit-plan.component.scss']
-})
-export class EditPlanComponent implements OnInit {
-
-    @ViewChild("dialog") dialog!: any;
-
-    @ViewChild("dialogZone") dialogZone!: any;
-
-    @ViewChild("preparing") loadingModal: any;
-
-    spaceID: string;
-
-    chosenPlan: Plan;
-
-    editedPlan: Plan;
-
-    loading: boolean = false;
-
-    svgEditor;
-
-    svgEditorIframe;
-
-    navigations: string[];
-
-    zones: Zone[];
-
-    isNewZone: boolean = false;
-
-    newZoneData;
-
-    editorUrl;
-
-    editedZone: Zone;
-
-    images360;
-
-
-    /**
-     * Options for svgEditor
-     */
-    private config: any = {
-        noStorageOnLoad: true,
-        forceStorage: true,
-        // imgPath: "/assets/editor/images/",
-        // extPath: "/assets/editor/extensions/",
-        // langPath: "/assets/editor/locale/",
-        // canvgPath: "/assets/editor/canvg/",
-        // jspdfPath: "/assets/editor/jspdf/",
-        // jGraduatePath: "/assets/editor/jgraduate/images/",
-        // extIconsPath: "/assets/editor/extensions/",
-        // stylesheets: [
-        //     "/assets/editor/jgraduate/css/jGraduate.css",
-        //     "/assets/editor/spinbtn/jQuery.SpinButton.css",
-        //     "/assets/editor/jgraduate/css/jPicker.css",
-        //     "/assets/editor/svg-editor.css",
-        // ],
-        dimensions: [10000, 10000],
-        showlayers: true,
-        noDefaultExtensions: true,
-        basePath: "/assets/editor/",
-        customExportImage: true,
-        extensions: [
-            "ext-connector",
-            // "ext-eyedropper",
-            // "ext-grid",
-            // "ext-markers",
-            // "ext-overview_window",
-            // "ext-spi-library",
-            // "ext-spi-icon",
-            "ext-sp-zone",
-            // "ext-arrows",
-            // "ext-sp-css",
-            // "ext-placemark",
-        ],
-    };
-
-    currentSpace: Space;
-
-    menuItems: MenuItem[] = [];
-
-    constructor(
-        private planService: PlanService,
-        private route: ActivatedRoute,
-        private router: Router,
-        private modalService: NgbModal,
-        private zoneService: ZoneService,
-        private visitService: VisitService,
-        private spaceService: SpaceService,
-        private translate: TranslateService,
-        private ngZone: NgZone,
-    ) {
-        this.chosenPlan = this.planService.getChosenPlan();
-    }
-
-    async ngOnInit() {
-        this.editorUrl = "/assets/editor/main.html";
-        this.spaceID = this.route.snapshot.queryParams.spaceID;
-        this.currentSpace = await this.spaceService.getSpace(this.spaceID);
-        this.setupMenuItems();
-        if (this.spaceID && !this.planService.getChosenPlan()) {
-            this.router.navigate([
-                "/dashboard/localisation",
-                this.spaceID,
-                "plans",
-            ]);
-        } else if (!this.spaceID && !this.planService.getChosenPlan()) {
-            this.router.navigate(["/dashboard/localisation"]);
-        }
-    }
-
-    setupMenuItems() {
-        this.menuItems = [
-            { label: "Locations", url: "/localisation" },
-            {
-                label: this.currentSpace.name,
-                url: `/localisation/${this.spaceID}`,
-            },
-            {
-                label: "Plans",
-                url: `/localisation/${this.currentSpace.id}/plans`,
-            },
-            {
-                label: "Edit",
-                url: `/localisation/${this.currentSpace.id}/plan-edit?spaceID=${this.currentSpace.id}`,
-            },
-        ];
-    }
-
-    @HostListener("window:message", ["$event"])
-    async switchAction(event) {
-        if (event.origin === window.location.origin) {
-            switch (event.data.message) {
-                case "save":
-                    this.onSave(event.data.redirect);
-                    break;
-                case "close":
-                    this.onCancel();
-                    break;
-                case "new-zone":
-                    const modalReference = this.modalService.open(
-                        this.loadingModal,
-                    );
-                    const svg = unescape(
-                        encodeURIComponent(
-                            this.svgEditor.svgCanvas.getSvgString(),
-                        ),
-                    );
-
-                    const base64 = `data:image/svg+xml;base64,${window.btoa(
-                        svg,
-                    )}`;
-                    const currentSpace = await this.spaceService.getSpace(
-                        this.spaceID,
-                    );
-
-                    this.images360 = await this.visitService.loadImagesForSpace(
-                        currentSpace,
-                    );
-
-                    this.editedPlan = { ...this.chosenPlan };
-                    this.editedPlan.filepath = base64;
-                    this.newZoneData = event.data.zoneData;
-                    if (this.newZoneData.elements.length === 0) {
-                        modalReference.close();
-                        alert(this.translate.instant("edition.no-zone"));
-                        break;
-                    }
-                    this.zones = await this.zoneService.getZonesBySpace(
-                        this.spaceID,
-                    );
-                    // this.zones = sortAlphabeticallyOnName(this.zones);
-                    // console.log("zones", this.zones);
-                    // this.editedZone = this.zones.find(
-                    //     (z) => z.name === this.newZoneData.name,
-                    // );
-                    this.resetNavigations();
-                    modalReference.close();
-                    this.modalService.open(this.dialogZone);
-
-                    break;
-
-                default:
-                    break;
-            }
-        }
-    }
-
-    async resetNavigations() {
-        this.navigations = [];
-        const defaultZone = this.zones.find((zone) => !zone.parentID);
-        if (defaultZone.sweepIDs.length > 0) {
-            this.navigations = defaultZone.sweepIDs;
-        }
-    }
-
-    async onLoad(svgEditor) {
-        if (svgEditor.contentWindow.SvgEditor) {
-            this.svgEditorIframe = svgEditor;
-            this.svgEditor = new svgEditor.contentWindow.SvgEditor();
-
-            await this.svgEditor.init();
-            await this.svgEditor.setConfig(this.config, {
-                allowInitialUserOverride: true,
-            });
-
-            if (this.chosenPlan && this.chosenPlan.extension === "svg") {
-                this.loadSvg();
-            }
-            if (this.chosenPlan && this.chosenPlan.extension === "pdf") {
-                this.loadPdf();
-            }
-            if (!this.chosenPlan.calibration || !this.chosenPlan.isModified) {
-                setTimeout(() => {
-                    this.svgEditorIframe.contentWindow.postMessage(
-                        { action: "disable-zone" },
-                        "*",
-                    );
-                }, 1000);
-            }
-
-            this.svgEditor.svgCanvas.setMode('ext-panning');
-            this.svgEditor.bottomPanel.changeZoom(50)
-        }
-    }
-
-    async onSave(redirect: boolean) {
-        const imgBlob = await new Blob(
-            [this.svgEditor.svgCanvas.getSvgString()],
-            {
-                type: "image/svg+xml",
-            },
-        );
-        const [name] = this.chosenPlan.name.split(".");
-        const imgFile: File = new File([imgBlob], `${name}-edited.svg`, {
-            type: "image/svg+xml",
-            lastModified: Date.now(),
-        });
-        this.planService.setPlanFileCache(imgFile);
-        if (this.chosenPlan.isModified) {
-            this.ngZone.run(() =>
-                this.modalService.open(this.dialog));
-        } else {
-            this.ngZone.run(() =>
-                this.router.navigate([
-                    "/dashboard/localisation",
-                    this.spaceID,
-                    "plans",
-                ]));
-        }
-    }
-
-    async updateSvg() {
-        const newUrl = await this.planService.updatePlanFile();
-        await this.planService.updatePlan({
-            id: this.chosenPlan.id,
-            annexe: newUrl,
-        });
-        this.planService.setPlanFileCache(null);
-        this.ngZone.run(() =>
-            this.router.navigate([
-                "/dashboard/localisation",
-                this.spaceID,
-                "plans",
-            ]));
-    }
-
-    async newSvg() {
-        this.ngZone.run(() =>
-            this.router.navigate([
-                "/dashboard/localisation",
-                this.spaceID,
-                "plans",
-            ]));
-    }
-
-    async onCancel() {
-        if (window.confirm(this.translate.instant("edition.cancel-alert"))) {
-            this.ngZone.run(() =>
-                this.router.navigate([
-                    "/dashboard/localisation",
-                    this.spaceID,
-                    "plans",
-                ]));
-            alert(this.translate.instant("edition.cancel"));
-        }
-    }
-
-    async loadSvg() {
-        const svgRequest: any = await downloadFileAsObject(
-            this.chosenPlan.annexe,
-        );
-        if (svgRequest) {
-            const svgBlob = await svgRequest.Body;
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                this.svgEditor.loadFromDataURI(reader.result);
-            };
-            reader.readAsDataURL(svgBlob);
-        }
-    }
-
-    async loadPdf() {
-        this.svgEditorIframe.contentWindow.postMessage(
-            { action: "disable-zone" },
-            "*",
-        );
-        const canvas = document.querySelector(
-            "#canvas4pdf",
-        ) as HTMLCanvasElement;
-        const context = canvas.getContext("2d") as CanvasRenderingContext2D;
-
-        const pdfjs = await import("pdfjs-dist/build/pdf");
-        const pdfjsWorker = await import("pdfjs-dist/build/pdf.worker.entry");
-
-        pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
-        const pdf: PDFDocumentProxy = await getDocument(
-            this.chosenPlan.filepath,
-        ).promise;
-        const page = await pdf.getPage(1);
-
-        const viewPortParameters = { scale: 1.5 };
-        const viewport = page.getViewport(viewPortParameters);
-        this.svgEditor.svgCanvas.setResolution(viewport.width, viewport.height);
-
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
-        const renderContext = {
-            canvasContext: context,
-            viewport,
-        };
-        const renderTask = page.render(renderContext).promise;
-        renderTask.then(() => {
-            const newImage = this.svgEditor.svgCanvas.addSVGElementFromJson({
-                element: "image",
-                attr: {
-                    x: 0,
-                    y: 0,
-                    width: viewport.width,
-                    height: viewport.height,
-                    id: this.svgEditor.svgCanvas.getNextId(),
-                    style: "pointer-events:inherit",
-                },
-            });
-            this.svgEditor.svgCanvas.setHref(
-                newImage,
-                canvas.toDataURL("image/png"),
-            );
-
-            this.svgEditor.svgCanvas.renameCurrentLayer(this.translate.instant("edition.plan-base"));
-            this.svgEditor.svgCanvas.createLayer(this.translate.instant("edition.personalization"));
-        });
-    }
-
-    async onLoadImg(img: any) {
-        this.svgEditorIframe.contentWindow.postMessage(
-            { action: "disable-zone" },
-            "*",
-        );
-        const imgRequest: any = await downloadFileAsObject(
-            this.chosenPlan.annexe,
-        );
-        if (imgRequest) {
-            const imgBlob = await imgRequest.Body;
-            const imgWidth = img.naturalWidth;
-            const imgHeight = img.naturalHeight;
-            // await this.svgEditor.setConfig({
-            //     dimensions: [imgWidth, imgHeight],
-            // });
-            this.svgEditor.svgCanvas.setResolution(imgWidth, imgHeight);
-
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                const newImage = this.svgEditor.svgCanvas.addSVGElementFromJson(
-                    {
-                        element: "image",
-                        attr: {
-                            x: 0,
-                            y: 0,
-                            width: imgWidth,
-                            height: imgHeight,
-                            id: this.svgEditor.svgCanvas.getNextId(),
-                            style: "pointer-events:inherit",
-                        },
-                    },
-                );
-                this.svgEditor.svgCanvas.setHref(newImage, reader.result);
-                this.svgEditor.svgCanvas.renameCurrentLayer(this.translate.instant("edition.plan-base"));
-                this.svgEditor.svgCanvas.createLayer(this.translate.instant("edition.personalization"));
-            };
-            reader.readAsDataURL(imgBlob);
-        }
-    }
-
-    onNewZone(event) {
-        this.isNewZone = false;
-        if (event) {
-            this.svgEditorIframe.contentWindow.postMessage(
-                { action: "rename-layer", name: event },
-                "*",
-            );
-        } else {
-            this.svgEditorIframe.contentWindow.postMessage(
-                { action: "cancel-layer" },
-                "*",
-            );
-        }
-    }
-
-}

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

@@ -1,102 +0,0 @@
-<div class="container-fluid" *ngIf="currentSpace" class="dashboard-tab">
-    <div class="m-3">
-        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)="onGoBack()"></lib-tab-navigation>
-    </div>
-    <div class="d-flex justify-content-center" *ngIf="loading">
-        <div class="spinner-border" role="status">
-            <span class="visually-hidden">Loading...</span>
-        </div>
-    </div>
-    <div class="mt-3" *ngIf="!plans && !loading">
-        <h4 style="font-weight: bold;">{{'No imported plans' | translate }}</h4>
-        <p>{{'For import from 3D visit: go Virtual Visits => Import Images' | translate}}</p>
-    </div>
-    <div class="row ms-1">
-        <div ngbDropdown class="d-inline-block me-3">
-            <button class="btn btn-label-file rounded-pill" id="dropdownBasic1" ngbDropdownToggle>{{getChoosenPlan() ?
-                getChoosenPlan().name: ('Choose Plan' | translate) }}</button>
-            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                <button ngbDropdownItem *ngFor="let plan of plans" (click)="onPlanClick(plan)">{{plan.name }}
-                </button>
-            </div>
-        </div>
-        <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
-            <button class="btn btn-label-file rounded-pill" id="dropdownManual" ngbDropdownToggle>{{'Choose action' |
-                translate}}</button>
-            <div ngbDropdownMenu aria-labelledby="dropdownManual">
-                <button (click)="onCalibrateClick()" ngbDropdownItem [disabled]="!getChoosenPlan()">{{'Calibrate' |
-                    translate}}</button>
-                <button (click)="onEditClick()" ngbDropdownItem [disabled]="!getChoosenPlan()">{{'Edit plan' |
-                    translate}}
-                </button>
-                <button (click)="onUploadClick()" ngbDropdownItem>{{'Upload new plan' | translate}}</button>
-                <button (click)="onDownloadClick()" ngbDropdownItem [disabled]="!getChoosenPlan()">{{'Download plan' |
-                    translate}}</button>
-                <button (click)="onRemoveClick()" ngbDropdownItem
-                    [disabled]="!getChoosenPlan() || getChoosenPlan().isImportedMatterport">{{'Delete plan' |
-                    translate}}</button>
-                <!-- <button (click)="onDownloadAsPng()" ngbDropdownItem [disabled]="!getChoosenPlan()">
-                    {{'Download plan as PNG' | translate}}</button> -->
-            </div>
-        </div>
-    </div>
-    <div class="row mt-3 ms-0">
-        <h4 *ngIf="fileToUpload">{{'New plan' | translate }}</h4>
-        <input class="hidden" type="file" id="upload-file" name="upload-file" accept="image/png, image/jpeg, .pdf, .svg"
-            ngf-max-size="6MB" (change)="addPlan($event.target)">
-    </div>
-    <div class="col-md-6 mt-3" *ngIf="planForm">
-        <form (ngSubmit)="onSavePlan()" [formGroup]="planForm">
-            <div class="mb-3 row">
-                <label class="col-sm-3">{{'Name' | translate}} </label>
-                <div class="col-sm-9">
-                    <input type="text" class="form-control" formControlName="name">
-                </div>
-            </div>
-            <div class="mb-3 row">
-                <label class="col-sm-3">{{'Zone' | translate}} </label>
-                <div class="col-sm-9">
-                    <select class="form-control" formControlName="zoneID">
-                        <option *ngFor="let zone of zones" [ngValue]="zone.id">
-                            {{ zone.name }}
-                        </option>
-                    </select>
-                </div>
-            </div>
-            <div class="mb-3 row">
-                <label class="col-sm-3">{{'Set as current plan for zone' | translate}}</label>
-                <div class="col-sm-3">
-                    <input type="checkbox" [(ngModel)]="isCurrentPlanForZone" [ngModelOptions]="{standalone: true}">
-                </div>
-            </div>
-            <button [disabled]="planForm.invalid" type='submit' class="btn btn-label-file rounded-pill">{{'Save' |
-                translate}}</button>
-            <button class="btn btn-label-file rounded-pill ms-3" type="button" (click)="onCancelUpload()">{{'Cancel' |
-                translate}}</button>
-        </form>
-    </div>
-    <ul class="col-md-6 list-group list-group-flush" *ngIf="getChoosenPlan()">
-        <li class="list-group-item bg-transparent">{{'Name' | translate }} : {{getChoosenPlan().name}} </li>
-        <li class="list-group-item bg-transparent"> {{'Plan is ' | translate }} :
-            {{getChoosenPlan().calibration ? ('Calibrated' | translate) : ('Not calibrated' | translate)}}</li>
-        <li class="list-group-item bg-transparent">{{'Attributed to zone ' | translate }} :
-            {{getChoosenPlan().zone ? getChoosenPlan().zone.name : 'None'}}</li>
-        <li class="list-group-item bg-transparent">{{'Is current plan for zone ' | translate }} :
-            <input type="checkbox" [(ngModel)]="getChoosenPlan().isCurrentForZone" (change)="onCurrentPlanClick()">
-        </li>
-
-    </ul>
-
-    <div class="row mt-4">
-        <div class="col-md-10">
-            <embed *ngIf="getChoosenPlan() && chosenPlanIsPdf" [src]="getChoosenPlan().filepath | safeUrl"
-                type="application/pdf" frameBorder="0" scrolling="auto" height="650px;" width="100%" />
-            <div *ngIf="!chosenPlanIsPdf" class="row" style="height: 500px; overflow: hidden;" id="canvasDiv">
-                <canvas id="canvas" width="4096px" height="4096px">
-                    <!-- <img *ngIf="chosenPlan" id="plan-image" [src]="chosenPlan.filepath" style="width: 100%;"> -->
-                </canvas>
-
-            </div>
-        </div>
-    </div>
-</div>

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

@@ -1,24 +0,0 @@
-.button-visit {
-    display: none;
-    height: 30px;
-    width: 30px;
-    position: absolute;
-    background: url('https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30') no-repeat scroll 0 0 transparent;
-    border: none;
-}
-
-#button-visit-left {
-    left: 350px;
-    top: 550px;    
-}
-
-#button-visit-right {
-    left: 500px;
-    top: 600px;    
-}
-
-.hidden {
-    visibility: hidden;
-    width: 1px;
-    height: 1px;
-  }

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

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