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

Spinner eingebaut

Browse Source 
Fehlermeldungen pro TAB getrennt
This commit is contained in:
Reinhard X. Fürst
2024-08-28 15:28:37 +00:00
parent 41d252d564
commit 080a5dad1c
16 changed files with 124 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+1
View File
@@ -51,6 +51,7 @@ app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname,'node_modules')));
app.use('/api', apiRouter)
app.use('/srv', apiRouter)
package-lock.json
Generated
+8 -1
View File
@@ -21,7 +21,8 @@
"luxon": "^3.3.0",
"morgan": "~1.9.1",
"pug": "^3.0.2",
"sass": "^1.58.3"
"sass": "^1.58.3",
"spin.js": "^4.1.2"
},
"bin": {
"www": "bin/www.js"
@@ -1726,6 +1727,12 @@
"node": ">=0.10.0"
}
},
"node_modules/spin.js": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/spin.js/-/spin.js-4.1.2.tgz",
"integrity": "sha512-ua/yEpxEwyEUWs57tMQYdik/KJ12sQRyMXjSlK/Ai927aEUDVY3FXUi4ml4VvlLCTQNIjC6tHyjSLBrJzFAqMA==",
"license": "MIT"
},
"node_modules/sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
package.json
+2 -1
View File
@@ -24,6 +24,7 @@
"luxon": "^3.3.0",
"morgan": "~1.9.1",
"pug": "^3.0.2",
"sass": "^1.58.3"
"sass": "^1.58.3",
"spin.js": "^4.1.2"
}
}
public/javascripts/chart_utilities.js
+9
View File
@@ -238,3 +238,12 @@ export const cityCoords = async (city) => {
}
}
// table to distribute the different charts
export const ttIndex = Object.freeze({
map: 0,
live: 1,
havg: 2,
davg: 3,
daynight: 4,
lden: 5
})
public/javascripts/datetime.js
+1 -1
View File
@@ -1,6 +1,6 @@
// all date and time functions
import { DateTime } from './luxon.min.js'
import {loadAll, showChart, setNoUTC} from './showcharts.js'
import {loadAll} from './showcharts.js'
import {getCurrentTab} from "./chart_utilities.js";
public/javascripts/global.js
+28 -13
View File
@@ -3,10 +3,11 @@
import * as map from './map.js'
import * as dt from './datetime.js'
import {loadAll, showChart, setNoUTC} from './showcharts.js'
import {loadAll, showChart, setNoUTC, tabtable} from './showcharts.js'
import { DateTime } from './luxon.min.js'
import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
import * as utils from "./chart_utilities.js";
import {ttIndex, setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
import * as spin from './spinner.js'
(async () => {
@@ -22,10 +23,9 @@ import * as utils from "./chart_utilities.js";
refreshRate: 5,
sid: -1
}
// END global variables
// localStorage.clear()
let minDate = new Date(2023, 0, 1)
const setting = [
{
typ: 'maptab',
@@ -60,6 +60,11 @@ import * as utils from "./chart_utilities.js";
param: ['seldate']
}
]
// END global variables
// localStorage.clear()
// Check new map center
const checkNewCenter = (oldC, newC) => {
if((oldC[0] !== newC[0]) || (oldC[1] !== newC[1])) {
@@ -70,6 +75,7 @@ import * as utils from "./chart_utilities.js";
// Register events
// Button 'Save' pressed
document.querySelector('#btnSave').addEventListener('click', async () => {
let curtab = getCurrentTab()
for(let i = 0; i < setting.length; i++) {
if(setting[i].typ === getCurrentTab()) {
for(let j = 0; j < setting[i].show.length; j++) {
@@ -89,7 +95,7 @@ import * as utils from "./chart_utilities.js";
break
}
}
if (getCurrentTab() !== 'maptab') {
if (curtab !== 'maptab') {
let starttime
if ((params.seldate === 'today') || (params.seldate === 'heute') || (DateTime.now().toFormat('yyyy-MM-dd') === params.seldate)) {
starttime = ''
@@ -109,7 +115,9 @@ import * as utils from "./chart_utilities.js";
if(newlng !== oldlng) {
location.reload()
}
await loadAll(params,0)
spin.spinner.spin(spin.spindiv)
await loadAll(params,0, curtab)
spin.spinner.stop()
// ToDo:
// Load ALL incl. MAP und LIVE hier, d.h. an loadAll einen zusätzlichen Parameter übergeben
// if(params.sid !== undefined) {
@@ -138,8 +146,7 @@ import * as utils from "./chart_utilities.js";
{
dateFormat: 'yy-mm-dd',
maxDate: new Date(),
minDate: new Date(2023, 0, 1),
showButtonPanel: true,
minDate: minDate,
})
)
document.getElementById('startday').value = params.seldate
@@ -221,18 +228,25 @@ import * as utils from "./chart_utilities.js";
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
setCurrentTab(event.currentTarget.id)
if (getCurrentTab() === 'maptab') {
let newtab = event.currentTarget.id
setCurrentTab(newtab)
let tab = tabtable.find(tab => tab.id === newtab)
if (document.querySelector(`#${tab.id}err`).innerHTML !== '') { // if there is an error message, clear it
showError(document.querySelector(`#${tab.id}err`).innerHTML)
}
if (newtab === 'maptab') {
map.showMap(params)
}
})
})
const csid = parseInt(sysparams.csid)
if(csid !== -1) {
spin.spinner.spin(spin.spindiv)
// check, if sid is of right type (noise)
const props = await getSensorType(csid)
if (props.type !== 'noise') {
// wrong sensor type
spin.spinner.stop()
showError('Sensor ID ' + csid + ' is not of type noise')
return
}
@@ -242,7 +256,8 @@ import * as utils from "./chart_utilities.js";
let tt = new bootstrap.Tab(t)
tt.show()
setCurrentTab('livetab')
let ok = await showChart(params, 'live', 'dlive')
let ok = await showChart(params, ttIndex.live)
spin.spinner.stop()
if (ok) {
await loadAll(params)
}
public/javascripts/map.js
-2
View File
@@ -1,8 +1,6 @@
// all function related to the map
import * as dt from './datetime.js'
import * as utils from "./chart_utilities.js"
import { showChart, loadAll } from './showcharts.js'
import * as mapn from './map_noise.js'
import * as mapg from './map_geiger.js'
import * as mapu from './map_utilities.js'
public/javascripts/map_geiger.js
+1 -1
View File
@@ -221,7 +221,7 @@ async function onMarkerClick(e, click, txts, params, mpp) {
link.addEventListener('click', async function (ev) {
console.log(`Event clicked: ${mpp.clickedSensor}`)
params.sid = item.name
let ok = await showChart(params, 'live', 'dlive')
let ok = await showChart(params, utils.ttIndex.live)
if (ok) {
let triggerEl = document.querySelector(`#livetab`)
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
public/javascripts/map_noise.js
+6 -2
View File
@@ -1,8 +1,9 @@
import * as dt from './datetime.js'
import * as utils from "./chart_utilities.js"
import { showChart, loadAll } from './showcharts.js'
import { showChart, loadAll} from './showcharts.js'
import * as mapu from './map_utilities.js'
import * as spin from './spinner.js'
export const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
const dba = [100, 80, 60, 40, 20, 0, -999];
@@ -144,8 +145,11 @@ async function onMarkerClick(e, click, txts, params, mpp) {
link.addEventListener('click', async function (ev) {
console.log(`Event clicked: ${mpp.clickedSensor}`)
params.sid = item.name
history.pushState({}, '', `/${params.sid}`)
utils.setCurrentTab('livetab')
let ok = await showChart(params, 'live', 'dlive')
spin.spinner.spin(spin.spindiv)
let ok = await showChart(params, ttIndex.live)
spin.spinner.stop()
if (ok) {
let triggerEl = document.querySelector(`#livetab`)
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
public/javascripts/showcharts.js
+20 -12
View File
@@ -2,10 +2,10 @@ import * as utils from "./chart_utilities.js";
import { DateTime } from './luxon.min.js'
import * as map from "./map.js";
import {fetchfromserver, showError} from "./chart_utilities.js";
import * as spin from './spinner.js'
// table to distribute the different charts
export const tabtable = [
{id: 'kartentab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
{id: 'maptab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
{id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 2, dformat: "dd.LL - HH:mm:ss"},
{id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 1, dformat: "dd.LL - HH'h'"},
{id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 1, dformat: "dd.LL"},
@@ -13,7 +13,11 @@ export const tabtable = [
{id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 1, dformat: "dd.LL"},
]
export async function showChart(params, typ, container) {
export async function showChart(params, index) {
let container = tabtable[index].container
let typ = tabtable[index].type
let id = tabtable[index].id
function form() {
for (let item of tabtable) {
if (item.type === typ) {
@@ -60,6 +64,10 @@ export async function showChart(params, typ, container) {
url += `&peak=${params.peak}`
}
console.log(`fetch ${typ} from server ${url}`)
let errdiv = document.querySelector(`#${id}err`)
errdiv.innerHTML = ''
let erg = await fetchfromserver(url)
if(sysparams.category === 'noise') {
utils.showTabs()
@@ -93,14 +101,12 @@ export async function showChart(params, typ, container) {
})
return {error: false}
} else {
if(typ === 'live') {
showError(erg.err)
}
return {error: erg.err}
errdiv.innerHTML = erg.err
return {error: true}
}
}
export const loadAll = async (params, start = 2) => {
export const loadAll = async (params, start = 2, curtab = '') => {
console.log('now load all in Background')
let messzeit = DateTime.now()
if (start == 0) {
@@ -109,10 +115,12 @@ export const loadAll = async (params, start = 2) => {
}
if (params.sid !== -1) {
for (let i = start; i < tabtable.length; i++) {
let err = await showChart(params, tabtable[i].type, tabtable[i].container)
if (err.error) {
if(tabtable[i].type !== 'live') {
break;
let err = await showChart(params, i)
if(tabtable[i].id === curtab) {
spin.spinner.stop()
let errtxt = document.querySelector(`#${tabtable[i].id}err`).innerHTML
if (errtxt !== '') {
showError(errtxt)
}
}
}
public/javascripts/spinner.js
+27
View File
@@ -0,0 +1,27 @@
// Aufbau eine Spinner, der während des Ladens von AJAX-Requests angezeigt wird
import { Spinner } from '/spin.js/spin.js'
const spinneropts = {
lines: 13, // The number of lines to draw
length: 38, // The length of each line
width: 17, // The line thickness
radius: 45, // The radius of the inner circle
scale: 1, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
speed: 1, // Rounds per second
rotate: 0, // The rotation offset
animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#404040', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: '0 0 1px transparent', // Box-shadow for the lines
zIndex: 2000000000, // The z-index (defaults to 2e9)
className: 'spinner', // The CSS class to assign to the spinner
position: 'absolute', // Element positioning
};
export const spinner = new Spinner(spinneropts)
export const spindiv = document.getElementById('spinner')
public/stylesheets/style.css
+5
View File
@@ -5,6 +5,7 @@ body {
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
html {
@@ -271,4 +272,8 @@ footer #author #versn {
.highcharts-container {
margin-top: -10px;
}
.errdiv {
display: none;
}/*# sourceMappingURL=style.css.map */
public/stylesheets/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["style.sass","style.css"],"names":[],"mappings":"AAYA;EACE,uDAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;ACXF;;ADcA;EACE,YAAA;ACXF;;ADaA;EACE,YAAA;EACA,WAAA;EACA,kBAAA;EAEA,eAAA;EACA,YAAA;EACA,kBAAA;ACXF;;ADaA;EACE,cAAA;ACVF;;ADYA;EACE,2BA9BoB;ACqBtB;ADWE;EACE,uBAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;ACTJ;ADWE;EACE,eAAA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;ACTJ;ADWE;EACE,YAAA;EACA,gBAAA;ACTJ;ADUI;EACE,kBAAA;ACRN;ADSI;EACE,kBAAA;ACPN;ADQI;EACE,YAAA;EACA,eAAA;ACNN;;ADQA;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,WAAA;ACLF;ADOE;EACE,WAAA;EACA,kBAAA;ACLJ;;ADOA;EACE,kBAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,mBA7Ec;EA8Ed,0BAAA;EACA,gBAAA;EACA,UAAA;ACJF;ADME;EACE,YAAA;EACA,kBAAA;EACA,uBAAA;ACJJ;ADKE;EACE,gBAAA;EACA,kBAAA;ACHJ;;ADMA;EACE,WAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;ACHF;ADKE;EACE,UAAA;EACA,WAAA;ACHJ;ADIE;EACE,gBAAA;EACA,gBAAA;ACFJ;;ADIA;EACE,2BAlGoB;ACiGtB;ADGE;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,iBAAA;EACA,YAAA;ACDJ;ADGI;EACE,WAAA;ACDN;ADGI;EACE,YAAA;ACDN;;ADIA;EACE,gBAAA;EACA,uCAAA;EACA,oCAAA;EACA,uCAAA;EACA,kBAAA;ACDF;;ADGA;EACE,eAAA;EACA,WAAA;ACAF;;ADEA;EACE,iBAAA;EACA,WAAA;EACA,eAAA;ACCF;;ADCA;EACE,WAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;EACA,UAAA;ACEF;;ADAA;EACE,iBAAA;ACGF;;ADDA;EACE,kBAAA;EACA,eAAA;ACIF;;ADFA;EACE,gBAAA;ACKF;;ADHA;EACE,WAAA;EACA,YAAA;EACA,YAAA;ACMF;;ADJA;EACE,UAAA;ACOF;;ADLA;EACE,qBAAA;ACQF;;ADNA;EACE,SAAA;ACSF;;ADNA;EACE,gBAAA;ACSF;;ADPA;EACE,UAAA;EACA,WAAA;ACUF;;ADPA;EAEE,WAAA;ACSF;;ADNA;EACE,WAAA;EACA,cAAA;ACSF;;ADPA;EACE,WAAA;EACA,qBAAA;EACA,mBAAA;ACUF;;ADRA;EACE,UAAA;ACWF;;ADTA;EACE,UAAA;ACYF;;ADVA;EACE,UAAA;EACA,sBAAA;ACaF;;ADXA;EACE,cAAA;ACcF;;ADZA;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EACA,uBAAA;EACA,0CAAA;ACeF;;ADbA;EACE,kBAAA;ACgBF;;ADdA;EACE,YAAA;ACiBF;;ADfA;EACE;IACE,aAAA;ECkBF;AACF;ADjBA;EACE,yBArNa;EAsNb,WAAA;ACmBF;;ADjBA;EACE,cAzNa;EA0Nb,yBAAA;ACoBF;;ADjBA;EACE,aAAA;ACoBF;;ADfA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACkBF;;ADhBA;EACE,iBAAA;EACA,mBAAA;ACmBF;;ADjBA;EACE,eAAA;EACA,iBAAA;ACoBF;;ADjBA;EACE,iBAAA;ACoBF","file":"style.css"}
{"version":3,"sources":["style.sass","style.css"],"names":[],"mappings":"AAYA;EACE,uDAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACXF;;ADaA;EACE,YAAA;ACVF;;ADYA;EACE,YAAA;EACA,WAAA;EACA,kBAAA;EAEA,eAAA;EACA,YAAA;EACA,kBAAA;ACVF;;ADYA;EACE,cAAA;ACTF;;ADWA;EACE,2BA9BoB;ACsBtB;ADUE;EACE,uBAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA;ACRJ;ADUE;EACE,eAAA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;ACRJ;ADUE;EACE,YAAA;EACA,gBAAA;ACRJ;ADSI;EACE,kBAAA;ACPN;ADQI;EACE,kBAAA;ACNN;ADOI;EACE,YAAA;EACA,eAAA;ACLN;;ADOA;EACE,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,WAAA;ACJF;ADME;EACE,WAAA;EACA,kBAAA;ACJJ;;ADMA;EACE,kBAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,mBA7Ec;EA8Ed,0BAAA;EACA,gBAAA;EACA,UAAA;ACHF;ADKE;EACE,YAAA;EACA,kBAAA;EACA,uBAAA;ACHJ;ADIE;EACE,gBAAA;EACA,kBAAA;ACFJ;;ADKA;EACE,WAAA;EACA,cAAA;EACA,sBAAA;EACA,cAAA;ACFF;ADIE;EACE,UAAA;EACA,WAAA;ACFJ;ADGE;EACE,gBAAA;EACA,gBAAA;ACDJ;;ADGA;EACE,2BAlGoB;ACkGtB;ADEE;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,iBAAA;EACA,YAAA;ACAJ;ADEI;EACE,WAAA;ACAN;ADEI;EACE,YAAA;ACAN;;ADGA;EACE,gBAAA;EACA,uCAAA;EACA,oCAAA;EACA,uCAAA;EACA,kBAAA;ACAF;;ADEA;EACE,eAAA;EACA,WAAA;ACCF;;ADCA;EACE,iBAAA;EACA,WAAA;EACA,eAAA;ACEF;;ADAA;EACE,WAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;EACA,UAAA;ACGF;;ADDA;EACE,iBAAA;ACIF;;ADFA;EACE,kBAAA;EACA,eAAA;ACKF;;ADHA;EACE,gBAAA;ACMF;;ADJA;EACE,WAAA;EACA,YAAA;EACA,YAAA;ACOF;;ADLA;EACE,UAAA;ACQF;;ADNA;EACE,qBAAA;ACSF;;ADPA;EACE,SAAA;ACUF;;ADPA;EACE,gBAAA;ACUF;;ADRA;EACE,UAAA;EACA,WAAA;ACWF;;ADRA;EAEE,WAAA;ACUF;;ADPA;EACE,WAAA;EACA,cAAA;ACUF;;ADRA;EACE,WAAA;EACA,qBAAA;EACA,mBAAA;ACWF;;ADTA;EACE,UAAA;ACYF;;ADVA;EACE,UAAA;ACaF;;ADXA;EACE,UAAA;EACA,sBAAA;ACcF;;ADZA;EACE,cAAA;ACeF;;ADbA;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EACA,uBAAA;EACA,0CAAA;ACgBF;;ADdA;EACE,kBAAA;ACiBF;;ADfA;EACE,YAAA;ACkBF;;ADhBA;EACE;IACE,aAAA;ECmBF;AACF;ADlBA;EACE,yBArNa;EAsNb,WAAA;ACoBF;;ADlBA;EACE,cAzNa;EA0Nb,yBAAA;ACqBF;;ADlBA;EACE,aAAA;ACqBF;;ADhBA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACmBF;;ADjBA;EACE,iBAAA;EACA,mBAAA;ACoBF;;ADlBA;EACE,eAAA;EACA,iBAAA;ACqBF;;ADnBA;EACE,iBAAA;ACsBF;;ADpBA;EACE,aAAA;ACuBF","file":"style.css"}
public/stylesheets/style.sass
+5 -1
View File
@@ -17,7 +17,7 @@ body
margin-left: auto
margin-right: auto
height: 100%
// background-color: $background
background-color: rgba(0,0,0,0.9)
html
height: 100%
@@ -251,3 +251,7 @@ footer
.highcharts-container
margin-top: -10px
.errdiv
display: none
views/index_noise.pug
+9 -2
View File
@@ -10,6 +10,7 @@ block content
#h1datum
#fenster
#spinner
#navi
ul.nav.nav-tabs#tablist
li.nav-item(role='presentation')
@@ -27,19 +28,25 @@ block content
.tab-content#thetabs
.tab-pane.fade.show.active#t_map(role="tabpanel" aria-labelledby="map-tab")
#map
#maptaberr.errdiv
#mapdateactsens
#actsensors
#mapdate
.tab-pane.fade#t_live(role="tabpanel" aria-labelledby="live-tab")
#dlive
#dlive
#livetaberr.errdiv
.tab-pane.fade#t_houravg(role="tabpanel" aria-labelledby="map-tab")
#dhour
#houravgtaberr.errdiv
.tab-pane.fade#t_dayavg(role="tabpanel" aria-labelledby="map-tab")
#dday
#dayavgtaberr.errdiv
.tab-pane.fade#t_daynight(role="tabpanel" aria-labelledby="map-tab")
#ddaynight DayNightTAB
#ddaynight
#daynighttaberr.errdiv
.tab-pane.fade#t_lden(role="tabpanel" aria-labelledby="map-tab")
#dlden
#ldentaberr.errdiv
// Error-Dialog
views/layout.pug
+1
View File
@@ -11,6 +11,7 @@ html
crossorigin="")
link(rel='stylesheet', href='/stylesheets/MarkerCluster.css')
link(rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css")
link(rel='stylesheet', href='/spin.js/spin.css')
script.