Pushing map parameters to DB

2021-12-20 21:27:33 +01:00
parent 7ca66a200f
commit bc2295595c
14 changed files with 135 additions and 83 deletions
--- a/files/db/update_v17_to_v18.sql
+++ b/files/db/update_v17_to_v18.sql
@@ -0,0 +1,15 @@
+ALTER TABLE maps ADD pattern VARCHAR(200) NOT NULL AFTER geo_name;
+UPDATE maps SET pattern = CONCAT('http://localhost/geo/?a=tile&id=', geo_name, '&z={z}&x={x}&y={y}') WHERE geo_name <> '';
+
+ALTER TABLE maps ADD token VARCHAR(4096) AFTER pattern;
+UPDATE maps SET token = '';
+
+ALTER TABLE maps DROP geo_name;
+
+INSERT INTO maps (codename, pattern, token, tile_size, min_zoom, max_zoom, attribution) 
+VALUES ('static', 'http://localhost/geo/?a=tile&id=static&z=13&x={x}&y={y}', '', 400, 13, 13, '');
+
+INSERT INTO maps (codename, pattern, token, tile_size, min_zoom, max_zoom, attribution) 
+VALUES ('static_marker', 'http://localhost/geo/?a=tile&id=static.marker&z=13&x={x}&y={y}&marker=http://localhost/spot/images/footprint_mapbox.png', '', 400, 13, 13, '');
+
+UPDATE maps SET max_zoom = 17 WHERE codename = 'otm';
--- a/inc/Email.php
+++ b/inc/Email.php
@@ -31,7 +31,6 @@ class Email extends PhpObject {
 		$this->sTemplateName = $sTemplateName;
 		$this->oTemplate = new Mask($this->sTemplateName);
 		$this->oTemplate->setTag('local_server', $this->sServName);
-		$this->oTemplate->setTag('geo_server', Settings::GEO_SERVER);
 	}

 	/**
--- a/inc/Map.php
+++ b/inc/Map.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Franzz\Spot;
+use Franzz\Objects\PhpObject;
+use Franzz\Objects\Db;
+use \Settings;
+
+class Map extends PhpObject {
+
+	const MAP_TABLE = 'maps';
+	const MAPPING_TABLE = 'mappings';
+
+	private Db $oDb;
+
+	private $asMaps;
+
+	public function __construct(Db &$oDb) {
+		parent::__construct(__CLASS__, Settings::DEBUG);
+		$this->oDb = &$oDb;
+		$this->setMaps();
+    }
+
+	private function setMaps() {
+		$asMaps = $this->oDb->selectRows(array('from'=>self::MAP_TABLE));
+		foreach($asMaps as $asMap) $this->asMaps[$asMap['codename']] = $asMap;
+	}
+
+	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);});
+	}
+
+	public function getMapUrl($sCodeName, $asParams) {
+		return self::populateParams($this->asMaps[$sCodeName]['pattern'], $asParams);
+	}
+
+	private static function populateParams($sUrl, $asParams) {
+		foreach($asParams as $sParam=>$sValue) {
+			$sUrl = str_replace('{'.$sParam.'}', $sValue, $sUrl);
+		}
+
+		return $sUrl;
+	}
+}
--- a/inc/Project.php
+++ b/inc/Project.php
@@ -174,16 +174,6 @@ class Project extends PhpObject {
 		return $iLastMsg;
 	}

-	public function getMaps() {
-		$sQuery =
-			"SELECT codename, geo_name, tile_size, min_zoom, max_zoom, attribution ".
-			"FROM ".Spot::MAPPING_TABLE." ".
-		 	"LEFT JOIN ".Spot::MAP_TABLE." USING(".Db::getId(Spot::MAP_TABLE).") ".
-			"WHERE ".Db::getId(self::PROJ_TABLE)." = ".$this->getProjectId()." ".
-			"OR ".Db::getId(self::PROJ_TABLE)." IS NULL ";
-		return $this->oDb->getArrayQuery($sQuery, true);
-	}
-
 	private function setProjectInfo() {
 		if($this->getProjectId() > 0) {
 			$asProject = $this->getProject();
--- a/inc/Spot.php
+++ b/inc/Spot.php
@@ -30,31 +30,16 @@ class Spot extends Main
 {
 	//Database
 	const POST_TABLE = 'posts';
-	const MAP_TABLE = 'maps';
-	const MAPPING_TABLE = 'mappings';

 	const FEED_CHUNK_SIZE = 15;
 	const MAIL_CHUNK_SIZE = 5;

 	const DEFAULT_LANG = 'en';

-	/**
-	 * Active Project
-	 * @var Project
-	 */
-	private $oProject;
-
-	/**
-	 * Media Class
-	 * @var Media
-	 */
-	private $oMedia;
-
-	/**
-	 * User
-	 * @var User
-	 */
-	private $oUser;
+	private Project $oProject;
+	private Media $oMedia;
+	private User $oUser;
+	private Map $oMap; 

 	public function __construct($sProcessPage, $sTimezone)
 	{
@@ -66,6 +51,8 @@ class Spot extends Main

 		$this->oProject = new Project($this->oDb);
 		$this->oMedia = new Media($this->oDb, $this->oProject);
+
+		$this->oMap = new Map($this->oDb);
 	}

 	protected function install()
