First Commit
This commit is contained in:
512
html/sternwarte/intern/sonnenf/js/sonnenf.js
Normal file
512
html/sternwarte/intern/sonnenf/js/sonnenf.js
Normal file
@@ -0,0 +1,512 @@
|
||||
// sofianmeld.js rxf 2020-09-21
|
||||
// Anmeldungen anzeigen und abhaken lassen
|
||||
//
|
||||
|
||||
function getAuthorisation(was) {
|
||||
let x = was.split(',')
|
||||
return { storno: x[0], name: x[1] , double: x[2]}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(() => {
|
||||
|
||||
// Globale Konstanten und Variable
|
||||
const ajaxURL="php/sonnenfDB.php";
|
||||
const ANZAHL_DATES = 12;
|
||||
const TEXTE = {
|
||||
absagetext: "Absage an alle angemeldeten Besucher senden?",
|
||||
schonabgesagt: "Absage schon gesendet. Nochmal senden?",
|
||||
eingetragen: 'Besucher erfolgreich eingetragen.',
|
||||
subject: 'Absage der heutigen Sonnenführung',
|
||||
bodytext: `Sehr geehrte Dame, sehr geehrter Herr,
|
||||
|
||||
Sie haben sich über unsere Webseite www.sternwarte-welzheim.de zur heutigen Sonnenführung angemeldet.
|
||||
Aufgrund der aktuellen Wetterlage können wir heute keine Sonnenführung anbieten.
|
||||
Bitte melden Sie sich für einen anderen Termin neu an.
|
||||
|
||||
Mit freundlichen Grüßen
|
||||
Beobachtergruppe Sternwarte Welzheim`,
|
||||
}
|
||||
|
||||
const liste = {
|
||||
emails: [],
|
||||
ids: []
|
||||
}
|
||||
|
||||
let abgesagt = false;
|
||||
let actualdate;
|
||||
|
||||
// Von der Datenbank Werte abholen
|
||||
// Param:
|
||||
// body: Object mit cmd und param
|
||||
// Return:
|
||||
// angeforderte Daten als JSON
|
||||
const fetchFromDbase = async (body) => {
|
||||
const response = await fetch(ajaxURL,{
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/js'},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
|
||||
// In die Datenbank Werte eintragen
|
||||
// Param:
|
||||
// body: Object mit cmd und param
|
||||
// Return:
|
||||
// angeforderte Daten als JSON
|
||||
const putToDbase = async (body) => {
|
||||
const response = await fetch(ajaxURL,{
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/js'},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
|
||||
// Aktuelle Anmeldungen anzeigen:
|
||||
// Für den ausgewählten Führungstag (date) die Anmeldungen aus der
|
||||
// Datenbank holen und in die Tabelle einbauen
|
||||
// Außerdem die globale Variable 'emails' mit den emails der Teilnehmer füllen
|
||||
const showAktAnmeldungen = async (date) => {
|
||||
actualdate = date;
|
||||
let auth = params.storno == 'true'
|
||||
let column = auth ? "col-2" : "col-6"
|
||||
liste.emails = [];
|
||||
liste.ids = [];
|
||||
abgesagt = false;
|
||||
console.log('date: ', date);
|
||||
let anmeldungen = await fetchFromDbase({cmd:'GET_ANMELD',id:date});
|
||||
let besucher = 0;
|
||||
$('tbody').empty();
|
||||
for (let e of anmeldungen) {
|
||||
besucher += parseInt(e.anzahl);
|
||||
liste.emails.push(e.email);
|
||||
liste.ids.push(e.id);
|
||||
if (e.abgesagt == '1') {
|
||||
abgesagt = true;
|
||||
$('#absagen').html('Absage<br />wurde gesendet');
|
||||
}
|
||||
// const selected = e.teilgenommen == "1" ? "checked" : "";
|
||||
let str = `<tr class="d-flex">
|
||||
<td class="tdname col-6">${e.name} ${e.vorname}</td>
|
||||
<td class=${column}>${e.anzahl}</td>`
|
||||
// <td class=${column}><input type="checkbox" value="${e.id}" ${selected}></td>`
|
||||
if (auth) {
|
||||
str += `<td class="tdstorno col-2"><input type="checkbox" value="${e.id}"></td>`
|
||||
}
|
||||
str += '</tr>'
|
||||
$('#tabAnmeld > tbody:last-child').append(str);
|
||||
}
|
||||
if(besucher != 0) {
|
||||
let str = `<tr id="summe" class="d-flex">
|
||||
<td class="col-6">Summe der Anmeldungen</td>
|
||||
<td class="col-6">${besucher}</td>`
|
||||
$('#tabAnmeld > tbody:last-child').append(str);
|
||||
}
|
||||
|
||||
// Klick auf den Namen: Detail-Dialog öffnen
|
||||
$('.tdname').click( function() {
|
||||
const row = $(this).closest("tr") // Finds the closest row <tr>
|
||||
const index = (row[0].rowIndex)-1
|
||||
$('#detail').data('id',anmeldungen[index].id).dialog('open');
|
||||
})
|
||||
|
||||
// Klick auf 'storno' : den Eintrag stornieren
|
||||
$('.tdstorno').click( function() {
|
||||
const row = $(this).closest("tr") // Finds the closest row <tr>
|
||||
const index = (row[0].rowIndex)-1
|
||||
austragen(anmeldungen[index]) // Teilnehmer austragen
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// Aus dem rohen Führungsdatum von der Datenbank ein besser
|
||||
// leserliches Format erzeugen
|
||||
// Params:
|
||||
// w -> Wochentag
|
||||
// d -> Datum in DBase-Format
|
||||
// t -> Uhrzeit
|
||||
// Return
|
||||
// neu formatierter Datums-String
|
||||
const bauDate = (w,d,t) => {
|
||||
let dd = d.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3.$2.$1',);
|
||||
let dt = w.substr(0,2) + ', ' + dd + ' ' + t.substr(0,2) + ':00';
|
||||
return dt;
|
||||
}
|
||||
|
||||
|
||||
// Führungsdaten in einer Select-Auswahl anzeigen
|
||||
// Zusätzlich den Eventhandler für die Auswahl registrieren.
|
||||
// Params:
|
||||
// dates -> Array mit den geholten Führungsdaten
|
||||
const buildFuehrungsDates = async (dates, last) => {
|
||||
let n = 0;
|
||||
let i = 0;
|
||||
let summ = 0;
|
||||
let select =
|
||||
// <label for='ftermin' class='col-8 col-form-label'>
|
||||
// <strong>Führung am</strong></label>
|
||||
`<select name='ftermin' id='ftermin' >`;
|
||||
let selectedNext = false;
|
||||
const today = moment().startOf('day');
|
||||
for (let d of dates) {
|
||||
let isselected = "";
|
||||
const fday = moment(d.datum);
|
||||
if (!selectedNext) {
|
||||
if (fday.isSameOrAfter(today)) {
|
||||
selectedNext = true;
|
||||
isselected = "selected";
|
||||
n = i;
|
||||
}
|
||||
}
|
||||
const count = await fetchFromDbase({cmd: 'GET_COUNTS', fdate: d.datum})
|
||||
const isFuehrung = ((count > 0) && (count != null)) ? ' ' : 'disabled';
|
||||
select += `
|
||||
<option value=${d.datum} ${isselected} ${isFuehrung}> ${bauDate('So', d.datum, '11')} ${count} Besucher</option>`;
|
||||
i++;
|
||||
summ += (count != null) ? parseInt(count) : 0;
|
||||
if (d.datum >= last) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
select += `</select>
|
||||
<div id = "gesamtsumme">Gesamtzahl der Anmeldungen (ab heute): ${summ}</div>`;
|
||||
$('#auswahl').append(select);
|
||||
|
||||
// Eventhandler für Auswahl eines Datums über die SelectBox:
|
||||
// Anzeigen der Anmeldungen dazu
|
||||
$('#ftermin').change( async () => {
|
||||
let x = $('#ftermin').find(':selected');
|
||||
let date = x[0].value;
|
||||
console.log('date: ', date);
|
||||
let index = $('#ftermin').prop('selectedIndex');
|
||||
if (index == 0) {
|
||||
$('#absagen').css('visibility', 'visible');
|
||||
$('#uebernehmen').css('visibility', 'visible');
|
||||
} else {
|
||||
$('#absagen').css('visibility', 'hidden');
|
||||
$('#uebernehmen').css('visibility', 'hidden');
|
||||
}
|
||||
await showAktAnmeldungen(date);
|
||||
});
|
||||
return n;
|
||||
}
|
||||
|
||||
|
||||
// Text für die Tabelle abh. von der Schirmbreite umstellen
|
||||
// Params
|
||||
// x -> true/false für > oder < 700px
|
||||
function switchText(x) {
|
||||
let auth = params.storno == 'true'
|
||||
console.log("auth: ",auth)
|
||||
let column = auth ? "col-2" : "col-6"
|
||||
let thead = `
|
||||
<thead>
|
||||
<tr class="d-flex">
|
||||
<th class="col-6">Name</th>
|
||||
<th class=${column}>${x ? "Anz" : "Person"}</th>`
|
||||
// <th class=${column}>${x ? "tlg" : "teilgenommen"}</th>`
|
||||
if(auth) {
|
||||
thead += `<th class="col-2">${x ? "sto" : "stornieren"}</thclass>`
|
||||
}
|
||||
thead += '</tr></thead><tbody></tbody>'
|
||||
$('#tabAnmeld').empty()
|
||||
$('#tabAnmeld').append(thead)
|
||||
if (x) {
|
||||
$('#versn').html("V " + VERSION + ' ' + VDATE);
|
||||
} else {
|
||||
$('#versn').html("Version: " + VERSION + ' vom ' + VDATE);
|
||||
}
|
||||
}
|
||||
|
||||
const getEintragetext = () => {
|
||||
let sel1 = $('input[type=checkbox]:checked').map(function (_, el) {
|
||||
return $(el).val();
|
||||
}).get();
|
||||
return `${sel1.length} ${TEXTE.eingetragen}`;
|
||||
}
|
||||
|
||||
// Für die übergebenen IDs das #abgesagt'-Flag in der DB setzen
|
||||
const storeAbsage = async (ids) => {
|
||||
let update = {cmd:'UPDATE', field: 'abgesagt', ids : ids, values: [1]};
|
||||
let erg1 = await putToDbase(update);
|
||||
abgesagt = true;
|
||||
}
|
||||
|
||||
// die Daten des angewählten Teilnehmers anzeigen
|
||||
const getDetailText = async (id) => {
|
||||
// const nbr = parseInt(id.substr(-3));
|
||||
const nbr = parseInt(id);
|
||||
const holit = await fetchFromDbase({cmd:'GET_TEILN_ID',id:nbr});
|
||||
const entry = holit[0];
|
||||
const tafel = `
|
||||
<div class="det">${entry.name} ${entry.vorname}<br /></div>
|
||||
<div class="det">${entry.email}<br /></div>
|
||||
<div class="det">${entry.plz} ${entry.stadt}<br /></div>
|
||||
<div class="det">${entry.strasse}<br /></div>
|
||||
<div class="det">${entry.telefon}<br /></div>
|
||||
<div class="det">${entry.remarks}<br /></div>`
|
||||
return tafel;
|
||||
}
|
||||
|
||||
// Teilnehmer aus 'anmeldungen' austragen und den count in 'fdatum1' anpassen
|
||||
const austragen = async (teilnehmer) => {
|
||||
let update = {cmd: 'DELETEONE', id: parseInt(teilnehmer.id)}
|
||||
const erg1 = await putToDbase(update)
|
||||
// update = {cmd: 'UPDATECOUNT',date: parseInt(teilnehmer.fdatum), anzahl: parseInt(teilnehmer.anzahl)}
|
||||
// const erg2 = await putToDbase(update)
|
||||
console.log("Storno Ergenisse: ",erg1)
|
||||
showAktAnmeldungen(actualdate)
|
||||
}
|
||||
|
||||
|
||||
// ******************
|
||||
// Event-Handler
|
||||
// ******************
|
||||
|
||||
// Übernahme der angeklickten 'teilgenommen' Boxen
|
||||
//
|
||||
// Jeder Teilnehmer, der hier abgehakt ist, wird in der Datenbank
|
||||
// als 'teilgenommen' eingetragen, jeder, der NICHT abgehakt ist, wird
|
||||
// als 'nicht teilgenommen' markiert.
|
||||
$('#uebernehmen').click(async function() {
|
||||
let sel1 = $('input[type=checkbox]:checked').map(function(_, el) {
|
||||
return $(el).val();
|
||||
}).get();
|
||||
let sel0 = $('input[type=checkbox]:not(:checked)').map(function(_, el) {
|
||||
return $(el).val();
|
||||
}).get();
|
||||
let update = {cmd:'UPDATE', field: 'teilgenommen', ids : sel1, values: [1]};
|
||||
let erg1 = await putToDbase(update);
|
||||
update = {cmd:'UPDATE', field: 'teilgenommen', ids : sel0, values: [0]};
|
||||
let erg0 = await putToDbase(update);
|
||||
if (erg0 && erg1) {
|
||||
$('#eintragedialog').dialog('open');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Dialogbox zu Absage aufrufen
|
||||
$('#absagen').click(()=> {
|
||||
$('#absagedialog').dialog('open');
|
||||
})
|
||||
|
||||
// ******************
|
||||
// Dialogboxen
|
||||
// ******************
|
||||
|
||||
// Dialogbox zur Absage
|
||||
$("#absagedialog").dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
position: 'center',
|
||||
title: 'Absage-Mail',
|
||||
open: function() {
|
||||
if (abgesagt) {
|
||||
$('#absagetext').text(TEXTE.schonabgesagt)
|
||||
} else {
|
||||
$('#absagetext').text(TEXTE.absagetext)
|
||||
}
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
text: "Senden",
|
||||
click : async function() {
|
||||
await storeAbsage(liste.ids);
|
||||
await fetch('https://laufschrift.rexfue.de/switch/switch_on')
|
||||
let erg = await fetchFromDbase({
|
||||
cmd: 'SENDMYMAIL',
|
||||
to: ['rexfue@gmail.com'],
|
||||
betreff: TEXTE.subject,
|
||||
body: TEXTE.bodytext,
|
||||
bcc: liste.emails
|
||||
});
|
||||
console.log("Mail gesendet");
|
||||
$('#absagen').html('Absage<br />wurde gesendet');
|
||||
$(this).dialog("close");
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Abbrechen",
|
||||
click : function() {
|
||||
$(this).dialog("close");
|
||||
},
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
// Dialogbox für das 'eingetragen'
|
||||
$("#eintragedialog").dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
position: 'center',
|
||||
title: 'Teilnehmer',
|
||||
open: () => {
|
||||
$('#eintragetext').text(getEintragetext());
|
||||
}
|
||||
});
|
||||
|
||||
// Dialogbox mit den genauen Daten des Teilnehmers
|
||||
$("#detail").dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
position: 'top',
|
||||
title: 'Teilnehmer-Details',
|
||||
open: () => {
|
||||
const id = $('#detail').data('id');
|
||||
getDetailText(id)
|
||||
.then((txt) => {
|
||||
$('#detailtext').html(txt);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const filterDoubles = (data) => {
|
||||
let erg = {}
|
||||
return erg
|
||||
}
|
||||
|
||||
async function getDoubles(date) {
|
||||
const update = { cmd: 'DOUBLE', date: date}
|
||||
let erg = await putToDbase(update)
|
||||
for (let i = erg.length-1; i>=0; i--) {
|
||||
if(erg[i].name == 'Donner') {
|
||||
console.log(erg)
|
||||
}
|
||||
if(
|
||||
((erg[i].name == '-') && (erg[i].vorname == '-'))
|
||||
|| (erg[i].abgesagt == "1")
|
||||
|| (erg[i].fdatum <= parseInt(moment().format('YYYYMMDD')))
|
||||
) {
|
||||
erg.splice(i, 1)
|
||||
}
|
||||
}
|
||||
erg.sort(function (a,b) {
|
||||
let na = a.name.toUpperCase()
|
||||
let nb = b.name.toUpperCase()
|
||||
if (na < nb) {
|
||||
return -1
|
||||
}
|
||||
if(na > nb) {
|
||||
return 1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
console.log(erg)
|
||||
// alle die, die nur noch 1x drin sind, rausschmeißen
|
||||
let i
|
||||
for(i = 0; i < erg.length-1; i++) {
|
||||
console.log(`${i} Name[${i}]: ${erg[i].name} Name[${i+1}]: ${erg[i+1].name}`)
|
||||
if(erg[i].name != erg[i+1].name) {
|
||||
erg[i].single = true
|
||||
} else {
|
||||
i++
|
||||
}
|
||||
}
|
||||
erg[i].single = true
|
||||
return erg
|
||||
}
|
||||
|
||||
const showDoubles = async (date) => {
|
||||
let erg = await getDoubles(date)
|
||||
console.log(erg)
|
||||
$('#tnames').append(
|
||||
'<thead><tr>' +
|
||||
' <th class="col-3">Name</th>' +
|
||||
' <th class="col-3">Email</th>' +
|
||||
' <th class="col-1">Anzahl</th>' +
|
||||
' <th class="col-2">Datum</th>' +
|
||||
' <th class="col-2">Anmeldung</th>' +
|
||||
' <th class="col-1">Finden</th>' +
|
||||
'</tr></thead><tbody>')
|
||||
for(let x of erg) {
|
||||
if((x.single != undefined) && (x.single == true)) {
|
||||
continue
|
||||
}
|
||||
$('#tnames').append(`<tr>
|
||||
<td class="tdname col-3">${x.name} ${x.vorname}</td>
|
||||
<td class="tdname col-3">${x.email}</td>
|
||||
<td class="col-1">${x.anzahl}</td>
|
||||
<td class="col-2">${moment(x.fdatum).format('YYYY-MM-DD')}</td>
|
||||
<td class="col-2" style="color:lightgray;">${moment(x.angemeldet).format('YYYY-MM-DD')}</td>
|
||||
<td class="tdfind col-1"><input type="checkbox" value="${x.id}"></td>\`
|
||||
|
||||
</tr>
|
||||
`)
|
||||
}
|
||||
$('#tnames').append('</tbody')
|
||||
$('#names').show();
|
||||
}
|
||||
|
||||
async function findName(name) {
|
||||
const update = { cmd: 'GET_TEILN_NAME', name: name}
|
||||
let erg = await putToDbase(update)
|
||||
console.log('Name: ',erg);
|
||||
$('#tnames').append(
|
||||
'<thead><tr>' +
|
||||
' <th class="col-6">Name</th>' +
|
||||
' <th class="col-2">Anzahl</th>' +
|
||||
' <th class="col-2">Datum</th>' +
|
||||
' <th class="col-2">Finden</th>' +
|
||||
'</tr></thead><tbody>')
|
||||
for(let x of erg) {
|
||||
$('#tnames').append(`<tr>
|
||||
<td class="tdname col-6">${x.name} ${x.vorname}</td>
|
||||
<td class="col-2">${x.anzahl}</td>
|
||||
<td class="col-2">${moment(x.fdatum).format('YYYY-MM-DD')}</td>
|
||||
<td class="tdfind col-2"><button type="button" class="findit btn btn-primary" id="b1" value="${x.id}"></td>\`
|
||||
</tr>
|
||||
`)
|
||||
}
|
||||
$('#tnames').append('</tbody')
|
||||
$('#names').show();
|
||||
|
||||
// Event für 'find'
|
||||
$('.findit').click(() => {
|
||||
let id = $('.findit').val()
|
||||
$('#detail').data('id',id).dialog('open');
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// *****************************************
|
||||
// main
|
||||
// *****************************************
|
||||
|
||||
// Hier gehts los:
|
||||
// Von der Datenbank die nächsten 'n' Führungsdaten holen
|
||||
// und anzeigen
|
||||
// Params:
|
||||
// n -> Anzahl der zu holnden Daten
|
||||
async function main(n){
|
||||
// Media Query einbauen:
|
||||
let x = window.matchMedia("(max-width: 800px)");
|
||||
switchText(x.matches);
|
||||
x.addEventListener("change", async (e) => {
|
||||
switchText(e.matches);
|
||||
await showAktAnmeldungen(actualdate);
|
||||
});
|
||||
let curtime = moment().subtract(2,'months').format("YYYYMMDD");
|
||||
// let curtime = moment().format("YYYYMMDD");
|
||||
console.log(curtime)
|
||||
const y = await fetchFromDbase({cmd:'GET_DATES', anzahl:n, date: curtime});
|
||||
const last = await fetchFromDbase({cmd:'GET_LASTANMELDUNG', date: curtime});
|
||||
const sel = await buildFuehrungsDates(y, last);
|
||||
await showAktAnmeldungen(y[sel].datum);
|
||||
console.log(y);
|
||||
if(params.name != 'Null') {
|
||||
await findName(params.name)
|
||||
}
|
||||
if(params.double == 'true') {
|
||||
await showDoubles(curtime);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
main(ANZAHL_DATES).catch(console.error);
|
||||
|
||||
});
|
||||
12
html/sternwarte/intern/sonnenf/js/version.js
Normal file
12
html/sternwarte/intern/sonnenf/js/version.js
Normal file
@@ -0,0 +1,12 @@
|
||||
// VersiosNummern und -Geschichte
|
||||
|
||||
const VERSION="1.1";
|
||||
const VDATE="2024-02-11";
|
||||
|
||||
/* History
|
||||
|
||||
Rev. Datum Entwickler
|
||||
|
||||
1.0 2020-10-09 rxf
|
||||
- Erste Version. Baut auf auf 'inrern/anmeld'
|
||||
*/
|
||||
Reference in New Issue
Block a user