old-silvrgit/app/watch.html
2015-08-04 15:07:01 +01:00

223 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="watchlist.json.js"></script>
<script src="libs/ejs.js"></script>
<script src="libs/view.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
<style type="text/css" media="all">
body {
text-align: center;
background: #C9C5C2;
margin: auto;
}
.container {
text-align: left;
position: relative;
width: 960px;
background: #FFF;
border: 2px solid #FFF;
-moz-box-shadow: 3px 3px 3px #aaa;
-webkit-box-shadow: 3px 3px 3px #aaa;
box-shadow: 3px 3px 3px #aaa;
margin: 18px auto;
padding: 0;
}
body, ul, ol, dl, h1, h2, h3, h4, h5, h6, td, th, caption, pre, p, blockquote, input, textarea {
font: .9em 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
color: #333;
}
a {
color: #000;
text-decoration: underline;
white-space: nowrap;
}
a:visited {
color: #666;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
color: #FFF;
margin: 0;
padding: 9px 0;
}
h1 a, h1 a:visited {
color: #EEE;
}
h1 a:hover {
color: #CCC;
}
h1 {
font-size: 18px;
background: teal;
border-bottom: 3px solid #80007e;
padding: 9px 0 9px 9px;
}
.small {
font-size: .8em;
}
h2 {
font-size: 12px;
background: #DDD;
border-bottom: 1px solid #80007e;
color: #333;
margin-top: 0;
padding: 9px 0 9px 9px;
}
h3 {
font-size: 18px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0;
padding: 0 4px 0 0;
}
table {
width: 100%;
border-spacing: 10px;
}
th {
width: 33%;
font-size: 16px;
font-weight: 700;
line-height: 24px;
border-bottom: 1px solid #80007e;
color: #333;
}
td {
vertical-align: top;
background: #FFF;
padding: 0 0 6px;
}
td.footer {
background: #8abbd7;
padding: 10px;
}
.red:hover {
color: blue;
}
.floatright {
float: right;
padding-right: 10px;
}
.floatleft {
float: left;
padding-left: 10px;
}
a:hover, .red {
color: #C00;
}
.dates {
padding: 2px;
border: solid 1px #80007e;
background-color: #ffffff;
}
#btc {
font-size: 75%;
}
.up {
color: darkgreen;
}
.down {
color: darkred;
}
.nochange {
color: #000000;
}
</style>
</head>
<body>
<div id="area">
</div>
</body>
<script>
var elm = $('#area');
var updateDisplay = function()
{
var html = new EJS({url: '/template/watchlist.ejs'}).render(list);
elm.html(html);
};
var btcValue = function() {
// console.log("getting btc");
var url = '/btc';
// let's show a map or do something interesting!
$.ajax({
type: 'GET',
url: url,
data: '',
dataType: 'json',
timeout: 10000,
//contentType: ('application/json'),
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
},
success: function(data) {
// console.log(data);
list.gbp = data.bpi.GBP.rate_float;
list.usd = data.bpi.USD.rate_float;
console.log(list);
updateDisplay();
//updateBTC(gbp,usd);
//$('#weather').text(data.currently.summary + " " + ((5.0 / 9.0 * (data.currently.temperature - 32))));
},
error: function(xhr, type) {
console.log("ajax error");
console.log(xhr);
console.log(type);
}
});
};
btcValue();
var _timer = setInterval(function(){btcValue()},(60000));
</script>
</html>