mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
HTML: Create theme directory
Create theme directory that contains the html templates copied to the exporting directory. - dive_export.html is the main html template. - light.css and sand.css are two separte themes. - list_lib.js is the main javascript library. 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:
parent
e21032c99b
commit
d8c46fbdb6
5 changed files with 1120 additions and 0 deletions
139
theme/dive_export.html
Normal file
139
theme/dive_export.html
Normal file
|
@ -0,0 +1,139 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>dive log export</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="theme.css">
|
||||||
|
<script src="file.json"></script>
|
||||||
|
<script src="settings.json"></script>
|
||||||
|
<script src="list_lib.js" type="text/javascript"></script>
|
||||||
|
<script>
|
||||||
|
//////////////////////////////////
|
||||||
|
//advance settings window//
|
||||||
|
|
||||||
|
var advanced_shown=false;
|
||||||
|
function showdiv(){
|
||||||
|
var search = document.getElementById("advanced_search");
|
||||||
|
if(advanced_shown==false){
|
||||||
|
search.style.display='block';
|
||||||
|
advanced_shown=true;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
search.style.display='none';
|
||||||
|
advanced_shown=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function hideAdvanced(){
|
||||||
|
if(advanced_shown==false) return;
|
||||||
|
var search = document.getElementById("advanced_search");
|
||||||
|
search.style.display='none';
|
||||||
|
advanced_shown=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onclick=check;
|
||||||
|
function check(e)
|
||||||
|
{
|
||||||
|
var target = (e && e.target) || (event && event.srcElement);
|
||||||
|
var obj = document.getElementById('advanced_search');
|
||||||
|
var obj2 = document.getElementById('adv_srch_sp');
|
||||||
|
if(target!=obj && target!=obj2 && target.type!="checkbox"){
|
||||||
|
hideAdvanced();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
|
||||||
|
function loadSettings(){
|
||||||
|
if(typeof settings === 'undefined')return;
|
||||||
|
document.body.style.fontSize=settings.fontSize;
|
||||||
|
document.body.style.fontFamily=settings.fontFamily;
|
||||||
|
}
|
||||||
|
|
||||||
|
var searchingModules = new Array();
|
||||||
|
|
||||||
|
window.onload=function(){
|
||||||
|
|
||||||
|
//initialize settings
|
||||||
|
loadSettings();
|
||||||
|
|
||||||
|
//initializing default searchers
|
||||||
|
searchingModules["location"] = new SearchModule(true);
|
||||||
|
searchingModules["divemaster"] = new SearchModule(true);
|
||||||
|
searchingModules["buddy"] = new SearchModule(true);
|
||||||
|
searchingModules["notes"] = new SearchModule(true);
|
||||||
|
searchingModules["tags"] = new SearchModule(true);
|
||||||
|
|
||||||
|
getItems();
|
||||||
|
|
||||||
|
//initializing search words
|
||||||
|
for(var i=0;i<items.length;i++){
|
||||||
|
searchingModules["location"].Enter_search_string(items[i].location,i);
|
||||||
|
|
||||||
|
searchingModules["divemaster"].Enter_search_string(items[i].divemaster,i);
|
||||||
|
|
||||||
|
searchingModules["buddy"].Enter_search_string(items[i].buddy,i);
|
||||||
|
|
||||||
|
searchingModules["notes"].Enter_search_string(items[i].notes,i);
|
||||||
|
|
||||||
|
searchingModules["tags"].Enter_search_tag(items[i].tags,i);
|
||||||
|
}
|
||||||
|
|
||||||
|
sizeofpage=10;
|
||||||
|
showAllDives();
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeAdvSearch(e){
|
||||||
|
searchingModules[e.value].enabled=e.checked;
|
||||||
|
SearchModules(document.getElementById("search_input").value);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<div id="header_container">
|
||||||
|
<div id="logo"></div>
|
||||||
|
<h1>Subsurface</h1>
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
<div id="divePanel">
|
||||||
|
<div id="controlbox">
|
||||||
|
<input id="search_input" oninput="SearchModules(this.value)" 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>
|
||||||
|
<input type="checkbox" onchange="changeAdvSearch(this)" value="buddy" checked>Buddy<br>
|
||||||
|
<input type="checkbox" onchange="changeAdvSearch(this)" value="notes" checked>Notes<br>
|
||||||
|
<input type="checkbox" onchange="changeAdvSearch(this)" value="tags" checked>Tags<br>
|
||||||
|
</div>
|
||||||
|
<div id="toolbox">
|
||||||
|
<select id="no_dives_selector" onChange="setNumberOfDives(this)">
|
||||||
|
<option>10</option>
|
||||||
|
<option>20</option>
|
||||||
|
<option>50</option>
|
||||||
|
<option>100</option>
|
||||||
|
</select>
|
||||||
|
<button onClick="expandAll()"> Expand All </button>
|
||||||
|
<button onClick="collapseAll()"> Collapse All </button>
|
||||||
|
<button id="trip_button" onclick="toggleTrips();">trips</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="header">
|
||||||
|
<div onClick="list_sort('1')" class="item">Number</div>
|
||||||
|
<div onClick="list_sort('2')" class="item">Date</div>
|
||||||
|
<div onClick="list_sort('3')" class="item">Time</div>
|
||||||
|
<div onClick="list_sort('6')" class="item_large">Location</div>
|
||||||
|
<div onClick="list_sort('4')" class="item">Air Temp</div>
|
||||||
|
<div onClick="list_sort('5')" class="item">Water Temp</div>
|
||||||
|
</div>
|
||||||
|
<div id="diveslist">
|
||||||
|
</div>
|
||||||
|
<center>
|
||||||
|
<div id="controller">
|
||||||
|
<button onClick="prev_page()"><-</button>
|
||||||
|
<span id="pagging"></span>
|
||||||
|
<button onClick="next_page()">-></button>
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
201
theme/light.css
Normal file
201
theme/light.css
Normal file
|
@ -0,0 +1,201 @@
|
||||||
|
body{
|
||||||
|
min-width:680px;
|
||||||
|
background-color:#dfdfdf;
|
||||||
|
font-size:12px;
|
||||||
|
font-family: 'Lobster', helvetica, arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 70px;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: 'Lobster', helvetica, arial;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #48697B;
|
||||||
|
padding-top:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul{
|
||||||
|
background-color:#7899AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
table{
|
||||||
|
margin:10px;
|
||||||
|
font-size:inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr{
|
||||||
|
padding:6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th{
|
||||||
|
padding:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trips{
|
||||||
|
background-color:#5A7F9A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.words{
|
||||||
|
font-size:inherit;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item{
|
||||||
|
width:9%;
|
||||||
|
min-width:82px;
|
||||||
|
max-width:250px;
|
||||||
|
float:left;
|
||||||
|
cursor:pointer;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_large{
|
||||||
|
width:16%;
|
||||||
|
min-width:200px;
|
||||||
|
max-width:385px;
|
||||||
|
margin-right:8px;
|
||||||
|
float:left;
|
||||||
|
cursor:pointer;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background-image: url("poster.png");
|
||||||
|
background-size: 150px 150px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header_container{
|
||||||
|
width:600px;
|
||||||
|
height:auto;
|
||||||
|
margin:50px;
|
||||||
|
margin-bottom:100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ul,#header{
|
||||||
|
border-style:solid;
|
||||||
|
border-radius:14px;
|
||||||
|
border-color:#7899AB;
|
||||||
|
margin:7px;
|
||||||
|
padding:5px 10px 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]{
|
||||||
|
height:27;
|
||||||
|
width:27;
|
||||||
|
margin:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advanced_search{
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 1px 1px 5px #888888;
|
||||||
|
z-index: 99;
|
||||||
|
width: 300px;
|
||||||
|
max-width: 30%;
|
||||||
|
min-width: 270px;
|
||||||
|
background-color: rgba(105,126,131,0.8);
|
||||||
|
font-size:16px;
|
||||||
|
color:white;
|
||||||
|
display:none;
|
||||||
|
max-height:40%;
|
||||||
|
overflow:scroll;
|
||||||
|
overflow-y:auto;
|
||||||
|
overflow-x:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbox{
|
||||||
|
float:right;
|
||||||
|
height:35px;
|
||||||
|
overflow:hidden;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header{
|
||||||
|
height:20px;
|
||||||
|
background-color:#5f7f8f;
|
||||||
|
border-color:#5f7f8f;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#controller{
|
||||||
|
min-width:200px;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#divePanel{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,#no_dives_selector{
|
||||||
|
font-size:13px;
|
||||||
|
min-width:55px;
|
||||||
|
line-height:2;
|
||||||
|
margin:0px 0px 0px 0px;
|
||||||
|
border-radius:10px;
|
||||||
|
opacity:0.6;
|
||||||
|
border-style:outset;
|
||||||
|
border-color:black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no_dives_selector{
|
||||||
|
padding:5px;
|
||||||
|
text-indent: 0.01px;
|
||||||
|
text-overflow: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover{
|
||||||
|
background-color:#4A5F5F;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration:underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul:hover{
|
||||||
|
background-color:#88A9BB;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_res{
|
||||||
|
font-size:0.6em;
|
||||||
|
visibility:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_input{
|
||||||
|
border-radius:6px;
|
||||||
|
max-width:30%;
|
||||||
|
padding:3px;
|
||||||
|
opacity:0.6;
|
||||||
|
margin: 0px 5px 5px 5px;
|
||||||
|
border-style:outset;
|
||||||
|
border-color:black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox{
|
||||||
|
margin:7px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#divePanel{
|
||||||
|
padding:4px;
|
||||||
|
width:100%;
|
||||||
|
margin:0% 0% 0% 0%;
|
||||||
|
}
|
||||||
|
}
|
577
theme/list_lib.js
Normal file
577
theme/list_lib.js
Normal file
|
@ -0,0 +1,577 @@
|
||||||
|
var itemsToShow = new Array(); //list of indexes to all dives to view
|
||||||
|
var items = new Array();
|
||||||
|
var start; //index of first element viewed in itemsToShow
|
||||||
|
var sizeofpage; //size of viewed page
|
||||||
|
var numberofwords=0; //just for stats
|
||||||
|
var olditemstoshow; //to reference the indexes to all dives if changed
|
||||||
|
//////////////////////////////////
|
||||||
|
// //
|
||||||
|
// View Model //
|
||||||
|
// //
|
||||||
|
//////////////////////////////////
|
||||||
|
|
||||||
|
/**
|
||||||
|
*This Method view all items
|
||||||
|
*View N pages each of sizeofpage size items.
|
||||||
|
*starting from zero
|
||||||
|
*/
|
||||||
|
function showAllDives(){
|
||||||
|
for(var i=0 ; i < items.length ; i++){
|
||||||
|
itemsToShow.push(i);
|
||||||
|
}
|
||||||
|
olditemstoshow = itemsToShow;
|
||||||
|
start=0;
|
||||||
|
viewInPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*This function view the 'itemstoshow' in pages.
|
||||||
|
*It start from 'start' variable.
|
||||||
|
*It showes N pages each of sizeofpage size.
|
||||||
|
*/
|
||||||
|
function viewInPage(){
|
||||||
|
var end = start + sizeofpage -1;
|
||||||
|
if(end >= itemsToShow.length ) end = itemsToShow.length-1;
|
||||||
|
updateView(start,end);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*addHTML this Method puts the HTML of items of given indexes
|
||||||
|
*@param {array} indexes array of indexes to put in HTML
|
||||||
|
*/
|
||||||
|
function updateView(start,end){
|
||||||
|
var divelist = document.getElementById('diveslist');
|
||||||
|
divelist.innerHTML="";
|
||||||
|
for(var i=start;i<=end;i++){
|
||||||
|
divelist.innerHTML+='<ul id="'+itemsToShow[i]+'" onclick="toggleExpantion(this)"</ul>';
|
||||||
|
expand(document.getElementById(itemsToShow[i]));
|
||||||
|
items[itemsToShow[i]].expanded = true;
|
||||||
|
};
|
||||||
|
view_pagging(start,end);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*addHTML this Method puts the HTML of items of given indexes
|
||||||
|
*@param {array} indexes array of indexes to put in HTML
|
||||||
|
*/
|
||||||
|
function addHTML(indexes){
|
||||||
|
var divelist = document.getElementById('diveslist');
|
||||||
|
divelist.innerHTML="";
|
||||||
|
for(var i=0;i<indexes.length;i++){
|
||||||
|
divelist.innerHTML+='<ul id="'+indexes[i]+'" onclick="toggleExpantion(this)"</ul>';
|
||||||
|
expand(document.getElementById(indexes[i]));
|
||||||
|
itemsToShow[indexes[i]].expanded = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*This Method shows items in a range [start,end]
|
||||||
|
*@param {integer} start start from this index
|
||||||
|
*@param {integer} finish at this index.
|
||||||
|
*/
|
||||||
|
function view_in_range(start,end){
|
||||||
|
var ind = new Array();
|
||||||
|
if(end>=itemsToShow.length)end=itemsToShow.length-1;
|
||||||
|
for(var i=start ; i <= end ; i++){
|
||||||
|
ind.push(i);
|
||||||
|
}
|
||||||
|
addHTML(ind);
|
||||||
|
view_pagging(start,end);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function prev_page(){
|
||||||
|
var end = start+sizeofpage-1;
|
||||||
|
if(start-sizeofpage>0){
|
||||||
|
start-=sizeofpage;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
start=0;
|
||||||
|
}
|
||||||
|
if(end-sizeofpage>0){
|
||||||
|
end-=sizeofpage;
|
||||||
|
}
|
||||||
|
if(end>=itemsToShow.length){
|
||||||
|
end = itemsToShow.length-1;
|
||||||
|
}
|
||||||
|
updateView(start,end)
|
||||||
|
}
|
||||||
|
|
||||||
|
function next_page(){
|
||||||
|
var end = start+sizeofpage-1;
|
||||||
|
if(end+sizeofpage<itemsToShow.length){
|
||||||
|
end+=sizeofpage;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
end=itemsToShow.length-1;
|
||||||
|
}
|
||||||
|
if(start+sizeofpage<itemsToShow.length){
|
||||||
|
start+=sizeofpage;
|
||||||
|
}
|
||||||
|
updateView(start,end)
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
|
||||||
|
function view_pagging(start,end){
|
||||||
|
var page = document.getElementById("pagging");
|
||||||
|
page.innerHTML= (start+1)+' to '+(end+1) + ' of '+ (itemsToShow.length) +' dives';
|
||||||
|
}
|
||||||
|
|
||||||
|
function expandAll(){
|
||||||
|
for(var i=start;i<start+sizeofpage;i++){
|
||||||
|
if(i>=itemsToShow.length) break;
|
||||||
|
unexpand(document.getElementById(itemsToShow[i]));
|
||||||
|
items[itemsToShow[i]].expanded = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function collapseAll(){
|
||||||
|
for(var i=start;i<start+sizeofpage;i++){
|
||||||
|
if(i>=itemsToShow.length) break;
|
||||||
|
expand(document.getElementById(itemsToShow[i]));
|
||||||
|
items[itemsToShow[i]].expanded = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setNumberOfDives(e){
|
||||||
|
var value = e.options[e.selectedIndex].value;
|
||||||
|
sizeofpage=parseInt(value);
|
||||||
|
var end = start + sizeofpage -1;
|
||||||
|
view_in_range(start,end);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleExpantion(ul){
|
||||||
|
if(!items[ul.id].expanded)
|
||||||
|
{
|
||||||
|
expand(ul);
|
||||||
|
items[ul.id].expanded = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
unexpand(ul);
|
||||||
|
items[ul.id].expanded = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function expand(ul){
|
||||||
|
ul.innerHTML = getlimited(items[ul.id]);
|
||||||
|
ul.style.padding='2px 10px 2px 10px';
|
||||||
|
}
|
||||||
|
function unexpand(ul){
|
||||||
|
ul.innerHTML = getExpanded(items[ul.id]);
|
||||||
|
ul.style.padding='3px 10px 3px 10px';
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// Dive Model
|
||||||
|
//
|
||||||
|
//////////////////////////////////////
|
||||||
|
|
||||||
|
function getlimited (dive) {
|
||||||
|
return '<div style="height:20px"><div class="item">'+dive.subsurface_number+'</div>'+
|
||||||
|
'<div class="item">'+dive.date+'</div>'+
|
||||||
|
'<div class="item">'+dive.time+'</div>'+
|
||||||
|
'<div class="item_large">'+dive.location+'</div>'+
|
||||||
|
'<div class="item">'+dive.temperature.air+'</div>'+
|
||||||
|
'<div class="item">'+dive.temperature.water+'</div></div>';
|
||||||
|
};
|
||||||
|
|
||||||
|
function getExpanded (dive) {
|
||||||
|
return '<table><tr><td class="words">Date: </td><td>'+dive.date+
|
||||||
|
'</td><td class="words">     Time: </td><td>'+dive.time +
|
||||||
|
'</td><td class="words">     Location: </td><td>'+'<a onclick=\"Search_list_Modules(\''+dive.location+'\')\">'
|
||||||
|
+dive.location +'</a>'+
|
||||||
|
'</td></tr></table><table><tr><td class="words">Rating:</td><td>'+putRating(dive.rating)+
|
||||||
|
'</td><td class="words">   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">    Water temp: </td><td>'+dive.temperature.water +
|
||||||
|
'</td></tr></table><table><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>';
|
||||||
|
};
|
||||||
|
|
||||||
|
function putTags(tags){
|
||||||
|
var result="";
|
||||||
|
for(var i in tags){
|
||||||
|
result+='<a onclick=\"Search_list_Modules(\''+tags[i]+'\')\">'+tags[i]+'</a>';
|
||||||
|
if(i<tags.length-1)
|
||||||
|
result+=', ';
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function putRating(rating){
|
||||||
|
var result;
|
||||||
|
result='<div>';
|
||||||
|
for(var i=0;i<rating;i++)
|
||||||
|
result+=' ★ ';
|
||||||
|
for(var i=rating;i<5;i++)
|
||||||
|
result+=' ☆ ';
|
||||||
|
result+='</div>';
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// Sorting
|
||||||
|
//
|
||||||
|
/////////////////////////////////////
|
||||||
|
|
||||||
|
/*
|
||||||
|
this variables keep the state of
|
||||||
|
each col. sorted asc or des
|
||||||
|
*/
|
||||||
|
var number = true;
|
||||||
|
var time = true;
|
||||||
|
var date = true;
|
||||||
|
var air = true;
|
||||||
|
var water = true;
|
||||||
|
var locat = true;
|
||||||
|
|
||||||
|
function list_sort(sortOn){
|
||||||
|
switch(sortOn){
|
||||||
|
case '1' ://number
|
||||||
|
if(number){
|
||||||
|
sort_it(sortOn,cmpNumAsc);
|
||||||
|
number = 1 - number;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpNumDes);
|
||||||
|
number = 1 - number;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '2' ://date
|
||||||
|
if(date){
|
||||||
|
sort_it(sortOn,cmpDateAsc);
|
||||||
|
date = 1 - date;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpDateDes);
|
||||||
|
date = 1 - date;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '3'://time
|
||||||
|
if(time){
|
||||||
|
sort_it(sortOn,cmpTimeDes);
|
||||||
|
time = 1 - time;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpTimeAsc);
|
||||||
|
time = 1 - time;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '4'://Air temp
|
||||||
|
if(air){
|
||||||
|
sort_it(sortOn,cmpAtempDes);
|
||||||
|
air = 1 - air;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpAtempAsc);
|
||||||
|
air = 1 - air;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '5'://Water temp
|
||||||
|
if(water){
|
||||||
|
sort_it(sortOn,cmpWtempDes);
|
||||||
|
water = 1 - water;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpWtempAsc);
|
||||||
|
water = 1 - water;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case '6'://Water temp
|
||||||
|
if(locat){
|
||||||
|
sort_it(sortOn,cmpLocationDes);
|
||||||
|
locat = 1 - locat;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
sort_it(sortOn,cmpLocationAsc);
|
||||||
|
locat = 1 - locat;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cmpLocationAsc(j,iSmaller){
|
||||||
|
return items[j].location < items[iSmaller].location ;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cmpLocationDes(j,iSmaller){
|
||||||
|
return items[j].location > items[iSmaller].location ;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cmpNumAsc(j,iSmaller){
|
||||||
|
return items[j].subsurface_number < items[iSmaller].subsurface_number ;
|
||||||
|
}
|
||||||
|
function cmpNumDes(j,iSmaller){
|
||||||
|
return items[j].subsurface_number > items[iSmaller].subsurface_number ;
|
||||||
|
}
|
||||||
|
function cmpTimeAsc(j,iSmaller){
|
||||||
|
return items[j].time < items[iSmaller].time ;
|
||||||
|
}
|
||||||
|
function cmpTimeDes(j,iSmaller){
|
||||||
|
return items[j].time > items[iSmaller].time ;
|
||||||
|
}
|
||||||
|
function cmpDateAsc(j,iSmaller){
|
||||||
|
return items[j].date < items[iSmaller].date ;
|
||||||
|
}
|
||||||
|
function cmpDateDes(j,iSmaller){
|
||||||
|
return items[j].date > items[iSmaller].date ;
|
||||||
|
}
|
||||||
|
function cmpAtempAsc(j,iSmaller){
|
||||||
|
return parseInt(items[j].temperature.air) < parseInt(items[iSmaller].temperature.air) ;
|
||||||
|
}
|
||||||
|
function cmpAtempDes(j,iSmaller){
|
||||||
|
return parseInt(items[j].temperature.air) > parseInt(items[iSmaller].temperature.air) ;
|
||||||
|
}
|
||||||
|
function cmpWtempAsc(j,iSmaller){
|
||||||
|
return parseInt(items[j].temperature.water) < parseInt(items[iSmaller].temperature.water) ;
|
||||||
|
}
|
||||||
|
function cmpWtempDes(j,iSmaller){
|
||||||
|
return parseInt(items[j].temperature.water) > parseInt(items[iSmaller].temperature.water) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sort_it(sortOn,function_){
|
||||||
|
var res = new Array();
|
||||||
|
var visited = new Array(itemsToShow.length);
|
||||||
|
for(var j=0;j<itemsToShow.length;j++){
|
||||||
|
visited[j]=0;
|
||||||
|
}
|
||||||
|
for(var i=0;i< itemsToShow.length ;i++){
|
||||||
|
for(var j=0;j<itemsToShow.length;j++)
|
||||||
|
if(visited[j] == false)
|
||||||
|
var iSmaller=j;
|
||||||
|
for(var j=0;j<itemsToShow.length;j++){
|
||||||
|
if(function_(itemsToShow[j],itemsToShow[iSmaller])){
|
||||||
|
if(visited[j] == false){
|
||||||
|
iSmaller = j;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
visited[iSmaller] = true;
|
||||||
|
res.push(itemsToShow[iSmaller]);
|
||||||
|
}
|
||||||
|
itemsToShow = res;
|
||||||
|
start=0;
|
||||||
|
viewInPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// Searching
|
||||||
|
//
|
||||||
|
//////////////////////////////////////
|
||||||
|
function Set(){
|
||||||
|
this.keys = new Array();
|
||||||
|
}
|
||||||
|
|
||||||
|
Set.prototype.contains = function(key){
|
||||||
|
return (this.keys.indexOf(key) >= 0) ? true : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
Set.prototype.push = function(key) {
|
||||||
|
if(!this.contains(key)){
|
||||||
|
this.keys.push(key);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Set.prototype.isEmpty = function() {
|
||||||
|
return this.keys.length<=0? true:false;
|
||||||
|
};
|
||||||
|
|
||||||
|
Set.prototype.forEach = function(do_){
|
||||||
|
this.keys.forEach(do_);
|
||||||
|
};
|
||||||
|
|
||||||
|
Set.prototype.Union = function(another_set){
|
||||||
|
if (another_set == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for(var i=0; i<another_set.keys.length ;i++){
|
||||||
|
this.push(another_set.keys[i]);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////////////////
|
||||||
|
|
||||||
|
function Node(value){
|
||||||
|
this.children = new Array();
|
||||||
|
this.value=value;
|
||||||
|
this.key= new Set();
|
||||||
|
}
|
||||||
|
///////////////////////////////////////
|
||||||
|
function Search_list_Modules(searchfor){
|
||||||
|
document.getElementById("search_input").value=searchfor;
|
||||||
|
SearchModules(searchfor);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SearchModules(searchfor){
|
||||||
|
var resultKeys = new Set();//set
|
||||||
|
|
||||||
|
if(searchfor.length<=0){
|
||||||
|
//exit searching mode
|
||||||
|
document.getElementById("search_input").style.borderColor="initial";
|
||||||
|
start=0;
|
||||||
|
itemsToShow=olditemstoshow;
|
||||||
|
viewInPage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
searchingModules.forEach(function(x){
|
||||||
|
resultKeys.Union(x.search(searchfor));
|
||||||
|
});
|
||||||
|
|
||||||
|
if(searchingModules["location"].enabled==true)
|
||||||
|
resultKeys.Union(searchingModules["location"].search(searchfor));
|
||||||
|
|
||||||
|
if(searchingModules["divemaster"].enabled==true)
|
||||||
|
resultKeys.Union(searchingModules["divemaster"].search(searchfor));
|
||||||
|
|
||||||
|
if(searchingModules["buddy"].enabled==true)
|
||||||
|
resultKeys.Union(searchingModules["buddy"].search(searchfor));
|
||||||
|
|
||||||
|
if(searchingModules["notes"].enabled==true)
|
||||||
|
resultKeys.Union(searchingModules["notes"].search(searchfor));
|
||||||
|
|
||||||
|
if(searchingModules["tags"].enabled==true)
|
||||||
|
resultKeys.Union(searchingModules["tags"].search(searchfor));
|
||||||
|
|
||||||
|
if(resultKeys.isEmpty()){
|
||||||
|
//didn't find keys
|
||||||
|
document.getElementById("search_input").style.borderColor="red";
|
||||||
|
itemsToShow=[];
|
||||||
|
viewInPage();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//found keys
|
||||||
|
document.getElementById("search_input").style.borderColor="initial";
|
||||||
|
itemsToShow = resultKeys.keys;
|
||||||
|
start=0;
|
||||||
|
viewInPage();
|
||||||
|
}
|
||||||
|
///////////////////////////////////////
|
||||||
|
function SearchModule(enabled){
|
||||||
|
this.head = new Node();
|
||||||
|
this.enabled=enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
SearchModule.prototype.Enter_search_string = function(str,diveno){
|
||||||
|
if(str==""||!str) return;
|
||||||
|
var res = str.toLowerCase().split(" ");
|
||||||
|
for(var i=0;i<res.length;i++){
|
||||||
|
insertIn(res[i],diveno,this.head);
|
||||||
|
numberofwords++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SearchModule.prototype.Enter_search_tag = function(tags,diveno){
|
||||||
|
if(!tags) return;
|
||||||
|
for(var i=0;i<tags.length;i++){
|
||||||
|
insertIn(tags[i],diveno,this.head);
|
||||||
|
numberofwords++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SearchModule.prototype.search = function(x){
|
||||||
|
return searchin(x.toLowerCase(),this.head);
|
||||||
|
}
|
||||||
|
////////////////////////////////////////
|
||||||
|
|
||||||
|
function insertIn(value,key,node){
|
||||||
|
node.key.push(key);
|
||||||
|
if(value.length<=0) return;
|
||||||
|
|
||||||
|
var this_char = value[0];
|
||||||
|
value = value.substring(1,value.length);
|
||||||
|
|
||||||
|
var i;
|
||||||
|
for(i =0;i<node.children.length;i++){
|
||||||
|
if(node.children[i].value==this_char){
|
||||||
|
return insertIn(value,key,node.children[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
node.children[i] = new Node(this_char);
|
||||||
|
insertIn(value,key,node.children[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchin(value,node){
|
||||||
|
if(value.length<=0 || node.children.length <= 0) return node.key;
|
||||||
|
|
||||||
|
var this_char = value[0];
|
||||||
|
value = value.substring(1,value.length);
|
||||||
|
|
||||||
|
for(var i =0;i<node.children.length;i++){
|
||||||
|
if(node.children[i].value[0]==this_char){
|
||||||
|
return searchin(value,node.children[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
//trips
|
||||||
|
|
||||||
|
var tripsShown;
|
||||||
|
|
||||||
|
function toggleTrips(){
|
||||||
|
var trip_button = document.getElementById('trip_button');
|
||||||
|
if(tripsShown){
|
||||||
|
tripsShown=false;
|
||||||
|
trip_button.style.backgroundColor="#dfdfdf";
|
||||||
|
viewInPage();
|
||||||
|
}else{
|
||||||
|
showtrips();
|
||||||
|
trip_button.style.backgroundColor="#5f7f8f";
|
||||||
|
tripsShown=true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showtrips(){
|
||||||
|
var divelist = document.getElementById('diveslist');
|
||||||
|
divelist.innerHTML="";
|
||||||
|
for(var i=0;i<trips.length;i++){
|
||||||
|
divelist.innerHTML+='<ul id="trip_'+i+'" class="trips" onclick="toggle_trip_expansion('+i+')">'
|
||||||
|
+trips[i].name+' ( '+trips[i].dives.length+' dives)'+'</ul>'+'<div id="trip_dive_list_'+i+'"></div>';
|
||||||
|
};
|
||||||
|
for(var i=0;i<trips.length;i++){
|
||||||
|
unexpand_trip(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle_trip_expansion(trip){
|
||||||
|
if(trips[trip].expanded ==true){
|
||||||
|
unexpand_trip(trip);
|
||||||
|
}else{
|
||||||
|
expand_trip(trip);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function expand_trip(trip){
|
||||||
|
trips[trip].expanded = true;
|
||||||
|
var d = document.getElementById("trip_dive_list_"+trip);
|
||||||
|
for(var j in trips[trip].dives){
|
||||||
|
d.innerHTML+='<ul id="'+trips[trip].dives[j].number+'" onclick="toggleExpantion(this)" onmouseover="highlight(this)"'+
|
||||||
|
' onmouseout="unhighlight(this)">'+getlimited(trips[trip].dives[j])+'</ul>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unexpand_trip(trip){
|
||||||
|
trips[trip].expanded = false;
|
||||||
|
var d = document.getElementById("trip_dive_list_"+trip);
|
||||||
|
d.innerHTML='';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getItems(){
|
||||||
|
var count = 0;
|
||||||
|
for(var i in trips){
|
||||||
|
for(var j in trips[i].dives){
|
||||||
|
items[count++]=trips[i].dives[j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
BIN
theme/poster.png
Normal file
BIN
theme/poster.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 37 KiB |
203
theme/sand.css
Normal file
203
theme/sand.css
Normal file
|
@ -0,0 +1,203 @@
|
||||||
|
body{
|
||||||
|
min-width:680px;
|
||||||
|
background-color:#F7F4DD;
|
||||||
|
font-size:12px;
|
||||||
|
font-family: 'Lobster', helvetica, arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 70px;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: 'Lobster', helvetica, arial;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #213394;
|
||||||
|
padding-top:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul{
|
||||||
|
background-color:#FFD18F;
|
||||||
|
}
|
||||||
|
|
||||||
|
table{
|
||||||
|
margin:10px;
|
||||||
|
font-size:inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr{
|
||||||
|
padding:6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th{
|
||||||
|
padding:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trips{
|
||||||
|
background-color:#EFC15F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.words{
|
||||||
|
font-size:inherit;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item{
|
||||||
|
width:9%;
|
||||||
|
min-width:82px;
|
||||||
|
max-width:250px;
|
||||||
|
float:left;
|
||||||
|
cursor:pointer;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_large{
|
||||||
|
width:16%;
|
||||||
|
min-width:200px;
|
||||||
|
max-width:385px;
|
||||||
|
margin-right:8px;
|
||||||
|
float:left;
|
||||||
|
cursor:pointer;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background-image: url("poster.png");
|
||||||
|
background-size: 150px 150px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header_container{
|
||||||
|
width:600px;
|
||||||
|
height:auto;
|
||||||
|
margin:50px;
|
||||||
|
margin-bottom:100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ul,#header{
|
||||||
|
border-style:solid;
|
||||||
|
border-radius:14px;
|
||||||
|
border-color: #F30;
|
||||||
|
margin:7px;
|
||||||
|
padding:5px 10px 5px 10px;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]{
|
||||||
|
height:27;
|
||||||
|
width:27;
|
||||||
|
margin:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advanced_search{
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 1px 1px 5px #F30;
|
||||||
|
z-index: 99;
|
||||||
|
width: 300px;
|
||||||
|
max-width: 30%;
|
||||||
|
min-width: 270px;
|
||||||
|
background-color:rgba(239,193,127,0.87);
|
||||||
|
font-size:16px;
|
||||||
|
display:none;
|
||||||
|
max-height:40%;
|
||||||
|
overflow:scroll;
|
||||||
|
overflow-y:auto;
|
||||||
|
overflow-x:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbox{
|
||||||
|
float:right;
|
||||||
|
height:35px;
|
||||||
|
overflow:hidden;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header{
|
||||||
|
height:20px;
|
||||||
|
background-color:#EFC15F;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#controller{
|
||||||
|
min-width:200px;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#divePanel{
|
||||||
|
padding:5px;
|
||||||
|
width:90%;
|
||||||
|
margin:0% 5% 0% 5%;
|
||||||
|
margin-bottom:50px;
|
||||||
|
background-color:rgba(253, 195, 141, 0.43);
|
||||||
|
box-shadow: 7px 7px 5px rgba(215, 107, 27, 0.43);
|
||||||
|
}
|
||||||
|
|
||||||
|
button,#no_dives_selector{
|
||||||
|
font-size:13px;
|
||||||
|
min-width:55px;
|
||||||
|
line-height:2;
|
||||||
|
margin:0px 0px 0px 0px;
|
||||||
|
border-radius:10px;
|
||||||
|
opacity:0.6;
|
||||||
|
border-style:outset;
|
||||||
|
border-color: #F30;
|
||||||
|
background-color:#F7F4DD;
|
||||||
|
border-width: 1px;
|
||||||
|
color:#111354;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no_dives_selector{
|
||||||
|
padding:5px;
|
||||||
|
text-indent: 0.01px;
|
||||||
|
text-overflow: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover{
|
||||||
|
background-color:#EFC17F;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration:underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul:hover{
|
||||||
|
background-color:#EFC17F;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_res{
|
||||||
|
font-size:0.6em;
|
||||||
|
visibility:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_input{
|
||||||
|
border-radius:6px;
|
||||||
|
max-width:30%;
|
||||||
|
padding:3px;
|
||||||
|
opacity:0.6;
|
||||||
|
margin: 0px 5px 5px 5px;
|
||||||
|
border-style:outset;
|
||||||
|
border-color:black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox{
|
||||||
|
margin:7px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#divePanel{
|
||||||
|
padding:4px;
|
||||||
|
width:100%;
|
||||||
|
margin:0% 0% 0% 0%;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue