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>
This commit is contained in:
Gehad elrobey 2014-07-13 23:36:35 +02:00 committed by Dirk Hohndel
parent 346f71f262
commit 6f05194b02
9 changed files with 132 additions and 17 deletions

View file

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

View file

@ -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;
}

View file

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

View file

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