HTML: add Yearly Statistics view to the HTML export

View JSON data of yearly statistics in HTML exports.

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>

theme/dive_export.html

@@ -34,6 +34,10 @@ function load_scripts()
 	fileref.setAttribute("src", location.pathname + "_files/file.json");
 	document.getElementsByTagName("head")[0].appendChild(fileref);
 
+	fileref=document.createElement('script');
+	fileref.setAttribute("src", location.pathname + "_files/stat.json");
+	document.getElementsByTagName("head")[0].appendChild(fileref);
+
 	fileref=document.createElement('script');
 	fileref.setAttribute("src", location.pathname + "_files/settings.json");
 	document.getElementsByTagName("head")[0].appendChild(fileref);
@@ -116,6 +120,7 @@ window.onload=function(){
 	sizeofpage=10;
 	showAllDives();
 	document.getElementById("divePanel").style.display='none';
+	document.getElementById("diveStat").style.display='none';
 	document.body.style.visibility='visible';
 
 	document.onkeydown = switchDives;
@@ -155,6 +160,7 @@ function changeAdvSearch(e){
 		<button onClick="expandAll()"> Expand All </button>
 		<button onClick="collapseAll()"> Collapse All </button>
 		<button id="trip_button" onclick="toggleTrips();">trips</button>
+		<button id="stats_button" onclick="toggleStats();">Stats</button>
 		</div>
 	</div>
 		<div id="header">
@@ -213,5 +219,12 @@ function changeAdvSearch(e){
 		</div>
 		</div>
 	</div>
+	<div id="diveStat">
+	<center>
+	<button onClick="toggleStats()">Back to List</button>
+	</center>
+		<div id="diveStatsData">
+		</div>
+	</div>
 </body>
 </html>

theme/light.css

@@ -144,6 +144,30 @@ input[type=checkbox]{
 	box-shadow: 10px 10px 5px #888888;
 }
 
+#diveStat{
+	padding:5px;
+	width:90%;
+	margin:0% 5% 0% 5%;
+	margin-bottom:50px;
+	background-color: rgba(88,121,139,0.3);
+	box-shadow: 10px 10px 5px #888888;
+}
+
+#diveStatsData{
+	overflow:scroll;
+	overflow-y:hidden;
+}
+
+.statscell{
+	min-width:100px;
+	margin:0px;
+}
+
+#stats_header{
+	background-color:#5f7f8f;
+}
+
+
 button,#no_dives_selector{
 	font-size:13px;
 	min-width:55px;

theme/list_lib.js

@@ -646,6 +646,54 @@ function searchin(value, node)
 	return null;
 }
 
+//stats
+
+var statsShows;
+
+/**
+*This is the main function called to show/hide trips
+*/
+function toggleStats()
+{
+	var stats_button = document.getElementById('stats_button');
+	if (statsShows) {
+		statsShows = false;
+		stats_button.style.backgroundColor = "#dfdfdf";
+		document.getElementById('diveListPanel').style.display='block';
+		document.getElementById('diveStat').style.display='none';
+	} else {
+		document.getElementById('diveListPanel').style.display='none';
+		document.getElementById('diveStat').style.display='block';
+		stats_button.style.backgroundColor = "#5f7f8f";
+		statsShows = true;
+		showStats();
+	}
+}
+
+function showStats()
+{
+	document.getElementById('diveStatsData').innerHTML = '';
+	document.getElementById('diveStatsData').innerHTML += getDiveStats();
+}
+
+function getDiveStats(){
+	var res = "";
+	res += '<table><tr id="stats_header">';
+	res += '<td class="statscell">Year</td><td class="statscell">#</td><td class="statscell">Total Time</td><td class="statscell">Avarage Time</td><td class="statscell">Shortest Time</td><td class="statscell">Longest Time</td><td class="statscell">Avarage Depth</td><td class="statscell">Min Depth</td><td class="statscell">Max Depth</td><td class="statscell">Average SAC</td><td class="statscell">Min SAC</td><td class="statscell">Max SAC</td><td class="statscell">Average Temp</td><td class="statscell">Min Temp</td><td class="statscell">Max Temp</td>';
+	res += '</tr>';
+	res += getStatsRows();
+	res += '</table>';
+	return res;
+}
+
+function getStatsRows(){
+	var res = "";
+	for(var i = 0; i < divestat.length ; i++) {
+	res += '<tr><td class="statscell">'+divestat[i].YEAR+'</td><td class="statscell">'+divestat[i].DIVES+'</td><td class="statscell">'+divestat[i].TOTAL_TIME+'</td><td class="statscell">'+divestat[i].AVERAGE_TIME+'</td><td class="statscell">'+divestat[i].SHORTEST_TIME+'</td><td class="statscell">'+divestat[i].LONGEST_TIME+'</td><td class="statscell">'+divestat[i].AVG_DEPTH+'</td><td class="statscell">'+divestat[i].MIN_DEPTH+'</td><td class="statscell">'+divestat[i].MAX_DEPTH+'</td><td class="statscell">'+divestat[i].AVG_SAC+'</td><td class="statscell">'+divestat[i].MIN_SAC+'</td><td class="statscell">'+divestat[i].MAX_SAC+'</td><td class="statscell">'+divestat[i].AVG_TEMP+'</td><td class="statscell">'+divestat[i].MIN_TEMP+'</td><td class="statscell">'+divestat[i].MAX_TEMP+'</td></tr>';
+	}
+	return res;
+}
+
 //trips
 
 var tripsShown;

theme/sand.css

@@ -128,7 +128,6 @@ input[type=checkbox]{
 	font-weight:bold;
 }
 
-
 #controller{
 	min-width:200px;
 	padding:10px;
@@ -143,6 +142,25 @@ input[type=checkbox]{
 	box-shadow: 7px 7px 5px rgba(215, 107, 27, 0.43);
 }
 
+#diveStat{
+	padding:5px;
+	width:90%;
+	margin:0% 5% 0% 5%;
+	margin-bottom:50px;
+	background-color: rgba(88,121,139,0.3);
+	box-shadow: 10px 10px 5px #888888;
+}
+
+#diveStatsData{
+	overflow:scroll;
+	overflow-y:hidden;
+}
+.statscell{
+	border-style:solid;
+	padding-right:100px;
+	margin:0px;
+}
+
 button,#no_dives_selector{
 	font-size:13px;
 	min-width:55px;