-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (120 loc) · 5.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>JDash Tutorial</title>
<!-- jdash client library -->
<script src="node_modules/jdash-ui/dist/jdash.min.js"></script>
<!-- jdash theme & elements -->
<link rel="import" href="node_modules/jdash-ui/dist/components/jdash.html">
</head>
<body class="j-light-gray j-padding">
<!-- Use j-dashlet to define a dashlet -->
<j-dashlet id="hello-world" title="Hello world!">
<template>
<!-- This will be the HTML content of your dashlet -->
<h1></h1>
</template>
<script>
jdash.define(function () {
this.initialized = function () {
// Dom is ready!
var h1 = this.querySelector('h1')
h1.textContent = 'Hello World!';
}
})
</script>
</j-dashlet>
<button id="createDashboardBtn" class="j-btn j-white">Create Dashboard</button>
<button id="addDashletBtn" class="j-btn j-white">Add Dashlet</button>
<div class="j-section j-padding-4" id="dashboard-edit-tools">
<div class="j-margin-bottom">
<div class="j-row-padding">
<div class="j-half">
<button class="j-btn j-white" btn-group="dashboard-view-mode" id="readonly">View</button>
<button class="j-btn j-white" btn-group="dashboard-view-mode" id="dashletedit">Dashlets</button>
<button class="j-btn j-white" btn-group="dashboard-view-mode" id="layoutedit">Design</button>
</div>
</div>
</div>
<div id="dashlet-list" class="j-animate-zoom dashlet-list">
</div>
</div>
<div id="dashboardList"></div>
<j-dashboard id="dashboard" j-view-mode="dashletedit">
<h2 j-bind="title"></h2>
</j-dashboard>
<script>
jdash.ready(function () {
var addDashletBtn = document.querySelector('#addDashletBtn');
var dashboard = document.querySelector('#dashboard');
addDashletBtn.style.display = 'none';
dashboard.style.display = 'none';
function loadDashboard(id) {
dashboard.load(id).then(function () {
addDashletBtn.style.display = '';
dashboard.style.display = '';
dashboard.setViewMode('dashletedit');
});
}
function createDashboardList() {
var container = document.querySelector('#dashboardList');
// clear existing buttons.
container.innerHTML = '';
return jdash.Provider.getMyDashboards().then(function (result) {
// for each dashboard create a button
for (var i = 0; i < result.data.length; i++) {
var btn = document.createElement('button');
btn.setAttribute("class", 'j-btn j-white');
btn.textContent = result.data[i].title;
btn.id = result.data[i].id;
container.appendChild(btn);
btn.addEventListener('click', function (e) {
var idToLoad = e.target.id;
loadDashboard(idToLoad);
})
}
})
}
// Provide your Api Key and User Token
var providerInitParameters = {
apiKey: 'YOUR API KEY',
userToken: 'YOUR DEMO TOKEN'
}
if (providerInitParameters.apiKey === 'YOUR API KEY' || providerInitParameters.userToken === 'YOUR DEMO TOKEN') {
alert("Go to https://app.jdash.io and create a free account and get your user token and api key. See http://doc.jdash.io/client/getting-started for more information.");
}
// Initialize the Provider
jdash.Provider.init(providerInitParameters);
createDashboardList();
document.querySelector('#createDashboardBtn').addEventListener('click', function () {
var title = window.prompt('Set a title for new dashboard');
// Create a new dashboard
jdash.Provider.createDashboard({
title: title
}).then(function (result) {
console.log('Dashboard created with id:' + result.id);
createDashboardList();
loadDashboard(result.id);
}).catch(function (err) {
alert('There was an error creating dashboard: ' + err.message || err)
})
})
// add hello world dashlet to dashboard
addDashletBtn.addEventListener('click', function (e) {
dashboard.addDashlet('hello-world');
})
document.querySelector('#readonly').addEventListener('click', function () {
dashboard.setAttribute('j-view-mode', 'readonly');
});
document.querySelector('#dashletedit').addEventListener('click', function () {
dashboard.setAttribute('j-view-mode', 'dashletedit');
});
document.querySelector('#layoutedit').addEventListener('click', function () {
dashboard.setAttribute('j-view-mode', 'layoutedit');
});
})
</script>
</body>
</html>