Category: Advanced using of twig with the JCI-Plugin

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:

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:

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:

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

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:

• München , Sushibar , GoogleMaps
• Penzberg , Sushi4you , GoogleMaps
• München , Sushi 38 , GoogleMaps
• München , EDO Sushi , GoogleMaps
• München , Sushi Sam , GoogleMaps
• München , Sushi Sen , GoogleMaps
• München , Yen Sushi , GoogleMaps
• Miesbach , Sushi now , GoogleMaps
• Dachau , Koto Sushi , GoogleMaps
• Freising , Sushi-Tenn , GoogleMaps
• Garching (b München) , Nano Sushi , GoogleMaps
• München , Kims Sushi , GoogleMaps
• München , Sushi Cent , GoogleMaps
• München , Sushi Kimi , GoogleMaps
• München , Sushi Plus , GoogleMaps
• München , Sushi Sado , GoogleMaps
• München , Sushi Sano , GoogleMaps
• München , Sushi + Soul , GoogleMaps
• München , sushi.wrap , GoogleMaps
• München , yoko Sushi , GoogleMaps
• Erding , Lucky Sushi , GoogleMaps
• Gröbenzell , sushi & fusion , GoogleMaps
• München , Kyoto-Sushi , GoogleMaps
• München , Nata Sushi¬Co , GoogleMaps
• München , Ozean Sushi , GoogleMaps
• München , Sushi Bistro , GoogleMaps
• München , Sushi Circle , GoogleMaps
• München , Sushi Express (Pognerstraße 19) , GoogleMaps
• München , Sushi Magie , GoogleMaps
• München , Sushi Sakura , GoogleMaps
• Puchheim (Obb) , Magic Sushi , GoogleMaps
• München , Nam's Sushi , GoogleMaps
• München , Sushi Express , GoogleMaps
• München , Sushiya Bento , GoogleMaps
• Ottobrunn , Asiawok - Sushi , GoogleMaps
• München , Hai Anh Sushi , GoogleMaps
• Landshut , Altstadt Sushi , GoogleMaps
• München , Asia Sushi Wok , GoogleMaps
• München , GOBI Sushi Bar , GoogleMaps
• München , Sushi and Meat , GoogleMaps
• München , Tasty Wok & Sushi , GoogleMaps
• Penzberg , Asia Sushi Wok , GoogleMaps
• Erding , Teny Running Sushi , GoogleMaps
• Gräfelfing , Bambus Wok & Sushi , GoogleMaps
• Herrsching (a Ammersee) , Seaside Sushi & Sake , GoogleMaps
• Isen , HQ-WOK & HQ-Sushi , GoogleMaps
• München , FUJI Sushi & Nudel , GoogleMaps
• München , Hai's Sushi & Wok , GoogleMaps
• Unterhaching , BOFU Sushi & Bowls , GoogleMaps
• Rosenheim , Bambus Wok & Sushi , GoogleMaps
• München , Asaka Running Sushi , GoogleMaps
• München , Fresh Sushi And More , GoogleMaps
• München , Go Long Sushi & Pho , GoogleMaps
• München , Hanami Sushi Addict , GoogleMaps
• München , Japan Sushi Gourmet , GoogleMaps
• München , SAM Sushi and Meat , GoogleMaps
• München , SAM - sushi and meat , GoogleMaps
• München , Sushi King Rice Wok , GoogleMaps
• München , Sushi Niwa und Wok , GoogleMaps
• Dasing , Sushi Palace Augsburg , GoogleMaps
• Rosenheim , Mikado Running Sushi , GoogleMaps
• Rosenheim , Pho Hanoi & Sushi Bar , GoogleMaps
• München , KAMATO - Sushi For Life , GoogleMaps
• München , Sushi Bin Asia Küche , GoogleMaps
• Ottobrunn , Chop Stick - Running Sushi , GoogleMaps
• Landshut , My LY wok & sushi bar , GoogleMaps
• München , asia vital Sushi and more , GoogleMaps
• München , NGON Sushi & Vietnamese Streetfood , GoogleMaps
• München , Running Sushi Fresh Food & Drink , GoogleMaps
• Landshut , Nannan Landshut Sushi & Soul Food , GoogleMaps

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>