yippie-io/iUPB

<% title t("layouts.application.weather") %>
<% content_for :header do %>
<h1><%= t ".current_weather" %></h1>
<% end %>
<h4 id="wait-message"><%= t 'please_wait' %></h4>
<ul id="weather-data" class="hidden nav nav-tabs nav-stacked">
    <li><h4><%= t ".current_temperature" %>: <span data-weather-binding="temp"></span>° C</h4></li>
    <li><h4><%= t ".min" %>.  <%= t ".temperature" %> <%= t ".today" %>: <span data-weather-binding="tempmin"></span>° C</h4></li>
    <li><h4><%= t ".max" %>. <%= t ".temperature" %> <%= t ".today" %>: <span data-weather-binding="tempmax"></span>° C</h4></li>
    <li><h4><%= t ".sunrise" %>: <span data-weather-binding="sonnenaufgang"></span></h4></li>
    <li><h4><%= t ".sunset" %>: <span data-weather-binding="sonnenuntergang"></span></h4></li>
    <% if @forecast_temp && @forecast_text %>
        <li><h4><%= t ".forecast" %>: <%= number_with_delimiter @forecast_temp %>° C / <%= @forecast_text %></h4></li>
    <% end %>
</ul>
<div id="meteogram" class="only-smartphone-landscape">
  <img src="http://www.yr.no/place/Germany/North_Rhine-Westphalia/Paderborn/meteogram.png" width="816" height="260">
</div>
<p class="source-info">
    <%= t ".current_data" %>: <a target="_blank" href="http://wetter.uni-paderborn.de/">Wetterstation Uni Paderborn</a>. <%= t ".forecast" %>:&nbsp;<a target="_blank" href="http://www.wetter.com/">wetter.com</a>, <a href="http://www.yr.no/place/Germany/North_Rhine-Westphalia/Paderborn/hour_by_hour.html" target="_blank">yr.no</a>.
</p>
<% content_for :javascript do %>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: "https://upbapi.cloudcontrolled.com/wetter.php?callback=?",
                dataType: "jsonp",
                type: "GET",
                jsonp: true,
                cache: true,
                jsonpCallback: "success",
                success: function(data){
                    var $data_list = $('#weather-data');
                    $.each(data, function(key, value){
                        var $span = $data_list.find('span[data-weather-binding="' + key + '"]').first();
                        if($span)
                        {
                            if(key === 'temp' || key === 'tempmin' || key === 'tempmax' )
                                value = Math.round(value, 0);
                            $span.text(value);
                        }
                    });
                    $('#wait-message').hide();
                    $data_list.removeClass('hidden');
                }
            });
        });
    </script>
<% end %>

<style>
@media (min-width: 321px) and (max-height: 321px) {
  #menu_collapse_link {
    display:none;
  }
}
</style>