HTML: Add dive photos to the detailed view

Dive photos are copied to the photos directory on export. The photos
section appears only if photos exist.

C++ helper functions are added to copy images to the photos directory,
Additionally the photos directory must be passed as a parameter to the
write_one_dive function to save photos to it. Some options structure may
be needed instead of passing many arguments.

Signed-off-by: Gehad elrobey <gehadelrobey@gmail.com>
Signed-off-by: Miika Turkia <miika.turkia@gmail.com>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

4 files changed, 77 insertions, 1 deletions

diff --git a/theme/dive_export.html b/theme/dive_export.html
index ec08e86b0..d9417e279 100644
--- a/theme/dive_export.html
+++ b/theme/dive_export.html
@@ -203,6 +203,15 @@ function changeAdvSearch(e){
 		<div id="divestats">
 		<h2 class="det_hed">Dive stats</h2>
 		</div>
+		<div id="divephotos">
+		<h2 class="det_hed">Dive Photos</h2>
+		<div id="slider_container">
+			<button onclick="prev_photo()" style="width:7%;margin:1%;float:left;">&lt;-</button>
+			<div id="slider">
+			</div>
+			<button onclick="next_photo()" style="width:7%;margin:1%;float:left">-&gt;</button>
+		</div>
+		</div>
 	</div>
 </body>
 </html>
diff --git a/theme/light.css b/theme/light.css
index 1dc5f6d10..6f6988097 100644
--- a/theme/light.css
+++ b/theme/light.css
@@ -210,6 +210,20 @@ ul:hover{
 	box-shadow: 10px 10px 5px #888888;
 }
 
+#slider_container{
+	height:240px;
+	margin-bottom:20px;
+}
+
+#slider{
+	float:left;
+	width:80%;
+	min-width:350px;
+	height:240px;
+	border-style:solid;
+	overflow:hidden;
+}
+
 .Cyl{
 	padding-right:25px;
 }
diff --git a/theme/list_lib.js b/theme/list_lib.js
index 0a61ed765..74cfce013 100644
--- a/theme/list_lib.js
+++ b/theme/list_lib.js
@@ -724,7 +724,8 @@ function get_bookmark_HTML(event)
 */
 function get_bookmarks_HTML(dive)
 {
-	if (dive.events <= 0) return "";
+	if (dive.events <= 0)
+		return "";
 	var result = "";
 	result += '<h2 class="det_hed">Events</h2><table><tr><td class="words">Name</td><td class="words">Time</td></tr>';
 	for (var i in dive.events) {
@@ -766,6 +767,43 @@ function get_status_HTML(dive)
 	       '</td></tr></table>';
 };
 
+function get_dive_photos(dive)
+{
+	if (dive.photos.length <= 0) {
+		document.getElementById("divephotos").style.display = 'none';
+		return "";
+	}
+	var slider = "";
+	document.getElementById("divephotos").style.display = 'block';
+	for (var i = 0; i < dive.photos.length; i++) {
+		slider += '<img src="'+location.pathname
+		+'_files/photos/'+dive.photos[i].filename+'" alt="" height="240" width="240">';
+	}
+	return slider;
+}
+
+function prev_photo()
+{
+	var temp = items[dive_id].photos[0];
+	var i;
+	for (i = 0; i < items[dive_id].photos.length - 1; i++) {
+		items[dive_id].photos[i] = items[dive_id].photos[i + 1]
+	}
+	items[dive_id].photos[i] = temp;
+	document.getElementById("slider").innerHTML = get_dive_photos(items[dive_id]);
+}
+
+function next_photo()
+{
+	var temp = items[dive_id].photos[items[dive_id].photos.length - 1];
+	var i;
+	for (i = items[dive_id].photos.length - 1; i > 0; i--) {
+		items[dive_id].photos[i] = items[dive_id].photos[i - 1]
+	}
+	items[dive_id].photos[0] = temp;
+	document.getElementById("slider").innerHTML = get_dive_photos(items[dive_id]);
+}
+
 function mkelvin_to_C(mkelvin)
 {
 	return (mkelvin - ZERO_C_IN_MKELVIN) / 1000.0;
@@ -948,6 +986,7 @@ function showDiveDetails(dive)
 	document.getElementById("dive_equipments").innerHTML = get_cylinders_HTML(items[dive_id]);
 	document.getElementById("bookmarks").innerHTML = get_bookmarks_HTML(items[dive_id]);
 	document.getElementById("divestats").innerHTML = get_status_HTML(items[dive_id]);
+	document.getElementById("slider").innerHTML = get_dive_photos(items[dive_id]);
 	setDiveTitle(items[dive_id]);
 
 	//hide the list of dives and show the canvas.
diff --git a/theme/sand.css b/theme/sand.css
index 1ccde7762..d17824cf5 100644
--- a/theme/sand.css
+++ b/theme/sand.css
@@ -212,6 +212,20 @@ ul:hover{
 	box-shadow: 7px 7px 5px rgba(215, 107, 27, 0.43);
 }
 
+#slider_container{
+	height:240px;
+	margin-bottom:20px;
+}
+
+#slider{
+	float:left;
+	width:80%;
+	min-width:350px;
+	height:240px;
+	border-style:solid;
+	overflow:hidden;
+}
+
 .det_hed{
 	background-color:#EFC15F;
 	padding:3px;