mirror of https://github.com/Askill/thermo-pwa.git
logging works
This commit is contained in:
parent
b3feee447f
commit
f5cbf42e03
|
|
@ -1,7 +1,7 @@
|
||||||
const dbconnect = window.indexedDB.open('temps', 1);
|
const dbconnect = window.indexedDB.open('temps', 1);
|
||||||
var db = null
|
var db = null
|
||||||
|
var n = 50
|
||||||
const interval = setInterval(writeTo, 2000);
|
const interval = setInterval(writeTo, 3000);
|
||||||
|
|
||||||
|
|
||||||
dbconnect.onupgradeneeded = ev => {
|
dbconnect.onupgradeneeded = ev => {
|
||||||
|
|
@ -77,9 +77,27 @@ function writeTo(){
|
||||||
|
|
||||||
function drawChart(){
|
function drawChart(){
|
||||||
|
|
||||||
let humiditiesDict = readLast("Humidities", 1)
|
|
||||||
let temperaturesDict = readLast("Temperatures", 1)
|
|
||||||
|
|
||||||
|
chart1.data.datasets[0].data = chart1.data.datasets[0].data.slice(-n)
|
||||||
|
chart1.data.datasets[1].data = chart1.data.datasets[1].data.slice(-n)
|
||||||
|
chart1.data.labels = chart1.data.labels.slice(-n)
|
||||||
|
|
||||||
|
|
||||||
|
readLast("Humidities", n, function(data){
|
||||||
|
data.reverse().forEach(function(item){
|
||||||
|
chart1.data.datasets[0].data.push(item["humidity"])
|
||||||
|
chart1.data.labels.push(item["timestamp"])
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
readLast("Temperatures", n, function(data){
|
||||||
|
data.reverse().forEach(function(item){
|
||||||
|
chart1.data.datasets[1].data.push(item["temperature"])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
chart1.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: replace with fetch
|
// TODO: replace with fetch
|
||||||
|
|
@ -118,6 +136,9 @@ function getJSON(url, callback, fallback) {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
|
responsive: false,
|
||||||
|
width:1000,
|
||||||
|
height:800,
|
||||||
title: {
|
title: {
|
||||||
display: true,
|
display: true,
|
||||||
text: 'Climate'
|
text: 'Climate'
|
||||||
|
|
@ -125,41 +146,24 @@ function getJSON(url, callback, fallback) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function readLast(type, n){
|
function readLast(type, n, callback){
|
||||||
let objectStore = db.transaction(type).objectStore(type);
|
let objectStore = db.transaction(type).objectStore(type);
|
||||||
let data = [];
|
let data = [];
|
||||||
|
|
||||||
|
|
||||||
objectStore.openCursor(null, "prev").onsuccess = function(event) {
|
objectStore.openCursor(null, "prev").onsuccess = function(event) {
|
||||||
var cursor = event.target.result;
|
var cursor = event.target.result;
|
||||||
if (cursor && data.length < n) {
|
if (cursor && data.length < n) {
|
||||||
try {
|
try {
|
||||||
data.push(cursor.value)
|
data.push(cursor.value)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//chart1.data.labels = chart1.data.labels.slice(-n)
|
|
||||||
|
|
||||||
if (cursor.value["humidity"] != null){
|
|
||||||
//chart1.data.datasets[0].data.shift()
|
|
||||||
chart1.data.datasets[0].data.push(cursor.value["humidity"])
|
|
||||||
//chart1.data.labels.shift()
|
|
||||||
chart1.data.labels.push(cursor.value["timestamp"])
|
|
||||||
}
|
|
||||||
if(cursor.value["temperature"] != null){
|
|
||||||
//chart1.data.datasets[1].data.shift()
|
|
||||||
chart1.data.datasets[1].data.push(cursor.value["temperature"])
|
|
||||||
}
|
|
||||||
|
|
||||||
chart1.update()
|
|
||||||
cursor.continue();
|
cursor.continue();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
callback(data)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
return data
|
|
||||||
}
|
}
|
||||||
|
|
@ -10,31 +10,9 @@
|
||||||
<meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
|
<meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
|
||||||
</head>
|
</head>
|
||||||
<body class="grey lighten-4">
|
<body class="grey lighten-4">
|
||||||
<canvas id="line-chart" width="800" height="450"></canvas>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
|
|
||||||
<script>
|
|
||||||
//https://www.chartjs.org/docs/latest/developers/updates.html
|
|
||||||
var chart1 = new Chart(document.getElementById("line-chart"), {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
|
|
||||||
datasets: [{
|
|
||||||
data: [86,114,106,106,107,111,133,221,783,2478],
|
|
||||||
label: "Temperature",
|
|
||||||
borderColor: "#3e95cd",
|
|
||||||
fill: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Climate'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<canvas id="line-chart" style="width: 512px; height: 500px"></canvas>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
|
||||||
<script src="/static/js/ui.js"></script>
|
<script src="/static/js/ui.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Loading…
Reference in New Issue