Add chart view model

This commit is contained in:
Bartek Fabiszewski 2019-12-21 14:51:40 +01:00
parent 2792b20e80
commit c2e4bd1bc4
2 changed files with 24 additions and 4 deletions

View File

@ -52,8 +52,11 @@ export default class MapViewModel extends ViewModel {
/** @type {?number} */ /** @type {?number} */
markerOver: null, markerOver: null,
/** @type {?number} */ /** @type {?number} */
markerSelect: null markerSelect: null,
// click handler
onMenuToggle: null
}); });
this.model.onMenuToggle = () => this.onMapResize();
this.state = state; this.state = state;
/** @type HTMLElement */ /** @type HTMLElement */
this.mapElement = document.querySelector('#map-canvas'); this.mapElement = document.querySelector('#map-canvas');
@ -61,6 +64,11 @@ export default class MapViewModel extends ViewModel {
this.api = null; this.api = null;
} }
init() {
this.bindAll();
this.setObservers();
}
/** /**
* Dynamic change of map api * Dynamic change of map api
* @param {string} apiName API name * @param {string} apiName API name
@ -102,10 +110,16 @@ export default class MapViewModel extends ViewModel {
if (this.state.currentTrack) { if (this.state.currentTrack) {
this.api.displayTrack(this.state.currentTrack, this.savedBounds === null); this.api.displayTrack(this.state.currentTrack, this.savedBounds === null);
} }
}
setObservers() {
config.onChanged('mapApi', (mapApi) => { config.onChanged('mapApi', (mapApi) => {
this.loadMapAPI(mapApi); this.loadMapAPI(mapApi);
}); });
this.state.onChanged('currentTrack', (track) => { this.state.onChanged('currentTrack', (track) => {
if (!this.api) {
return;
}
this.api.clearMap(); this.api.clearMap();
if (track) { if (track) {
uObserve.observe(track, 'positions', () => { uObserve.observe(track, 'positions', () => {
@ -207,4 +221,10 @@ export default class MapViewModel extends ViewModel {
<g><path stroke="black" fill="${fill}" d="${MapViewModel.getMarkerPath(isLarge)}"/>${isExtra ? MapViewModel.getMarkerExtra(isLarge) : ''}</g></svg>`; <g><path stroke="black" fill="${fill}" d="${MapViewModel.getMarkerPath(isLarge)}"/>${isExtra ? MapViewModel.getMarkerExtra(isLarge) : ''}</g></svg>`;
return `data:image/svg+xml,${encodeURIComponent(svg)}`; return `data:image/svg+xml,${encodeURIComponent(svg)}`;
} }
onMapResize() {
if (this.api) {
this.api.updateSize();
}
}
} }

View File

@ -171,7 +171,7 @@ describe('MapViewModel tests', () => {
// given // given
spyOn(vm, 'loadMapAPI'); spyOn(vm, 'loadMapAPI');
vm.api = mockApi; vm.api = mockApi;
vm.onReady(); vm.setObservers();
const newApi = 'newapi'; const newApi = 'newapi';
// when // when
config.mapApi = newApi; config.mapApi = newApi;
@ -187,7 +187,7 @@ describe('MapViewModel tests', () => {
// given // given
vm.api = mockApi; vm.api = mockApi;
state.currentTrack = null; state.currentTrack = null;
vm.onReady(); vm.setObservers();
uObserve.setSilently(state, 'currentTrack', track); uObserve.setSilently(state, 'currentTrack', track);
// when // when
state.currentTrack = null; state.currentTrack = null;
@ -203,7 +203,7 @@ describe('MapViewModel tests', () => {
// given // given
vm.api = mockApi; vm.api = mockApi;
state.currentTrack = null; state.currentTrack = null;
vm.onReady(); vm.setObservers();
// when // when
state.currentTrack = track; state.currentTrack = track;
// then // then