129 lines
2.8 KiB
HTML
129 lines
2.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
|
|
<style type="text/css">
|
|
.pages
|
|
{
|
|
background-color: #00a403;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 7px;
|
|
background-image: -webkit-gradient(linear, left top,
|
|
left bottom, color-stop(0, #d6d6d6),
|
|
color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4));
|
|
margin: 10px 0 16px 0;
|
|
font-size: 0px;
|
|
}
|
|
.pages li:hover { background-color: grey; }
|
|
.pages li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
|
|
.pages li
|
|
{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
padding: 0.5em 1.5em;
|
|
cursor: pointer;
|
|
color: white;
|
|
border-left: 1px solid #ddd;
|
|
border-right: 1px solid #888;
|
|
}
|
|
.pages li { *display: inline !important; } /* IE7 only */
|
|
.pages .selected
|
|
{
|
|
background-color: #444 !important;
|
|
color: white;
|
|
text-shadow:none;
|
|
border-right-color: #aaa;
|
|
border-left: none;
|
|
box-shadow:inset 1px 2px 6px #070707;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<html>
|
|
<script src="jquery.js" type="text/javascript"></script>
|
|
<script src="knockout.js" type="text/javascript"></script>
|
|
|
|
|
|
<a href="http://reprappro.com" target="_blank"><img src="logo.png" alt="RepRapPro logo" align="right"></a>
|
|
|
|
<div style="font-size:20px">RepRap: <strong data-bind="text: machineName, click: $root.getName"></strong></div>
|
|
|
|
<br clear = "all">
|
|
|
|
<ul class="pages" data-bind="foreach: pages">
|
|
<li data-bind="text: $data, css:
|
|
{
|
|
selected: $data == $root.chosenPageId()
|
|
},
|
|
click: $root.goToPage">
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Grid
|
|
|
|
<table class="mails" data-bind="with: chosenPageData">
|
|
<thead>
|
|
<tr>
|
|
<th>From</th>
|
|
<th>To</th>
|
|
<th>Subject</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: mails">
|
|
<tr>
|
|
<td data-bind="text: from"></td>
|
|
<td data-bind="text: to"></td>
|
|
<td data-bind="text: subject"></td>
|
|
<td data-bind="text: date"></td>
|
|
</tr>
|
|
</tbody> </table>
|
|
-->
|
|
|
|
<script>
|
|
|
|
function RepRap()
|
|
{
|
|
// Data
|
|
var self = this;
|
|
self.pages = ['Control', 'Print', 'Help', 'Settings', 'Messages', 'Logout'];
|
|
self.chosenPageId = ko.observable();
|
|
self.chosenPageData = ko.observable();
|
|
self.machineName = ko.observable('<click here>');
|
|
var nameData = '{"myName":"RRR 5"}';
|
|
var parsed;
|
|
// Behaviours
|
|
self.getName = function()
|
|
{
|
|
parsed = JSON.parse(nameData);
|
|
alert(parsed.myName);
|
|
$.getJSON('/rr_name', function(nameData) {
|
|
alert(nameData);
|
|
parsed = JSON.parse(nameData);
|
|
self.machineName(parsed.myName);
|
|
});
|
|
|
|
//$.get('/rr_name', { qual: 'null' }, self.machineName);
|
|
alert(parsed.myName);
|
|
};
|
|
|
|
self.goToPage = function(page)
|
|
{
|
|
self.chosenPageId(page);
|
|
$.get('/rr_page', { page: page }, self.chosenPageData);
|
|
alert(self.chosenPageData);
|
|
};
|
|
};
|
|
|
|
ko.applyBindings(new RepRap());
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|