' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+
+
+ // Do PLOT 1
+ let ch = Highcharts.chart('dday', options, function (chart) {
+ utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('dday').offsetWidth)
+ })
+/*
+ // Do PLOT 2
+ options.series[0] = {
+ name: 'Peaks',
+ data: series2,
+ color: utils.colors.peaks,
+ type: 'column'
+ }
+ options.title.text = 'Peaks more than ' + data.peak + ' dbA'
+ options.subtitle.text = 'Number of exceedances per hour ' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH'h'") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+
+ let ch1 = Highcharts.chart('dpeak', options)
+*/
+}
+
diff --git a/public/javascripts/chart_daynight.js b/public/javascripts/chart_daynight.js
new file mode 100644
index 0000000..03c9861
--- /dev/null
+++ b/public/javascripts/chart_daynight.js
@@ -0,0 +1,160 @@
+// Sh0w the hour average chart
+import {logit, logerror} from './logit.js'
+import * as utils from './chart_utilities.js'
+import {DateTime, Duration} from "./luxon.min.js"
+
+// ******************************************************************
+// PlotDayNightAVG_Noise
+// ******************************************************************
+
+
+export const showDaynight = async (params) => {
+ await PlotDayNight_Noise(params.sid)
+}
+
+
+const PlotDayNight_Noise = async function (sid) {
+
+ let series1 = []
+ let series2 = []
+
+ // read the data from the server
+ const url = `${utils.url}/getsensordata?sensorid=${sid}&data=daynight`
+ let ret = await fetch(url)
+ .catch(e => {
+ logerror(e)
+ })
+ let data = await ret.json()
+
+ if(!data.err) {
+ // Put values into the serieses
+ let cnt = 0
+ data.values.forEach((x) => {
+ if(x.n_AVG != -1) {
+ let dat = new Date(x.datetime).getTime() // retrieve the date
+ series1.push([dat, x.n_dayAVG])
+ series2.push([dat, x.n_nightAVG])
+ }
+ })
+ } else {
+ utils.showError(data.err)
+ }
+ let dlt = DateTime.now() // retrieve the date
+ dlt = dlt.minus({day:30})
+
+ // Plot-Options
+ let options = utils.createGlobObtions()
+ options.xAxis.plotBands = utils.calcWeekends(data, true)
+ options.xAxis.tickInterval = 24 * 3600 * 1000
+ options.xAxis.title = 'Date'
+ options.xAxis.labels = {
+ formatter: function () {
+ return this.axis.defaultLabelFormatter.call(this);
+ }
+ }
+
+ options.chart.type = 'column'
+ options.yAxis = {
+ title: {
+ text: 'dbA',
+ useHTML: true,
+ },
+ min: utils.noise_ymin,
+ tickAmount: 10,
+ gridLineColor: 'lightgray',
+ }
+ options.series = [
+ {
+ name: 'Day',
+ data: series1,
+ color: utils.colors.eq,
+ type: 'column',
+ zIndex: 2,
+ },
+ {
+ name: 'Night',
+ data: series2,
+ color: utils.colors.max,
+ type: 'column',
+ zIndex: 2,
+ },
+ ]
+ options.plotOptions.series = {
+ animation: false
+ }
+ options.plotOptions.column = {
+ pointWidth: 20,
+ groupPadding: 0.3
+ }
+ options.title.text = 'Noise Average values during the day and night hours'
+ options.subtitle.text = 'Daily mean values of LAeq from 6h00 to 22h00 ' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+*/
+
+ // Do PLOT 1
+ let ch = Highcharts.chart('ddaynight', options, function (chart) {
+ utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('ddaynight').offsetWidth)
+ })
+/*
+ // Do PLOT 2
+ options.series[0] = {
+ name: 'Peaks',
+ data: series2,
+ color: utils.colors.peaks,
+ type: 'column'
+ }
+ options.title.text = 'Peaks more than ' + data.peak + ' dbA'
+ options.subtitle.text = 'Number of exceedances per hour ' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH'h'") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+
+ let ch1 = Highcharts.chart('dpeak', options)
+*/
+}
+
diff --git a/public/javascripts/chart_houravg.js b/public/javascripts/chart_houravg.js
new file mode 100644
index 0000000..b1a48cb
--- /dev/null
+++ b/public/javascripts/chart_houravg.js
@@ -0,0 +1,129 @@
+// Sh0w the hour average chart
+import {logit, logerror} from './logit.js'
+import * as utils from './chart_utilities.js'
+import {DateTime, Duration} from "./luxon.min.js"
+
+// ******************************************************************
+// PlotHourAVG_Noise
+// ******************************************************************
+
+
+export const showHouravg = async (params) => {
+ await PlotHourAVG_Noise(params.sid)
+}
+
+
+const PlotHourAVG_Noise = async function (sid) {
+
+ let series1 = []
+ let series2 = []
+
+ // read the data from the server
+ const url = `${utils.url}/getsensordata?sensorid=${sid}&data=havg`
+ let ret = await fetch(url)
+ .catch(e => {
+ logerror(e)
+ })
+ let data = await ret.json()
+
+ if(!data.err) {
+
+ // Put values into the serieses
+ let cnt = 0
+ data.values.forEach((x) => {
+ if (x.n_AVG != -1) {
+ let dat = new Date(x.datetime).getTime() // retrieve the date
+ series1.push([dat, x.n_AVG])
+ series2.push([dat, x.peakcount])
+ }
+ })
+ } else {
+ utils.showError(data.err)
+ }
+ let dlt = DateTime.now() // retrieve the date
+ dlt = dlt.minus({day:1})
+
+ // Plot-Options
+ let options = utils.createGlobObtions()
+ options.xAxis.tickInterval = 6 * 3600 * 1000
+ options.xAxis.plotBands = utils.calcWeekends(data, true)
+ options.xAxis.minTickInterval = 3600 * 1000
+
+ options.yAxis = {
+ title: {
+ text: 'dbA',
+ useHTML: true,
+ },
+ min: utils.noise_ymin,
+ tickAmount: 10,
+ gridLineColor: 'lightgray',
+ }
+ options.series = [
+ {
+ name: 'Mean value LAeq',
+ data: series1,
+ color: utils.colors.eq,
+ type: 'column',
+ zIndex: 2,
+ },
+ ]
+ options.plotOptions.column = {
+ pointWidth: 8,
+ groupPadding: 0.5
+ }
+ options.title.text = 'Noise hourly mean values'
+ options.subtitle.text = 'Hourly mean values of LAeq for each full hour ' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH'h'") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+
+
+ // Do PLOT 1
+ let ch = Highcharts.chart('dhour', options, function (chart) {
+ utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('dhour').offsetWidth)
+ })
+ // Do PLOT 2
+ options.series[0] = {
+ name: 'Peaks',
+ data: series2,
+ color: utils.colors.peaks,
+ type: 'column'
+ }
+ options.title.text = 'Peaks more than ' + data.peak + ' dbA'
+ options.subtitle.text = 'Number of exceedances per hour ' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH'h'") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
+
+ let ch1 = Highcharts.chart('dpeak', options)
+}
+
diff --git a/public/javascripts/chart_lden.js b/public/javascripts/chart_lden.js
new file mode 100644
index 0000000..38c60d3
--- /dev/null
+++ b/public/javascripts/chart_lden.js
@@ -0,0 +1,112 @@
+// Sh0w the hour average chart
+import {logit, logerror} from './logit.js'
+import * as utils from './chart_utilities.js'
+import {DateTime, Duration} from "./luxon.min.js"
+
+// ******************************************************************
+// PlotLDEN_Noise
+// ******************************************************************
+
+
+export const showLden = async (params) => {
+ await PlotLDEN_Noise(params.sid)
+}
+
+
+const PlotLDEN_Noise = async function (sid) {
+
+ let series1 = []
+
+ // read the data from the server
+ const url = `${utils.url}/getsensordata?sensorid=${sid}&data=lden`
+ let ret = await fetch(url)
+ .catch(e => {
+ logerror(e)
+ })
+ let data = await ret.json()
+
+ if (!data.err) {
+ // Put values into the serieses
+ let cnt = 0
+ data.values.forEach((x) => {
+ if(x.n_AVG != -1) {
+ let dat = new Date(x.datetime).getTime() // retrieve the date
+ series1.push([dat, x.lden])
+ }
+ })
+ } else {
+ utils.showError(data.err)
+ }
+ let dlt = DateTime.now() // retrieve the date
+ dlt = dlt.minus({day:30})
+
+ // Plot-Options
+ let options = utils.createGlobObtions()
+
+ options.xAxis.plotBands = utils.calcWeekends(data, true)
+ options.xAxis.tickInterval = 24 * 3600 * 1000
+ options.xAxis.title = 'Date'
+ options.xAxis.labels = {
+ formatter: function () {
+ let lbl = this.axis.defaultLabelFormatter.call(this);
+ this.value += 86400000;
+ let lbl1 = this.axis.defaultLabelFormatter.call(this);
+ return parseInt(lbl) + '/' + lbl1;
+ }
+ }
+ options.chart.type = 'column'
+ options.yAxis = {
+ title: {
+ text: 'dbA',
+ useHTML: true,
+ },
+ min: utils.noise_ymin,
+ tickAmount: 10,
+ gridLineColor: 'lightgray',
+ }
+ options.series = [
+ {
+ name: 'lden',
+ data: series1,
+ color: utils.colors.eq,
+ type: 'column',
+ zIndex: 2,
+ }
+ ]
+ options.plotOptions.series = {
+ animation: false
+ }
+ options.plotOptions.column = {
+ pointWidth: 20,
+ groupPadding: 0.1
+ }
+ options.title.text = 'Noise L' +
+ DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat("dd.LL - HH:mm:ss") + '
' +
+ '● ' +
+ this.series.name + ': ' + y + '
'
+ }
let noDataTafel = '' +
@@ -180,7 +189,7 @@ export const PlotDayLive_Noise = async (sid) => {
let navtime = [-24, -12, 0, 12, 24]
let chr = Highcharts.chart('dlive', options, function (chart) {
- utils.addSensorID2chart(chart, sensors.props, document.getElementById('dlive').offsetWidth)
+ utils.addSensorID2chart(chart, {sid: data.sid, indoor: data.indoor}, document.getElementById('dlive').offsetWidth)
// let breit = $(window).width()
// let navx = breit-350
// chart.renderer.label(
diff --git a/public/javascripts/chart_utilities.js b/public/javascripts/chart_utilities.js
index 31cc58f..3879a15 100644
--- a/public/javascripts/chart_utilities.js
+++ b/public/javascripts/chart_utilities.js
@@ -13,15 +13,19 @@ let nbrofdaysforavg = 8; // Stundenmittel Anzahl Tagte (default =
let nbrofdaysfordaynight = 30; // use 30 days or day/night graphic
let stucols = 1; // Anzeige nur Balken (StundenMittel)
+export const noise_ymin = 30; // lowest value on y-axis for noise
+export const noise_ymax = 120; // highest value on y-axis for noise
+let activeTab = 0; // active TAB number
+export let peaklim = 70; // threshold for peak count
+
+export const url = '/api'
export function createGlobObtions() {
- var globObject = {};
-
// Options, die für alle Plots identisch sind
- globObject = {
+ let globObject = {
chart: {
height: 600,
-// width: 1000;
+// width: 1000,
spacingRight: 20,
spacingLeft: 20,
spacingTop: 25,
@@ -51,7 +55,7 @@ export function createGlobObtions() {
useHTML: true,
},
subtitle: {
- text: 'Gemessene Werte und ' + avgTime + 'min-gleitende Mittelwerte',
+// text: 'Gemessene Werte und ' + avgTime + 'min-gleitende Mittelwerte',
align: 'left',
},
tooltip: {
@@ -60,14 +64,6 @@ export function createGlobObtions() {
borderWidth: 0,
borderRadius: 0,
useHTML: true,
- formatter: function () {
- return '
' +
- DateTime.fromMillis(this.x, {zone: 'utc'}).toFormat('dd.LL HH:mm:ss') + '
' +
- '● ' +
- this.series.name + ': ' +
- Highcharts.numberFormat(this.y, 1) +
- '
';
- }
},
xAxis: {
type: 'datetime',
@@ -106,16 +102,16 @@ export function createGlobObtions() {
return globObject;
}
-function calcWeekends(data, isyear) {
- var weekend = [];
- var oldDay = 8;
- for (var i = 0; i < data.length; i++) {
- var mom = moment(data[i].date);
+export function calcWeekends(data, isyear) {
+ let weekend = [];
+ let oldDay = 8;
+ for (let i = 0; i < data.length; i++) {
+ let mom = moment(data[i].date);
if (isyear) {
mom = moment(data[i]._id)
}
- var day = mom.day();
- var st = mom.startOf('day');
+ let day = mom.day();
+ let st = mom.startOf('day');
if (day != oldDay) {
if (day == 6) {
weekend.push({
@@ -138,21 +134,21 @@ function calcWeekends(data, isyear) {
return weekend;
}
-function calcDays(data, isyear) {
- var days = [];
+export function calcDays(data, isyear) {
+ let days = [];
if (data.length == 0) {
return days
}
- var oldday = moment(data[0].date).day();
+ let oldday = moment(data[0].date).day();
if (isyear) {
oldday = moment(data[0]._id).day();
}
- for (var i = 0; i < data.length; i++) {
- var m = moment(data[i].date);
+ for (let i = 0; i < data.length; i++) {
+ let m = moment(data[i].date);
if (isyear) {
m = moment(data[i]._id);
}
- var tag = m.day()
+ let tag = m.day()
if (tag != oldday) {
m.startOf('day');
days.push({color: 'lightgray', value: m.valueOf(), width: 1, zIndex: 2});
@@ -162,26 +158,12 @@ function calcDays(data, isyear) {
return days;
};
-function getIndoor(sensor) {
- let p = new Promise(function (resolve, reject) {
- let url = '/api/getdata?data=props&sensorid=' + sensor;
- $.get(url, (data, err) => {
- if (err != 'success') {
- resolve(false)
- } else {
- resolve(data.values[0].indoor == 1)
- }
- })
- })
- return p
-}
-
-export async function addSensorID2chart(chart, props, width) {
+export async function addSensorID2chart(chart, sensor, width) {
console.log('widht: ',width);
- let indoor = props.location[0].indoor
+ let indoor =sensor.indoor
console.log('indoor: ',indoor)
let sens = chart.renderer.label(
- `Sensor: ${props._id} ${indoor ? ' (indoor)' : ''}`,
+ `Sensor: ${sensor.sid} ${indoor ? ' (indoor)' : ''}`,
width / 2 - 100, 65,
'text', 0, 0, true)
.css({
@@ -192,3 +174,9 @@ export async function addSensorID2chart(chart, props, width) {
zIndex: 5,
}).add();
}
+
+export const showError = (err) => {
+ document.querySelector('.modal-body').setHTML(err)
+ let myModal = new bootstrap.Modal(document.getElementById('dialogError'))
+ myModal.show()
+}
\ No newline at end of file
diff --git a/public/javascripts/global.js b/public/javascripts/global.js
index b519791..c8c675f 100644
--- a/public/javascripts/global.js
+++ b/public/javascripts/global.js
@@ -5,6 +5,10 @@ import * as map from './map.js'
import * as dt from './datetime.js'
import {logit} from './logit.js'
import * as chart_live from './chart_live.js'
+import * as chart_houravg from './chart_houravg.js'
+import * as chart_dayavg from './chart_dayavg.js'
+import * as chart_daynight from './chart_daynight.js'
+import * as chart_lden from './chart_lden.js'
(async () => {
@@ -28,14 +32,21 @@ import * as chart_live from './chart_live.js'
}
// END global variables
-const tabtable = [
- {id: 'kartentab', func: map.showMap},
- {id: 'livetab', func: chart_live.showLive},
- // {id: 'houravgtab', func: chart_houravg.showHouravg},
- // {id: 'dayavgtab', func: chart_dayavg.showDayavg},
- // {id: 'daynighttab', func: chart_daynight.showDaynight},
- // {id: 'ldentab', func: chart_lden.showLden},
-]
+ const tabtable = [
+ {id: 'kartentab', func: map.showMap},
+ {id: 'livetab', func: chart_live.showLive},
+ {id: 'houravgtab', func: chart_houravg.showHouravg},
+ {id: 'dayavgtab', func: chart_dayavg.showDayavg},
+ {id: 'daynighttab', func: chart_daynight.showDaynight},
+ {id: 'ldentab', func: chart_lden.showLden},
+ ]
+
+ const removeTabs = () => {
+ document.querySelector('#navi').style.display = 'none'
+ }
+ const showTabs = () => {
+ document.querySelector('#navi').style.display = 'block'
+ }
async function main() {
// initialise tabs
@@ -78,7 +89,15 @@ const tabtable = [
// show version and version-date
document.querySelector('#versn').setHTML(`Version: ${sysparams.version} vom ${sysparams.date.slice(0,10)}`)
+ const csid = parseInt(sysparams.csid)
+ if(csid !== -1) {
+ let triggerEl = document.querySelector('#livetab')
+ bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+ params.sid = csid
+ await chart_live.showLive(params)
+ }
// show the map
+ removeTabs()
map.showMap(params)
}
main().catch(console.error)
diff --git a/public/javascripts/map.js b/public/javascripts/map.js
index 953ae70..f8cbab9 100644
--- a/public/javascripts/map.js
+++ b/public/javascripts/map.js
@@ -1,15 +1,18 @@
// all function related to the map
import * as dt from './datetime.js'
+import * as chart_live from "./chart_live.js";
-let map
+let map = null
let bounds
let popuptext = ''
+let clickedSensor = 0
const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
const dba = [100, 80, 60, 40, 20, 0, -999];
export const showMap = async (params) => {
+ if (map) return
map = L.map('map',{ scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
@@ -37,8 +40,21 @@ export const showMap = async (params) => {
return div
};
legend.addTo(map)
+
let lastdate = await buildMarkers()
showLastDate(lastdate);
+
+ map.on('popupopen', function () {
+ document.querySelector('.speciallink').addEventListener('click', async function (x) {
+ console.log(`Event clicked: ${clickedSensor}`)
+ document.querySelector('#navi').style.display = 'block'
+ params.sid = clickedSensor
+ let triggerEl = document.querySelector('#livetab')
+ bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+ await chart_live.showLive(params)
+ })
+ })
+
}
@@ -59,81 +75,7 @@ function calcPolygon(bounds) {
});
;
}
-/*
-async function plotMap(cid, poly) {
- // if sensor nbr is give, find coordinates, else use Stuttgart center
- debug_log('plotMap()');
- let myLatLng;
- if (cid != -1) {
- myLatLng = await getSensorKoords(cid);
- } else {
- let stgt = await getCoords('Stuttgart');
- myLatLng = {lat: parseFloat(stgt.lat), lng: parseFloat(stgt.lon)};
- }
- // generate map centered on Stuttgart
- map = L.map('map').setView(myLatLng, firstZoom);
-
- L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
- maxZoom: 17,
- attribution: '©
OpenStreetMap contributors'
- }).addTo(map);
-
- bounds = map.getBounds();
-
- map.scrollWheelZoom.disable();
-
- map.on('moveend', async function () {
- bounds = map.getBounds();
- await buildMarkers(bounds)
- });
-
-
- let legend = L.control({position: 'bottomright'});
- legend.onAdd = function (map) {
- let div = L.DomUtil.create('div', 'info legend');
- let div_color = L.DomUtil.create('div', 'info legend inner', div);
- div_color.innerHTML += 'dbA
';
- // loop through our density intervals and generate a label with a colored square for each interval
- for (let i = 0; i < dba.length - 1; i++) {
- div_color.innerHTML +=
- '
' +
- ' ' + dba[i] + (i == 0 ? '+' : '') + '
';
- }
- div_color.innerHTML += '
offline';
- return div;
- };
- legend.addTo(map);
-
- let infobutton = L.control({position: 'topright'});
- infobutton.onAdd = function (map) {
- let div = L.DomUtil.create('div');
- div.innerHTML = '
';
- div.onclick = function () {
- dialogCenter.dialog('open');
- console.log('Clicked on Zentrieren');
- }
- return div;
- }
- infobutton.addTo(map);
-
- if (useStgtBorder) {
- fetchStuttgartBounds();
- }
-
- if (myLatLng.error != undefined) {
- showError(3, "Kein Lärmsensor", cid);
- } else {
- await buildMarkers(bounds);
- map.on('popupopen', function () {
- $('.speciallink').click(function (x) {
- showGrafik(clickedSensor);
- });
- });
- }
-
-}
-*/
// With all Markers in cluster (markers) calculate the median
// of the values. With this median fetch the color and return it.
@@ -212,7 +154,7 @@ export async function buildMarkers() {
west: bounds.getWest(), south: bounds.getSouth(),
east: bounds.getEast(), north: bounds.getNorth()
}
- const url = `http://localhost:3004/getmapdata?type=noise&box=${bounds.toBBoxString()}`
+ const url = `/api/getmapdata?type=noise&box=${bounds.toBBoxString()}`
let ret = await fetch(url)
.catch(e => {
@@ -235,6 +177,9 @@ export async function buildMarkers() {
});
for (let x of sensors.values) {
+ if (x.value <= -4) {
+ continue
+ }
let marker = L.marker([x.location[1], x.location[0]], {
icon: new L.Icon({
iconUrl: buildIcon(getColor(parseInt(x.value)),0,x.indoor),
@@ -256,7 +201,7 @@ export async function buildMarkers() {
async function onMarkerClick(e, click) {
let item = e.target.options;
- let clickedSensor = item.name;
+ clickedSensor = item.name;
let offlinetext = `
| offline |
@@ -283,6 +228,7 @@ async function onMarkerClick(e, click) {
if (click == true) { // if we clicked
e.target.closePopup(); // show the popup
}
+
}
async function getCoords(city) {
@@ -328,7 +274,7 @@ async function showLastDate(ld) {
// console.log(e)
// }
// fetch all sensors
- const url = `http://localhost:3004/getmapdata?type=noise`
+ const url = `/api/getmapdata?type=noise`
let ret = await fetch(url)
.catch(e => {
console.log(e)
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 51977e6..fa9a046 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -154,10 +154,18 @@ footer #author #versn {
margin-top: 44px;
}
-#dlive, #dhour, #dday, #ddaynight, #dlden {
- width: 98vw;
+#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak {
+ width: 100%;
height: 100%;
margin: auto;
}
+#dialogError {
+ color: red;
+}
+
+.modal-content {
+ border: red solid 2px;
+}
+
/*# sourceMappingURL=style.css.map */
diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map
index fd0c87b..1a6d5ea 100644
--- a/public/stylesheets/style.css.map
+++ b/public/stylesheets/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAWA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA7BoB;;AA+BpB;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;;AAEN;EACE;EAEA;EACA;EACA,eA3Ec;EA4Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBA/FoB;;AAiGpB;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAGN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass
index fe98585..1416737 100644
--- a/public/stylesheets/style.sass
+++ b/public/stylesheets/style.sass
@@ -150,7 +150,13 @@ footer
.tab-pane
margin-top: 44px
-#dlive, #dhour, #dday, #ddaynight, #dlden
- width: 98vw
+#dlive, #dhour, #dday, #ddaynight, #dlden, #dpeak
+ width: 100%
height: 100%
margin: auto
+
+#dialogError
+ color: red
+
+.modal-content
+ border: red solid 2px
\ No newline at end of file
diff --git a/routes/api.js b/routes/api.js
new file mode 100644
index 0000000..4c8895a
--- /dev/null
+++ b/routes/api.js
@@ -0,0 +1,37 @@
+import express from 'express'
+import pkg from '../package.json' assert { type: "json" }
+import axios from 'axios'
+
+const router = express.Router()
+const { name, version, date } = pkg
+
+let APIHOST = process.env.APIHOST || 'http://localhost:3004'
+
+/* GET home page. */
+router.get('/:cmd', async function(req, res, next) {
+ const cmd = req.params.cmd
+ let url = APIHOST
+ if(isNaN(cmd)) {
+ url += req.originalUrl
+ } else {
+ // cmd is a number ==> sid
+ url += `getsensordata?sid=${cmd}`
+ }
+ try {
+ const response = await axios(encodeURI(url));
+ if (response.status !== 200) {
+ res.json({err: `Error from servercall: status = ${response.status}`})
+ }
+ res.json(response.data)
+ } catch (e) {
+ res.json({err: `Error from servercall: ${e}`})
+ }
+})
+
+export default router
+
+
+
+// ToDo
+// Hier : getsensordata und getmapdata unterbringen und damit den externen Server aufrufen
+
diff --git a/routes/index.js b/routes/index.js
index f248a0c..0003c94 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,16 +1,39 @@
import express from 'express'
import pkg from '../package.json' assert { type: "json" }
+import axios from "axios";
const router = express.Router()
const { name, version, date } = pkg
+let APIHOST = process.env.APIHOST || 'http://localhost:3004'
+
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: name,
version: version,
- date: date
+ date: date,
+ csensor: -1
})
})
+
+router.get('/:sid', async function(req, res, next) {
+ const sid = req.params.sid
+ if(!isNaN(sid)) {
+ res.render('index', {
+ title: name,
+ version: version,
+ date: date,
+ csensor: sid
+ })
+ }
+})
+
export default router
+
+
+
+// ToDo
+// Hier : getsensordata und getmapdata unterbringen und damit den externen Server aufrufen
+
diff --git a/views/index.pug b/views/index.pug
index 469a76f..751cba8 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -18,9 +18,9 @@ block content
li.nav-item(role='presentation')
button.nav-link#dayavgtab(data-bs-toggle="tab" data-bs-target="#t_dayavg" type="button" role="tab" aria-controls="dayavg" aria-selected="true") Day_AVG
li.nav-item(role='presentation')
- button.nav-link#daynightab(data-bs-toggle="tab" data-bs-target="#t_daynight" type="button" role="tab" aria-controls="daynight" aria-selected="true") Day_Night
+ button.nav-link#daynighttab(data-bs-toggle="tab" data-bs-target="#t_daynight" type="button" role="tab" aria-controls="daynight" aria-selected="true") Day_Night
li.nav-item(role='presentation')
- button.nav-link#ldenab(data-bs-toggle="tab" data-bs-target="#t_lden" type="button" role="tab" aria-controls="lden" aria-selected="true") L
DEN-Index
+ button.nav-link#ldentab(data-bs-toggle="tab" data-bs-target="#t_lden" type="button" role="tab" aria-controls="lden" aria-selected="true") L
DEN-Index
#buttonsRight
button.btn.btn-primary#btnSet(value='set') Settings
button.btn.btn-primary#btnHelp(value='help') Info
@@ -32,12 +32,27 @@ block content
#actsensors
#mapdate
.tab-pane.fade#t_live(role="tabpanel" aria-labelledby="live-tab")
- #dlive LiveTAB
+ #dlive
.tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
- #dhour HourTAB
+ #dhour
+ #dpeak
.tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
- #dday DayTAB
+ #dday
.tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
#ddaynight DayNightTAB
.tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")
#dlden LdenTAB
+
+
+ // Error-Dialog
+ .modal.fade#dialogError(tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true")
+ .modal-dialog.modal-dialog-centered(role="document")
+ .modal-content
+ .modal-header
+ h5.modal-title.dialogErrorTitle Error
+ button(type="button" class="close" data-bs-dismiss="modal" aria-label="Close")
+ span(aria-hidden="true") ×
+ .modal-body
+ .modal-footer
+ //button(type="button" class="btn btn-secondary" data-bs-dismiss="modal") Close
+ // button(type="button" class="btn btn-primary") Save changes
diff --git a/views/layout.pug b/views/layout.pug
index 4c7e8d4..4fe7c8f 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -15,7 +15,8 @@ html
script.
let sysparams = {
version: '#{version}',
- date: '#{date}'
+ date: '#{date}',
+ csid: '#{csensor}'
}
let urlParams = {
// drawlines: '#{drawlines}' === 'true',