First Commit

html/sternwarte/intern/sonnenf/js/sonnenf.js

@@ -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')} &nbsp;&nbsp; ${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);
+
+});