@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

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

@@ -1,186 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
-import { LevelStatus, Space, SpaceService, BaseUserService, ViewerService, NavigationService, NavigatorService, enumToArray, Visit, MenuItem, SearchObjectType } from '@smarterplan/ngx-smarterplan-core';
-import { Subscription } from 'rxjs';
-
-@Component({
-    selector: 'lib-locations',
-    templateUrl: './locations.component.html',
-    styleUrls: ['./locations.component.scss']
-})
-export class LocationsComponent implements OnInit {
-
-    createForm: FormGroup;
-
-    levels: Array<LevelStatus>;
-
-    imageToUpload: File;
-
-    isAdding = false;
-
-    filteredLocations: Space[] = [];
-
-    isManager = false;
-
-    isMuseumUser = true;
-
-    locations: Space[] = [];
-
-    menuItems: MenuItem[] = [];
-
-    userSubcription: Subscription;
-
-    locationIDSubscription: Subscription;
-
-    /** Last filtered Locations, used when we go back on all locations from the search bar location */
-    lastFiltredLocations: Space[] = [];
-
-    constructor(
-        private spaceService: SpaceService,
-        private router: Router,
-        private userService: BaseUserService,
-        private viewerService: ViewerService,
-        private navigationService: NavigationService,
-        private navigatorService: NavigatorService,
-    ) {
-        this.levels = enumToArray(LevelStatus);
-        this.userSubcription = this.userService.isChanged.subscribe((isConnected) => {
-            if (isConnected) {
-                this.refresh();
-            }
-        });
-
-        this.locationIDSubscription =
-            this.navigatorService.locationIDChange.subscribe((id) => {
-                this.changeSelectedLocation(id);
-                this.setupMenuItems();
-            });
-    }
-
-    async ngOnInit() {
-        if (this.userService.cu) {
-            this.resetList();
-            this.updateUserRights();
-        }
-        this.setupMenuItems();
-    }
-
-
-    findSpaceById(id: string): Space {
-        return this.locations.find((loc) => loc.id === id);
-    }
-
-    /**
-     * Update when we change the selected location in filter (search bar)
-     * @param id for a location, if null display all last filtred location
-     */
-    changeSelectedLocation(id?: string) {
-        const space = id ? this.findSpaceById(id) : null;
-        this.filteredLocations = space ? [space] : this.lastFiltredLocations; // New selected space or last filtered location
-    }
-
-    refresh() {
-        this.updateUserRights();
-        this.resetList();
-    }
-
-
-    ngOnDestroy() {
-        this.userSubcription.unsubscribe();
-        this.locationIDSubscription.unsubscribe();
-    }
-
-    setupMenuItems() {
-        this.menuItems = [{ label: "All Locations", url: "/localisation" }];
-        if (this.isAdding) {
-            this.menuItems.push({ label: "New" });
-        }
-        if (this.filteredLocations.length === 1) {
-            const selectedLoc = this.filteredLocations[0];
-            this.menuItems.push({ label: selectedLoc.name });
-        }
-    }
-
-    updateUserRights() {
-        this.isManager = this.userService.hasManagerRoleInAnyMission();
-        this.isMuseumUser = this.userService.hasOnlyMuseumRole();
-    }
-
-    isManagerForSpace(spaceID: string): boolean {
-        return (
-            this.userService.isManager(spaceID) ||
-            this.userService.isGuide(spaceID)
-        );
-    }
-
-    async resetList() {
-        this.locations = await this.spaceService.getLocationsForCurrentUser();
-        this.filteredLocations = this.locations;
-        this.lastFiltredLocations = this.locations;
-        this.isAdding = false;
-        this.changeSelectedLocation(
-            this.navigatorService.currentNavBarLocationID,
-        ); // Set for the current selected location
-        this.setupMenuItems();
-    }
-
-    onAddLocation() {
-        this.isAdding = true;
-        this.setupMenuItems();
-    }
-
-    handleImageInput(files: FileList) {
-        this.imageToUpload = files.item(0);
-    }
-
-    onFormChange(event: any) {
-        this.navigatorService.locationIDChange.next(
-            null,
-        ); /** Remove selected location */
-        this.isAdding = false;
-        if (event) {
-            this.resetList();
-        }
-        this.setupMenuItems();
-    }
-
-    async onVisitClick(loc: Space, visit: Visit) {
-        if (!this.userService.userHasAccessToAllZonesInSpace(loc.id)) {
-            // get allowed sweep for the user
-            const allowedSweeps =
-                await this.navigationService.getAllowedSweepsIDsForUserInSpace(
-                    loc.id,
-                );
-            const firstSweep = allowedSweeps[0];
-            this.viewerService.setSweepToMove(firstSweep);
-        }
-        if (this.userService.isGuide(loc.id)) {
-            this.router.navigate(["museum", loc.id]);
-        } else {
-            this.router.navigate(["visit", loc.id], {
-                queryParams: { model3D: visit.model3d },
-            });
-        }
-    }
-
-    applyResultsSearchBar(results: Space[]) {
-        this.filteredLocations = results || this.locations;
-        this.lastFiltredLocations = this.filteredLocations;
-        this.navigatorService.locationIDChange.next(null); // When we search with keyword, we would like to search on all locations
-    }
-
-    getSearchType(): SearchObjectType {
-        return SearchObjectType.LOCATION;
-    }
-
-    getStringNoSpace(data): string {
-        return data.replace(/\s/g, '');
-    }
-
-    onDetailViewClick(spaceID: string) {
-        this.navigatorService.locationIDChange.next(spaceID); // Send update for the location filter bar
-        this.router.navigate(["dashboard/localisation", spaceID]);
-    }
-
-}

