Add registry (needs more work on contract and ui safety). ui updated for contracts...
[robmyers:artworld-ethereum.git] / ui / hot_cold.html
1 <html>
2 <head>
3   <script type="text/javascript"
4           src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
5   </script>
6   <script>
7     if (typeof(window.eth) === "undefined") {
8       document.write('Please run in AlethZero.<br/>');
9     }
10   </script>
11   <style>
12     body {
13       text-align: center;
14       font-family: sans;
15     }
16     h1 {
17       font-size: 128pt;
18     }
19     #_1000 {
20       color: #550000;
21     }
22     #_1001 {
23       color: #000044;
24     }
25     #update {
26       color: #B0C4DE;
27     }
28   </style>
29 <title>Hot Cold</title>
30 </head>
31 <body>
32   <h1 id="temperatures">
33     <span id="_1000"></span><br/>
34     <span id="_1001"></span><br/>
35   </h1>
36   <a id="update" href="javascript:void(0)" onclick="update();">update</a>
37   <script>
38     // The hot_cold contract
39     var contract = "0xf5a508d5d82f66107e5a3b3ad920f6b7318b0966";
40
41     // Update the spans with the data from the contact
42     var fetch = function() {
43       document.getElementById("_1000").innerText = eth.storageAt(contract,
44                                                                  1000).bin();
45       document.getElementById("_1001").innerText = eth.storageAt(contract,
46                                                                  1001).bin();
47     };
48
49     // Update when we're notified (and at the start)
50     eth.watch(contract, eth.secretToAddress(eth.key), fetch);
51     fetch();
52
53     // Allow the user to update the contract state, but warn them it costs gas
54     var update = function() {
55       if (confirm("This costs gas to run.")) {
56         eth.transact(eth.key, "0", contract, "0", "10000", eth.gasPrice)
57       }
58     };
59
60     // Only show the update link when the mouse moves over the spans
61     var hider = null;
62     $("#temperatures").mousemove(function() {
63       clearTimeout(hider);
64       $("#update").show();
65       hider = setTimeout('$("#update").hide();', 5000);
66     }).mouseleave(function() {
67       //clearTimeout(hider);
68       //$("#update").hide();  
69     });
70     $("#update").hide();
71   </script>
72 </body>
73 </html>