@situm/cordova 3.1.1 → 3.2.1

package/example/src/app/sdk/sdk.page.ts

@@ -0,0 +1,440 @@
+import { Component, NgZone } from '@angular/core';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonCard,
+  IonButton,
+  IonCardHeader,
+  IonCardContent,
+  IonCardTitle,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonIcon,
+  IonTextarea,
+  IonRow,
+  IonPicker,
+  IonThumbnail,
+  NavController,
+  Platform,
+} from '@ionic/angular/standalone';
+import { NgFor, NgIf } from '@angular/common';
+import { locate, cloudDownload, map } from 'ionicons/icons';
+import { addIcons } from 'ionicons';
+
+import { requestPermissions } from '../utils/request.permissions';
+import * as Constants from '../../constants';
+
+// Declare a cordova variable to avoid typescript errors
+declare let cordova: any;
+
+@Component({
+  selector: 'app-sdk',
+  templateUrl: 'sdk.page.html',
+  styleUrls: ['sdk.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonThumbnail,
+    IonContent,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    IonButton,
+    IonLabel,
+    IonItem,
+    IonList,
+    IonRow,
+    IonIcon,
+    IonTextarea,
+    IonPicker,
+    NgFor,
+    NgIf,
+  ],
+})
+export class SDKPage {
+  buildings: Array<any> | undefined;
+  currentBuilding: any | undefined;
+  pois: any | undefined;
+  currentPoi: any | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private navCtrl: NavController,
+    public platform: Platform
+  ) {
+    addIcons({ locate, cloudDownload, map });
+  }
+
+  ionViewDidEnter() {
+    // First of all, authenticate yourself in our SDK to be able to start positioning, retrieve data, ...
+    // Make sure you are authenticated before calling any other method of our SDK.
+    cordova.plugins.Situm.setApiKey(Constants.API_USER, Constants.API_KEY);
+
+    // Use the remote configuration of your situm account.
+    // With this flag activated, you can modify your location request without any code changes.
+    // See all the parameters you can modify in https://dashboard.situm.com/settings.
+    cordova.plugins.Situm.setUseRemoteConfig(true);
+
+    // Wait until receive the MapViewController of our map and
+    // be able to send actions and receive events that occur inside it.
+    cordova.plugins.MapView.onLoad((controller: any) => {
+      // Once the MapView was loaded you can start managing our map by:
+
+      // 1. Sending actions like selecting or navigating to a poi in a building:
+      // controller.selectPoi('YOUR_POI_IDENTIFIER');
+      // controller.navigateToPoi('YOUR_POI_IDENTIFIER');
+
+      // 2. Listen to events that take place inside our map like a poi being selected or deselected:
+      controller.onPoiSelected((poiSelectedResult: any) => {
+        console.log('EXAMPLE> onPoiSelected -> ', poiSelectedResult);
+      });
+
+      controller.onPoiDeselected((poiDeselectedResult: any) => {
+        console.log('EXAMPLE> onPoiDeselected -> ', poiDeselectedResult);
+      });
+
+      this._executePendingAction();
+    });
+
+    this._retrieveSpecifiedBuilding(Constants.BUILDING_IDENTIFIER);
+  }
+
+  // ==============================================================================================
+  // =                                    POSITIONING                                             =
+  // ==============================================================================================
+
+  async startPositioning() {
+    if (this.positioning) {
+      return;
+    }
+    this._setInfo('');
+    // You might want to know how we ask the all the permissions,
+    // so take a look at /src/app/utils/request.permission.ts
+    requestPermissions(
+      () => {
+        this.doStartPositioning();
+      },
+      (errorMessage: any) => {
+        this._setInfo(
+          'Something did happen while asking for permission: ' + errorMessage
+        );
+      },
+      this.platform
+    );
+  }
+
+  private doStartPositioning() {
+    // Start positioning in the building specified in the /src/constants.ts you created before:
+    cordova.plugins.Situm.startPositioning(
+      // In case you have multiple buildings that the user could visit,
+      // you might want to start positioning in all your buildings using global mode
+      // by specifying an empty identifier:
+      //
+      // buildingIdentifier: ''
+      [{ buildingIdentifier: Constants.BUILDING_IDENTIFIER }],
+      (res: any) => {
+        if (res && res.statusName) {
+          this._setStatus(res.statusName);
+        }
+        if (res && res.position) {
+          this._setStatus('POSITIONING');
+          this._setInfo(res);
+        }
+        this._setPositioning(true);
+      },
+      (err: any) => {
+        this._setPositioning(false);
+        this._setStatus('ERROR WHILE POSITIONING');
+        this._setInfo(err);
+      }
+    );
+  }
+
+  async stopPositioning() {
+    cordova.plugins.Situm.stopPositioning(
+      () => {
+        this._setPositioning(false);
+        this._setStatus('STOPPED');
+        this._setInfo('');
+      },
+      (err: any) => {
+        this._setStatus('ERROR');
+        this._setInfo(err);
+      }
+    );
+  }
+
+  // ==============================================================================================
+  // =                                 FETCH RESOURCES                                            =
+  // ==============================================================================================
+
+  public fetchBuildingInfo() {
+    this._setStatus('FETCHING BUILDING INFO ...');
+
+    cordova.plugins.Situm.fetchBuildingInfo(
+      this.currentBuilding,
+      (res: any) => {
+        this._setStatus('LOADED BUILDING INFO');
+        this._setInfo(res);
+      },
+      (err: any) => {
+        this._setStatus('ERROR FETCHING BUILDING INFO');
+        this._setInfo(err);
+      }
+    );
+  }
+
+  public fetchPois() {
+    this._setStatus('FETCHING BUILDING INDOOR POIS ...');
+
+    cordova.plugins.Situm.fetchIndoorPOIsFromBuilding(
+      this.currentBuilding,
+      (res: any) => {
+        this.pois = res;
+        this._setStatus('LOADED BUILDING INDOOR POIS');
+        this._setInfo(res);
+      },
+      (err: any) => {
+        this._setStatus('ERROR FETCHING INDOOR POIS');
+        this._setInfo(err);
+      }
+    );
+  }
+
+  public fetchPoiCategories() {
+    this._setStatus('FETCHING POI CATEGORIES ...');
+
+    cordova.plugins.Situm.fetchPoiCategories(
+      (poiCategories: any) => {
+        this._setStatus('LOADED POI CATEGORIES');
+        this._setInfo(poiCategories);
+      },
+      (err: any) => {
+        this._setStatus('ERROR FETCHING POI CATEGORIES');
+        this._setInfo(err);
+      }
+    );
+  }
+
+  public fetchGeofences() {
+    this._setStatus('FETCHING BUILDING GEOFENCES ...');
+
+    cordova.plugins.Situm.fetchGeofencesFromBuilding(
+      this.currentBuilding,
+      (geofences: any) => {
+        this._setStatus('LOADED BUILDING GEOFENCES');
+        this._setInfo(geofences);
+      },
+      (err: any) => {
+        this._setStatus('ERROR FETCHING GEOFENCES');
+        console.error(err);
+        this._setInfo(err);
+      }
+    );
+  }
+
+  public invalidateCache() {
+    cordova.plugins.Situm.invalidateCache();
+    this._setInfo('The cache was invalidated.');
+  }
+
+  // ==============================================================================================
+  // =                                    CARTOGRAPHY                                             =
+  // ==============================================================================================
+
+  public selectPoi() {
+    if (!this.currentPoi) {
+      this._setInfo('Select a POI before calling selectPoi() ');
+      return;
+    }
+
+    this._checkMapViewerIsLoaded(() => {
+      cordova.plugins.MapViewController.selectPoi(this.currentPoi.identifier);
+    });
+
+    this._transitionToWYFTab();
+  }
+
+  public navigateToPoi() {
+    if (!this.currentPoi) {
+      this._setInfo('Select a POI before calling navigateToPoi() ');
+      return;
+    }
+
+    this._checkMapViewerIsLoaded(() => {
+      // See https://developers.situm.com/sdk_documentation/cordova/jsdoc/latest/mapviewcontrollerimpl#navigateToPoi
+      cordova.plugins.MapViewController.navigateToPoi(
+        this.currentPoi.identifier,
+        'CHOOSE_SHORTEST' // 'CHOOSE_SHORTEST' | 'ONLY_ACCESSIBLE' | 'ONLY_NOT_ACCESSIBLE_FLOOR_CHANGES' | undefined
+      );
+    });
+
+    this._transitionToWYFTab();
+  }
+
+  // ==============================================================================================
+  // =                                 INTERNAL APP METHODS                                       =
+  // ==============================================================================================
+
+  currentStatus: string = 'NOT STARTED';
+  positioning: boolean = false;
+  currentPositioningInfo: string = 'NOT STARTED';
+
+  private _setStatus(status: string) {
+    this.ngZone.run(() => {
+      this.currentStatus = status;
+    });
+  }
+
+  private _setInfo(jsonRes: string) {
+    // console.log(JSON.stringify(jsonRes, null, 2));
+    this.ngZone.run(() => {
+      this.currentPositioningInfo =
+        jsonRes == '' || jsonRes == undefined
+          ? ''
+          : JSON.stringify(jsonRes, null, 2);
+    });
+  }
+
+  private _setPositioning(positioning: boolean) {
+    this.ngZone.run(() => {
+      this.positioning = positioning;
+    });
+  }
+
+  private _retrieveSpecifiedBuilding(buildingIdentifier: string) {
+    // We are initially fetching the building specified in Constants.BUILDING_IDENTIFIER
+    this._loadBuildings((buildings: any) => {
+      this.currentBuilding = buildings.find(
+        (b: any) => b.buildingIdentifier == buildingIdentifier
+      );
+      // And its POIs
+      this._loadPoisFrom(this.currentBuilding, (pois: any) => {
+        // Finally, we also populate the POI picker with the building's pois
+        this._populatePOIPicker(pois);
+      });
+    });
+  }
+
+  private _loadBuildings(successCb: Function) {
+    if (this.buildings) return;
+    console.log('EXAMPLE> fetching all buildings ...');
+    // Fetch all buildings:
+    cordova.plugins.Situm.fetchBuildings(
+      (res: any) => {
+        this.buildings = res;
+        console.log('EXAMPLE> buildings loaded');
+        console.info('EXAMPLE> data:\n', res);
+        successCb(this.buildings);
+      },
+      (err: any) => {
+        console.error(
+          'EXAMPLE> error while fetching all buildings, error:\n',
+          err
+        );
+      }
+    );
+  }
+
+  private _loadPoisFrom(b: any, successCb: Function) {
+    console.log(
+      `EXAMPLE> fetching indoor pois from ${b.buildingIdentifier} - ${b.name} ...`
+    );
+    // Fetch indoor pois from the building of Constants.BUILDING_IDENTIFIER:
+    cordova.plugins.Situm.fetchIndoorPOIsFromBuilding(
+      b,
+      (res: any) => {
+        this.pois = res;
+        console.log('EXAMPLE> indoor pois loaded');
+        console.info('EXAMPLE> data:\n', res);
+        successCb(this.pois);
+      },
+      (err: any) => {
+        console.error(
+          `EXAMPLE> error while fetching indoor pois, error:\n ${err}`
+        );
+      }
+    );
+  }
+
+  // ion-picker
+
+  isPOIPickerVisible = true;
+
+  public pickerColumns = [
+    {
+      name: 'pois',
+      options: [
+        {
+          text: 'Do fetchPois() before selecting a POI',
+          value: 'empty',
+        },
+      ],
+    },
+  ];
+
+  public pickerButtons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+    },
+    {
+      text: 'Confirm',
+      handler: (value: any) => {
+        console.log('EXAMPLE> poi-picker> currentPoi: ', value.pois.value);
+        this.ngZone.run(() => {
+          this.currentPoi = value.pois.value;
+        });
+      },
+    },
+  ];
+
+  private _populatePOIPicker(pois: any) {
+    this.pickerColumns[0].options = [];
+    for (let poi of pois) {
+      this.pickerColumns[0].options.push({
+        text: poi.poiName,
+        value: poi,
+      });
+    }
+    this.pickerColumns[0].options.sort((a, b) => {
+      const textA = a.text.toLowerCase();
+      const textB = b.text.toLowerCase();
+      return textA.localeCompare(textB);
+    });
+  }
+
+  // deeplinking extra code
+
+  _doAfterMapViewIsLoaded: Function | undefined = () => {};
+
+  private _checkMapViewerIsLoaded(cb: Function) {
+    if (this._doAfterMapViewIsLoaded != undefined) {
+      this._doAfterMapViewIsLoaded = () => {
+        cb();
+      };
+    } else {
+      cb();
+    }
+  }
+
+  private _executePendingAction() {
+    if (
+      this._doAfterMapViewIsLoaded != undefined &&
+      typeof this._doAfterMapViewIsLoaded === 'function'
+    ) {
+      this._doAfterMapViewIsLoaded();
+      this._doAfterMapViewIsLoaded = undefined;
+    }
+  }
+
+  private _transitionToWYFTab() {
+    this.navCtrl.navigateRoot('/tabs/wyf');
+  }
+}