package/src/lib/components/locations/map/map-popup/map-popup.component.html

@@ -1,11 +0,0 @@
-<div id="map-popup">
-    <div class="map-popup-header" (click)="onClickVisitFirst()" [style.cursor]="'pointer'">
-        <img [src]="space.annexes" />
-    </div>
-    <div class="map-popup-details">
-    <h1 (click)="onClickVisitFirst()" [style.cursor]="'pointer'">{{space.name}}</h1>
-    <span class="map-popup-address">{{space.addresses}}</span>
-    <span *ngFor="let visit of space.visits" class="map-popup-visit" (click)="onVisitClick(visit)"
-                  [style.cursor]="'pointer'">➤ {{ visit.name ? visit.name : space.name}}</span>
-    </div>
-</div>

package/src/lib/components/locations/map/map-popup/map-popup.component.scss

@@ -1,51 +0,0 @@
-/** Leaflet Popup*/
-
-.map-popup-header {
-  height: 120px;
-  overflow: hidden;
-
-  border-top-right-radius: 20px;
-  border-top-left-radius: 20px;
-}
-.map-popup-header {
-  img {
-    width: 100%;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.map-popup-details {
-  padding: 5px 10px 10px 10px;
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  background-color: white;
-  color: black;
-}
-
-.map-popup-details {
-  display: flex;
-  flex-direction: column;
-
-  h1 {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 0px;
-    color: var(--smarterplan-primary);
-  }
-}
-
-.map-popup-address {
-  align-self: flex-end;
-  margin-bottom: 10px;
-}
-
-.map-popup-visit {
-  color: var(--smarterplan-primary);
-  font-size: 1.15rem;
-}
-
-.map-popup-visit:hover {
-  color: var(--smarterplan-primary);
-}

package/src/lib/components/locations/map/map-popup/map-popup.component.spec.ts

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

package/src/lib/components/locations/map/map-popup/map-popup.component.ts

@@ -1,79 +0,0 @@
-import { Component, NgZone, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Marker } from 'leaflet';
-import { Space, Visit } from '@smarterplan/ngx-smarterplan-core';
-
-@Component({
-  selector: 'lib-map-popup',
-  templateUrl: './map-popup.component.html',
-  styleUrls: ['./map-popup.component.scss']
-})
-export class MapPopupComponent implements OnInit {
-
-    space: Space;
-
-    marker: Marker;
-
-    popuparea: HTMLElement;
-
-    isOnPopup = false;
-
-    isMuseumUser = true;
-
-    constructor(private router: Router, private ngZone: NgZone) { }
-
-    ngOnInit() {
-        this.marker.on("click", () => this.onClickVisitFirst());
-
-        this.marker.on("mouseover", () => {
-            this.isOnPopup = true;
-            if (!this.marker.isPopupOpen()) {
-                this.openPopup();
-            }
-        });
-    }
-
-    openPopup() {
-        this.marker.openPopup();
-
-        this.isOnPopup = false;
-        this.popuparea = document.querySelector(".leaflet-popup");
-
-        this.popuparea.addEventListener("mouseleave", () => {
-            this.closePopup();
-        });
-        this.popuparea.addEventListener("mouseover", () => {
-            this.isOnPopup = true;
-        });
-        this.marker.on("mouseout", () => {
-            this.closePopup();
-        });
-    }
-
-    closePopup() {
-        this.isOnPopup = false;
-        /** We want to wait to avoid glitch */
-        setTimeout(() => {
-            if (!this.isOnPopup) {
-                this.marker.closePopup();
-            }
-        }, 100);
-    }
-
-    onClickVisitFirst() {
-        if (this.space.visits.length === 0) {
-            console.log("No space to visit !");
-        } else {
-            this.onVisitClick(this.space.visits[0]);
-        }
-    }
-
-    async onVisitClick(visit: Visit) {
-        this.ngZone.run(() => {
-            this.router.navigate(["visit", this.space.id], {
-                queryParams: { model3D: visit.model3d },
-            });
-        });
-    }
-
-}

package/src/lib/components/locations/map/map.component.html

@@ -1,2 +0,0 @@
-<div [leafletLayers]="layers" [leafletOptions]="options" (leafletMapReady)="onMapReady($event)" id="map" leaflet
-    style="height: 500px; margin-top: 30px; z-index: 195"></div>

package/src/lib/components/locations/map/map.component.spec.ts

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

package/src/lib/components/locations/map/map.component.ts

@@ -1,111 +0,0 @@
-import { Component, ComponentFactoryResolver, Injector, Input, NgZone, OnChanges, SimpleChanges, ViewContainerRef } from '@angular/core';
-import { Space } from '@smarterplan/ngx-smarterplan-core';
-import {
-  latLng,
-  marker,
-  tileLayer,
-  Map,
-  latLngBounds,
-  point,
-  Marker,
-  icon,
-} from "leaflet";
-import { MapPopupComponent } from './map-popup/map-popup.component';
-import { Router } from '@angular/router';
-
-
-const iconRetinaUrl = "assets/marker-icon-2x.png";
-const iconUrl = "assets/marker-icon.png";
-const shadowUrl = "assets/marker-shadow.png";
-const iconDefault = icon({
-    iconRetinaUrl,
-    iconUrl,
-    shadowUrl,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    tooltipAnchor: [16, -28],
-    shadowSize: [41, 41],
-});
-Marker.prototype.options.icon = iconDefault;
-@Component({
-  selector: 'lib-map',
-  templateUrl: './map.component.html',
-  styleUrls: ['./map.component.scss']
-})
-export class MapComponent implements OnChanges {
-
-  constructor(private componentFactoryResolver: ComponentFactoryResolver,
-    private injector: Injector,) { }
-
-  @Input() spaces: Space[];
-
-    options = {
-        layers: [
-            tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-                maxZoom: 18,
-                attribution: "...",
-            }),
-        ],
-        zoom: 5.5,
-        center: latLng(47.06394, 2.77736),
-    };
-
-    layers: any[] = [];
-
-    map: any;
-
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes.spaces) {
-            const nm = [];
-            const bd = [];
-            if (!changes.spaces.currentValue) {
-                return;
-            }
-            // Filtering out spaces without lat/longitudes
-            for (const s of changes.spaces.currentValue as Space[]) {
-                if (s.latitude === null || s.longitude === null) {
-                    console.log(
-                        `${s.name} has not coordinates for ${s.addresses}`,
-                    );
-                    continue;
-                }
-                // We use the popup system from leaflet, as it packs a few improvements
-                // on using bootstrap: autoclose other popups, closing option.
-                const m = marker([s.latitude, s.longitude]);
-
-                m.bindPopup(this.createPopupComponent(s, m));
-
-                nm.push(m);
-                bd.push(latLng(s.latitude, s.longitude));
-            }
-            // Note how we set the layers in one assignment, in order to have leaflet
-            // detects the change correctly
-            // We also set the bounds afterward, for the map to be properly zoomed and
-            // centered
-            this.layers = nm;
-            if (this.map && bd.length > 0) {
-                this.map.fitBounds(latLngBounds(bd), {
-                    padding: point(48, 48),
-                    maxZoom: 12,
-                    animate: true,
-                });
-            }
-        }
-    }
-
-    onMapReady(map: Map) {
-        this.map = map;
-    }
-
-    createPopupComponent(space: Space, marker: Marker) {
-        const comp = this.componentFactoryResolver
-        .resolveComponentFactory(MapPopupComponent)
-        .create(this.injector);
-        comp.instance.space = space;
-        comp.instance.marker = marker;
-        comp.changeDetectorRef.detectChanges();
-        return comp.location.nativeElement;
-    }
-
-}

package/src/lib/components/plan-legend/plan-legend.component.html

@@ -1,9 +0,0 @@
-<div class="mt-3 ms-3" class="legendContainer">
-    <h5>{{"legend.title" | translate}}</h5>
-    <div class="legendBox">
-        <div class="legendRow" *ngFor="let elemnt of buttonsToRender">
-            <button class="legendIcon" [ngStyle] = "{'background-image': elemnt.url}"></button>
-            <span>{{elemnt.text}}</span>
-        </div>
-    </div>
-</div>

package/src/lib/components/plan-legend/plan-legend.component.scss

@@ -1,38 +0,0 @@
-.legendContainer {
-    padding: 1rem;
-    border: solid var(--smarterplan-primary) 2px;
-    border-radius: 6px;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    background: #FFF;
-    .legendBox {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-        .legendRow {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            .legendIcon {
-                width: 2.5rem;
-                height: 2.5rem;
-                background-repeat: no-repeat;
-                background-size: cover;
-                border: none;
-                background-color: transparent;
-                margin-right: 0.5rem;
-                cursor: auto;
-            }
-            span {
-                margin-right: 1rem;
-                cursor: auto;
-            }
-            h5 {
-                cursor: auto;
-            }
-        }
-    }
-}
-
-

package/src/lib/components/plan-legend/plan-legend.component.spec.ts

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

