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
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')