@@ -104,8 +91,8 @@ class Spot extends Main
 				self::POST_TABLE	=> array(Db::getId(Project::PROJ_TABLE), Db::getId(User::USER_TABLE), 'name', 'content', 'site_time', 'timezone'),
 				Media::MEDIA_TABLE	=> array(Db::getId(Project::PROJ_TABLE), 'filename', 'type', 'taken_on', 'posted_on', 'timezone', 'rotate', 'comment'),
 				User::USER_TABLE	=> array('name', 'email', 'gravatar', 'language', 'timezone', 'active', 'clearance'),
-				self::MAP_TABLE		=> array('codename', 'geo_name', 'tile_size', 'min_zoom', 'max_zoom', 'attribution'),
-				self::MAPPING_TABLE	=> array(Db::getId(self::MAP_TABLE) , Db::getId(Project::PROJ_TABLE))
+				Map::MAP_TABLE		=> array('codename', 'pattern', 'token', 'tile_size', 'min_zoom', 'max_zoom', 'attribution'),
+				Map::MAPPING_TABLE	=> array(Db::getId(Map::MAP_TABLE) , Db::getId(Project::PROJ_TABLE))
 			),
 			'types' 			=> array
 			(
@@ -127,6 +114,7 @@ class Spot extends Main
 				'longitude'		=> "DECIMAL(8,5)",
 				'model'			=> "VARCHAR(20)",
 				'name'			=> "VARCHAR(100)",
+				'pattern'		=> "VARCHAR(200) NOT NULL",
 				'posted_on'		=> "TIMESTAMP DEFAULT 0",
 				'ref_feed_id'	=> "VARCHAR(40)",
 				'ref_msg_id'	=> "INT",
@@ -136,9 +124,9 @@ class Spot extends Main
 				'status'		=> "VARCHAR(10)",
 				'taken_on'		=> "TIMESTAMP DEFAULT 0",
 				'timezone'		=> "CHAR(64)",				//see mysql.time_zone_name
+				'token'			=> "VARCHAR(4096)",
 				'type'			=> "VARCHAR(20)",
 				'unix_time'		=> "INT",
-				'geo_name'		=> "VARCHAR(100)",
 				'min_zoom'		=> "TINYINT UNSIGNED",
 				'max_zoom'		=> "TINYINT UNSIGNED",
 				'attribution'	=> "VARCHAR(100)",
@@ -155,14 +143,15 @@ class Spot extends Main
 				Feed::SPOT_TABLE	=> array("UNIQUE KEY `uni_ref_spot_id` (`ref_spot_id`)", "INDEX(`ref_spot_id`)"),
 				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`)"
+				User::USER_TABLE	=> "UNIQUE KEY `uni_email` (`email`)",
+				Map::MAP_TABLE		=> "UNIQUE KEY `uni_map_name` (`codename`)"
 			),
 			'cascading_delete'	=> array
 			(
 				Feed::SPOT_TABLE	=> array(Feed::FEED_TABLE),
 				Feed::FEED_TABLE	=> array(Feed::MSG_TABLE),
 				Project::PROJ_TABLE	=> array(Feed::FEED_TABLE, Media::MEDIA_TABLE, self::POST_TABLE),
-				self::MAP_TABLE		=> array(self::MAPPING_TABLE)
+				Map::MAP_TABLE		=> array(Map::MAPPING_TABLE)
 			)
 		);
 	}
@@ -185,7 +174,6 @@ class Spot extends Main
 				),
 				'consts' => array(
 					'server'					=> $this->asContext['serv_name'],
-					'geo_server'				=> Settings::GEO_SERVER,
 					'modes'						=> Project::MODES,
 					'clearances'				=> User::CLEARANCES,
 					'default_timezone'			=> Settings::TIMEZONE
@@ -236,7 +224,6 @@ class Spot extends Main

 			//Add Position
 			$asLastMessage = array_shift($this->getSpotMessages(array($this->oProject->getLastMessageId($this->getFeedConstraints(Feed::MSG_TABLE)))));
-			$asLastMessage['token'] = Settings::GEO_SERVER_TOKEN;
 			$oEmail->oTemplate->setTags($asLastMessage);
 			$oEmail->oTemplate->setTag('date_time', 'time:'.$asLastMessage['unix_time'], 'd/m/Y, H:i');

@@ -315,7 +302,7 @@ class Spot extends Main

 		$asResult = array(
 			'messages'		=> $asMessages,
-			'maps'			=> $this->oProject->getMaps(),
+			'maps'			=> $this->oMap->getProjectMaps($this->oProject->getProjectId()),
 			'last_update'	=> $asLastUpdate
 		);

@@ -372,6 +359,8 @@ class Spot extends Main
 				$asMessage['lat_dms'] = self::decToDms($asMessage['latitude'], 'lat');
 				$asMessage['lon_dms'] = self::decToDms($asMessage['longitude'], 'lon');
 				$asMessage['displayed_id'] = $asMessage[Db::getId(Feed::MSG_TABLE)];
+				$asMessage['static_img_url'] = $this->oMap->getMapUrl('static', array('x'=>$asMessage['longitude'], 'y'=>$asMessage['latitude']));
+				$asMessage['marker_img_url'] = $this->oMap->getMapUrl('static_marker', array('x'=>$asMessage['longitude'], 'y'=>$asMessage['latitude']));

 				$this->addTimeStamp($asMessage, $asMessage['unix_time'], $asMessage['timezone']);
 				$asCombinedMessages[] = $asMessage;
--- a/masks/email_update.html
+++ b/masks/email_update.html
@@ -14,7 +14,7 @@
 			<tr>
 				<td colspan="2">
 					<div style="background-color:#6dff58;color:#326526;border-radius:3px;padding:1rem;margin-top:1rem;display:inline-block;box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5);">
-						<a href="[#]local_server[#]" target="_blank" rel="noopener"><img style="border-radius:3px;" src="[#]geo_server[#]?a=tile&amp;id=static.marker&amp;z=13&amp;x=[#]longitude[#]&amp;y=[#]latitude[#]&amp;marker=[#]local_server[#]images/footprint_mapbox.png&amp;token=[#]token[#]" alt="position" /></a>
+						<a href="[#]local_server[#]" target="_blank" rel="noopener"><img style="border-radius:3px;" src="[#]marker_img_url[#]" alt="position" /></a>
 						<br />[#]lat_dms[#] [#]lon_dms[#]
 						<br />[#]date_time[#] ([#]timezone[#])
 					</div>
--- a/masks/project.html
+++ b/masks/project.html
@@ -106,16 +106,19 @@ oSpot.onKeydown = function(oEvent) {
 }

 function toggleFeedPanel(bShow, sMapAction) {
+	bOldValue = isFeedPanelOpen();
 	self.tmp('$Projects').toggleClass('with-feed', (typeof bShow === 'undefined')?null:bShow);
-	bShow = isFeedPanelOpen();
-	oSpot.onResize();
+	bNewValue = isFeedPanelOpen();

-	sMapAction = sMapAction || 'panTo';
-	switch(sMapAction) {
-		case 'none': break;
-		case 'panTo': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2, 0], {duration: 0.5}); break;
-		case 'panToInstant': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2, 0]); break;
-		case 'fitBounds':  oSpot.tmp('map').fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(self.tmp('$Feed').outerWidth(true) + 5, 5)}); break;
+	if(bOldValue != bNewValue) {
+		oSpot.onResize();
+		sMapAction = sMapAction || 'panTo';
+		switch(sMapAction) {
+			case 'none': break;
+			case 'panTo': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2, 0], {duration: 0.5}); break;
+			case 'panToInstant': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2, 0]); break;
+			case 'fitBounds':  oSpot.tmp('map').fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(self.tmp('$Feed').outerWidth(true) + 5, 5)}); break;
+		}
 	}
 }

@@ -124,15 +127,18 @@ function isFeedPanelOpen() {
 }

 function toggleSettingsPanel(bShow, sMapAction) {
+	bOldValue = isSettingsPanelOpen();
 	self.tmp('$Projects').toggleClass('with-settings', (typeof bShow === 'undefined')?null:bShow);
-	oSpot.onResize();
-	bShow = isSettingsPanelOpen();
+	bNewValue = isSettingsPanelOpen();
 	
-	sMapAction = sMapAction || 'panTo';
-	switch(sMapAction) {
-		case 'none': break;
-		case 'panTo': oSpot.tmp('map').panBy([(isSettingsPanelOpen()?-1:1)*self.tmp('$Settings').outerWidth(true)/2, 0], {duration: 0.5}); break;
-		case 'panToInstant': oSpot.tmp('map').panBy([(isSettingsPanelOpen()?-1:1)*self.tmp('$Settings').outerWidth(true)/2, 0]); break;
+	if(bOldValue != bNewValue) {
+		oSpot.onResize();
+		sMapAction = sMapAction || 'panTo';
+		switch(sMapAction) {
+			case 'none': break;
+			case 'panTo': oSpot.tmp('map').panBy([(isSettingsPanelOpen()?-1:1)*self.tmp('$Settings').outerWidth(true)/2, 0], {duration: 0.5}); break;
+			case 'panToInstant': oSpot.tmp('map').panBy([(isSettingsPanelOpen()?-1:1)*self.tmp('$Settings').outerWidth(true)/2, 0]); break;
+		}
 	}
 }

@@ -163,7 +169,6 @@ function initPage(asHash) {
 		self.tmp('$Title', $('#title'));
 		self.tmp('updatable', true);
 		self.tmp('out-of-data', false);
-		self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
 		self.tmp('markers', 'object');
 		self.tmp('trail-markers', 'object');
 		self.tmp('marker_size', {width: 32, height: 32});
@@ -366,14 +371,17 @@ function getElevWidth() {
 function setMapLayers(asLayers) {
 	oSpot.tmp('layers', {});
 	$.each(asLayers, function(iKey, asLayer) {
-		oSpot.tmp('layers')[oSpot.lang('map_'+asLayer.codename)] = L.tileLayer(self.tmp('tile_api'), {
-			id: asLayer.geo_name,
+		var sMapName = oSpot.lang('map_'+asLayer.codename);
+		var asMapOptions = {
 			tileSize: parseInt(asLayer.tile_size),
-        	zoomOffset: (parseInt(asLayer.tile_size) / -256 + 1),
+			zoomOffset: (parseInt(asLayer.tile_size) / -256 + 1),
 			minZoom: parseInt(asLayer.min_zoom),
 			maxZoom: parseInt(asLayer.max_zoom),
 			attribution: asLayer.attribution
-		});
+		}
+		if(asLayer.token != '') asMapOptions.token = asLayer.token;
+
+		oSpot.tmp('layers')[sMapName] = L.tileLayer(asLayer.pattern, asMapOptions);
 	});
 }

@@ -410,9 +418,9 @@ function initSpotMessages(aoMessages, aoTracks) {

 	//Controls: Feed Panel
 	var oFeedPanel = L.control({position: bIsMobile?'bottomright':'topright'});
-	var $PostButton = $('#feed-button').clone();
-	$PostButton.click(toggleFeedPanel);
-	oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
+	var $FeedButton = $('#feed-button').clone();
+	$FeedButton.click(toggleFeedPanel);
+	oFeedPanel.onAdd = function(oMap) {return $FeedButton[0];};
 	oFeedPanel.addTo(oMap);

 	//Controls: Legend
@@ -868,7 +876,7 @@ function getPost(asPost) {
 				.append(bTimeDiff?$('<p>').addIcon('fa-timezone', true).append(oSpot.lang('local_time', sAbsTimeLocal)):'')
 				.append($('<a>', {'class':'drill'})
 					.append((!asPost.weather_icon || asPost.weather_icon=='unknown')?'':$('<span>', {'class':'weather', 'title':oSpot.lang(asPost.weather_cond)}).addIcon('fa-'+asPost.weather_icon).append($('<span>').text(asPost.weather_temp+'°C')))
-					.append($('<img>', {'class':'staticmap', title: oSpot.lang('click_zoom'), src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
+					.append($('<img>', {'class':'staticmap', title: oSpot.lang('click_zoom'), src: asPost.static_img_url}))
 					.append($('<span>', {'class': 'drill-icon fa-stack'})
 						.addIcon('fa-message fa-stack-2x')
 						.addIcon('fa-message-in fa-stack-1x fa-rotate-270')
@@ -961,10 +969,6 @@ function getPost(asPost) {
 	return $Post;
 }

-function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
-	return self.consts.geo_server+'?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
-}
-
 function getMediaLink(asData, sType) {
 	var bTimeDiff = (asData.posted_on_formatted && asData.posted_on_formatted_local != asData.posted_on_formatted);

--- a/readme.md
+++ b/readme.md
@@ -17,7 +17,7 @@
 ## Getting started
 1. Clone Git onto web server
 2. Copy settings-sample.php to settings.php and populate
-3. Go to #admin and create a new project & feed
+3. Go to #admin and create a new project, feed & maps
 4. Add a GPX file named <project_codename>.gpx to /geo/
 ## To Do List
 * ECMA import/export
--- a/script/spot.js
+++ b/script/spot.js
@@ -105,7 +105,10 @@ function Spot(asGlobals)
 			sLang = self.consts.lang[sKey];
 			for(i in asParams) sLang = sLang.replace('$'+i, asParams[i]);
 		}
-		else console.log('missing translation: '+sKey);
+		else {
+			console.log('missing translation: '+sKey);
+			sLang = sKey;
+		}

 		return sLang;
 	};
--- a/settings-sample.php
+++ b/settings-sample.php
@@ -2,8 +2,6 @@

 class Settings
 {
-	const GEO_SERVER = 'http(s)://geo.server.tld';
-	const GEO_SERVER_TOKEN = '';
 	const DB_SERVER = 'localhost';
 	const DB_LOGIN = '';
 	const DB_PASS = '';
--- a/style/_fa.scss
+++ b/style/_fa.scss
@@ -30,11 +30,18 @@ $fa-css-prefix: fa;
 	text-decoration: none;
 	color: #CCC;
 	background: none;
+	text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
 	@extend .fa;

 	&:hover {
 		color: white;
 	}
+
+	&:before {
+		display: block;
+		width: 44px;
+		height: 44px;
+	}
 }

 /* Navigation */
--- a/style/_leaflet.scss
+++ b/style/_leaflet.scss
@@ -30,19 +30,15 @@ $stroke-width-axis : 2;
 	}
 }

-.leaflet-control.spot-control, .leaflet-control .heightgraph-toggle {
+.leaflet-control.spot-control, .leaflet-control.heightgraph .heightgraph-toggle {
 	cursor: pointer;
-	text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
 	width: 44px;
 	height: 44px;
 	text-align: center;
 	box-shadow: none;

-	.fa, .heightgraph-toggle-icon {
-		@extend .control-icon;
-	}
-
 	.fa {
+		@extend .control-icon;
 		width: 100%;
 	}
 }
@@ -85,11 +81,12 @@ $stroke-width-axis : 2;
 	}

 	.heightgraph-toggle {
-		height: 44px;
 		background: none;

 		.heightgraph-toggle-icon {
+			@extend .control-icon;
 			@extend .fa-elev-chart;
+			height: 44px;
 			position: static;
 			background: none;
 		}
@@ -98,10 +95,16 @@ $stroke-width-axis : 2;
 	.heightgraph-close-icon {
 		@extend .control-icon;
 		@extend .fa-unsubscribe;
-		color: #333;
 		background: none;
 		font-size: 20px;
-		line-height: 28px;
+		line-height: 26px;
+		width: 26px;
+		text-align: center;
 		display: none;
+
+		&:before {
+			width: 26px;
+			height: 26px;
+		}
 	}
 }
--- a/style/spot.css
+++ b/style/spot.css
--- a/style/spot.css.map
+++ b/style/spot.css.map