232 lines
7.6 KiB
HTML
232 lines
7.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>mORMot FishFacts >> by warleyalex</title>
|
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
|
<script type="text/javascript" src="jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
function gxr(){var xdr=null;if(window.XDomainRequest){xdr=new XDomainRequest();}else if(window.XMLHttpRequest){xdr=new XMLHttpRequest();} return xdr;}
|
|
|
|
function GetKeys(url) {
|
|
var xdr = gxr();
|
|
xdr.onload = function () {
|
|
jsonData = JSON.parse(request.responseText);
|
|
}
|
|
xdr.onerror = function () {
|
|
alert("Error");
|
|
}
|
|
xdr.open("GET", url);
|
|
xdr.send();
|
|
}
|
|
|
|
function addOption(selectbox, text, value) {
|
|
var o = document.createElement("OPTION");
|
|
o.text = text;
|
|
o.value = value;
|
|
selectbox.options.add(o);
|
|
}
|
|
|
|
function getL() {
|
|
return document.getElementById('l');
|
|
}
|
|
|
|
function getUp() {
|
|
return document.getElementById('up');
|
|
}
|
|
|
|
function getDown() {
|
|
return document.getElementById('down');
|
|
}
|
|
|
|
function maquina() {
|
|
refreshFacts();
|
|
}
|
|
|
|
function refreshFacts() {
|
|
var l = getL();
|
|
var xdr = gxr();
|
|
xdr.onload = function () {
|
|
jsonData = JSON.parse(xdr.responseText);
|
|
var len = jsonData.length;
|
|
for (i = 0; i < len; i++) {
|
|
var o = document.createElement("OPTION");
|
|
s = jsonData;
|
|
o.text = s[i].Species_No;
|
|
o.value = s[i].Species_No;
|
|
l.options.add(o);
|
|
}
|
|
if (l.length > 0) {
|
|
l.selectedIndex = 0;
|
|
}
|
|
selectionChange();
|
|
}
|
|
xdr.onerror = function () {
|
|
alert("Error");
|
|
}
|
|
xdr.open('GET', 'http://localhost:8080/root/Biolife');
|
|
xdr.send();
|
|
}
|
|
|
|
function setInnerText(id, s) {
|
|
var e = document.getElementById(id);
|
|
if (e != null) {
|
|
e.innerHTML = s;
|
|
}
|
|
}
|
|
|
|
function roundNumber(num, dec) {
|
|
var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
|
|
return result;
|
|
}
|
|
|
|
function selectionChange() {
|
|
var l = getL();
|
|
getUp().disabled = (l.length == 0) || (l.selectedIndex == 0);
|
|
getDown().disabled = (l.length == 0) || (l.selectedIndex == l.length - 1);
|
|
var key = l.value;
|
|
var notas = function () {
|
|
var xdr = gxr();
|
|
xdr.onload = function () {
|
|
jsonData = JSON.parse(xdr.responseText);
|
|
setInnerText('memo', jsonData.Notes);
|
|
setInnerText('about', 'About the ' + jsonData.Common_Name);
|
|
setInnerText('picturecaption', jsonData.Common_Name);
|
|
setInnerText('category', jsonData.Category);
|
|
setInnerText('species', jsonData.Species_Name);
|
|
setInnerText('lengthcm', roundNumber(jsonData.Length_cm, 2));
|
|
setInnerText('lengthin', roundNumber(jsonData.Length_In, 2));
|
|
img = document.getElementById('image');
|
|
if (img != null) {
|
|
img.src = 'http://localhost:8080/root/Biolife/' + key + '/Graphic';
|
|
}
|
|
}
|
|
xdr.onerror = function () {
|
|
alert("Error");
|
|
}
|
|
xdr.open('GET', 'http://localhost:8080/root/Biolife/' + key);
|
|
xdr.send();
|
|
}
|
|
notas();
|
|
}
|
|
|
|
function onSelectionChange() {
|
|
selectionChange();
|
|
}
|
|
|
|
function up() {
|
|
var l = getL();
|
|
if (l.selectedIndex > 0) {
|
|
l.selectedIndex--;
|
|
selectionChange();
|
|
}
|
|
}
|
|
|
|
function down() {
|
|
var l = getL();
|
|
if (l.selectedIndex < l.length - 1) {
|
|
l.selectedIndex++;
|
|
selectionChange();
|
|
}
|
|
}
|
|
|
|
function onUp() {
|
|
up();
|
|
}
|
|
|
|
function onDown() {
|
|
down();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="maquina()">
|
|
<img src="images/fishfacts.jpg" width="80%" /></br></br>
|
|
<div id="contentdiv" class="contentdiv">
|
|
<div class="outerTableDiv">
|
|
<table class="outerTable">
|
|
<tr>
|
|
<td class="innertable" style="width:100%">
|
|
<table class="innerTable">
|
|
<tr>
|
|
<td class="innertable" style="width: 50%">
|
|
<div class="divpadding">
|
|
<table id="fishimageandtitle" class="innerTable">
|
|
<tr>
|
|
<td class="innertable">
|
|
<div class="imagediv">
|
|
<img id="image" alt="" xstyle="width:100%;background-color:blue"/>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="captiondiv"><span id="picturecaption" class="fishname" >Clown Triggerfish</span>
|
|
</div></td>
|
|
</tr>
|
|
</table>
|
|
</div></td>
|
|
<td class="innertable">
|
|
<div class="divpadding">
|
|
<table class="innerTable">
|
|
<tr>
|
|
<td>
|
|
<div class="captiondiv"><span id="about" class="aboutText">About goes here</span>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="innertable">
|
|
<div id="memo" class="memoDiv"> Details go here </div></td>
|
|
</tr>
|
|
</table>
|
|
</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="innertable" colspan="2">
|
|
<table class="innertable">
|
|
<tr>
|
|
<td>
|
|
<table class="innertable">
|
|
<tr>
|
|
<td>
|
|
<table class="detailstable">
|
|
<tr>
|
|
<th class="detailstable">Category</th>
|
|
<th class="detailstable">Species Name</th>
|
|
<th class="detailstable">Length(cm)</th>
|
|
<th class="detailstable" style="width:100%">Length(in)</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="detailstable"><span id="category"></span></td>
|
|
<td class="detailstable"><span id="species"></span></td>
|
|
<td class="detailstable" style="text-align: right"><span id="lengthcm"></span></td>
|
|
<td class="detailstable" style="width:100%; text-align:right"><span id="lengthin"></span></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class ="innertable" style="width:3em">
|
|
<table class="innertable" >
|
|
<tr>
|
|
<td><button id="up" class="btnUp" style="width:2em;height:2.5em;padding-top:.1em" onclick="onUp();">^</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button id="down" class="btnDown"style="width:2em;height:2.5em" onclick="onDown();">v</button></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table></td>
|
|
</tr>
|
|
</table></td>
|
|
<td class="innertable" style="WIDTH: 0%">
|
|
<table class="innerTable">
|
|
<tr>
|
|
<td class="innerTable"><select id="l" onchange="onSelectionChange()" size="4" style="border-style: none; width: 100%; height: 100%"></select></td>
|
|
</tr>
|
|
</table></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|