130 lines
2.6 KiB
HTML
130 lines
2.6 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" data-bind="with: machineName">RepRap: <strong data-bind="text: myName"></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>
|
|
|
|
<br>
|
|
|
|
<div data-bind="text: chosenPageHtml"></div>
|
|
|
|
<script>
|
|
|
|
|
|
function viewModel()
|
|
{
|
|
// Data
|
|
var self = this;
|
|
self.pages = ['Control', 'Print', 'Help', 'Settings', 'Messages', 'Logout'];
|
|
self.chosenPageId = ko.observable();
|
|
self.chosenPageHtml = ko.observable();
|
|
self.machineName = ko.observable();
|
|
self.n = ko.computed(
|
|
function()
|
|
{
|
|
$.get('/rr_name', {}, self.machineName);
|
|
}
|
|
);
|
|
|
|
// Behaviours
|
|
self.getName = function()
|
|
{
|
|
$.get('/rr_name', {}, self.machineName);
|
|
};
|
|
|
|
self.goToPage = function(page)
|
|
{
|
|
self.chosenPageId(page);
|
|
switch (page)
|
|
{
|
|
case 'Control':
|
|
self.chosenPageHtml('Control Page');
|
|
break;
|
|
case 'Print':
|
|
self.chosenPageHtml('Print Page');
|
|
break;
|
|
case 'Help':
|
|
self.chosenPageHtml('Help Page');
|
|
break;
|
|
case 'Settings':
|
|
self.chosenPageHtml('Settings Page');
|
|
break;
|
|
case 'Messages':
|
|
self.chosenPageHtml('Messages Page');
|
|
break;
|
|
case 'Logout':
|
|
self.chosenPageHtml('Logout Page');
|
|
break;
|
|
}
|
|
|
|
//$.get('/rr_page', { page: page }, self.chosenPageData);
|
|
};
|
|
};
|
|
|
|
ko.applyBindings(new viewModel());
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|