package/example/src/app/tabs/tabs.page.html

@@ -0,0 +1,13 @@
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="sdk" href="/tabs/sdk">
+      <ion-icon aria-hidden="true" name="compass-outline"></ion-icon>
+      <ion-label>SDK</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="wyf" href="/tabs/wyf">
+      <ion-icon aria-hidden="true" name="map-outline"></ion-icon>
+      <ion-label>WYF</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>

package/example/src/app/tabs/tabs.page.scss

@@ -0,0 +1 @@
+

package/example/src/app/tabs/tabs.page.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { TabsPage } from './tabs.page';
+
+describe('TabsPage', () => {
+  let component: TabsPage;
+  let fixture: ComponentFixture<TabsPage>;
+
+  beforeEach(async () => {
+    TestBed.overrideComponent(TabsPage, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/example/src/app/tabs/tabs.page.ts

@@ -0,0 +1,19 @@
+import { Component, EnvironmentInjector, inject } from '@angular/core';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { compassOutline, mapOutline, squareOutline } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: 'tabs.page.html',
+  styleUrls: ['tabs.page.scss'],
+  standalone: true,
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+})
+export class TabsPage {
+  public environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
+    addIcons({ compassOutline, mapOutline, squareOutline });
+  }
+}

package/example/src/app/tabs/tabs.routes.ts

@@ -0,0 +1,31 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'sdk',
+        loadComponent: () =>
+          import('../sdk/sdk.page').then((m) => m.SDKPage),
+      },
+      {
+        path: 'wyf',
+        loadComponent: () =>
+          import('../wyf/wyf.page').then((m) => m.WYFPage),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/sdk',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/sdk',
+    pathMatch: 'full',
+  },
+];

