franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add projects to settings panel

Browse Source
This commit is contained in:
Franzz
2024-02-17 00:17:20 +01:00
parent 6e614042d1
commit 59dea2917d
9 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/components/project.vue
View File

@@ -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">

4
src/components/projectPost.vue
View File

@@ -127,9 +127,9 @@
</div>
<div class="body">
<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
<p><spotIcon :icon="'coords'" /><projectMapLink :options="options" /></p>
<p><spotIcon :icon="'coords'" :classes="'push'" /><projectMapLink :options="options" /></p>
<p><spotIcon :icon="'time'" :text="absTime" /></p>
<p v-if="timeDiff"><spotIcon :icon="'timezone'" /><projectRelTime :localTime="absTimeLocal" :offset="options.day_offset" /></p>
<p v-if="timeDiff"><spotIcon :icon="'timezone'" :classes="'push'" /><projectRelTime :localTime="absTimeLocal" :offset="options.day_offset" /></p>
<a class="drill" @click.prevent="panMapToMessage">
<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="spot.lang(options.weather_cond)">
<spotIcon :icon="options.weather_icon" />