• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Externe JSON abfragen und in Tabelle darstellen

Hallo,

wollte noch was Fragen ich habe ein Fomular zum erstellen von Einsätzen ist es möglich die daten von den Einsätzen in das formular zu laden.

Das formular ist wie folgt aufgebaut:
Code: 
<form action="einsatzanlegen.php" method="post">
 
<div class="form-group row">
    <label for="Datum" class="col-sm-2 col-form-label">Datum</label>
    <div class="col-sm-10">
      <input type="date" class="form-control" id="Datum" name="Datum" placeholder="Datum" value="">
    </div>
  </div>
  <div class="form-group row">
    <label for="Einsatzort" class="col-sm-2 col-form-label">Einsatzort</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Einatzort" name="Einsatzort" placeholder="" value="">
    </div>
  </div>
  <div class="form-group row">
    <label for="Adresse" class="col-sm-2 col-form-label">Adresse</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Adresse" name="Adresse" placeholder="" value="">
    </div>
  </div>

  <div class="form-group row">
  <label for="anforderung" class="col-sm-2 col-form-label">Anforderung durch</label>
  <div class="col-sm-10">
  <select class="form-control" id="Anforderung"  name="Anforderung" value="">   
      <option></option>
      <option value="POLIZEI">POLIZEI</option>
      <option value="FEUERWEHR">FEUERWEHR</option>
      <option value="EIGEN">EIGEN</option>
      <option value="PRIVATPERSON">PRIVATPERSON</option>
    </select>
  </div>
</div>
<div class="form-group row">
    <label for="Alamierungszeit" class="col-sm-2 col-form-label">Alamierungszeit</label>
    <div class="col-sm-10">
      <input type="datetime-local" class="form-control" id="Alarmierungszeit" name="Alamierungszeit" placeholder="" value="echo date("d.m.Y", time());">
    </div>
  </div>
  <div class="form-group row">
    <label for="Einsatzende" class="col-sm-2 col-form-label">Einsatzende</label>
    <div class="col-sm-10">
      <input type="datetime-local" class="form-control" id="Einsatzende" name="Einsatzende" placeholder="" value="echo date("d.m.Y", time());">
    </div>
  </div>

    <div class="form-group">
    <label for="Bericht">Bericht</label>
    <textarea class="form-control" id="Bericht" name="Bericht" rows="10"></textarea>
  </div>

 
    <input type="submit" name="Einsatzanlegen" value="Einsatzanlegen">

</form>

Das Formular dient dazu einen Einsatz für uns zu übernehmen und weiter zu verarbeiten.

Danke
LG Stefan
 
Hat das denn mit Google_Maps und Datum und Uhrzeit funktioniert?

Was das Formular betrifft, dürfte das kein Problem sein. Das JSON mit den Daten ist ja verfügbar, man kann es mit Ajax laden und die Daten übernehmen. Ist die Alarmierungszeit das selbe wie die Startzeit im JSON?
 
@Sempervivum
Hat das denn mit Google_Maps und Datum und Uhrzeit funktioniert?
Sempervivum schrieb:
Was das Formular betrifft, dürfte das kein Problem sein. Das JSON mit den Daten ist ja verfügbar, man kann es mit Ajax laden und die Daten übernehmen. Ist die Alarmierungszeit das selbe wie die Startzeit im JSON?
Zum Vergrößern anklicken....

JA das mit Google funktioniert, da ich das ganze noch localhabe (XAMPP) funktioniert das mit dem Datum nicht. Es werden mir keine Einsätze mehr angezeigt wenn ich den code einfüge !
Ja ALARMIERUNGSZEIT = STARTZEIT !

DANKE

Bezüglich Nachrichten versand bei neuem Einsatz wollt ich noch fragen wo ich das einbauen muss
habe jetzt ein script welches eine Nachricht an Telegramm sendet dieses habe ich schon bei meiner einsatzanlegen.php eingebaut und funktioniert.

