Aufklappbare Details

This commit is contained in:
Robin Kloppe 2014-06-16 09:42:06 +02:00
parent 133633aa04
commit f558c46fc7
3 changed files with 49 additions and 7 deletions

View file

@ -13,6 +13,12 @@ Erstelle einen Cronjob:
Beispiel:
*/10 * * * * wget -N --quiet --output-document=/var/www/customers/cust123/html/bike/api.json http://api.wunderground.com/api/abc1234def/forecast10day/q/DE/Leipzig.json
Die Datei api.json und index.php müssen im gleichen Verzeichnis liegen und vom Webserver lesbar sein. Zudem muss api.json durch den Nutzer des Cronjobs beschreibbar sein.
Screenshot
==========
![Alt text](mainboarder.github.com/Fahrradwetter/screenshot.png)
Lizenz
=======

View file

@ -2,8 +2,14 @@
<html lang="de-DE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fahrradwetter</title>
<link rel="stylesheet" type="text/css" media="all" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1,minimum-scale=1,width=device-width" />
<style>
.toggle_container{display:none;}
h2{margin-top:15%;}
</style>
</head>
<body>
<?php
@ -96,22 +102,52 @@ function makeTable($array, $schluessel, $stringVor = NULL,
$string .= '</td>';
}
return '<tr>' . $string . '</tr>';
return '
<tr>' . $string . '</tr>
';
}
$wetter = getWeather();
echo '<div class="container"><h2 class="text-center"><a href="/">Fahrradwetter in '. STADT .'?</a> - '.$wetter[0]['rad'].'.</h2><br /><table class="table table-striped">';
echo '<div class="container">
<h2 class="text-center trigger"><a href="#">Fahrradwetter in '. STADT .'?</a> - '.$wetter[0]['rad'].'.</h2>
<div class="toggle_container">
<table class="table table-striped">';
echo makeTable($wetter, 'day');
echo makeTable($wetter, 'icon', '<img src="', '" alt="" />');
echo makeTable($wetter, 'rain', NULL, '%', 'Regenwahrscheinlichkeit&nbsp;&nbsp;&nbsp;');
echo makeTable($wetter, 'rain', NULL, '%', 'Regenwahrscheinlichkeit');
echo makeTable($wetter, 'tempHi', NULL, '°C', 'Höchsttemperatur');
echo makeTable($wetter, 'rad', NULL, NULL, 'Fahrradwetter');
echo '</table>';
echo '
</table>';
?>
<p><br /></p></div><div class="text-center bg-info"><p><small>Daten via <a href="http://www.wunderground.com/?apiref=5493fcc3357cb244">Wunderground</a>, alle 10 Minuten neu abgerufen.</small></p>
<p><br /></p>
<div class="text-center bg-info"><p><small>Daten via <a href="http://www.wunderground.com/?apiref=5493fcc3357cb244">Wunderground</a>, alle 10 Minuten neu abgerufen.</small></p>
<p>Fahrradwetter hat eine Regenwahrscheinlichkeit unter 40% und Temperaturen zwischen 15 und 24°C.</p>
<h6>Immer trocken unterwegs mit <a href="http://mainboarder.de">Mainboarder</a> | Code auf <a href="https://github.com/mainboarder/Fahrradwetter">Github</a></h6>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
var trig = $(this);
if ( trig.hasClass('trigger_active') ) {
trig.next('.toggle_container').slideToggle('slow');
trig.removeClass('trigger_active');
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
trig.next('.toggle_container').slideToggle('slow');
trig.addClass('trigger_active');
};
return false;
});
});
</script>
</body>
</html>

BIN
screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB