Adding generic displays for boat time

PiLotAPICore/Controllers/PhotosController.cs

@@ -42,6 +42,18 @@ public List<ImageCollection> GetAllPhotoGalleries() {
 			}
 		}
 
+		[Route(Program.APIROOT + "[controller]/random")]
+		[HttpGet]
+		[ServiceFilter(typeof(ReadAuthorizationFilter))]
+		public ImageCollection GetRandomPhoto() {
+			try {
+				return new PhotoDataConnector().ReadRandomImage();
+			} catch (Exception ex) {
+				Logger.Log(ex, "PhotosController.GetRandomPhoto");
+				throw;
+			}
+		}
+
 		/// <summary>
 		/// Puts a photo to the server. The content must be nothing but the
 		/// pure bytes. No multipart data.

PiLotDataFiles/Photos/PhotoDataConnector.cs

@@ -73,6 +73,28 @@ public ImageData ReadImage(Date pDate, String pName) {
 			return result;
 		}
 
+		public ImageCollection ReadRandomImage(){
+			ImageCollection result = null;
+			DirectoryInfo photosDirectory = new DirectoryInfo(this.GetPhotosRootPath(false));
+			if(photosDirectory.Exists){
+				DirectoryInfo[] directories = photosDirectory.GetDirectories();
+				directories = directories.Where(d => d.EnumerateFiles().FirstOrDefault() != null).ToArray();
+				if(directories.Length > 0) {
+					Random random = new Random();
+					DirectoryInfo directory = directories[random.Next(directories.Length)];
+					FileInfo[] files = directory.GetFiles();
+					FileInfo file = files[random.Next(files.Length)];
+					result = new ImageCollection(){
+						RootURL = this.GetPhotosRelativePath(directory),
+						Name = directory.Name,
+						ZoomFolders = this.GetImageFolders(),
+						ImageNames = new List<String>(){file.Name}
+					};
+				}
+			}
+			return result;
+		}
+
 		/// <summary>
 		/// Returns an object to be used by the RC.ImageGallery as ImageCollection,
 		/// representing the photos of one day

PiLotWeb/css/default.css

@@ -413,6 +413,8 @@ th.right, td.right { text-align: right !important; }
 .genericDisplay .display { line-height: 2em; padding-top: 2rem; }
 .genericDisplay .display .value { font-size:4em; margin: 0em 0.25em;}
 
+.genericDisplay #clockCanvas{width:10em; height: 10em;}
+
 @media (max-width:400px) {
 	.rcCalendar { left: 0px; right: 0px; width: 100vw; }
 }
@@ -497,7 +499,7 @@ body { min-width: 20em; }
 	width:5em; 
 }
 
-#header > #clock > span { 
+#header > #clock > div { 
 	font-size: 1.25em; 
 }
 
