162 lines
4.9 KiB
HTML
162 lines
4.9 KiB
HTML
<!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>
|