package/example/src/app/utils/request.permissions.ts

@@ -0,0 +1,68 @@
+import { Platform } from '@ionic/angular/standalone';
+
+declare let cordova: any;
+
+export function requestPermissions(
+  successCb: Function,
+  errorCb: Function,
+  platform: Platform
+) {
+  if (platform.is('android')) {
+    cordova.plugins.diagnostic.requestRuntimePermissions(
+      function (permissions: Map<string, string>) {
+        console.log('EXAMPLE> permissions statuses: ', permissions);
+        successCb();
+      },
+      function (error: any) {
+        errorCb(JSON.stringify(error));
+      },
+      [
+        // Android
+        // We ask this permission to obtain the GPS data of the user and paint it on our map.
+        cordova.plugins.diagnostic.permission.ACCESS_FINE_LOCATION,
+        // We ask this last 2 permissions to improve the accuracy of our SDK when locating the user.
+        cordova.plugins.diagnostic.permission.BLUETOOTH_CONNECT,
+        cordova.plugins.diagnostic.permission.BLUETOOTH_SCAN,
+      ]
+    );
+  } else if (platform.is('ios')) {
+    cordova.plugins.diagnostic.getLocationAuthorizationStatus(
+      (status: string) => {
+        if (status == 'authorized') {
+          successCb();
+          return;
+        }
+      },
+      () => {
+        // Do nothing
+      }
+    );
+
+    // iOS
+    // We just need to ask for the location permission.
+    cordova.plugins.diagnostic.requestLocationAuthorization(
+      function (status: string) {
+        switch (status) {
+          case cordova.plugins.diagnostic.permissionStatus.NOT_REQUESTED:
+            errorCb('Permission not requested');
+            break;
+          case cordova.plugins.diagnostic.permissionStatus.DENIED_ALWAYS:
+            errorCb('Permission denied');
+            break;
+          case cordova.plugins.diagnostic.permissionStatus.GRANTED:
+            console.log('Permission granted always');
+            successCb();
+            break;
+          case cordova.plugins.diagnostic.permissionStatus.GRANTED_WHEN_IN_USE:
+            console.log('Permission granted only when in use');
+            successCb();
+            break;
+        }
+      },
+      function (error: any) {
+        errorCb(JSON.stringify(error));
+      },
+      cordova.plugins.diagnostic.locationAuthorizationMode.ALWAYS
+    );
+  }
+}

