diff --git a/app/components/main-header.js b/app/components/main-header.js index 8fa3ebe4..bf83df43 100644 --- a/app/components/main-header.js +++ b/app/components/main-header.js @@ -1,10 +1,19 @@ import Component from '@ember/component'; import { inject as service } from '@ember/service'; +import { computed } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; export default class MainHeaderComponent extends Component { @service('print') printSvc; @service() media; - bookmarks; + @tracked bookmarks; + + @tracked savedLayerSets; + + @computed('bookmarks.length', 'savedLayerSets.length') + get totalBookmarks() { + return this.bookmarks.length + this.savedLayerSets.length; + } } diff --git a/app/controllers/bookmarks.js b/app/controllers/bookmarks.js index 67dff1ed..46b7e214 100644 --- a/app/controllers/bookmarks.js +++ b/app/controllers/bookmarks.js @@ -1,11 +1,40 @@ +/* eslint-disable no-unused-expressions */ import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; import { computed as computedProp } from '@ember/object'; import { Promise } from 'rsvp'; +const QUERY_PARAMS_LIST = [ + 'selectedZoning', + 'selectedOverlays', + 'selectedFirm', + 'selectedPfirm', + 'selectedCouncilDistricts', + 'selectedLayerGroup', +]; + export default Controller.extend({ mainMap: service(), metrics: service(), + router: service(), + + savedLayerSets: window.localStorage['saved-layer-sets'] + ? JSON.parse(window.localStorage['saved-layer-sets']) + : [], + + editMode: false, + + track(act) { + gtag('event', 'saved_layer_sets', { + event_category: 'Saved Layer Sets', + event_action: act, + }); + this.metrics.trackEvent('MatomoTagManager', { + category: 'Saved Layer Sets', + action: act, + name: act, + }); + }, // because we must compute the record types based on multiple // promises, the model uses Promise.all // this gets us in trouble when we need to do @@ -26,5 +55,100 @@ export default Controller.extend({ zoom: 15, }); }, + + bookmarkCurrentLayerSet() { + let allLayers = []; + const visibleLayers = []; + const visibleLayerGroups = []; + this.router.currentRoute.parent.attributes.layerGroups.forEach((lg) => { + allLayers = allLayers.concat(lg.layers); + lg.visible ? visibleLayerGroups.push(lg.id) : null; + }); + allLayers.forEach((layer) => { + layer.visibility ? visibleLayers.push(layer.id) : null; + }); + + const queryParams = {}; + ['layer-groups', ...QUERY_PARAMS_LIST].forEach((selected) => { + queryParams[selected] = this.router.currentRoute.queryParams[selected] + ? JSON.parse(this.router.currentRoute.queryParams[selected]) + : undefined; + }); + + const layerSet = { + id: crypto.randomUUID(), + name: 'New Saved Layer Set', + visibleLayers, + visibleLayerGroups, + queryParams, + }; + this.set('savedLayerSets', [...this.savedLayerSets, layerSet]); + window.localStorage['saved-layer-sets'] = JSON.stringify( + this.savedLayerSets + ); + this.track('bookmarkCurrentLayerSet'); + // Hack to update the # which doesn't update automatically + document.querySelector('.badge.sup').innerText = + parseInt(document.querySelector('.badge.sup').innerText, 10) + 1; + }, + + deleteBookmarkedLayerSettings(id) { + this.set( + 'savedLayerSets', + [...this.savedLayerSets].filter((lg) => lg.id !== id) + ); + window.localStorage['saved-layer-sets'] = JSON.stringify( + this.savedLayerSets + ); + this.track('deleteBookmarkedLayerSettings'); + // Hack to update the # which doesn't update automatically + document.querySelector('.badge.sup').innerText = + parseInt(document.querySelector('.badge.sup').innerText, 10) - 1; + }, + + updateBookmarkedLayerSettings(id) { + const newLayerSets = [...this.savedLayerSets]; + const updatedLayerSetIndex = newLayerSets.findIndex((lg) => lg.id === id); + newLayerSets[updatedLayerSetIndex].name = + document.getElementById('name').value; + this.set('savedLayerSets', newLayerSets); + window.localStorage['saved-layer-sets'] = JSON.stringify( + this.savedLayerSets + ); + this.set('editMode', false); + // without the below, the name won't update in the dom + setTimeout(function () { + document.getElementById(id).innerText = + newLayerSets[updatedLayerSetIndex].name; + }, 1); + this.track('finishUpdateBookmarkedLayerSettings'); + }, + + turnOnEditMode(id) { + this.set('editMode', id); + this.track('beginUpdateBookmarkedLayerSettings'); + }, + + loadBookmarkedLayerSettings(bookmarkId) { + const layerToLoad = this.savedLayerSets.find( + (lg) => bookmarkId === lg.id + ); + const layerGroups = [ + ...this.router.currentRoute.parent.attributes.layerGroups, + ]; + layerGroups.forEach((lg) => { + lg.visible = !!layerToLoad.visibleLayerGroups.includes(lg.id); + lg.layers.forEach((layer) => { + layer.visibility = !!layerToLoad.visibleLayers.includes(layer.id); + }); + }); + + QUERY_PARAMS_LIST.forEach((selected) => { + this.router.currentRoute.queryParams[selected] = + layerToLoad.queryParams[selected]; + }); + + this.track('loadBookmarkedLayerSettings'); + }, }, }); diff --git a/app/routes/application.js b/app/routes/application.js index 1abb8f6d..c879fc8d 100644 --- a/app/routes/application.js +++ b/app/routes/application.js @@ -58,11 +58,16 @@ export default Route.extend({ await bookmarks.invoke('get', 'bookmark'); + const savedLayerSets = window.localStorage['saved-layer-sets'] + ? JSON.parse(window.localStorage['saved-layer-sets']) + : []; + return { layerGroups, layerGroupsObject, meta, bookmarks, + savedLayerSets, }; }, }); diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 108f2169..b7ebf802 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,4 +1,4 @@ - +
Homepage {{#if this.printSvc.enabled}} diff --git a/app/templates/bookmarks.hbs b/app/templates/bookmarks.hbs index e08e4d0b..c3ff9858 100644 --- a/app/templates/bookmarks.hbs +++ b/app/templates/bookmarks.hbs @@ -33,7 +33,7 @@ {{get (promise-rejected-reason this.bookmarksSettled) 'message'}}. {{/if}} - {{#unless this.model.length}} + {{#unless (or this.model.length this.savedLayerSets.length)}}

@@ -47,9 +47,65 @@

From this page you can quickly navigate to all of your bookmarked information.

+

+ If you would like to bookmark the current selected set of layers, use the button below. +

+ + Bookmark Current Layers +

{{/unless}} +
+

+ Layer Sets + + Bookmark Current Layers + +

+ + {{#unless this.savedLayerSets.length}} +

No current saved layer sets.

+ {{/unless}} +
    + {{#each this.savedLayerSets as |bookmark|}} +
  • + {{#if (eq this.editMode bookmark.id)}} +
    + + + +
    + {{else}} + + + + + {{bookmark.name}} + + + {{/if}} +
    • + {{/each}} +
+
+ + {{outlet}}
\ No newline at end of file diff --git a/app/templates/components/main-header.hbs b/app/templates/components/main-header.hbs index 09306c92..58b08bcd 100644 --- a/app/templates/components/main-header.hbs +++ b/app/templates/components/main-header.hbs @@ -45,9 +45,9 @@ Saved - {{#if this.bookmarks.length}} + {{#if this.totalBookmarks}} - {{this.bookmarks.length}} + {{this.totalBookmarks}} {{/if}}