|
|
@@ -22,123 +22,129 @@
|
|
|
<a role="button" href="/panel/stations/<%= it.meteostanica.id %>/history/<%= it.property %>/allTime">celý čas</a>
|
|
|
</div>
|
|
|
|
|
|
-<% if (it?.dateMap?.years) { %>
|
|
|
- <form id="historyForm">
|
|
|
- <% if (it?.dateMap?.days) { %>
|
|
|
- <div>
|
|
|
- <label for="day">deň</label>
|
|
|
- <select id="day" name="day">
|
|
|
- <% for (const item of it?.dateMap?.days) { %>
|
|
|
- <option value="<%= item %>" <%= item === it?.selected?.day ? `selected` : `` %> ><%= item %></option>
|
|
|
- <% } %>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <% } %>
|
|
|
+<% if (it.data?.[0]) { %>
|
|
|
+ <% if (it?.dateMap?.years) { %>
|
|
|
+ <form id="historyForm">
|
|
|
+ <% if (it?.dateMap?.days) { %>
|
|
|
+ <div>
|
|
|
+ <label for="day">deň</label>
|
|
|
+ <select id="day" name="day">
|
|
|
+ <% for (const item of it?.dateMap?.days) { %>
|
|
|
+ <option value="<%= item %>" <%= item === it?.selected?.day ? `selected` : `` %> ><%= item %></option>
|
|
|
+ <% } %>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <% } %>
|
|
|
+
|
|
|
+ <% if (it?.dateMap?.months) { %>
|
|
|
+ <div>
|
|
|
+ <label for="month">mesiac</label>
|
|
|
+ <select id="month" name="month">
|
|
|
+ <% for (const item of it?.dateMap?.months) { %>
|
|
|
+ <option value="<%= item %>" <%= item === it?.selected?.month ? `selected` : `` %> > <%= it?.lang?.general.dateFormats.months?.[item]() %></option>
|
|
|
+ <% } %>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <% } %>
|
|
|
|
|
|
- <% if (it?.dateMap?.months) { %>
|
|
|
<div>
|
|
|
- <label for="month">mesiac</label>
|
|
|
- <select id="month" name="month">
|
|
|
- <% for (const item of it?.dateMap?.months) { %>
|
|
|
- <option value="<%= item %>" <%= item === it?.selected?.month ? `selected` : `` %> > <%= it?.lang?.general.dateFormats.months?.[item]() %></option>
|
|
|
- <% } %>
|
|
|
- </select>
|
|
|
+ <label for="year">rok</label>
|
|
|
+ <select id="year" name="year">
|
|
|
+ <% for (const item of it?.dateMap?.years) { %>
|
|
|
+ <option value="<%= item %>" <%= item === it?.selected?.year ? `selected` : `` %> > <%= item %></option>
|
|
|
+ <% } %>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
- <% } %>
|
|
|
|
|
|
- <div>
|
|
|
- <label for="year">rok</label>
|
|
|
- <select id="year" name="year">
|
|
|
- <% for (const item of it?.dateMap?.years) { %>
|
|
|
- <option value="<%= item %>" <%= item === it?.selected?.year ? `selected` : `` %> > <%= item %></option>
|
|
|
- <% } %>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <button type="submit">načítať</button>
|
|
|
- </form>
|
|
|
-<% } %>
|
|
|
+ <button type="submit">načítať</button>
|
|
|
+ </form>
|
|
|
+ <% } %>
|
|
|
+
|
|
|
+ <% const time = [] %>
|
|
|
+ <% const data = [] %>
|
|
|
|
|
|
-<% const time = [] %>
|
|
|
-<% const data = [] %>
|
|
|
+ <% for (const item of it.data) { %>
|
|
|
+ <% time.push(item.timeMark) %>
|
|
|
+
|
|
|
+ <% if (it.property === "outdoorConnected") {%>
|
|
|
+ <% data.push(item.value) %>
|
|
|
+ <% continue %>
|
|
|
+ <% } %>
|
|
|
|
|
|
-<% for (const item of it.data) { %>
|
|
|
- <% time.push(item.timeMark) %>
|
|
|
-
|
|
|
- <% if (it.property === "outdoorConnected") {%>
|
|
|
- <% data.push(item.value) %>
|
|
|
- <% continue %>
|
|
|
+ <% data.push(item.value / 100) %>
|
|
|
<% } %>
|
|
|
|
|
|
- <% data.push(item.value / 100) %>
|
|
|
-<% } %>
|
|
|
+ <div>
|
|
|
+ <canvas id="historyChart"></canvas>
|
|
|
+ </div>
|
|
|
|
|
|
-<div>
|
|
|
- <canvas id="historyChart"></canvas>
|
|
|
-</div>
|
|
|
+ <script>
|
|
|
+ const dateMap = <%~ JSON.stringify(it?.dateMap.raw, null, 2) %>
|
|
|
|
|
|
-<script>
|
|
|
- const dateMap = <%~ JSON.stringify(it?.dateMap.raw, null, 2) %>
|
|
|
+ const monthLang = <%~ serializeToCode(it?.lang?.general.dateFormats.months) %>
|
|
|
|
|
|
- const monthLang = <%~ serializeToCode(it?.lang?.general.dateFormats.months) %>
|
|
|
+ const daySelect = document.querySelector("#historyForm select#day")
|
|
|
+ const monthSelect = document.querySelector("#historyForm select#month")
|
|
|
+ const yearSelect = document.querySelector("#historyForm select#year")
|
|
|
|
|
|
- const daySelect = document.querySelector("#historyForm select#day")
|
|
|
- const monthSelect = document.querySelector("#historyForm select#month")
|
|
|
- const yearSelect = document.querySelector("#historyForm select#year")
|
|
|
+ monthSelect.addEventListener('change', resetHistoryForm)
|
|
|
+ yearSelect.addEventListener('change', resetHistoryForm)
|
|
|
|
|
|
- monthSelect.addEventListener('change', resetHistoryForm)
|
|
|
- yearSelect.addEventListener('change', resetHistoryForm)
|
|
|
+ function resetHistoryForm(e) {
|
|
|
+ daySelect.textContent = ''
|
|
|
+ if (e.target.id === "year") monthSelect.textContent = ''
|
|
|
|
|
|
- function resetHistoryForm(e) {
|
|
|
- daySelect.textContent = ''
|
|
|
- if (e.target.id === "year") monthSelect.textContent = ''
|
|
|
+ const years = Object.keys(dateMap)
|
|
|
+ const selectedYear = years.find(i => i === yearSelect.value) ?? years[years.length - 1]
|
|
|
|
|
|
- const years = Object.keys(dateMap)
|
|
|
- const selectedYear = years.find(i => i === yearSelect.value) ?? years[years.length - 1]
|
|
|
+ const months = Object.keys(dateMap[selectedYear])
|
|
|
+ const selectedMonth = months.find(i => i === monthSelect.value) ?? months[months.length - 1]
|
|
|
|
|
|
- const months = Object.keys(dateMap[selectedYear])
|
|
|
- const selectedMonth = months.find(i => i === monthSelect.value) ?? months[months.length - 1]
|
|
|
+ const days = dateMap[selectedYear][selectedMonth]
|
|
|
|
|
|
- const days = dateMap[selectedYear][selectedMonth]
|
|
|
+ for (const day of days) {
|
|
|
+ const option = document.createElement('option')
|
|
|
+ option.textContent = day
|
|
|
+ option.value = day
|
|
|
+ daySelect.append(option)
|
|
|
+ }
|
|
|
|
|
|
- for (const day of days) {
|
|
|
- const option = document.createElement('option')
|
|
|
- option.textContent = day
|
|
|
- option.value = day
|
|
|
- daySelect.append(option)
|
|
|
+ if (e.target.id === "year") {
|
|
|
+ for (const [key, value] of Object.entries(months)) {
|
|
|
+ const option = document.createElement('option')
|
|
|
+ option.textContent = monthLang[key]()
|
|
|
+ option.value = key
|
|
|
+ monthSelect.append(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- if (e.target.id === "year") {
|
|
|
- for (const [key, value] of Object.entries(months)) {
|
|
|
- const option = document.createElement('option')
|
|
|
- option.textContent = monthLang[key]()
|
|
|
- option.value = key
|
|
|
- monthSelect.append(option)
|
|
|
+ const ctx = document.querySelector('#historyChart');
|
|
|
+
|
|
|
+ new Chart(ctx, {
|
|
|
+ type: 'bar',
|
|
|
+ data: {
|
|
|
+ labels: <%~ JSON.stringify(time, null, 2) %>,
|
|
|
+ datasets: [{
|
|
|
+ label: `<%= it.property %>`,
|
|
|
+ data: <%~ JSON.stringify(data, null, 2) %>,
|
|
|
+ borderWidth: 1
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ scales: {
|
|
|
+ y: {
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const ctx = document.querySelector('#historyChart');
|
|
|
-
|
|
|
- new Chart(ctx, {
|
|
|
- type: 'bar',
|
|
|
- data: {
|
|
|
- labels: <%~ JSON.stringify(time, null, 2) %>,
|
|
|
- datasets: [{
|
|
|
- label: `<%= it.property %>`,
|
|
|
- data: <%~ JSON.stringify(data, null, 2) %>,
|
|
|
- borderWidth: 1
|
|
|
- }]
|
|
|
- },
|
|
|
- options: {
|
|
|
- scales: {
|
|
|
- y: {
|
|
|
- beginAtZero: true
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-</script>
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+<% } else { %>
|
|
|
+ <div id="mainStats">
|
|
|
+ <p>žiadne dáta :( pošlite nejaké pomocou vášho websocket kľúča vyššie.</p>
|
|
|
+ </div>
|
|
|
+<% } %>
|
|
|
|
|
|
<% function serializeToCode(obj) { %>
|
|
|
<% // Handle null/primitive types %>
|
marek