1. WeatherApp.git
  2. weather.tt
 RSS Git Download  Clone
Raw Blame History 
<!DOCTYPE html>
<html>
<head>
	[% uri_base = request.uri_base %]
    <link rel="stylesheet"
        href="[% uri_base %]/css/bootstrap.css">
	<link rel="stylesheet"
		href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
		
    <script src="[% uri_base %]/js/bootstrap.js"></script>
    <script src="[% uri_base %]/jquery.min.js"></script>
    <style>
        body  { margin: 10px; }
		h4 { margin-left: 2em; }
        #weather { width: 400px; }
        #weather th { text-align: right; }
        #forecast { width: 600px; }
        #forecast-summary { text-align: center; }
        .night { color: #808080; }
        .cold { color: #00f; background: #c6deff; padding: 2px 5px; }
        .day { color: #ffa500; }		
        /* td { padding: 2px 5px; border: 1px solid #00f; } */
        /* td.label { font-weight: bold; color: #800000; text-align: right; } */
        /* table { border-collapse: collapse; margin-left:25px; } */
    </style>
</head>
<body>
    [%
        USE date;
        USE DataPrinter; # DataPrinter.dump_html(settings);

        forecast_data = data.forecast.data; # DataPrinter.dump_html(forecast_data);
        weather_data  = data.weather.data;  # DataPrinter.dump_html(weather_data);
        # DataPrinter.dump_html(data.weather.result);
        # DataPrinter.dump_html(data.forecast.result);
    %]

    [% # DataPrinter.dump_html(request.uri) %]
    <h2>Weather data for [% weather_data.name %] [[% weather_data.sys.country %]]
		on [% date.format(date.now, '%d-%b-%Y @ %R') %]
        <a href="[% request.uri %]"><i class="bi bi-arrow-repeat"></i></a>
    </h2>

    <h4>
      <form action="[% uri_base %]">
        Weather for <input type="text" name="location"
            placeholder="city, city/uk, city/co, etc" />
        <input class="btn btn-primary" type="submit" value="Wx">
		<input class="btn btn-primary" type="submit" name=".metar" value="METAR">
        [% '[<a href="/leeds">Leeds</a>]' UNLESS request.uri.match('leeds') %]
        [% '[<a href="/acle">Acle</a>]' UNLESS request.uri.match('acle') %]
      </form>
    </h4>

    [% IF weather_data.message %]
        <p class="alert alert-warning">ERROR: [% weather_data.message %]
            [[% params.city.ucfirst %], [% params.country.upper %]]
        </p>
    [% ELSE %]
    <div class="alert alert-success">Summary:
        <!-- [% weather_data.weather.0.main %] -->
        <img src="//openweathermap.org/img/wn/[% weather_data.weather.0.icon
            %]@2x.png" width="50" />
        [% weather_data.weather.0.description %]
        <a href="#weather-summary" data-toggle="collapse">
            <i class="bi bi-arrows-expand"></i></a>
    </div>

    <div class="collapse" id="weather-summary">
        <div class="card card-body">
            [% DataPrinter.dump_html(weather_data) %]
        </div>
    </div>

    <table id="weather" class="main table table-condensed">
        <tr>
            <th>Temperature</th>
            [%  min_temp = weather_data.main.temp_min | format('%.1f');
				max_temp = weather_data.main.temp_max | format('%.1f');
                avg_temp = weather_data.main.temp | format('%.1f');
            %]
            <td>[% avg_temp %]<sup>o</sup>C [[% min_temp; ' - '; max_temp %]]</td>
        </tr>
        <tr>
            <th>Wind speed</th>
            <td>[% weather_data.wind.deg | format("%.0f") %]<sup>o</sup>
                @ [% weather_data.wind.speed * 2.23694 | format("%.0f") -%]
                [%- IF weather_data.wind.gust; 'G';
                    weather_data.wind.gust * 2.23694 | format("%.0f") %]
                [% END %] mph
            </td>
        </tr>
        <tr>
            <th>Pressure</th>
            <td>[% weather_data.main.pressure %] hPa</td>
        </tr>
        <tr>
            <th>Cloud cover</th>
            <td>[% weather_data.clouds.all %]%</td>
        </tr>
        [% IF weather_data.visibility AND weather_data.visibility < 10000 %]
        <tr>
            <th>Visibility</th>
            <td>[% weather_data.visibility %] mtr</td>
        </tr>
        [% END %]
        <tr>
            <th>Humidity</th>
            <td>[% weather_data.main.humidity %]%</td>
        </tr>
        <tr>
            <th>Sunrise</th>
            <td>[% date.format(weather_data.sys.sunrise, '%H:%M') %]Z</td>
        </tr>
        <tr>
            <th>Sunset</th>
            <td>[% date.format(weather_data.sys.sunset, '%H:%M') %]Z</td>
        </tr>
    </table>

    <div class="alert alert-success">Forecast:</div>
    <table id="forecast" class="table table-condensed">
        <tr>
            <th>Date/Time</th>
            <th id="forecast-summary" colspan="2">Summary</th>
            <th>Temperature</th>
            <th>Wind speed</th>
        </tr>
        [% FOREACH entry IN forecast_data.list; # DataPrinter.dump_html(entry);
            weather_icon = entry.weather.0.icon; # eg 01d, 04n, etc; (d)ay, (n)ight
        %]
          <tr>
            <td class="[% weather_icon.match('d') ? 'day' : 'night' %]">
                [% date.format(entry.dt_txt, '%a %d %b %Y %l%P')
                    .replace('12am','midnight')
                    .replace('12pm','midday')
                %]
            </td>
            <td>
                <img src="//openweathermap.org/img/wn/[% weather_icon %]@2x.png"
                    width="40" />
            </td>
            <td>[% entry.weather.0.description %]</td>
            [%
                min_temp = entry.main.temp_min | format('%.1f');
				max_temp = entry.main.temp_max | format('%.1f');
                avg_temp = entry.main.temp | format('%.1f');

                class = min_temp < 1 OR entry.main.temp < 1
                    ? 'cold' : 'normal';
            %]
            <td>
                <span class="[% class %]">
                [%  IF min_temp != max_temp; min_temp; ' - '; max_temp;
                    ELSE; avg_temp; END -%]<sup>o</sup>C</span>
			</td>
            <td>
                <!-- [% entry.wind.deg | format("%.0f") %]<sup>o</sup> @ -->
                [% entry.wind.speed * 2.23694 | format("%.0f") -%]
                [%- IF entry.wind.gust; 'G';
                    entry.wind.gust * 2.23694 | format("%.0f") %]
                [% END %] mph
            </td>
          </tr>
        [% END %]
    </table>
   [% END %]
</body>
</html>