admin/noise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Address on markers and on graph

Browse Source 
public/javascripts/chart_utilities.js
   - add address in #addSensorID'
   - function 'addAddress' added

public/javascripts/datetime.js
   - removed unnecessary comment

public/javascripts/global.js
   - refreshrate changed to 5 min
   - typo 'autohide' corrected

views/index.pug
   - removed text 'only for live ...'

views/layout.pug
   - removed superflous links and variables

public/javascripts/maps.js
   - added address to marker popup

charts/preparecharts.js
   - translate legend texts

public/javascripts/showcharts.js
   - dont show selected tab

public/stylesheets/style.sass
   - add style for sensornumber on chart

loclae/[de|en]/translation.json
    - added translations for legend

charts/utilities.js
   - ymax for live set to 120
This commit is contained in:
rxf
2023-06-02 17:16:12 +02:00
parent c32761ed46
commit a596ee557e
14 changed files with 64 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
charts/preparecharts.js
+7 -7
View File
@@ -229,14 +229,14 @@ export const havgData = (params, values) => {
]
options.series = [
{
name: 'Mean value LAeq',
name: `${trans('MeanValueLAeq')}`,
data: series1,
color: utils.colors.eq,
type: 'column',
zIndex: 2,
yAxis: 0
}, {
name: 'Peaks',
name: `${trans('Peaks')}`,
data: series2,
color: utils.colors.peaks,
type: 'column',
@@ -328,14 +328,14 @@ export const davgData = (params, values) => {
options.series = [
{
name: 'Mean value LAeq',
name: `${trans('MeanValueLAeq')}`,
data: series1,
color: utils.colors.eq,
type: 'column',
zIndex: 2,
yAxis: 0
},{
name: 'Peaks',
name: `${trans('Peaks')}`,
data: series2,
color: utils.colors.peaks,
type: 'column',
@@ -409,14 +409,14 @@ export const dayNightData = (params, values) => {
}
options.series = [
{
name: 'Day',
name: `${trans('Day')}`,
data: series1,
color: utils.colors.eq,
type: 'column',
zIndex: 2,
},
{
name: 'Night',
name: `${trans('Night')}`,
data: series2,
color: utils.colors.max,
type: 'column',
@@ -491,7 +491,7 @@ export const ldenData = (params, values) => {
}
options.series = [
{
name: 'lden',
name: 'Lden',
data: series1,
color: utils.colors.eq,
type: 'column',
charts/utilities.js
+1
View File
@@ -6,6 +6,7 @@ let language = 'en'
export const colors = {'eq': '#0000FF', 'max': '#FF0000', 'min': '#008000', 'peaks': '#DAA520'};
export const noise_ymin = 30;
export const noise_ymax = 120;
export function createGlobObtions() {
// Options, die für alle Plots identisch sind
locales/de/translation.json
+6 -2
View File
@@ -1,5 +1,5 @@
{
"NoiseMeasurement": "Lärm-Messung",
"NoiseMeasurement": "Lärm-Messung",
"Settings": "Einstellungen",
"Info": "Info",
"StartDate": "Start Datum",
@@ -43,5 +43,9 @@
"RemoveFromMap": "Sensoren nicht anzeigen, die nicht gesendet haben seit",
"weeks": "Wochen",
"ESYSCALL": "Fehler vom Serveraufruf: ",
"Error": "Fehler"
"Error": "Fehler",
"MeanValueLAeq": "Mittelwert LAeq",
"Peaks": "Spitzen",
"Day": "Tag",
"Night": "Nacht"
}
locales/en/translation.json
+5 -1
View File
@@ -43,5 +43,9 @@
"RemoveFromMap": "Don't show sensors that have not sent for",
"weeks": "weeks",
"ESYSCALL": "Error from Syscall: ",
"Error": "Error"
"Error": "Error",
"MeanValueLAeq": "Mean value LAeq",
"Peaks": "Peaks",
"Day": "Day",
"Night": "Night"
}
public/javascripts/chart_utilities.js
+12 -1
View File
@@ -162,8 +162,9 @@ export function calcDays(data, isyear) {
export async function addSensorID2chart(chart, sensor, width) {
let indoor = sensor.indoor || false
let addr = await addAddress(sensor.sid)
let sens = chart.renderer.label(
`Sensor: ${sensor.sid} ${indoor ? ' (indoor)' : ''}`,
`Sensor: <span class="bigger">${sensor.sid}</span> ${indoor ? ' (indoor)' : ''}&nbsp;&nbsp;&nbsp;&nbsp;${addr}`,
width / 2 - 100, 65,
'text', 0, 0, true)
.css({
@@ -213,3 +214,13 @@ export const fetchfromserver = async (url) => {
let x = await ret.json()
return x
}
export const addAddress = async (sid) => {
let url = `/api/getaddress?sensorid=${sid}`
let erg = await fetchfromserver(url)
if (!erg.err) {
return erg.address
} else {
return "no address"
}
}
public/javascripts/datetime.js
-25
View File
@@ -21,31 +21,6 @@ export const showDate = (sofort, params) => {
}
}
/* ToDo:
// Alle Minute die ktuelle Urzeit anzeigen und
// den Plot für Tages - und Wochendaten updaten.
// Alle 'refreshRate' plus 15sec die Grafiken neu zeichnen
// Die Funktion wird alle Sekunde aufgerufen !
//
function showUhrzeit(sofort) {
var d = moment() // akt. Zeit holen
if (sofort || (d.second() == 0)) { // Wenn Minute grade um
$('#h1uhr').html(d.format('HH:mm'));
$('#subtitle').html(d.format('YYYY-MM-DD')); // dann zeit anzeigen
}
if (((d.minute() % refreshRate) == 0) && (d.second() == 15)) { // alle ganzen refreshRate Minuten, 15sec danach
console.log(refreshRate, 'Minuten um, Grafik wird erneuert');
if ((aktsensorid != 'map') && (doUpdate == true)) { // Wenn nicht die Karte, dann
doPlot('oneday',startDay); // Tages- und
doPlot('oneweek',startDay); // Wochenplot erneuern
}
else {
fetchAktualData();
}
}
}
*/
export const formatJSDate = (d) => {
return DateTime.fromJSDate(d).toFormat('yyyy-LL-dd HH:mm:ss')
}
public/javascripts/global.js
+2 -2
View File
@@ -22,7 +22,7 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
weeks: 4,
datetime: '',
seldate: '',
refreshRate: 1,
refreshRate: 5,
sid: -1
}
@@ -81,7 +81,7 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
const elem = document.querySelector('#startday')
const datepicker = new Datepicker(elem, {
buttonClass: 'btn',
autoHide: true,
autohide: true,
format: 'yyyy-mm-dd',
language: lang,
maxDate: new Date(),
public/javascripts/map.js
+17 -56
View File
@@ -3,7 +3,7 @@
import * as dt from './datetime.js'
import * as utils from "./chart_utilities.js"
import { showChart, loadAll } from './showcharts.js'
import {fetchfromserver} from "./chart_utilities.js";
import {fetchfromserver, addAddress} from "./chart_utilities.js";
let map = null
let bounds
@@ -51,28 +51,6 @@ export async function showMap(params) {
let lastdate = await buildMarkers(params)
showLastDate(lastdate);
// map.on('popupopen', function () {
// let link = document.querySelector('.speciallink')
// link.addEventListener('click', async function (ev) {
// console.log(`Event clicked: ${clickedSensor}`)
// utils.showTabs()
// document.querySelector('#odth').style.display = 'none'
// document.querySelector('#nbday').style.display = 'inline'
// params.sid = clickedSensor
// let triggerEl = document.querySelector('#livetab')
// bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
// localStorage.setItem('activeTab', 'livetab')
// utils.setCurrentTab('livetab')
// let ok = await showChart(params, 'live', 'dlive')
// if (ok) {
// await loadAll(params)
// }
// params.center = [clickedcoords.lat, clickedcoords.lng]
// map.setView([clickedcoords.lat, clickedcoords.lng]);
// ev.preventDefault()
// })
// })
}
@@ -208,7 +186,6 @@ export async function buildMarkers(params) {
indoor: x.indoor
})
.on('click', e => onMarkerClick(e, true, sensors.popuptxt, params)) // define click- and
.bindPopup(popuptext); // and bind the popup text
markers.addLayer(marker);
}
map.addLayer(markers);
@@ -246,42 +223,26 @@ return popuptext
async function onMarkerClick(e, click, txts, params) {
let item = e.target.options;
let popup = e.target.getPopup();
let popuptext = await bauPopupText(item, txts)
popup.setContent(popuptext); // set text into popup
e.target.openPopup(); // show the popup
let link = document.querySelector('.speciallink')
link.addEventListener('click', async function (ev) {
console.log(`Event clicked: ${clickedSensor}`)
params.sid = item.name
let ok = await showChart(params, 'live', 'dlive')
if (ok) {
params.center = [clickedcoords.lat, clickedcoords.lng]
map.setView([clickedcoords.lat, clickedcoords.lng]);
ev.preventDefault()
await loadAll(params)
}
})
// if (click == true) { // if we clicked
// e.target.closePopup(); // show the popup
// }
e.target.bindPopup(popuptext).openPopup(); // show the popup
let link = document.querySelector('.speciallink')
link.addEventListener('click', async function (ev) {
console.log(`Event clicked: ${clickedSensor}`)
params.sid = item.name
let ok = await showChart(params, 'live', 'dlive')
if (ok) {
let triggerEl = document.querySelector(`#livetab`)
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
utils.setCurrentTab('livetab')
params.center = [e.latlng.lat, e.latlng.lng]
map.setView([e.latlng.lat, e.latlng.lng]);
ev.preventDefault()
await loadAll(params)
}
})
}
// add address to PopUp
async function addAddress(sid) {
let url = `/api/getaddress?sensorid=${sid}`
let erg = await fetchfromserver(url)
if (!erg.err) {
return erg.address
} else {
return "no address"
}
}
/*
async function getCoords(city) {
let url = NOMINATIM_URL + city;
public/javascripts/showcharts.js
-14
View File
@@ -63,22 +63,9 @@ export async function showChart(params, typ, container) {
}
let erg = await fetchfromserver(url)
if (!erg.err) {
let tabt = ""
for (let x of tabtable) {
if(x.type === typ) {
tabt = x.id
break
}
}
utils.showTabs()
document.querySelector('#odth').style.display = 'none'
document.querySelector('#nbday').style.display = 'inline'
let triggerEl = document.querySelector(`#${tabt}`)
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
localStorage.setItem('activeTab', tabt)
utils.setCurrentTab(tabt)
erg.options.xAxis.labels.formatter = xformat
erg.options.tooltip.formatter = form
let chart = Highcharts.chart(container, erg.options, function (chart) {
@@ -119,7 +106,6 @@ export const loadAll = async (params, start = 2) => {
start++
}
if (params.sid !== -1) {
utils.showTabs()
for (let i = start; i < tabtable.length; i++) {
let ok = await showChart(params, tabtable[i].type, tabtable[i].container)
if (!ok) {
public/stylesheets/style.css
+5
View File
@@ -260,4 +260,9 @@ footer #author #versn {
margin-bottom: 10px;
}
.bigger {
font-size: 120%;
font-weight: bold;
}
/*# sourceMappingURL=style.css.map */
public/stylesheets/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA9BoB;;AAgCpB;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,eA5Ec;EA6Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBAhGoB;;AAkGpB;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;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;IACE;;;AAEJ;EACE,kBAnNa;EAoNb;;;AAEF;EACE,OAvNa;EAwNb;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,kBA9BoB;;AAgCpB;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,eA5Ec;EA6Ed;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACF;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACF;EACE;EACA;;;AAEJ;EACE,kBAhGoB;;AAkGpB;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;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;IACE;;;AAEJ;EACE,kBAnNa;EAoNb;;;AAEF;EACE,OAvNa;EAwNb;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA","file":"style.css"}
public/stylesheets/style.sass
+4
View File
@@ -242,3 +242,7 @@ footer
.addr
font-weight: bold
margin-bottom: 10px
.bigger
font-size: 120%
font-weight: bold
views/index.pug
+1 -1
View File
@@ -81,7 +81,7 @@ block content
.column#nbday
label.thelabels(for='nbrofdays')
| #{t("NumberOfDays")}:<br />
span.klein (#{t("Only_for_live_chart")})
// span.klein (#{t("Only_for_live_chart")})
input.theInputs#nbrofdays(type = 'number' name = 'nbrofdays', min="1", max="10")
span.klein &nbsp;&nbsp;(max. 10)
.column#pklim
views/layout.pug
+1 -13
View File
@@ -10,7 +10,7 @@ html
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin="")
link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css")
// link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css")
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.1/dist/css/datepicker.min.css")
link(rel='stylesheet', href='/stylesheets/style.css')
@@ -21,18 +21,6 @@ html
csid: '#{csensor}'
}
let urlParams = {
// drawlines: '#{drawlines}' === 'true',
// starttime: '#{starttime}',
// endtime: '#{endtime}',
// nbrentries: '#{nbrentries}',
// device: '#{device}',
// coordinates: '#{coordinates}' === 'true',
// center: JSON.parse('#{center}'),
// zoom: '#{zoom}',
// refresh: '#{refresh}'
}
body
#wrapper
block content