Category: Build Application with JCI

https://verkehr.autobahn.de/o/autobahn/details/warning/{warning.identifier}
gives details of a warnings (list of warnings, see here)

Local stored JSON: http://api.json-content-importer.com/extra/json/nZpel9fTE1TLU5JL3JfTE1TLU5JLzI0MDQ5M19EICBOSSBMTVMtTkkgIC4w.json

JCI-Template:

• name: detail-autobahn
• URL:
  “dummyrequest” does not do a http-request but gives basic info about the page. With that you can catch errors etc.

{% set url = "dummyrequest" %}
{% if urlparam.warningid %}
{% set url = "https://verkehr.autobahn.de/o/autobahn/details/warning/" ~ urlparam.warningid %}
{% endif %}
{{url}}

• urlparam4twig: warningid
• twig-template:

<a href="/api-verkehr-autobahn-de-o/">back to list</a><hr>
{% if subtitle %}
    <strong>{{subtitle}}</strong><br>
    {{description.0}}<br>
    coordinates: {{coordinate.lat}},{{coordinate.long}}<br>
    {% for k,v in description %}
        {% if v %}
            {{v}}<br>
        {% endif %}
    {% endfor %}
{% else %}
no warning found
{% endif %}

Shortcode:

[jsoncontentimporterpro nameoftemplate="detail-autobahn"]

In Action:

back to list

---

no warning found

Challenge:
Show current and forecast weather data via
https://api.openweathermap.org/data/2.5/onecall?lat={{lat}}&lon={{lon}}&exclude={part}&appid=….
for a searchable location.

Solution:
Use the above API for the weather at a location defined by lat and lon. Also use the openweather-geocoding API to transform a locationname into lat & lon.

In Action:

---

Augsburg (DE , Bavaria ) show on map | show weather
Augsburg (DE , Schleswig-Holstein ) show on map | show weather
Augsburg (US , Illinois ) show on map | show weather
Augsburg (US , Arkansas ) show on map | show weather
Augsburg (GY , Mahaica-Berbice ) show on map | show weather

---

See how this is done with a JCI-Shortcode:

[jsoncontentimporterpro nameoftemplate="openweather-forecast"]

With this JCI-template:

• urlparam4twig: su
• URL:

{% set su = "augsburg" %}{% if urlparam.su %}{% set su = urlparam.su %}{% endif %}
http://api.openweathermap.org/geo/1.0/direct?q={{su}}&limit=10&appid=...

• twig-template:
  For the weather-forecast each location points at /openweather-forecast/

{% set su = "augsburg" %}{% if urlparam.su %}{% set su = urlparam.su %}{% endif %}
<form action=".">
    <input type=text name=su placeholder="Insert name of a location" value="{{su}}">
    <input type=submit value="Search location and weather">
</form>
<hr>
{% for l in _context %}
    {% if l.lat %}
        {{l.name}} ({{l.country}}
        {% if l.state %}
            , {{l.state}}
        {% endif %})
        <a href="https://www.google.com/maps/place//@{{l.lat}},{{l.lon}},14z" target="_blank">show on map</a>
        |
        <a href="/openweather-forecast/?lat={{l.lat}}&lon={{l.lon}}&su={{l.name|e|url_encode}}">show weather</a>
        <br>
    {% endif %}
{% endfor %}

This page shows deatails for a MVG-Station in munich and the next departing vehicles:

back to adress-search

---

servingLines:

• U1: UBAHN to Mangfallplatz
• U7: UBAHN to Sendlinger Tor
• 153: BUS to Odeonsplatz U via Hochschule

---

current time: 01:43:27

---

departures:

-136 Min	23:28	U1	Olympia-Einkaufszentrum	Gleis 1
-132 Min	23:32	U1	Mangfallplatz	Gleis 2
-116 Min	23:48	U1	Olympia-Einkaufszentrum	Gleis 1
-112 Min	23:52	U1	Mangfallplatz	Gleis 2
-96 Min	00:08	U1	Mangfallplatz	Gleis 2
-81 Min	00:23	U1	Olympia-Einkaufszentrum	Gleis 1
1 Hrs, 39 Min	03:23	U1	Mangfallplatz	Gleis 2
1 Hrs, 54 Min	03:38	U1	Olympia-Einkaufszentrum	Gleis 1
2 Hrs, 24 Min	04:08	U1	Olympia-Einkaufszentrum	Gleis 1
2 Hrs, 28 Min	04:12	U1	Mangfallplatz	Gleis 2
2 Hrs, 44 Min	04:28	U1	Olympia-Einkaufszentrum	Gleis 1
2 Hrs, 48 Min	04:32	U1	Mangfallplatz	Gleis 2

Create a new JCI-template:

• urlparam4twig: stationid#su
• URL:

{% set su = "de:09162:180" %}
{% if urlparam.stationid %}{% set su = urlparam.stationid | trim | url_encode %}
{% endif %}
https://www.mvg.de/api/fahrinfo/departure/{{su}}?footway=4

twig-template:

<a href="/pro-mvg-api-munchner-verkehrsverbund-adresssuche/?su={{urlparam.su | url_encode}}">back to adress-search {{urlparam.su | e | stripslashes }}</a><hr>

servingLines:<br>
<ul>
{% for item in servingLines %}
<li>
    {{item.lineNumber}}: {{item.product}} to {{item.destination}}
    </li>
{% endfor %}
</ul>
<hr>
{% set hour = 3600 %}
{% set currenttimestamp = ("now"|date("U")) %}
current time: {{ (currenttimestamp+hour) |date("H:i:s") }}
<hr>
departures:<br>
<table border=1>
{% for i in departures | slice(0, 12) %}
       {% set deltasec = (i.departureTime/1000 - currenttimestamp) %}
    <tr><td>
        {% set mindist = (deltasec/60) |round(0, "floor") %}
        {% if mindist>60 %}
            {% set hrs = (deltasec/60/60) | round(0, "floor") %}
           {{hrs}} Hrs, {{mindist-60*hrs}} Min
        {% else %}
            {{mindist}} Min
        {% endif %}        
        
     </td><td>
       {{(i.departureTime/1000+hour) | date("H:i") }}
     </td><td>
       {{i.label}} 
    </td><td>
        {{i.destination}}
     </td><td>
        {{i.platform}}
   </td></tr>
{% endfor %}
</table>

API: https://www.mvg.de/api/fahrinfo/location/queryWeb?q=maillinger
“q” is the search-parameter you can use. If a station is found there is a link to another page which shows the next departing trains. more

In Action:

---

12 Treffer:

• BUS tariffZones: m|1, next trains - München , Blutenburg , GoogleMaps
• BUS tariffZones: m|1, next trains - München , Schloss Blutenburg , GoogleMaps
• München , Blutenburg-Theater , GoogleMaps
• München , Blutenburg Apotheke , GoogleMaps
• München , Blutenburgstraße , GoogleMaps
• München , Grundschule an der Blutenburgstraße , GoogleMaps
• München , Hotel Blutenburg , GoogleMaps
• München , Schlossschänke Blutenburg , GoogleMaps
• München , Haus für Kinder Blutenburgstraße 1B , GoogleMaps
• München , Musikforum Blutenburg e.V. - Zweigstelle Nymphenburg , GoogleMaps
• München , Schloss Blutenburg , GoogleMaps
• München , Musikforum Blutenburg e.V. - Standort Obermenzing , GoogleMaps

Examples: "Volksbad" also finds "Volksbank" | Sushi in Munich | FC Bayern

---

---

To realize such form do this create a JCI-PRO-Template:

• urlparam4twig: su
• URL (default search “blutenburg”):

{% set su = "blutenburg" %}
{% if urlparam.su %}{% set su = urlparam.su | trim | url_encode %}
{% endif %}
https://www.mvg.de/api/fahrinfo/location/queryWeb?q={{su}}

twig-template:

{% set su = "blutenburg" %}
{% if urlparam.su %}
    {% set su = urlparam.su | trim %}
{% endif %}
<form action ="">
    <input type=text name=su value="{{su | e | stripslashes }}">
    <input type=submit value="Search">
</form>
<hr>
{% set hits = (locations | length ) %}
{% if hits>0 %}
    {{hits}} Treffer:<br>
    <ul>
    {% for item in locations %}
        <li>
        {% for prok, prov in item.products %}
            {{prov}} 
        {% endfor %}
        
        {% if item.type=="station" %}
            tariffZones: {{item.tariffZones}}, <a href="/pro-mvg-api-stationdetails/?stationid={{item.id}}&su={{su | url_encode}}">next trains</a> - 
        {% endif %}

        {{item.place}}
        {% if item.street %}
            , {{item.street}}
        {% endif %}
        {% if item.name %}
            , {{item.name}}
        {% endif %}
        , <a href="https://www.google.com/maps/dir//{{item.latitude}},{{item.longitude}}/@{{item.latitude}},{{item.longitude}},15z?hl=en" target="_blank">GoogleMaps</a>
        </li>
    {% endfor %}
    </ul>
{% else %}
nothing found
{% endif %}
Examples: 
<a href="./?su=volksbad">"Volksbad" also finds "Volksbank"</a> |
<a href="./?su=sushi">Sushi in Munich</a> |
<a href="./?su=fc+bayern">FC Bayern</a>