package/src/lib/components/plan-legend/plan-legend.component.ts

@@ -1,50 +0,0 @@
-import { Component, OnInit, Input, OnChanges  } from '@angular/core';
-import { TranslateService } from "@ngx-translate/core";
-
-@Component({
-  selector: 'lib-plan-legend',
-  templateUrl: './plan-legend.component.html',
-  styleUrls: ['./plan-legend.component.scss']
-})
-export class PlanLegendComponent implements OnInit {
-  @Input() isAudioZone?:boolean = false;
-
-  buttonsToRender = [];
-
-  colorToText = {};
-
-  constructor(
-    private translate: TranslateService,
-  ) {}
-
-  async ngOnInit() {
-    this.render()
-  }
-
-  async render() {
-    this.buttonsToRender = [
-      {
-        url: `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`,
-        text: this.translate.instant("legend.green")
-      },
-      {
-        url: `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`,
-        text: this.translate.instant("legend.red")
-      }
-    ]
-    if (this.isAudioZone) {
-        let audioPoints = [{
-          url: `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=black&height=17&width=17")`,
-          text: this.translate.instant("legend.black")
-        },
-        {
-          url: `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`,
-          text: this.translate.instant("legend.orange")
-        }]
-        this.buttonsToRender = this.buttonsToRender.concat(audioPoints)
-    }
-  }
-
-  //styleButton(element, SweepState.DISABLED);
-
-}