mirror of https://github.com/Freeboard/plugins.git
251 lines
9.1 KiB
HTML
Executable File
251 lines
9.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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="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",
|
|
"datasources/plugin_node.js",
|
|
// *** Load more plugins here ***
|
|
function() {
|
|
$(function() { //DOM Ready
|
|
freeboard.initialize(true);
|
|
freeboard
|
|
.loadDashboard({
|
|
"allow_edit": true,
|
|
"plugins": [],
|
|
"panes": [
|
|
{
|
|
"title": "Houses",
|
|
"width": 1,
|
|
"row": {
|
|
"2": 1,
|
|
"3": 1
|
|
},
|
|
"col": {
|
|
"2": 1,
|
|
"3": 1
|
|
},
|
|
"widgets": [
|
|
{
|
|
"type": "text_widget",
|
|
"settings": {
|
|
"title": "House of Stark - Jon",
|
|
"size": "regular",
|
|
"value": "datasources[\"Jon\"].value",
|
|
"sparkline": true,
|
|
"animate": true
|
|
}
|
|
},
|
|
{
|
|
"type": "text_widget",
|
|
"settings": {
|
|
"title": "House of Lannister - Tyrion",
|
|
"size": "regular",
|
|
"value": "datasources[\"Tyrion\"].value",
|
|
"sparkline": true,
|
|
"animate": true
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"title": "Timezones",
|
|
"width": 1,
|
|
"row": {
|
|
"3": 1
|
|
},
|
|
"col": {
|
|
"3": 2
|
|
},
|
|
"widgets": [
|
|
{
|
|
"type": "text_widget",
|
|
"settings": {
|
|
"title": "House of Stark - Jon",
|
|
"size": "regular",
|
|
"value": "new Date(datasources[\"Jon\"].time_stamp).toLocaleTimeString();",
|
|
"animate": false
|
|
}
|
|
},
|
|
{
|
|
"type": "text_widget",
|
|
"settings": {
|
|
"title": "House of Lannister - Tyrion",
|
|
"size": "regular",
|
|
"value": "new Date(datasources[\"Tyrion\"].time_stamp).toLocaleTimeString();",
|
|
"animate": false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"datasources": [
|
|
{
|
|
"name": "Jon",
|
|
"type": "node_js",
|
|
"settings": {
|
|
"url": "http://localhost:8989/shows",
|
|
"eventName": "house.stark.jon",
|
|
"rooms": [
|
|
{
|
|
"roomName": "got",
|
|
"roomEvent": "subscribe"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"name": "Tyrion",
|
|
"type": "node_js",
|
|
"settings": {
|
|
"url": "http://localhost:8989/shows",
|
|
"eventName": "house.lannister.tyrion",
|
|
"rooms": [
|
|
{
|
|
"roomName": "got",
|
|
"roomEvent": "subscribe"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="board-content">
|
|
<img id="dash-logo"
|
|
data-bind="attr:{src: header_image}, visible:header_image()">
|
|
<div class="gridster">
|
|
<ul data-bind="grid: true">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<ul class="board-toolbar vertical">
|
|
<li data-bind="click: loadDashboardFromLocalFile"><i
|
|
id="full-screen-icon" class="icon-folder-open icon-white"></i><label
|
|
id="full-screen">Load Freeboard</label></li>
|
|
<li data-bind="click: saveDashboard"><i
|
|
class="icon-download-alt icon-white"></i><label>Save
|
|
Freeboard</label></li>
|
|
<li id="add-pane" data-bind="click: createPane"><i
|
|
class="icon-plus icon-white"></i><label>Add Pane</label></li>
|
|
</ul>
|
|
</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 datasource-name"
|
|
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 id="toggle-header-icon" class="icon-wrench icon-white"></i>
|
|
</div>
|
|
</header>
|
|
|
|
<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">
|
|
<!-- ko if:$parent.widgetCanMoveUp($data) -->
|
|
<li data-bind="click:$parent.moveWidgetUp"><i class="icon-chevron-up icon-white"></i></li>
|
|
<!-- /ko -->
|
|
<!-- ko if:$parent.widgetCanMoveDown($data) -->
|
|
<li data-bind="click:$parent.moveWidgetDown"><i class="icon-chevron-down icon-white"></i></li>
|
|
<!-- /ko -->
|
|
<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>
|