1. WeatherApp.git
  2. metar.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: 800px; }
        #weather th { text-align: right; }
        /* 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(params);
        metar = data; # DataPrinter.dump_html(metar);
    %]

    [% # DataPrinter.dump_html(request.uri) %]
    <h2>
		[% metar.station.name %] observation
		[% date.manip.UnixDate(metar.observed,"%d-%b-%Y @ %H:%M") %]
        <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="ICAO, city, city/country, etc" />
        <input class="btn btn-primary" type="submit" name="wx" value="Wx">
        <input class="btn btn-primary" type="submit" name=".metar" value="METAR">
      </form>
    </h4>

    [% IF metar.error %]
        <p class="alert alert-warning">ERROR: [% metar.error %]
            [[% params.city.ucfirst %], [% params.country.upper %]]
        </p>
    [% ELSE %]
    <div class="alert alert-success">[% metar.raw_text %]
		<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(metar) %]
        </div>
    </div>

    <table id="weather" class="main table table-condensed">
        <tr>
           <th>Temperature</th>
            <td>[% metar.temperature.celsius %]<sup>o</sup>C</td>
 	      <td rowspan="9">
			[% location = params.location %]
			<div style="margin-left: 50px">
			  <a href="https://metar-taf.com/[% location %]" id="metartaf-CfF99Ppe" 
				style="font-size:18px; font-weight:500; color:#000; 
					width:250px; height:380px; display:block">METAR [% location %]</a>
			  <script async defer crossorigin="anonymous" 
				src="https://metar-taf.com/embed-js/[% location %]?target=CfF99Ppe">
			  </script>
			</div>
	      </td>
        </tr>
        <tr>
            <th>Dew point</th>
            <td>[% metar.dewpoint.celsius %]<sup>o</sup>C</td>
        </tr>
        <tr>
            <th>Wind speed</th>
            <td>[% IF metar.wind; metar.wind.degrees %]<sup>o</sup>
                @ [% metar.wind.speed_mph %] mph
				[% ELSE %]Calm[% END %]
            </td>
        </tr>
        <tr>
            <th>Pressure</th>
            <td>[% metar.barometer.hpa %] hPa
				[[% metar.barometer.hg %] mm]</td>
        </tr>
        <tr>
            <th>Cloud cover</th>
            <td>
				[% FOREACH layer IN metar.clouds; IF layer.feet %]
					<div>[% layer.code; ' @ '; layer.feet %] ft</div>
					[% ELSE; layer.text; END %]
				[% END %]
			</td>
        </tr>
        <tr>
            <th>Conditions</th>
            <td>
				[% IF metar.conditions; 
					FOREACH entry IN metar.conditions %]
						<div>[% entry.text %]</div>[% END %]
				[% ELSE; 'NOSIG'; END %]
			</td>
        </tr>
        <tr>
            <th>Visibility</th>
            <td>[% IF metar.visibility.meters_float >= 9999;
				metar.visibility.miles %] miles [% ELSE; 
				metar.visibility.meters %] mtr[% END %]
			</td>
        </tr>
        <tr>
            <th>Humidity</th>
            <td>[% metar.humidity.percent %]%</td>
        </tr>
        <tr>
            <th>Field elevation	</th>
            <td>[% metar.elevation.feet %] ft</td>
        </tr>
    </table>

   [% END %]
</body>
</html>