-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (119 loc) · 5.49 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.1.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.1.2/firebase-auth.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-database.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-firestore.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-functions.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-storage.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-analytics.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-remote-config.js"></script>
<script defer src="/__/firebase/8.1.2/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 800px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 44px; font-weight: 400; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>IoT project web</h1>
<!-- This is a comment <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation ++++</a> !-->
</div>
<!-- <p id="load">Firebase SDK Loading…</p> !-->
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
<div class=" main-list" id="list_div">
<div class="list-item">
<p>Email:jhoan.gr.ru@gmail.com
</div>
</div>
<div id="chartContainer" style="height:600px; width:auto;margin:0 auto "> </div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
apiKey: 'AAAAFMSH7Yw:APA91bG2EPDhADD0eRDgnIIfY-LEMxDOcubl1LEVpTCatJo7NJOWVQN3Bm2OzZjvvxQeDM3JhoFV2rzmRouYwxNWlvtNu71JOQMiZz6lmfIs4cjIwbG5kgg-GoD9YJvEJOB_klbvzp6d',
authDomain: 'blefirebaseproject-f7b77.com',
projectId: 'blefirebaseproject-f7b77'
});
var db = firebase.firestore();
list=[]
var x;
var i=0;
const list_div=document.querySelector("#list_div");
db.collection("BatteryLevel").orderBy("Timestamp","desc").limit(24).get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
list.push({y: doc.data().BatteryLevel, label: doc.data().Hora});
console.log(list[i]);
i++;
});
list.reverse();
console.log(list[2]);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "Últimes 24 actualitzacions"
},
axisY: {
title: "BatteryLevel"
},
data: [{
type: "line",
showInLegend: true,
legendMarkerColor: "red",
legendText: "BatteryLevel %",
dataPoints: list
}]
});
chart.render();
});
</script>
</body>
</html>