@ppci/source-map/index.js

Source map

import { LitElement, html } from 'lit-element';
import geohash from 'ngeohash';

/* Redux */
import { connect } from 'pwa-helpers';
import { getCssVariableValue, LanguageMixin } from '@ppci/utils';
import { store, fetchPins, fetchSourcesByHash } from '@ppci/redux';

/* Styles */
import style from './style';

/* Components */
import '@ppci/source-dialog';
import '@ppci/source-filter';
import '@ppci/google-maps';
import '@ppci/source-carousel';

export class SourceMap extends connect(store)(LanguageMixin(LitElement)) {
  static get properties() {
    return {
      apiKey: { type: String },
      pins: { type: Array },
      sources: { type: Array },
      deviceId: { type: String },
    };
  }

  static get styles() {
    return style;
  }

  constructor() {
    super();
    this.languageKey = 'sourceMap';
  }

  stateChanged(state) {
    const { sourceMap } = state;
    this.pins = sourceMap.pins;
    this.sources = sourceMap.sources;
  }

  openSourceCarousel(geoHash, limit) {
    store.dispatch(fetchSourcesByHash(geoHash, limit));
    this.openCarousel = true;
  }

  closeSourceCarousel() {
    this.openCarousel = false;
    this.requestUpdate();
  }

  getPins(e) {
    const { zoom, topRight, bottomLeft } = e.detail;
    let customZoom = 2;

    this.closeSourceCarousel();

    if (zoom >= 5 && zoom <= 6) customZoom = 3;
    else if (zoom >= 7 && zoom <= 11) customZoom = 4;
    else if (zoom >= 12 && zoom <= 14) customZoom = 5;
    else if (zoom >= 15 && zoom <= 17) customZoom = 6;
    else if (zoom >= 18) customZoom = 7;
    else customZoom = 2;

    if (this.pins.length === 0) {
      store.dispatch(fetchPins());
    } else {
      store.dispatch(fetchPins(
        customZoom,
        topRight.lat,
        topRight.lng,
        bottomLeft.lat,
        bottomLeft.lng,
      ));
    }
  }

  render() {
    const pins = this.pins.map((p) => {
      const pin = {
        label: p.docCount <= 99 ? p.docCount.toString() : '-',
        color: p.type ? getCssVariableValue(`--${p.type.toLowerCase()}-color`) : null,
        position: {
          lat: p.latitude,
          lng: p.longitude,
        },
      };

      if (p.docCount < 50) pin.onClick = () => this.openSourceCarousel(p.geoHash, p.docCount);
      else pin.increaseZoom = 1;

      return pin;
    });

    return html`
      <google-maps
        apiKey="${this.apiKey}"
        language=${this.language}
        .pins=${pins}
        @onLoad=${this.getPins}
        @onZoomEnd=${this.getPins}
        @onDragEnd=${this.getPins}
      ></google-maps>
      <div class="carousel ${this.sources && this.openCarousel ? 'open' : ''}">
        <source-carousel
          .sources=${this.sources}
          .deviceId=${this.deviceId}
          @onClose=${this.closeSourceCarousel}
        ></source-carousel>
      </div>
    `;
  }
}

customElements.define('source-map', SourceMap);