Code: 
<?php
    if(isset($_POST['Einsatzanlegen']))
    {
        $apiToken = "xxx";

        $data = [
            'chat_id' => 'xxx',
            'text' => "EINSATZ für ‍ ---   Datum:  ".$Datum."  Einsatzort: ".$Einsatzort." Adresse: ".$Adresse."  Anforderung durch: ".$Anforderung." ⏱️ Alarmierung um: ".$Alamierungszeit
          ];
        $response = file_get_contents("https://api.telegram.org/bot$apiToken/sendMessage?" . http_build_query($data) );  
    }
?>

Danke

LG Stefan
 
Zuletzt bearbeitet:
da ich das ganze noch localhabe (XAMPP) funktioniert das mit dem Datum nicht.
Zum Vergrößern anklicken....
Bei mir das selbe, ich brauchte nur eine Zeile in php.ini zu aktivieren, dann funktionierte es:
Code: 
extension=intl
Bei mir Zeile 931

Die Sache mit dem Formular werde ich mir dann ansehen, ebenso mit der Nachricht.
 
@Sempervivum
Merkst du nicht, dass du mit deinen fertigen Lösungen nicht wirklich hilfst? Copy/Paste ohne zu verstehen, was da kopiert wird, ist ein Garant für die nächsten Fragen, weil man sich dann ja nicht mit den Grundlagen beschäftigen muss.
 
Ich habe jetzt ein wenig vorgearbeitet für das Erkennen neuer Einsätze und das Versenden der Nachrichten.
Außerdem ein wenig optimiert:
  • URLSearchParams verwendet für das Vorbereiten der URL-Parameter.
  • Das div.btns heraus genommen, das selbe können wir erreichen wenn wir section stylen.

