001package gwt.material.design.client.ui;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023//@formatter:off
024
025import com.google.gwt.user.client.ui.HTML;
026
027/**
028 * Material Weather - used OpenWeatherAPI to get results about location based  weather
029 *
030 * <p>
031 * <h3>UiBinder Usage:</h3>
032 * <pre>
033 * {@code
034 *     <m:MaterialWeather location="Makati, Philippines" />
035 * }
036 * </pre>
037 * </p>
038 *
039 * @author kevzlou7979
040 * @author Ben Dol
041 * @author paulux84
042 */
043//@formatter:on
044public class MaterialWeather extends MaterialPanel {
045
046    public MaterialWeather() {
047        super();
048        HTML html = new HTML("<div id='weatherPanel' class='center-align card white-text'> <div class='row'> <ul id='weatherPanel' > <div class='col s12 m12 l6'> <li style='opacity: 0;'> <h5 >0</h5> <p style='margin-top: -5px; font-weight: 100;text-transform: capitalize;'>0</p> </li> <li style='opacity: 0;'> <div class='row'> <div class='col s12 m4 l4'> <img style='margin-top: 20px;'> </div> <div class='col s12 m8 l8'> <h2 style='font-weight: 100;'>0</h2> </div> </div> </li> </div> <div class='col s12 m12 l6'> <li style='opacity: 0;'> <h5>0</h5> <p style='margin-top: -5px; font-weight: 100;'>0</p> </li> <div class='left-align'> <li style='opacity: 0;'> <span><i > </i>0</span><br> </li> <li style='opacity: 0;'> <span><i class='mdi-device-wifi-tethering'> </i>3.9  mph</span><br> </li> <li style='opacity: 0;'> <span><i class='mdi-av-timer'></i>0  hPa</span> </li> </div> </div> </ul> </div> </div>");
049        this.getElement().appendChild(html.getElement());
050    }
051
052    private String location;
053    private String color;
054    private String name;
055
056    @Override
057    protected void onLoad() {
058        super.onLoad();
059
060        this.name = "weatherContainer";
061        this.addStyleName(name);
062        this.getElement().setId("weatherContainer");
063        showWeather(location, name, color);
064    }
065
066    public String getLocation() {
067        return location;
068    }
069
070    public void setLocation(String location) {
071        this.location = location;
072        showWeather(location, name, color);
073    }
074
075    public String getColor() {
076        return color;
077    }
078
079    public void setColor(String color) {
080        this.color = color;
081    }
082
083    public static native void showWeather(String location, String div, String color)/*-{
084        $wnd.jQuery.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + location + "&APPID=53455a3a8a8a46135396f0272314f49d", function( data ) {
085
086            var items = [];
087            var location = data.sys.country + ", " + data.name;
088            var icon = "http://gwt-material.appspot.com/bin/weather/" +data.weather[0].icon + ".png";
089            var temp = Math.round((data.main.temp - 273.15)* 10 ) / 10;
090
091            var main = data.weather[0].main;
092            var desc = data.weather[0].description;
093            var humidity = data.main.humidity;
094            var pressure = data.main.pressure;
095            var wind =  data.wind.speed;
096            var d = new Date();
097            var weekday = new Array(7);
098            weekday[0]=  "Sunday";
099            weekday[1] = "Monday";
100            weekday[2] = "Tuesday";
101            weekday[3] = "Wednesday";
102            weekday[4] = "Thursday";
103            weekday[5] = "Friday";
104            weekday[6] = "Saturday";
105
106            var today = weekday[d.getDay()];
107
108            items.push("<div id='weatherPanel' class='center-align card white-text "+color+"'> <div class='row'> <ul id='weatherPanel' > <div class='col s12 m12 l6'> <li style='opacity: 0;'> <h5 >"+main+"</h5> <p style='margin-top: -5px; font-weight: 100;text-transform: capitalize;'>"+desc+"</p> </li> <li style='opacity: 0;'> <div class='row'> <div class='col s12 m4 l4'> <img src='"+icon+"' style='margin-top: 20px;'> </div> <div class='col s12 m8 l8'> <h2 style='font-weight: 100;'>"+temp+"</h2> </div> </div> </li> </div> <div class='col s12 m12 l6'> <li style='opacity: 0;'> <h5>"+location+"</h5> <p style='margin-top: -5px; font-weight: 100;'>"+today+"</p> </li> <div class='left-align'> <li style='opacity: 0;'> <span><i class='material-icons left' style='font-size: medium;'>invert_colors</i> "+humidity+"%</span><br> </li> <li style='opacity: 0;'> <span><i class='material-icons left' style='font-size: medium;'>wifi_tethering</i>"+wind+" mph</span><br> </li> <li style='opacity: 0;'> <span><i class='material-icons left' style='font-size: medium;'>av_timer</i>"+pressure+"  hPa</span> </li> </div> </div> </ul> </div> </div>");
109            $wnd.document.getElementById('weatherContainer').innerHTML = '';
110            $wnd.jQuery( "<ul/>", { "class": "my-new-list",  html: items.join( "" ) }).appendTo( "." + div );
111
112            $wnd.Materialize.showStaggeredList('#weatherPanel');
113        });
114    }-*/;
115}