001/*
002 * #%L
003 * GwtMaterial
004 * %%
005 * Copyright (C) 2015 - 2017 GwtMaterialDesign
006 * %%
007 * Licensed under the Apache License, Version 2.0 (the "License");
008 * you may not use this file except in compliance with the License.
009 * You may obtain a copy of the License at
010 * 
011 *      http://www.apache.org/licenses/LICENSE-2.0
012 * 
013 * Unless required by applicable law or agreed to in writing, software
014 * distributed under the License is distributed on an "AS IS" BASIS,
015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
016 * See the License for the specific language governing permissions and
017 * limitations under the License.
018 * #L%
019 */
020package gwt.material.design.client.ui;
021
022//@formatter:off
023
024import com.google.gwt.user.client.DOM;
025import com.google.gwt.user.client.ui.HTML;
026import gwt.material.design.client.base.AbstractValueWidget;
027
028/**
029 * Material Weather - used OpenWeatherAPI to get results about location based  weather
030 * <p>
031 * <p>
032 * <h3>UiBinder Usage:</h3>
033 * <pre>
034 * {@code
035 *     <m:MaterialWeather location="Makati, Philippines" />
036 * }
037 * </pre>
038 * </p>
039 *
040 * @author kevzlou7979
041 * @author Ben Dol
042 * @author paulux84
043 *
044 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#media">Material Weather</a>
045 */
046//@formatter:on
047public class MaterialWeather extends AbstractValueWidget<String> {
048
049    public MaterialWeather() {
050        super(DOM.createElement("<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>"));
051    }
052
053    private String location;
054    private String color;
055    private String name;
056
057    @Override
058    protected void onLoad() {
059        super.onLoad();
060
061        name = "weatherContainer";
062        addStyleName(name);
063        getElement().setId("weatherContainer");
064        showWeather(location, name, color);
065    }
066
067    public String getLocation() {
068        return getValue();
069    }
070
071    public void setLocation(String location) {
072        setValue(location, true);
073    }
074
075    @Override
076    public void setValue(String value, boolean fireEvents) {
077        this.location = location;
078        showWeather(location, name, color);
079        super.setValue(value, fireEvents);
080    }
081
082    @Override
083    public String getValue() {
084        return location;
085    }
086
087    public String getColor() {
088        return color;
089    }
090
091    public void setColor(String color) {
092        this.color = color;
093    }
094
095    public static native void showWeather(String location, String div, String color)/*-{
096        $wnd.jQuery.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + location + "&APPID=53455a3a8a8a46135396f0272314f49d", function (data) {
097            var items = [];
098            var location = data.sys.country + ", " + data.name;
099            var icon = "http://gwt-material.appspot.com/bin/weather/" + data.weather[0].icon + ".png";
100            var temp = Math.round((data.main.temp - 273.15) * 10) / 10;
101
102            var main = data.weather[0].main;
103            var desc = data.weather[0].description;
104            var humidity = data.main.humidity;
105            var pressure = data.main.pressure;
106            var wind = data.wind.speed;
107            var d = new Date();
108            var weekday = new Array(7);
109            weekday[0] = "Sunday";
110            weekday[1] = "Monday";
111            weekday[2] = "Tuesday";
112            weekday[3] = "Wednesday";
113            weekday[4] = "Thursday";
114            weekday[5] = "Friday";
115            weekday[6] = "Saturday";
116
117            var today = weekday[d.getDay()];
118
119            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>");
120            $wnd.document.getElementById('weatherContainer').innerHTML = '';
121            $wnd.jQuery("<ul/>", {"class": "my-new-list", html: items.join("")}).appendTo("." + div);
122
123            $wnd.Materialize.showStaggeredList('#weatherPanel');
124        });
125    }-*/;
126}