lpio
Version:
The last dashboard app you'll ever need
86 lines (76 loc) • 3.16 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linchpin</title>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="lp-all.html">
<link rel="import" href="../bower_components/linchpin-lizard/lp-lizard-all.html">
<link rel="import" href="settings/lp-settings.html">
</head>
<body>
<template is="dom-bind" id="main-template">
<style is="custom-style">
.on{
--iron-icon-fill-color:green
}
.off {
--iron-icon-fill-color:red
}
</style>
<lp-api id="api" state="{{state}}"></lp-api>
<template is="dom-if" if="{{state.app.online}}"><iron-icon class="on" icon="cloud-queue"></iron-icon></template>
<template is="dom-if" if="{{!state.app.online}}"><iron-icon class="off" icon="cloud-off"></iron-icon></template>
<span>Current Dashboard ID: <span>{{state.app.currentDashboard}}</span></span>
<lp-settings key="host" value="localhost"></lp-settings>
<lp-settings key="port" value="5000"></lp-settings>
<button on-tap="addDashboard">Add Dashboard</button>
<button on-tap="add">Add Widget</button>
<button on-tap="addBar">Add Bar Widget</button>
<lp-dashboard-select></lp-dashboard-select>
<lp-dashboard-display></lp-dashboard-display>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var main = document.querySelector('#main-template');
var api = document.querySelector('#api');
api.getAllDashboards();
main.add = function(){
// add dashboard to currently selected dashboard
if(main.state.app.currentDashboard == ''){
alert('Please select dashboard');
return;
}
var rnd = "data" + Math.floor((Math.random() * 100) + 1);
api.createWidget({
name:'new widget another test',
html:'<lp-lizard-data lp-data-id="'+rnd+'"></lp-lizard-data>',
js: '',
css:'',
dashboards:[main.state.app.currentDashboard]
});
}
main.addBar = function(){
// add dashboard to currently selected dashboard
if(main.state.app.currentDashboard == ''){
alert('Please select dashboard');
return;
}
var rnd = "data" + Math.floor((Math.random() * 100) + 1);
api.createWidget({
name:'new widget with bar chart',
html:'<div class="widget-flex"> <lp-lizard-bar title="Basic Bar Chart" width="400" height="250" demo hide-legend lp-data-id="'+rnd+'"></lp-lizard-bar> </div>',
js: '',
css:'',
dashboards:[main.state.app.currentDashboard]
});
}
main.addDashboard = function(){
api.createDashboard({ name:'New Dashboard!'});
}
});
</script>
</body>
</html>