<!DOCTYPE html>
<html>
<head>
<title>Decimal Calculator Client</title>
<style>
body {
font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
}
#calcdisplay {
color: #333;
background-color: #fff;
padding: 0.2em;
min-height: 3em;
text-align: right;
}
#calc {
margin: 60px;
background-color: #028ec9;
padding: 1em;
border-radius: 0.5em;
}
#calc td {
height: 100%;
}
#calc button {
width: 100%;
height: 100%;
min-height: 3em;
min-width: 3em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
<script type="text/javascript">
var sess = null;
var clearFirst = false;
$(document).ready(function()
{
var wsuri;
if (window.location.protocol === "file:") {
wsuri = "ws://localhost:9000";
} else {
wsuri = "ws://" + window.location.hostname + ":9000";
}
// connect to WAMP server
ab.connect(wsuri,
// WAMP session was established
function (session) {
sess = session;
console.log("Connected to " + wsuri);
sess.prefix("calculator", "http://example.com/simple/calculator#");
},
// WAMP session is gone
function (code, reason) {
sess = null;
if (code == ab.CONNECTION_UNSUPPORTED) {
window.location = "http://autobahn.ws/unsupportedbrowser";
} else {
alert(reason);
}
}
);
});
function key_digit(d) {
var s = $('#calcdisplay').html();
if (clearFirst) {
if (d == ".") {
s = "0.";
} else {
s = d;
}
clearFirst = false;
} else {
if (d == ".") {
if (s.indexOf(".") == -1) {
s += ".";
}
}
else {
if (s == "0") {
s = d;
}
else {
s += d;
}
}
}
$('#calcdisplay').html(s);
}
function key_op(op) {
arg = {op: op};
if (op != "C") {
arg.num = $('#calcdisplay').html();
}
sess.call("calculator:calc", arg).then(function (res) { $('#calcdisplay').html(res); },
function (res) { alert("Error (" + res + ")"); });
clearFirst = true;
}
</script>
</head>
<body>
<h1>Decimal Calculator Client</h1>
<noscript>
<span style="color: #f00; font-weight: bold;">
You need to turn on JavaScript.
</span>
</noscript>
<table id="calc">
<tr>
<td id="calcdisplay" colspan="5">0</td>
</tr>
<tr><td style="height: 0.5em;" colspan="5"></td></tr>
<tr>
<td><button onclick='key_digit("7");'>7</button></td>
<td><button onclick='key_digit("8");'>8</button></td>
<td><button onclick='key_digit("9");'>9</button></td>
<td><button onclick='key_op("/");'>/</button></td>
<td rowspan="2"><button onclick='key_op("C");'>C</button></td>
</tr>
<tr>
<td><button onclick='key_digit("4");'>4</button></td>
<td><button onclick='key_digit("5");'>5</button></td>
<td><button onclick='key_digit("6");'>6</button></td>
<td><button onclick='key_op("*");'>*</button></td>
</tr>
<tr>
<td><button onclick='key_digit("1");'>1</button></td>
<td><button onclick='key_digit("2");'>2</button></td>
<td><button onclick='key_digit("3");'>3</button></td>
<td><button onclick='key_op("-");'>-</button></td>
<td rowspan="2"><button onclick='key_op("=");'>=</button></td>
</tr>
<tr>
<td colspan="2"><button onclick='key_digit("0");'>0</button></td>
<td><button onclick='key_digit(".");'>.</button></td>
<td><button onclick='key_op("+");'>+</button></td>
</tr>
</table>
</body>
</html>