Add projects to settings panel
This commit is contained in:
@@ -31,12 +31,14 @@ export default {
|
||||
settingsPanelOpen: false,
|
||||
markerSize: {width: 32, height: 32},
|
||||
project: {},
|
||||
projectCodename: null,
|
||||
modeHisto: false,
|
||||
posts: [],
|
||||
nlFeedbacks: [],
|
||||
nlLoading: false,
|
||||
user: {name:'', email:''},
|
||||
maps: {},
|
||||
baseMaps: {},
|
||||
baseMap: null,
|
||||
map: {},
|
||||
hikeTypes: ['main', 'off-track', 'hitchhiking']
|
||||
};
|
||||
@@ -64,42 +66,56 @@ export default {
|
||||
return this.spot.isMobile();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
baseMap(sNewBaseMap, sOldBaseMap) {
|
||||
if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
|
||||
this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
|
||||
},
|
||||
projectCodename(sNewCodeName, sOldCodeName) {
|
||||
console.log('change in projectCodename: '+sNewCodeName);
|
||||
//this.toggleSettingsPanel(false);
|
||||
this.$parent.setHash(this.$parent.hash.page, [sNewCodeName]);
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
user: this.user,
|
||||
project: this.project
|
||||
};
|
||||
},
|
||||
inject: ['spot'],
|
||||
inject: ['spot', 'projects'],
|
||||
mounted() {
|
||||
//Set default project
|
||||
if(this.$parent.hash.items.length==0) this.$parent.setHash(this.$parent.hash.page, [this.spot.vars('default_project_codename')]);
|
||||
else {
|
||||
this.initEvents();
|
||||
this.initProject();
|
||||
this.initLightbox();
|
||||
this.initFeed();
|
||||
this.initSettings();
|
||||
this.initMap();
|
||||
}
|
||||
this.spot.addPage('project', {
|
||||
onResize: () => {
|
||||
//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
|
||||
|
||||
/* TODO
|
||||
if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
|
||||
this.spot.tmp('elev').resize({width:this.getElevWidth()});
|
||||
}
|
||||
*/
|
||||
}
|
||||
});
|
||||
|
||||
this.projectCodename = (this.$parent.hash.items.length==0)?this.spot.vars('default_project_codename'):this.$parent.hash.items[0];
|
||||
},
|
||||
methods: {
|
||||
initEvents() {
|
||||
this.spot.addPage('project', {
|
||||
onResize() {
|
||||
//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
|
||||
|
||||
/* TODO
|
||||
if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
|
||||
this.spot.tmp('elev').resize({width:this.getElevWidth()});
|
||||
}
|
||||
*/
|
||||
}
|
||||
});
|
||||
init() {
|
||||
let bFirstLoad = (typeof this.project.codename == 'undefined');
|
||||
this.initProject();
|
||||
if(bFirstLoad) this.initLightbox();
|
||||
if(bFirstLoad) this.initFeed();
|
||||
if(bFirstLoad) this.initSettings();
|
||||
this.initMap();
|
||||
},
|
||||
initProject() {
|
||||
this.project = this.spot.vars(['projects', this.$parent.hash.items[0]]);
|
||||
this.project = this.projects[this.projectCodename];
|
||||
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
|
||||
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
|
||||
this.posts = [];
|
||||
//this.baseMap = null;
|
||||
this.baseMaps = {};
|
||||
},
|
||||
initLightbox() {
|
||||
lightbox.option({
|
||||
@@ -134,6 +150,63 @@ export default {
|
||||
},
|
||||
initSettings() {
|
||||
this.user = this.spot.vars('user');
|
||||
},
|
||||
async initMap() {
|
||||
//Get Map Info
|
||||
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
|
||||
this.baseMaps = aoMarkers.maps;
|
||||
|
||||
//Base maps (raster tiles)
|
||||
let asSources = {};
|
||||
let asLayers = [];
|
||||
for(const asBaseMap of this.baseMaps) {
|
||||
asSources[asBaseMap.codename] = {
|
||||
type: 'raster',
|
||||
tiles: [asBaseMap.pattern],
|
||||
tileSize: asBaseMap.tile_size
|
||||
};
|
||||
asLayers.push({
|
||||
id: asBaseMap.codename,
|
||||
type: 'raster',
|
||||
source: asBaseMap.codename,
|
||||
'layout': {'visibility': 'none'},
|
||||
minZoom: asBaseMap.min_zoom,
|
||||
maxZoom: asBaseMap.max_zoom
|
||||
});
|
||||
}
|
||||
|
||||
//Map
|
||||
this.map = new Map({
|
||||
container: 'map',
|
||||
style: {
|
||||
version: 8,
|
||||
sources: asSources,
|
||||
layers: asLayers
|
||||
},
|
||||
center: [-122.45427081556572, 42.17865477384241],
|
||||
zoom: 5,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
new Marker()
|
||||
.setLngLat([-122.45427081556572, 42.17865477384241])
|
||||
.addTo(this.map);
|
||||
|
||||
//Toggle only when map is ready, for the tilt effet
|
||||
this.toggleFeedPanel(!this.mobile);
|
||||
|
||||
this.map.once('load', () => {
|
||||
this.baseMap = this.baseMaps.filter((asBM)=>asBM.default_map)[0].codename;
|
||||
});
|
||||
|
||||
this.map.on('idle', () => {
|
||||
|
||||
});
|
||||
|
||||
//Legend
|
||||
|
||||
|
||||
|
||||
},
|
||||
async getNextFeed() {
|
||||
if(!this.feed.outOfData && !this.feed.loading) {
|
||||
@@ -174,96 +247,12 @@ export default {
|
||||
})
|
||||
.catch((sDesc) => {this.nlFeedbacks.push('error', sDesc);});
|
||||
}
|
||||
},
|
||||
async initMap() {
|
||||
/*
|
||||
let asSources = {};
|
||||
let asLayers = {};
|
||||
for (const [sMapId, asMap] of Object.entries(aoMarkers.maps)) {
|
||||
asSources.push({
|
||||
type: 'raster',
|
||||
tiles: [asMap.pattern],
|
||||
tileSize: asMap.tile_size
|
||||
});
|
||||
asLayers.push({
|
||||
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
|
||||
|
||||
this.map = new Map({
|
||||
container: 'map',
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
satellite: {
|
||||
type: 'raster',
|
||||
tiles: [aoMarkers.maps.satellite.pattern],
|
||||
tileSize: aoMarkers.maps.satellite.tile_size
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: 'satellite',
|
||||
type: 'raster',
|
||||
source: 'satellite',
|
||||
minzoom: 0,
|
||||
maxzoom: 18
|
||||
}
|
||||
]
|
||||
},
|
||||
center: [-122.45427081556572, 42.17865477384241],
|
||||
zoom: 5,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
new Marker()
|
||||
.setLngLat([-122.45427081556572, 42.17865477384241])
|
||||
.addTo(this.map);
|
||||
|
||||
this.toggleFeedPanel(!this.mobile);
|
||||
|
||||
//Raster Tiles
|
||||
this.map.once('load', async () => {
|
||||
//const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
|
||||
this.maps = aoMarkers.maps;
|
||||
for (const [sMapId, asMap] of Object.entries(this.maps)) {
|
||||
if(sMapId=='satellite') continue;
|
||||
|
||||
this.map.addSource(sMapId, {
|
||||
type: 'raster',
|
||||
tiles: [asMap.pattern],
|
||||
tileSize: asMap.tile_size
|
||||
});
|
||||
|
||||
this.map.addLayer({
|
||||
id: sMapId,
|
||||
type: 'raster',
|
||||
source: sMapId,
|
||||
'layout': {
|
||||
'visibility': 'none'
|
||||
},
|
||||
minZoom: asMap.min_zoom,
|
||||
maxZoom: asMap.max_zoom
|
||||
});
|
||||
}
|
||||
});
|
||||
this.map.on('idle', () => {
|
||||
|
||||
});
|
||||
|
||||
//Legend
|
||||
|
||||
|
||||
|
||||
},
|
||||
toggleFeedPanel(bShow, sMapAction) {
|
||||
let bOldValue = this.feedPanelOpen;
|
||||
this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
|
||||
|
||||
if(bOldValue != this.feedPanelOpen) {
|
||||
if(bOldValue != this.feedPanelOpen && !this.mobile) {
|
||||
this.spot.onResize();
|
||||
|
||||
sMapAction = sMapAction || 'panTo';
|
||||
@@ -297,7 +286,7 @@ export default {
|
||||
let bOldValue = this.settingsPanelOpen;
|
||||
this.settingsPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.settingsPanelOpen):bShow;
|
||||
|
||||
if(bOldValue != this.settingsPanelOpen) {
|
||||
if(bOldValue != this.settingsPanelOpen && !this.mobile) {
|
||||
this.spot.onResize();
|
||||
|
||||
sMapAction = sMapAction || 'panTo';
|
||||
@@ -361,20 +350,30 @@ export default {
|
||||
<div class="settings-sections">
|
||||
<simplebar id="settings-sections-scrollbox">
|
||||
<div class="settings-section">
|
||||
<h1><SpotIcon :icon="'project fa-fw'" :text="spot.lang('hikes')" /></h1>
|
||||
<div id="settings-projects"></div>
|
||||
<h1><SpotIcon :icon="'project'" :classes="'fa-fw'" :text="spot.lang('hikes')" /></h1>
|
||||
<div class="settings-section-body">
|
||||
<div class="radio" v-for="project in projects">
|
||||
<input type="radio" :id="project.id" :value="project.codename" v-model="projectCodename" />
|
||||
<label :for="project.id">
|
||||
<span>{{ project.name }}</span>
|
||||
<a class="download" :href="project.gpxfilepath" :title="spot.lang('track_download')" @click.stop="()=>{}">
|
||||
<SpotIcon :icon="'download'" :classes="'push-left'" />
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h1><SpotIcon :icon="'map fa-fw'" :text="spot.lang('maps')" /></h1>
|
||||
<div id="settings-layers">
|
||||
<div class="layer" v-for="map in maps">
|
||||
<input type="radio" :id="map.id_map" :name="map.codename" :value="map.codename" :checked="map.default" />
|
||||
<label :for="map.codename">{{ this.spot.lang('map_'+map.codename) }}</label>
|
||||
<h1><SpotIcon :icon="'map'" :classes="'fa-fw'" :text="spot.lang('maps')" /></h1>
|
||||
<div class="settings-section-body">
|
||||
<div class="radio" v-for="bm in baseMaps">
|
||||
<input type="radio" :id="bm.id_map" :value="bm.codename" v-model="baseMap" />
|
||||
<label :for="bm.id_map">{{ this.spot.lang('map_'+bm.codename) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section newsletter">
|
||||
<h1><SpotIcon :icon="'newsletter fa-fw'" :text="spot.lang('newsletter')" /></h1>
|
||||
<h1><SpotIcon :icon="'newsletter'" :classes="'fa-fw'" :text="spot.lang('newsletter')" /></h1>
|
||||
<input type="email" name="email" id="email" :placeholder="spot.lang('nl_email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
|
||||
<SpotButton id="nl_btn" :classes="nlClasses" :title="spot.lang('nl_'+nlAction)" @click="manageSubs" />
|
||||
<div id="settings-feedback" class="feedback">
|
||||
|
||||
Reference in New Issue
Block a user