Add projects to settings panel

config/db/update_v21_to_v22.sql

@@ -0,0 +1,5 @@
+ALTER TABLE mappings ADD COLUMN default_map BOOLEAN DEFAULT 0 AFTER id_project;
+ALTER TABLE mappings ADD CONSTRAINT default_on_generic_map_only CHECK (default_map = 0 OR id_project IS NULL);
+UPDATE mappings SET default_map = 1 WHERE id_map = (select id_map from maps where codename = 'satellite');
+UPDATE maps SET token = substring(pattern, locate('token=', pattern) + 6) WHERE codename = 'static_marker';
+UPDATE maps SET pattern = replace(pattern, token, '{token}') WHERE codename = 'static_marker';

lib/Map.php

@@ -11,13 +11,12 @@ class Map extends PhpObject {
 	const MAPPING_TABLE = 'mappings';
 
 	private Db $oDb;
-
 	private $asMaps;
 
 	public function __construct(Db &$oDb) {
 		parent::__construct(__CLASS__);
 		$this->oDb = &$oDb;
-		$this->setMaps();
+		$this->asMaps = array();
     }
 
 	private function setMaps() {
@@ -25,14 +24,36 @@ class Map extends PhpObject {
 		foreach($asMaps as $asMap) $this->asMaps[$asMap['codename']] = $asMap;
 	}
 
+	private function getMaps($sCodeName='') {
+		if(empty($this->asMaps)) $this->setMaps();
+		return ($sCodeName=='')?$this->asMaps:$this->asMaps[$sCodeName];
+	}
+
 	public function getProjectMaps($iProjectId) {
-		$asMappings = $this->oDb->getArrayQuery("SELECT id_map FROM mappings WHERE id_project = ".$iProjectId." OR id_project IS NULL", true);
-		return array_filter($this->asMaps, function($asMap) use($asMappings) {return in_array($asMap['id_map'], $asMappings);});
+		$asMappings = $this->oDb->selectRows(
+			array(
+				'select'	=> array(Db::getId(self::MAP_TABLE), 'default_map'),
+				'from'		=> self::MAPPING_TABLE,
+				'constraint'=> array("IFNULL(id_project, {$iProjectId})" => $iProjectId)
+			),
+			Db::getId(self::MAP_TABLE)
+		);
+		
+		$asProjectMaps = array();
+		foreach($this->getMaps() as $asMap) {
+			if(array_key_exists($asMap['id_map'], $asMappings)) {
+				$asMap['default_map'] = $asMappings[$asMap['id_map']];
+				$asProjectMaps[] = $asMap;
+			}
+		}
+
+		return $asProjectMaps;
 	}
 
 	public function getMapUrl($sCodeName, $asParams) {
-		$asParams['token'] = $this->asMaps[$sCodeName]['token'];
-		return self::populateParams($this->asMaps[$sCodeName]['pattern'], $asParams);
+		$asMap = $this->getMaps($sCodeName);
+		$asParams['token'] = $asMap['token'];
+		return self::populateParams($asMap['pattern'], $asParams);
 	}
 
 	private static function populateParams($sUrl, $asParams) {

lib/Media.php

@@ -17,30 +17,21 @@ class Media extends PhpObject {
 
 	const THUMB_MAX_WIDTH = 400;
 
-	/**
-	 * Database Handle
-	 * @var Db
-	 */
-	private $oDb;
-
-	/**
-	 * Media Project
-	 * @var Project
-	 */
-	private $oProject;
+	private Db $oDb;
+	private Project $oProject;
 	private $asMedia;
 	private $asMedias;
-	private $sSystemType;
+	//private $sSystemType;
 
 	private $iMediaId;
 
-	public function __construct(Db &$oDb, &$oProject, $iMediaId=0) {
+	public function __construct(Db &$oDb, Project &$oProject, $iMediaId=0) {
 		parent::__construct(__CLASS__);
 		$this->oDb = &$oDb;
 		$this->oProject = &$oProject;
 		$this->asMedia = array();
 		$this->asMedias = array();
-		$this->sSystemType = (substr(php_uname(), 0, 7) == "Windows")?'win':'unix';
+		//$this->sSystemType = (substr(php_uname(), 0, 7) == "Windows")?'win':'unix';
 		$this->setMediaId($iMediaId);
 	}
 

lib/Spot.php

@@ -150,7 +150,8 @@ class Spot extends Main
 				Project::PROJ_TABLE => "UNIQUE KEY `uni_proj_name` (`codename`)",
 				Media::MEDIA_TABLE	=> "UNIQUE KEY `uni_file_name` (`filename`)",
 				User::USER_TABLE	=> "UNIQUE KEY `uni_email` (`email`)",
-				Map::MAP_TABLE		=> "UNIQUE KEY `uni_map_name` (`codename`)"
+				Map::MAP_TABLE		=> "UNIQUE KEY `uni_map_name` (`codename`)",
+				Map::MAPPING_TABLE	=> "default_on_generic_map_only CHECK (`default_map` = 0 OR `id_project` IS NULL)"
 			),
 			'cascading_delete'	=> array
 			(

readme.md

@@ -27,9 +27,8 @@
 7. Go to #admin and create a new project, feed & maps
 8. Add a GPX file named <project_codename>.gpx to /geo/
 ## To Do List
-* ECMA import/export
 * Add mail frequency slider
 * Use WMTS servers directly when not using Geo Caching Server
 * Allow HEIF picture format
-* Vector tiles support (https://www.arcgis.com/home/item.html?id=7dc6cea0b1764a1f9af2e679f642f0f5) + Use of GL library. Use Mapbox GL JS / Maplibre GL JS / ESRI-Leaflet-vector?
-* Fix .MOV playback on windows firefox
+* Fix .MOV playback on windows firefox
+* Garmin InReach Integration

src/Spot.vue

@@ -13,6 +13,11 @@ export default {
 			hash: {}
 		};
 	},
+	provide() {
+		return {
+			projects: this.spot.vars('projects')
+		};
+	},
 	inject: ['spot'],
 	computed: {
 		page() {
@@ -36,7 +41,10 @@ export default {
 		},
 		onHashChange() {
 			let asHash = this.getHash();
-			if(asHash.hash !='' && asHash.page != '') this.hash = asHash;
+			if(asHash.hash !='' && asHash.page != '') {
+				if(asHash.page == this.hash.page) this.spot.onSamePageMove(asHash);
+				this.hash = asHash;
+			}
 			else if(!this.hash.page) this.setHash(this.spot.consts.default_page);
 		},
 		getHash() {

src/components/project.vue

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

src/components/projectPost.vue

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

src/styles/_page.project.settings.scss

@@ -86,19 +86,24 @@
 					font-size: 1.5em;
 				}
 
-				#settings-layers {
-					.layer {
+				.settings-section-body {
+					.radio {
+						&:not(:first-child) {
+							margin-top: $elem-spacing;
+						}
+
 						label {
 							margin-left: .3rem;
 							@extend .clickable;
-	
-							& > div {
-								@include no-text-overflow();
-							}
+							@include no-text-overflow();
 						}
 
-						&:not(:first-child) {
-							margin-top: $elem-spacing;
+						.download {
+							color: $legend-color;
+	
+							&:hover {
+								color: #0078A8;
+							}
 						}
 					}
 				}
@@ -131,16 +136,6 @@
 						}
 					}
 				}
-
-				#settings-projects {
-					a.fa-download {
-						color: $legend-color;
-
-						&:hover {
-							color: #0078A8;
-						}
-					}
-				}
 			}
 		}
 	}