124 lines
5.5 KiB
HTML
Executable File
124 lines
5.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FREEBOARD</title>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<meta name="viewport" content = "width = device-width, initial-scale = 1, user-scalable = no" />
|
|
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />
|
|
<link href="css/jquery.gridster.min.css" rel="stylesheet" />
|
|
<link href="css/styles.css" rel="stylesheet" />
|
|
<script src="js/head.js"></script>
|
|
<script type="text/javascript">
|
|
head.js("js/knockout.js",
|
|
"js/jquery.js",
|
|
"js/jquery-ui.js",
|
|
"js/underscore.js",
|
|
"js/jquery.gridster.js",
|
|
"js/jquery.sparkline.min.js",
|
|
"js/jquery.caret.js",
|
|
"js/raphael.2.1.0.min.js",
|
|
"js/justgage.1.0.1.js",
|
|
"js/freeboard/freeboard.js",
|
|
"js/freeboard/plugins/freeboard.datasources.js",
|
|
"js/freeboard/plugins/freeboard.widgets.js",
|
|
function(){
|
|
$(function()
|
|
{ //DOM Ready
|
|
freeboard.initialize(true);
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header id="main-header" data-bind="if:allow_edit">
|
|
<div id="admin-bar">
|
|
<div id="admin-menu">
|
|
<div id="board-tools">
|
|
<h1 id="board-logo" class="title bordered">FREEBOARD</h1>
|
|
<div id="board-actions">
|
|
<div class="text-button" data-bind="click: loadDashboardFromLocalFile">
|
|
<i class="icon-folder-open icon-white"></i>Load Freeboard
|
|
</div>
|
|
<div class="text-button" data-bind="click: saveDashboard">
|
|
<i class="icon-download-alt icon-white"></i>Save Freeboard
|
|
</div>
|
|
<div id="add-pane" class="text-button" data-bind="click: createPane">
|
|
<i class="icon-plus icon-white"></i>Add Pane
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="datasources">
|
|
<h2 class="title">DATASOURCES</h2>
|
|
<div class="datasource-list-container">
|
|
<table class="table table-condensed sub-table" id="datasources-list" data-bind="if: datasources().length">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Last Updated</th>
|
|
<th> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: datasources">
|
|
<tr>
|
|
<td><span class="text-button" data-bind="text: name, pluginEditor: {operation: 'edit', type: 'datasource'}"></span></td>
|
|
<td data-bind="text: last_updated"></td>
|
|
<td>
|
|
<ul class="board-toolbar">
|
|
<li data-bind="click: updateNow"><i class="icon-refresh icon-white"></i></li>
|
|
<li data-bind="pluginEditor: {operation: 'delete', type: 'datasource'}"><i class="icon-trash icon-white"></i></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<span class="text-button table-operation" data-bind="pluginEditor: {operation: 'add', type: 'datasource'}">ADD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="toggle-header" data-bind="click: toggleEditing" ><i class="icon-wrench icon-white"></i></div>
|
|
</header>
|
|
<div class="gridster">
|
|
<img id="dash-logo" data-bind="attr:{src: header_image}">
|
|
<ul data-bind="grid: true">
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="display:hidden">
|
|
<ul data-bind="template: { name: 'pane-template', foreach: panes}">
|
|
</ul>
|
|
</div>
|
|
|
|
<script type="text/html" id="pane-template">
|
|
<li data-bind="pane: true">
|
|
<header>
|
|
<h1 data-bind="text: title"></h1>
|
|
<ul class="board-toolbar pane-tools">
|
|
<li data-bind="pluginEditor: {operation: 'add', type: 'widget'}">
|
|
<i class="icon-plus icon-white"></i>
|
|
</li>
|
|
<li data-bind="pluginEditor: {operation: 'edit', type: 'pane'}">
|
|
<i class="icon-wrench icon-white"></i>
|
|
</li>
|
|
<li data-bind="pluginEditor: {operation: 'delete', type: 'pane'}">
|
|
<i class="icon-trash icon-white"></i>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
<section data-bind="foreach: widgets">
|
|
<div class="sub-section" data-bind="css: 'sub-section-height-' + height()">
|
|
<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}"></div>
|
|
<div class="sub-section-tools">
|
|
<ul class="board-toolbar">
|
|
<li data-bind="pluginEditor: {operation: 'edit', type: 'widget'}"><i class="icon-wrench icon-white"></i></li>
|
|
<li data-bind="pluginEditor: {operation: 'delete', type: 'widget'}"><i class="icon-trash icon-white"></i></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</li>
|
|
</script>
|
|
|
|
</body>
|
|
</html> |