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}