index.html
Code: 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Einsatzdaten</title>
    <style>
        body {
            font-family: Helvetica, Sans-Serif;
        }
    </style>

    <style>
        section.PERSON {
            border: 2px solid yellow;
        }

        section.TEE {
            border: 2px solid blue;
        }

        section.SELBST {
            border: 2px solid gray;
        }

        section.BRAND {
            border: 2px solid red;
        }

        section.UNWETTER {
            border: 2px solid green;
        }

        section.SONSTIGE {
            border: 2px solid black;
        }

        section {
            border-radius: 30px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <img src="bilder/ooelfv.png" alt="Bild" style="float:left;
    margin-right:4px; margin-bottom:4px;width: 100px;">
    <h1 style="float:left; margin-right:4px;  margin-bottom:4px;">Laufende Einsätze - Feuerwehren OÖ</h1>
    <select id="filter">
        <option value="">Alle Einsatzarten</option>
        <option value="SELBST">SELBST</option>
        <option value="BRAND">BRAND</option>
        <option value="UNWETTER">UNWETTER</option>
        <option value="TEE">TEE</option>
        <option value="PERSON">PERSON</option>
        <option value="SONSTIGE">SONSTIGE</option>
    </select>
    <main></main>
    <script>
        let einsatzParams = [];
        const
            intv = 10000,
            einsatzartDefault = '',
            url = `hole-einsatzdaten.php`,
            params = new URLSearchParams({ t: Date.now(), einsatzart: einsatzartDefault }),
            urlDefault = `${url}?${params.toString}`,
            sel = document.querySelector('select#filter'),
            einsaetze = document.querySelector('main'),
            optDefault = sel.querySelector(`option[value="${einsatzartDefault}"]`);
        if (optDefault) optDefault.setAttribute('selected', true);
        fetch(urlDefault)
            .then(response => response.json())
            .then(html => {
                einsaetze.innerHTML = html.einsatzHTML;
                einsatzParams = html.einsatzParams;
            });
        function holeEinsatzdaten() {
            const
                params = new URLSearchParams({ t: Date.now(), einsatzart: sel.value });
            fetch(url)
                .then(response => response.json())
                .then(html => {
                    einsaetze.innerHTML = html.einsatzHTML;
                    const neueEinsaetze = html.einsatzParams.filter(
                        einsatzNeu => !einsatzParams.find(einsatzAlt => einsatzAlt.id == einsatzNeu.id)
                    );
                    console.log(neueEinsaetze);
                    neueEinsaetze.forEach(einsatz => {
                        const
                            apiToken = 'xxx',
                            msgURL = `https://api.telegram.org/bot$apiToken/sendMessage?`,
                            msgText = `EINSATZ für ‍ ---   Datum:  ".$Datum."  Einsatzort: ".$Einsatzort." Adresse: ".$Adresse."  Anforderung durch: ".$Anforderung." ⏱️ Alarmierung um: ".$Alamierungszeit`,
                            params = {
                                apiToken: 'xxx',
                                text: msgText
                            },
                            paramsObj = new URLSearchParams(params);
                        // fetch(`${msgURL}${paramsObj.toString()}`)
                        //     .then(response => text())
                        //     .then(responseText => {
                        //         console.log(responseText);
                        //     });
                    });
                    einsatzParams = html.einsatzParams;
                });
        }
        setInterval(holeEinsatzdaten, intv);
        document.addEventListener('change', event => {
            if (event.target.matches('select')) {
                holeEinsatzdaten();
            }
        });
    </script>
</body>

</html>
 
hole-einsatzdaten.php
Code: 
<?php

error_reporting(E_ALL);

// Doku für Google-Maps:
// https://developers.google.com/maps/documentation/urls/get-started?hl=de
$mapZoom = 10;
$mapBase = 'satellite';
$mapURL = "https://www.google.com/maps/search/?api=1&query={{lat}}%2C{{lng}}&hl=de";

$url = 'https://cf-einsaetze.ooelfv.at/webext2/rss/json_laufend.txt?t=' . time();

$curl = curl_init();
$headers = array();
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
$json = curl_exec($curl);
curl_close($curl);
$data = json_decode($json, true);

$einsatzArten = [];

if (isset($_GET['einsatzart'])) {
    $filterEinsatzart = $_GET['einsatzart'];
} else {
    $filterEinsatzart = '';
}

$einsatzHTML = '';
$einsatzHTML .= '<ul>';
$cntEinsaetze = $data['cnt_einsaetze'];
$cnt_feuerwehren = $data['cnt_feuerwehren'];
$einsatzHTML .= "<li> Einsätze: $cntEinsaetze - Feuerwehren: $cnt_feuerwehren (alarmiert im Einsatz) </li>";
$einsatzHTML .= '</ul>';

$zaehler = 0;
$einsatzParams = [];
function makeLocalDateStr($dateStr)
{
    $dt = new DateTime($dateStr);
    $formatter = new IntlDateFormatter('de_DE', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT);
    // Wochentag in Kurzform:
    // $formatter->setPattern('E d.M.yyyy HH:MM');
    // Wochentag in Langform:
    $formatter->setPattern('cccc d.M.yyyy HH:MM');
    return $formatter->format($dt);
}
foreach ($data['einsaetze'] as $einsatz) {
    $dtStr = makeLocalDateStr($einsatz['einsatz']['startzeit']);
    $id = $einsatz['einsatz']['num1'];
    $einsatzParams[] = [
        'id' => $id,
        'zeit' => makeLocalDateStr(null),
        'ort' => $einsatz['einsatz']['einsatzort'],
        'startzeit' => $dtStr,
    ];
    $art = $einsatz['einsatz']['einsatzart'];
    $K1 = $einsatz['einsatz']['einsatzart'];
    if ($filterEinsatzart == '' || $filterEinsatzart == $art) {
        $einsatzHTML .= "<section class=\"$art\">";
        $startzeit = $einsatz['einsatz']['startzeit'];
        // Länge und Breite für Google-Maps bereit stellen:
        $lng = $einsatz['einsatz']['wgs84']['lng'];
        $lat = $einsatz['einsatz']['wgs84']['lat'];
        // und in die URL eintragen:
        $einsatzMapURL = str_replace(['{{lat}}', '{{lng}}'], [$lat, $lng], $mapURL);
        $ort = $einsatz['einsatz']['einsatzort'];
        $typ = $einsatz['einsatz']['einsatztyp']['text'];
        $einsatzsubtypid = $einsatz['einsatz']['einsatzsubtyp']['id'];
        $einsatzsubtyp = $einsatz['einsatz']['einsatzsubtyp']['text'];
        $status = $einsatz['einsatz']['status'];
        $alarmstufe = $einsatz['einsatz']['alarmstufe'];
        $einsatzHTML .= "<h3>$ort - $typ </br> <span style=\"color: red; font-size: 0.8rem;\">$dtStr</span> <span style=\"color: green; font-size: 1rem;\"> Status: $status </span> <span style=\"color: black; font-size: 0.8rem;\"> Alarmstufe: $alarmstufe </span></h3>";
        $typ = $einsatz['einsatz']['einsatztyp']['text'];
        // Verweis auf Google-Maps:
        $einsatzHTML .= "<a href=\"$einsatzMapURL\" target=\"_blank\">Karte anzeigen</a>";
        $einsatzHTML .= "<dl>";
        $einsatzHTML .= " Einsatzart:$art - $einsatzsubtypid - $einsatzsubtyp";

        $einsatzHTML .= "</dl>";

        $einsatzHTML .= '<ul>';
        foreach ($einsatz['einsatz']['feuerwehrenarray'] as $feuerwehr) {
            $feuerwehrname = preg_replace('/\(\d*\)/', '', $feuerwehr['fwname']);

            $einsatzHTML .= "<li>$feuerwehrname</li>";
        }
        $einsatzHTML .= '</ul>';
        $einsatzHTML .= "</section>";
        $zaehler++;
    }
}
if ($zaehler == 0) {
    $einsatzHTML .= 'Keine laufenden Einsätze für die gewählte Einsatzart.';
}
echo json_encode(['einsatzHTML' => $einsatzHTML, 'einsatzParams' => $einsatzParams],
    JSON_PRETTY_PRINT);
 
Was das Formular betrifft, stelle ich mir folgendes vor:
Wir führen ein Anzeigefeld ein, das die ID des Einsatzes anzeigt. Links davon je einen Pfeil um vorwärts und rückwärts zu blättern. Tut man das, werden sofort die Daten des Einsatzes in die Felder des Formulars eingetragen. Auf diese Weise sieht man sofort, um welchen Einsatz es sich handelt.
 
Sempervivum schrieb:
Was das Formular betrifft, stelle ich mir folgendes vor:
Wir führen ein Anzeigefeld ein, das die ID des Einsatzes anzeigt. Links davon je einen Pfeil um vorwärts und rückwärts zu blättern. Tut man das, werden sofort die Daten des Einsatzes in die Felder des Formulars eingetragen. Auf diese Weise sieht man sofort, um welchen Einsatz es sich handelt.
Zum Vergrößern anklicken....
Gute IDEE,

bei mir werden jetzt nach änderung auf die codes keine Einsatzdaten mehr angezeigt !!
 
Ich habe beide Codeblöcke aus dem Forum wieder zurück in Dateien übertragen und es läuft einwandfrei.
Sieh mal in die Console, ob Du irgend welche Hinweise findest.
 
Sempervivum schrieb:
Ich habe beide Codeblöcke aus dem Forum wieder zurück in Dateien übertragen und es läuft einwandfrei.
Sieh mal in die Console, ob Du irgend welche Hinweise findest.
Zum Vergrößern anklicken....
Folgender Fehler wird angezeigt:
Code: 
einsatzooe.html:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON

einsatzooe.html = index.html

Ich habe aber meine Token eingesetzt !
 
Dieser Fehler kommt aber wahrscheinlich nicht vom Senden der Nachricht über Telegram. Sieh mal in den Entwicklerwerkzeugen im Netzwerk-Tab wie die Serverantwort aussieht. I. allg. kommt solch ein Fehler, wenn vom Skript zusätzlich etwas weg geschrieben wird, z. B. eine Fehlermeldung.
 
Sempervivum schrieb:
Dieser Fehler kommt aber wahrscheinlich nicht vom Senden der Nachricht über Telegram. Sieh mal in den Entwicklerwerkzeugen im Netzwerk-Tab wie die Serverantwort aussieht. I. allg. kommt solch ein Fehler, wenn vom Skript zusätzlich etwas weg geschrieben wird, z. B. eine Fehlermeldung.
Zum Vergrößern anklicken....
Code: 
<br/>
<b>Deprecated</b>
:  DateTime::__construct(): Passing null to parameter #1 ($datetime) of type string is deprecated in <b>C:\xampp8.2.1\htdocs\suchhunde\hole-einsatzdaten.php</b>
on line <b>43</b>
<br/>

gehört beim Script von telegramm nicht noch die Chat-Id dazu damit er weis wo er die nachricht hin senden soll.

Danke Lg Stefan
 
Alles klar, DateTime mag das null nicht, wir müssen statt dessen 'now' übergeben:
Code: 
foreach ($data['einsaetze'] as $einsatz) {
    $dtStr = makeLocalDateStr($einsatz['einsatz']['startzeit']);
    $id = $einsatz['einsatz']['num1'];
    $einsatzParams[] = [
        'id' => $id,
        'zeit' => makeLocalDateStr('now'), // <-- hier
        'ort' => $einsatz['einsatz']['einsatzort'],
        'startzeit' => $dtStr,
    ];
    $art = $einsatz['einsatz']['einsatzart'];
    $K1 = $einsatz['einsatz']['einsatzart'];

gehört beim Script von telegramm nicht noch die Chat-Id dazu damit er weis wo er die nachricht hin senden soll.
Zum Vergrößern anklicken....
Da hast Du vollkommen Recht, auch die Parameter werden so noch nicht richtig eingefügt. Das Senden der Nachricht bedarf noch weiterer Arbeit.
 
... die Chat-ID muss in die params, das apiToken haben wir ja schon in der URL:
Code: 
                    neueEinsaetze.forEach(einsatz => {
                        const
                            apiToken = 'xxx',
                            msgURL = `https://api.telegram.org/bot$apiToken/sendMessage?`,
                            msgText = `EINSATZ für ‍ ---   Datum:  ".$Datum."  Einsatzort: ".$Einsatzort." Adresse: ".$Adresse."  Anforderung durch: ".$Anforderung." ⏱️ Alarmierung um: ".$Alamierungszeit`,
                            params = {
                                'chat_id': 'xxx',
                                text: msgText
                            },
                            paramsObj = new URLSearchParams(params);
                        // fetch(`${msgURL}${paramsObj.toString()}`)
                        //     .then(response => text())
                        //     .then(responseText => {
                        //         console.log(responseText);
                        //     });
                    });
Wenn das so weit fehlerfrei durch läuft, kannst Du versuchen, die Zeilen mit dem fetch zu aktivieren und gucken, ob das mit der Nachricht funktioniert.
 
Sempervivum schrieb:
... die Chat-ID muss in die params, das apiToken haben wir ja schon in der URL:
Code: 
                    neueEinsaetze.forEach(einsatz => {
                        const
                            apiToken = 'xxx',
                            msgURL = `https://api.telegram.org/bot$apiToken/sendMessage?`,
                            msgText = `EINSATZ für ‍ ---   Datum:  ".$Datum."  Einsatzort: ".$Einsatzort." Adresse: ".$Adresse."  Anforderung durch: ".$Anforderung." ⏱️ Alarmierung um: ".$Alamierungszeit`,
                            params = {
                                'chat_id': 'xxx',
                                text: msgText
                            },
                            paramsObj = new URLSearchParams(params);
                        // fetch(`${msgURL}${paramsObj.toString()}`)
                        //     .then(response => text())
                        //     .then(responseText => {
                        //         console.log(responseText);
                        //     });
                    });
Wenn das so weit fehlerfrei durch läuft, kannst Du versuchen, die Zeilen mit dem fetch zu aktivieren und gucken, ob das mit der Nachricht funktioniert.
Zum Vergrößern anklicken....
DANKE,

habe es versucht aber es funktioniert nicht es wird keine Nachricht gesendet, und der Filter funktioniert auch nicht !
 
Das mit dem Filtern war ein trivialer Fehler:
Code: 
        function holeEinsatzdaten() {
            const
                params = new URLSearchParams({ t: Date.now(), einsatzart: sel.value }),
                fetchURL = `${url}?${params.toString()}`; // diese Zeile fehlte
            fetch(fetchURL)

Was das Senden betrifft, wird irgend etwas in der Console ausgegeben?
 
Einen Fehler beim Senden habe ich gefunden, beim Zusammenbauen der URL fehlte das Fragezeichen:
Code: 
                    neueEinsaetze.forEach(einsatz => {
                        const
                            apiToken = 'xxx',
                            msgURL = `https://api.telegram.org/bot$apiToken/sendMessage?`,
                            msgText = `EINSATZ für ‍ ---   Datum:  ".$Datum."  Einsatzort: ".$Einsatzort." Adresse: ".$Adresse."  Anforderung durch: ".$Anforderung." ⏱️ Alarmierung um: ".$Alamierungszeit`,
                            params = {
                                'chat_id': 'xxx',
                                text: msgText
                            },
                            paramsObj = new URLSearchParams(params);
                            fetch(`${msgURL}?${paramsObj.toString()}`) // <-- hier
                               .then(response => text())
                               .then(responseText => {
                                   console.log(responseText);
                               });
                    });

Edit: Alles zurück, das Fragezeichen steht schon in der msgURL, muss also beim Zusammenbauen nicht rein.
 
  • Angry
Reaktionen: msi
Es gibt jedoch einen anderen Fehler: Der Variablenname bei $apiToken muss in geschweifte Klammern.
Ich habe auch das Einfügen der Parameter ergänzt und dann sieht es so aus:
Code: 
                    neueEinsaetze.forEach(einsatz => {
                        const
                            apiToken = 'xxx',
                            datum = (new Date()).toLocaleDateString(),
                            ort = einsatz.ort,
                            adr = einsatz.adresse.default,
                            alarmzeit = einsatz.startzeit,
                            msgURL = `https://api.telegram.org/bot${apiToken}/sendMessage`,
                            msgText = `EINSATZ für ‍ ---   Datum:  ${datum}  Einsatzort: ${ort} Adresse: ${adr}  Anforderung durch: ??? ⏱️ Alarmierung um: ${alarmzeit}`,
                            params = {
                                'chat_id': 'xxx',
                                text: msgText
                            },
                            paramsObj = new URLSearchParams(params),
                            fetchURL = `${msgURL}?${paramsObj.toString()}`;
                        console.log(fetchURL);
                        // fetch(fetchURL)
                        //     .then(response => text())
                        //     .then(responseText => {
                        //         console.log(responseText);
                        //     });
                    });
Die Parameter müssen natürlich im PHP auch bereit gestellt werden:
Code: 
foreach ($data['einsaetze'] as $einsatz) {
    $dtStr = makeLocalDateStr($einsatz['einsatz']['startzeit']);
    $id = $einsatz['einsatz']['num1'];
    $einsatzParams[] = [
        'id' => $id,
        'zeit' => makeLocalDateStr('now'),
        'ort' => $einsatz['einsatz']['einsatzort'],
        'adresse' => $einsatz['einsatz']['adresse'],
        'startzeit' => $dtStr,
    ];
    $art = $einsatz['einsatz']['einsatzart'];
    $K1 = $einsatz['einsatz']['einsatzart'];
Dann prüfe zunächst, ob die fetchURL OK ist und wenn ja, aktiviere das Senden mit fetch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben