HTML: show translated words dynamically from JSON translation file.

Make HTML exports Multilingual by showing dynamically the HTML words
from JSON files. The needed words are translated using the translation
API in subsurface.

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>

2 files changed, 100 insertions, 67 deletions

diff --git a/theme/dive_export.html b/theme/dive_export.html
index 065a8a4f1..fd98ba442 100644
--- a/theme/dive_export.html
+++ b/theme/dive_export.html
@@ -39,6 +39,10 @@ function load_scripts()
 	document.getElementsByTagName("head")[0].appendChild(fileref);
 
 	fileref=document.createElement('script');
+	fileref.setAttribute("src", location.pathname + "_files/translation.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);
 
@@ -127,6 +131,9 @@ window.onload=function(){
 	document.body.style.visibility='visible';
 
 	document.onkeydown = switchDives;
+
+	//translate Page
+	translate_page();
 }
 
 function changeAdvSearch(e){
@@ -145,7 +152,8 @@ function changeAdvSearch(e){
 	</center>
 	<div id="diveListPanel">
 	<div id="controlbox">
-		<input id="search_input" oninput="SearchModules(this.value, null)" placeholder="search"/><a id="adv_srch_sp" onClick="showdiv()" >Advanced Search</a>
+		<input id="search_input" oninput="SearchModules(this.value, null)" placeholder="search"/>
+		<a id="adv_srch_sp" onClick="showdiv()" >Advanced Search</a>
 		<div id="advanced_search">
 		<input type="checkbox" onchange="changeAdvSearch(this)" value="location" checked>Location<br>
 		<input type="checkbox" onchange="changeAdvSearch(this)" value="divemaster" checked>Divemaster<br>
@@ -160,19 +168,19 @@ function changeAdvSearch(e){
 			<option>50</option>
 			<option>100</option>
 		</select>
-		<button onClick="expandAll()"> Expand All </button>
-		<button onClick="collapseAll()"> Collapse All </button>
+		<button id="expnd_all_btn" onClick="expandAll()"> Expand All </button>
+		<button id="claps_all_btn" 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">
-		<div onClick="change_sort_col('1')" class="item">Number</div>
-		<div onClick="change_sort_col('2')" class="item">Date</div>
-		<div onClick="change_sort_col('3')" class="item">Time</div>
-		<div onClick="change_sort_col('6')" class="item_large">Location</div>
-		<div onClick="change_sort_col('4')" class="item">Air Temp</div>
-		<div onClick="change_sort_col('5')" class="item">Water Temp</div>
+		<div id="number_header" onClick="change_sort_col('1')" class="item">Number</div>
+		<div id="date_header" onClick="change_sort_col('2')" class="item">Date</div>
+		<div id="time_header" onClick="change_sort_col('3')" class="item">Time</div>
+		<div id="location_header" onClick="change_sort_col('6')" class="item_large">Location</div>
+		<div id="air_temp_header" onClick="change_sort_col('4')" class="item">Air Temp</div>
+		<div id="water_temp_header" onClick="change_sort_col('5')" class="item">Water Temp</div>
 	</div>
 	<div id="diveslist">
 	</div>
@@ -188,7 +196,7 @@ function changeAdvSearch(e){
 	<center>
 	<div id="but">
 		<button onClick="prevDetailedDive()">&lt;-</button>
-		<button onClick="unshowDiveDetails()">Back to List</button>
+		<button id="bk_to_ls_lbl" onClick="unshowDiveDetails()">Back to List</button>
 		<button onClick="nextDetailedDive()">-&gt;</button>
 	</div>
 	</center>
@@ -197,7 +205,7 @@ function changeAdvSearch(e){
 		<h2 id="dive_no"></h2>
 		<h3 id="dive_location"></h3>
 		</center>
-		<h2 class="det_hed">Dive profile</h2>
+		<h2 id="div_profil_lbl" class="det_hed">Dive profile</h2>
 		<div style="width:100%" id="chart1"></div>
 		</div>
 		<div id="diveinfo">
@@ -224,7 +232,7 @@ function changeAdvSearch(e){
 	</div>
 	<div id="diveStat">
 	<center>
-	<button onClick="toggleStats()">Back to List</button>
+	<button id="bk_to_ls_lbl2" onClick="toggleStats()">Back to List</button>
 	</center>
 		<div id="diveStatsData">
 		</div>
diff --git a/theme/list_lib.js b/theme/list_lib.js
index 089f8bfd0..8c2faca92 100644
--- a/theme/list_lib.js
+++ b/theme/list_lib.js
@@ -126,7 +126,7 @@ function next_page()
 function view_pagging(start, end)
 {
 	var page = document.getElementById("pagging");
-	page.innerHTML = (start + 1) + ' to ' + (end + 1) + ' of ' + (itemsToShow.length) + ' dives';
+	page.innerHTML = (start + 1) + ' to ' + (end + 1) + ' of ' + (itemsToShow.length) + '' + translate.dives;
 }
 
 /**
@@ -134,12 +134,14 @@ function view_pagging(start, end)
 */
 function expandAll()
 {
+	console.time('expnadAll');
 	for (var i = start; i < start + sizeofpage; i++) {
 		if (i >= itemsToShow.length)
 			break;
 		unexpand(document.getElementById(itemsToShow[i]));
 		items[itemsToShow[i]].expanded = false;
 	}
+	console.timeEnd('expnadAll');
 }
 
 /**
@@ -204,22 +206,22 @@ function getlimited(dive)
 
 function getExpanded(dive)
 {
-	var res = '<table><tr><td class="words">Date: </td><td>' + dive.date +
-		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time: </td><td>' + dive.time +
-		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location: </td><td>' + '<a onclick=\"Search_list_Modules(\'' + dive.location + '\', {location:true, divemaster:false, buddy:false, notes:false, tags:false,})\">' + dive.location + '</a>' +
-		  '</td></tr></table><table><tr><td class="words">Rating:</td><td>' + putRating(dive.rating) +
-		  '</td><td class="words">&nbsp;&nbsp;&nbsp;Visibilty:</td><td>' + putRating(dive.visibility) +
+	var res = '<table><tr><td class="words">' + translate.Date + ': </td><td>' + dive.date +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Time + ': </td><td>' + dive.time +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Locaiton + ': </td><td>' + '<a onclick=\"Search_list_Modules(\'' + dive.location + '\', {location:true, divemaster:false, buddy:false, notes:false, tags:false,})\">' + dive.location + '</a>' +
+		  '</td></tr></table><table><tr><td class="words">' + translate.Rating + ':</td><td>' + putRating(dive.rating) +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;' + translate.Visibility + ':</td><td>' + putRating(dive.visibility) +
 		  '</td></tr></table>' +
-		  '<table><tr><td class="words">Air temp: </td><td>' + dive.temperature.air +
-		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;Water temp: </td><td>' + dive.temperature.water +
-		  '</td></tr></table><table><tr><td class="words">Duration: </td><td>' + dive.dive_duration +
-		  '</td></tr><tr><td class="words">DiveMaster: </td><td>' + dive.divemaster +
-		  '</td></tr><tr><td class="words"><p>Buddy: </p></td><td>' + dive.buddy +
-		  '</td></tr><tr><td class="words">Suit: </td><td>' + dive.suit +
-		  '</td></tr><tr><td class="words">Tags: </td><td>' + putTags(dive.tags) +
-		  '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes + '</div>';
+		  '<table><tr><td class="words">' + translate.Air_Temp + ': </td><td>' + dive.temperature.air +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Water_Temp + ': </td><td>' + dive.temperature.water +
+		  '</td></tr></table><table><tr><td class="words">' + translate.Duration + ': </td><td>' + dive.dive_duration +
+		  '</td></tr><tr><td class="words">' + translate.DiveMaster + ': </td><td>' + dive.divemaster +
+		  '</td></tr><tr><td class="words"><p>' + translate.Buddy + ': </p></td><td>' + dive.buddy +
+		  '</td></tr><tr><td class="words">' + translate.Suit + ': </td><td>' + dive.suit +
+		  '</td></tr><tr><td class="words">' + translate.Tags + ': </td><td>' + putTags(dive.tags) +
+		  '</td></tr></table><div style="margin:10px;"><p class="words">' + translate.Notes + ': </p>' + dive.notes + '</div>';
 	if (settings.listOnly === '0') {
-		res += '<center><a onclick="showDiveDetails(' + dive.number + ')">Show more details</a></center>';
+		res += '<center><a onclick="showDiveDetails(' + dive.number + ')">' + translate.Show_more_details + '</a></center>';
 	}
 	return res;
 };
@@ -660,11 +662,11 @@ function toggleStats()
 	if (statsShows) {
 		statsShows = false;
 		stats_button.style.backgroundColor = "#dfdfdf";
-		document.getElementById('diveListPanel').style.display='block';
-		document.getElementById('diveStat').style.display='none';
+		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';
+		document.getElementById('diveListPanel').style.display = 'none';
+		document.getElementById('diveStat').style.display = 'block';
 		stats_button.style.backgroundColor = "#5f7f8f";
 		statsShows = true;
 		showStats();
@@ -677,29 +679,33 @@ function showStats()
 	document.getElementById('diveStatsData').innerHTML += getDiveStats();
 }
 
-function 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">Average Time</td><td class="statscell">Shortest Time</td><td class="statscell">Longest Time</td><td class="statscell">Average 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 += '<td class="statscell">' + translate.Year + '</td><td class="statscell">#</td><td class="statscell">' + translate.Total_Time + '</td><td class="statscell">' + translate.Average_Time + '</td><td class="statscell">' + translate.Shortest_Time + '</td><td class="statscell">' + translate.Longest_Time + '</td><td class="statscell">' + translate.Average_Depth + '</td><td class="statscell">' + translate.Min_Depth + '</td><td class="statscell">' + translate.Max_Depth + '</td><td class="statscell">' + translate.Average_SAC + '</td><td class="statscell">' + translate.Min_SAC + '</td><td class="statscell">' + translate.Max_SAC + '</td><td class="statscell">' + translate.Average_Temp + '</td><td class="statscell">' + translate.Min_Temp + '</td><td class="statscell">' + translate.Max_Temp + '</td>';
 	res += '</tr>';
 	res += getStatsRows();
 	res += '</table>';
 	return res;
 }
 
-function getStatsRows(){
+function getStatsRows()
+{
 	var res = "";
-	for(var i = 0; i < divestat.length ; i++) {
-	res += '<tr onmouseout="stats_row_unhighlight(this)" onmouseover="stats_row_highlight(this)" class="stats_row"><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>';
+	for (var i = 0; i < divestat.length; i++) {
+		res += '<tr onmouseout="stats_row_unhighlight(this)" onmouseover="stats_row_highlight(this)" class="stats_row"><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;
 }
 
-function stats_row_highlight(row){
+function stats_row_highlight(row)
+{
 	row.style.backgroundColor = "rgba(125,125,125,0.7)";
 }
 
-function stats_row_unhighlight(row){
+function stats_row_unhighlight(row)
+{
 	row.style.backgroundColor = "rgba(125,125,125,0.3)";
 }
 
@@ -806,7 +812,7 @@ function get_weight_HTML(weight)
 function get_weights_HTML(dive)
 {
 	var result = "";
-	result += '<table><tr><td class="words">Weight</td><td class="words">Type</td></tr>';
+	result += '<table><tr><td class="words">' + translate.Weight + '</td><td class="words">' + translate.Type + '</td></tr>';
 	for (var i in dive.Weights) {
 		result += get_weight_HTML(dive.Weights[i]);
 	}
@@ -840,7 +846,7 @@ function get_cylinder_HTML(cylinder)
 function get_cylinders_HTML(dive)
 {
 	var result = "";
-	result += '<h2 class="det_hed">Dive equipments</h2><table><tr><td class="words">Type</td><td class="words">Size</td><td class="words">Work Pressure</td><td class="words">Start Pressure</td><td class="words">End Pressure</td><td class="words">O2</td></tr>';
+	result += '<h2 class="det_hed">' + translate.Dive_equipments + '</h2><table><tr><td class="words">' + translate.Type + '</td><td class="words">' + translate.Size + '</td><td class="words">' + translate.Work_Pressure + '</td><td class="words">' + translate.Start_Pressure + '</td><td class="words">' + translate.End_Pressure + '</td><td class="words">O2</td></tr>';
 	for (var i in dive.Cylinders) {
 		result += get_cylinder_HTML(dive.Cylinders[i]);
 	}
@@ -877,7 +883,7 @@ function get_bookmarks_HTML(dive)
 	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><td class="words">Value</td></tr>';
+	result += '<h2 class="det_hed">' + translate.Events + '</h2><table><tr><td class="words">' + translate.Name + '</td><td class="words">' + translate.Time + '</td><td class="words">' + translate.Value + '</td></tr>';
 	for (var i in dive.events) {
 		result += get_bookmark_HTML(dive.events[i]);
 	}
@@ -890,21 +896,21 @@ function get_bookmarks_HTML(dive)
 */
 function get_dive_HTML(dive)
 {
-	return '<h2 class="det_hed">Dive Information</h2><table><tr><td class="words">Date: </td><td>' + dive.date +
-	       '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time: </td><td>' + dive.time +
-	       '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location: </td><td>' + '<a onclick=\"Search_list_Modules(\'' + dive.location + '\', {location:true, divemaster:false, buddy:false, notes:false, tags:false,})\">' +
-	       dive.location + '</a>' +
-	       '</td></tr></table><table><tr><td class="words">Rating:</td><td>' + putRating(dive.rating) +
-	       '</td><td class="words">&nbsp;&nbsp;&nbsp;Visibilty:</td><td>' + putRating(dive.visibility) +
-	       '</td></tr></table>' +
-	       '<table><tr><td class="words">Air temp: </td><td>' + dive.temperature.air +
-	       '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;Water temp: </td><td>' + dive.temperature.water +
-	       '</td></tr></table><table><tr><td class="words">Duration: </td><td>' + dive.dive_duration +
-	       '</td></tr><tr><td class="words">DiveMaster: </td><td>' + dive.divemaster +
-	       '</td></tr><tr><td class="words"><p>Buddy: </p></td><td>' + dive.buddy +
-	       '</td></tr><tr><td class="words">Suit: </td><td>' + dive.suit +
-	       '</td></tr><tr><td class="words">Tags: </td><td>' + putTags(dive.tags) +
-	       '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes + '</div>';
+	var res = '<h2 class="det_hed">' + translate.Dive_information + '</h2><table><tr><td class="words">' + translate.Date + ': </td><td>' + dive.date +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Time + ': </td><td>' + dive.time +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Locaiton + ': </td><td>' + '<a onclick=\"Search_list_Modules(\'' + dive.location + '\', {location:true, divemaster:false, buddy:false, notes:false, tags:false,})\">' + dive.location + '</a>' +
+		  '</td></tr></table><table><tr><td class="words">' + translate.Rating + ':</td><td>' + putRating(dive.rating) +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;' + translate.Visibility + ':</td><td>' + putRating(dive.visibility) +
+		  '</td></tr></table>' +
+		  '<table><tr><td class="words">' + translate.Air_Temp + ': </td><td>' + dive.temperature.air +
+		  '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;' + translate.Water_Temp + ': </td><td>' + dive.temperature.water +
+		  '</td></tr></table><table><tr><td class="words">' + translate.Duration + ': </td><td>' + dive.dive_duration +
+		  '</td></tr><tr><td class="words">' + translate.DiveMaster + ': </td><td>' + dive.divemaster +
+		  '</td></tr><tr><td class="words"><p>' + translate.Buddy + ': </p></td><td>' + dive.buddy +
+		  '</td></tr><tr><td class="words">' + translate.Suit + ': </td><td>' + dive.suit +
+		  '</td></tr><tr><td class="words">' + translate.Tags + ': </td><td>' + putTags(dive.tags) +
+		  '</td></tr></table><div style="margin:10px;"><p class="words">' + translate.Notes + ': </p>' + dive.notes + '</div>';
+	return res;
 };
 
 /**
@@ -912,10 +918,9 @@ function get_dive_HTML(dive)
 */
 function get_status_HTML(dive)
 {
-	return '<h2 class="det_hed">Dive Status</h2><table><tr><td class="words">Sac: </td><td>' + ml_to_litre(dive.sac) +
+	return '<h2 class="det_hed">' + translate.Dive_Status + '</h2><table><tr><td class="words">Sac: </td><td>' + ml_to_litre(dive.sac) +
 	       ' l/min' + '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Otu: </td><td>' + dive.otu +
-	       '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cns: </td><td>' + dive.cns +
-	       '</td></tr></table>';
+	       '</td><td class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cns: </td><td>' + dive.cns + '</td></tr></table>';
 };
 
 function get_dive_photos(dive)
@@ -927,8 +932,8 @@ function get_dive_photos(dive)
 	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">';
+		slider += '<img src="' + location.pathname +
+			  '_files/photos/' + dive.photos[i].filename + '" alt="" height="240" width="240">';
 	}
 	return slider;
 }
@@ -1034,8 +1039,7 @@ function canvas_draw()
 			0
 		]);
 	}
-	if (plot1)
-	{
+	if (plot1) {
 		$('chart1').unbind();
 		plot1.destroy();
 	}
@@ -1166,7 +1170,7 @@ function showDiveDetails(dive)
 
 function setDiveTitle(dive)
 {
-	document.getElementById("dive_no").innerHTML = "Dive No. " + (settings.subsurfaceNumbers === '0' ?
+	document.getElementById("dive_no").innerHTML = translate.Dive_No + (settings.subsurfaceNumbers === '0' ?
 		dive.number + 1 : dive.subsurface_number);
 	document.getElementById("dive_location").innerHTML = dive.location;
 }
@@ -1214,7 +1218,28 @@ function switchDives(e)
 	}
 }
 
-window.onresize = function(event) {
-      if (plot1)
-	      plot1.replot( { resetAxes: true } );
+window.onresize = function(event)
+{
+	if (plot1)
+		plot1.replot({
+			resetAxes : true
+		});
 };
+
+function translate_page()
+{
+	document.getElementById("number_header").innerHTML = translate.Number;
+	document.getElementById("date_header").innerHTML = translate.Date;
+	document.getElementById("time_header").innerHTML = translate.Time;
+	document.getElementById("location_header").innerHTML = translate.Locaiton;
+	document.getElementById("air_temp_header").innerHTML = translate.Air_Temp;
+	document.getElementById("water_temp_header").innerHTML = translate.Water_Temp;
+	document.getElementById("adv_srch_sp").innerHTML = translate.Advanced_Search;
+	document.getElementById("expnd_all_btn").innerHTML = translate.Expand_All;
+	document.getElementById("claps_all_btn").innerHTML = translate.Collapse_All;
+	document.getElementById("trip_button").innerHTML = translate.trips;
+	document.getElementById("stats_button").innerHTML = translate.Statistics;
+	document.getElementById("div_profil_lbl").innerHTML = translate.Dive_profile;
+	document.getElementById("bk_to_ls_lbl").innerHTML = translate.Back_to_List;
+	document.getElementById("bk_to_ls_lbl2").innerHTML = translate.Back_to_List;
+}