@@ -559,7 +561,7 @@ body { min-width: 20em; }
 @media (min-width:800px) {
 	#headerButtons {order: 3;}
 	#clock {order: 2; width:5.5em; }
-	#clock > span { 
+	#clock > div { 
 		width: 4.5em;
 		text-align: center;
 		padding: 0.4em;

PiLotWeb/js/Model/Logbook.js

@@ -717,6 +717,14 @@ PiLot.Model.Logbook = (function () {
 		return new ImageCollection(json.rootUrl, json.name, json.zoomFolders, json.imageNames);
 	};
 
+	/**
+	 * Loads a random image, embedded in an image collection
+	 */
+	var loadRandomImageAsync = async function () {
+		const json = await PiLot.Utils.Common.getFromServerAsync('/Photos/random');
+		return new ImageCollection(json.rootUrl, json.name, json.zoomFolders, json.imageNames);
+	};
+
 	/**
 	 * Gets the image collections for all days
 	 * @returns {RC.ImageGallery.ImageCollection[]} 
@@ -831,6 +839,7 @@ PiLot.Model.Logbook = (function () {
 		loadLogbookDayAsync: loadLogbookDayAsync,
 		loadCurrentBoatSetupAsync: loadCurrentBoatSetupAsync,
 		loadDailyImageCollectionAsync: loadDailyImageCollectionAsync,
+		loadRandomImageAsync: loadRandomImageAsync,
 		loadAllImageCollectionsAsync: loadAllImageCollectionsAsync,
 		uploadPhotoAsync: uploadPhotoAsync,
 		deletePhotoAsync: deletePhotoAsync,

PiLotWeb/js/Templates/Common.js

@@ -55,7 +55,7 @@ PiLot.Templates.Common = {
 		</div>
 	`,
 
-	clock: `<span class="lblTime"></span>`,
+	clock: `<div class="display"><span class="lblTime value"></span></div>`,
 
 	clockOffsetIcon: `
 		<div class="vCenter biggerText">
@@ -64,6 +64,8 @@ PiLot.Templates.Common = {
 		</div>
 	`,
 
+	genericAnalogClock: `<canvas id="clockCanvas"></canvas>`,
+
 	startPage: `<div class="homeContainer"></div>`,
 
 	genericDisplayPage: `

PiLotWeb/js/Templates/Diary.js

@@ -253,5 +253,9 @@ PiLot.Templates.Diary = {
 		<div class="fullHeight fullWidth flex">
 			<div class="plhGallery marginTop grow" style="position: relative"></div>
 		</div>
+	`,
+
+	randomPhotoDisplay: `
+		<div style="width:20em;"><img class="imgPhoto" style="width:100%;"></img></div>
 	`
 };

PiLotWeb/js/Templates/Nav.js

@@ -186,7 +186,7 @@ PiLot.Templates.Nav = {
 
 	logIndicator: `
 		<div class="divLog display motionDisplay">
-			<span data-text="log"></span><span class="lblLog lblValue value">‒‒‒</span><span data-text="nm"></span>
+			<span data-text="log"></span><span class="lblLog lblValue value inlineBlock center" style="min-width:2em;">‒‒‒</span><span data-text="nm"></span>
 		</div>
 	`,
 

PiLotWeb/js/Utils/Loader.js

@@ -161,7 +161,7 @@ PiLot.Utils.Loader = (function () {
 		},
 		display: {
 			key: 'display',
-			dependencies: [defaultScripts, navScripts, meteoScripts, boatScripts, logbookScripts, analyzeScripts],
+			dependencies: [defaultScripts, navScripts, meteoScripts, boatScripts, logbookScripts, analyzeScripts, settingsScripts],
 			startAction: function () { new PiLot.View.Common.GenericDisplayPage(); },
 			noHeader: true
 		},

PiLotWeb/js/View/Common.js

@@ -6,25 +6,30 @@ PiLot.View.Common = (function () {
 	const clientErrorThresholdSeconds = 10;
 
 	/// class representing the clock which shows the current Boat Time
-	var Clock = function () {
+	var Clock = function (pContainer = null, pTimeFormat = null) {
+		this.container = pContainer;
+		this.timeFormat = pTimeFormat;
 		this.lblTime = null;			/// the html element showing the time
 		this.interval = null;
 		this.boatTime = null;
+		this.locale = null;
 		this.initialize();
 	};
 
 	Clock.prototype = {
 
 		initialize: function () {
+			this.locale = PiLot.Utils.Language.getLanguage();
 			this.draw();
 			this.loadBoatTimeAsync();
 		},
 
 		/// draws the clock based on a template
 		draw: function () {
-			const container = document.getElementById('clock');
+			const container = this.container || document.getElementById('clock');
 			container.innerHTML = PiLot.Templates.Common.clock;
 			this.lblTime = container.querySelector('.lblTime');
+			this.timeFormat = this.timeFormat || DateTime.TIME_24_SIMPLE;
 			this.lblTime.addEventListener('mouseover', this.showTimezone.bind(this));
 		},
 
@@ -51,7 +56,7 @@ PiLot.View.Common = (function () {
 		/// shows the current time
 		showTime: function () {
 			if (this.lblTime) {
-				this.lblTime.innerText = this.boatTime.now().toLocaleString(DateTime.TIME_24_SIMPLE);
+				this.lblTime.innerText = this.boatTime.now(this.locale).toLocaleString(this.timeFormat);
 			}
 		},
 
@@ -61,6 +66,34 @@ PiLot.View.Common = (function () {
 		},
 	};
 
+	var GenericDigitalClock = function(pContainer){
+		return new Clock(pContainer, DateTime.TIME_WITH_SECONDS);
+	};
+
+	var GenericAnalogClock = function(pContainer){
+
+		this.container = pContainer;
+		this.boatTime = null;
+		this.initialize();
+
+	};
+
+	GenericAnalogClock.prototype = {
+
+		initialize: function(){
+			PiLot.Model.Common.getCurrentBoatTimeAsync().then((bt) => {
+				this.boatTime = bt;
+				this.draw();
+			});
+		},
+
+		draw: function(){
+			const control = PiLot.Utils.Common.createNode(PiLot.Templates.Common.genericAnalogClock);
+			this.container.appendChild(control);
+			this.analogClock = Analogclock.drawClock('clockCanvas', this.boatTime.getUtcOffsetHours(), this.boatTime.getClientErrorOffsetSeconds() * -1);
+		},
+	};
+
 	var clockOffsetIconInstance = null;
 
 	var ClockOffsetIcon = function () {
@@ -352,6 +385,9 @@ PiLot.View.Common = (function () {
 				}
 			}
 			this.fillDisplaysList();
+			if(this.displays.length === 0){
+				this.toggleControls(true);
+			}
 		},
 
 		saveUserSettings: function(){
@@ -505,8 +541,8 @@ PiLot.View.Common = (function () {
 		eta: () => {return PiLot.View.Nav.GenericETADisplay},
 		vmg: () => {return PiLot.View.Analyze.GenericVMGDisplay},
 		tackAngle: () => {return PiLot.View.Analyze.GenericTackingAngleDisplay},
-		randomPhoto: () => {return PiLot.View.Diary.GenericRandomPhotoDisplay},
-		dailyPhoto: () => {return PiLot.View.Diary.GenericDailyPhotoDisplay}
+		boatTimeAnalog: () => {return PiLot.View.Common.GenericDigitalClock},
+		boatTimeDigital: () => {return PiLot.View.Common.GenericAnalogClock}
 	};
 
 	/** An icon allowing to swap the day/night mode */
@@ -589,7 +625,8 @@ PiLot.View.Common = (function () {
 	};
 
 	/** Renders a hamburger icon, which will, when clicked, show the main menu */
-	var MainMenuHamburger = function(){
+	var MainMenuHamburger = function(pContainer){
+		this.container = pContainer;
 		this.lnkHamburger = null;
 		this.menuContainer = null;
 		this.initialize();
@@ -607,9 +644,9 @@ PiLot.View.Common = (function () {
 
 		draw: function(){
 			this.lnkHamburger = RC.Utils.stringToNode(PiLot.Templates.Common.mainMenuHamburger);
-			const hamburgerContainer = document.querySelector('#hamburger');
+			const hamburgerContainer = this.container || document.querySelector('#hamburger');
 			hamburgerContainer.appendChild(this.lnkHamburger);
-			hamburger.addEventListener('click', this.hamburger_click.bind(this));
+			this.lnkHamburger.addEventListener('click', this.hamburger_click.bind(this));
 			this.menuContainer = PiLot.Utils.Common.createNode(PiLot.Templates.Common.flyoutMainMenu);
 			this.hideMenu();	
 			new MainMenu(this.menuContainer.querySelector('.plhContent'));
@@ -1165,6 +1202,8 @@ PiLot.View.Common = (function () {
 
 	return {
 		Clock: Clock,
+		GenericDigitalClock: GenericDigitalClock,
+		GenericAnalogClock: GenericAnalogClock,
 		ClockOffsetIcon: ClockOffsetIcon,
 		StartPage: StartPage,
 		GenericDisplayPage: GenericDisplayPage,

PiLotWeb/js/View/Diary.js

@@ -1584,6 +1584,27 @@ PiLot.View.Diary = (function () {
 		loadImagesAsync: async function(){
 			this.imageGallery.showPhotosAsync();
 		}
+	};
+
+	var RandomPhotoDisplay = function(pContainer){
+		this.container = pContainer;
+		this.initialize();
+	};
+
+	RandomPhotoDisplay.prototype = {
+
+		initialize: function(){
+			this.draw();
+		},
+
+		draw: function(){
+			const control = PiLot.Utils.Common.createNode(PiLot.Templates.Diary.randomPhotoDisplay);
+			this.container.appendChild(control);
+			const imgPhoto = control.querySelector('.imgPhoto');
+			PiLot.Model.Logbook.loadRandomImageAsync().then((i) => {
+				imgPhoto.src = i.getRootUrl() + i.getImageNames()[0];
+			});
+		}
 
 	};
 
@@ -1592,6 +1613,7 @@ PiLot.View.Diary = (function () {
 		PublishDiaryPage: PublishDiaryPage,
 		DiaryCalendar: DiaryCalendar,
 		PhotosPage: PhotosPage,
+		RandomPhotoDisplay: RandomPhotoDisplay
 	};
 
 })();

PiLotWeb/js/View/Settings.js

@@ -43,7 +43,6 @@ PiLot.View.Settings = (function () {
 		this.lblBoatTimeOffset = null;			// label showing the UTC offset of the BoatTime
 		this.btnMinus = null;					// button to reduce the BoatTime by 1 hour
 		this.btnPlus = null;					// button to increase the BoatTime by 1 hour
-		this.clockCanvas = null;				// the canvas where the clock will be drawn
 		this.analogClock = null;				// the AnalogClock object representing the clock
 
 		this.initializeAsync();
@@ -77,7 +76,6 @@ PiLot.View.Settings = (function () {
 			this.btnMinus.onclick = this.btnMinus_click.bind(this);
 			this.btnPlus = contentArea.querySelector('#btnPlus');
 			this.btnPlus.onclick = this.btnPlus_click.bind(this);
-			this.clockCanvas = contentArea.querySelector('#lblClientTime');
 			this.analogClock = Analogclock.drawClock('clockCanvas', this.boatTime.getUtcOffsetHours(), this.boatTime.getClientErrorOffsetSeconds() * -1);
 		},