package/example/src/app/wyf/wyf.page.html

@@ -0,0 +1,22 @@
+<ion-header [translucent]="true">
+  <ion-toolbar mode="md">
+    <ion-thumbnail slot="start">
+      <img src="../../assets/icon/situm-logo-whitebg.svg" />
+    </ion-thumbnail>
+    <ion-title slot="start"> Situm Capacitor Example </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- Add this component to your body -->
+  <!-- Retreive your situm api-key here https://dashboard.situm.com/accounts/profile -->
+  <!-- Follow this guide (https://situm.com/docs/sdk-cartography/#building-identifier)
+    to find out the identifier of the building you want to display -->
+  <map-view
+    viewer-domain="https://map-viewer.situm.com"
+    situm-api-key="YOUR_SITUM_API_KEY"
+    building-identifier="YOUR_BUILDING_IDENTIFIER"
+    #mapView
+  />
+  <!-- WARNING: We will be overwritting this attributes with the values in constants.ts -->
+</ion-content>

package/example/src/app/wyf/wyf.page.scss

@@ -0,0 +1,8 @@
+ion-toolbar {
+  align-items: center;
+  --padding-start: 20px;
+}
+
+ion-thumbnail {
+  --size: 30px;
+}

package/example/src/app/wyf/wyf.page.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WYFPage } from './wyf.page';
+
+describe('WYFPage', () => {
+  let component: WYFPage;
+  let fixture: ComponentFixture<WYFPage>;
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(WYFPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/example/src/app/wyf/wyf.page.ts

@@ -0,0 +1,47 @@
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonThumbnail,
+} from '@ionic/angular/standalone';
+
+import * as Constants from 'src/constants';
+
+@Component({
+  selector: 'app-wyf',
+  templateUrl: 'wyf.page.html',
+  // Make sure you declare that you are using our custom HTMLElement with:
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  styleUrls: ['wyf.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonThumbnail, IonContent],
+})
+export class WYFPage {
+  @ViewChild('mapView') mapView: ElementRef | undefined;
+
+  // Internal code
+  // Set the credentials inside the HTMLElement with the values in constants.ts
+  ngAfterViewInit() {
+    this.mapView?.nativeElement.setAttribute(
+      'viewer-domain',
+      Constants.VIEWER_DOMAIN
+    );
+
+    this.mapView?.nativeElement.setAttribute(
+      'situm-api-key',
+      Constants.API_KEY
+    );
+
+    this.mapView?.nativeElement.setAttribute(
+      'building-identifier',
+      Constants.BUILDING_IDENTIFIER
+    );
+  }
+}