urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-18 15:55:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

weather: colors change based on weather

Browse Source
This commit is contained in:
Matilde Park 2020-02-18 21:22:19 -05:00
parent 5b1c3f3cca
commit 069df98edd
2 changed files with 119 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/weather/js/tile.js
View File

File diff suppressed because one or more lines are too long

156
pkg/interface/weather/tile/tile.js
View File

@ -2,31 +2,15 @@ import React, { Component } from 'react';
import classnames from 'classnames';
import moment from 'moment';
class IconWithData extends Component {
render() {
const { props } = this;
return (
<div className='mt2'>
<p className="f9 white">{props.text}</p>
</div>
);
}
}
export default class WeatherTile extends Component {
constructor(props) {
super(props);
let ship = window.ship;
let api = window.api;
this.state = {
latlng: '',
manualEntry: false,
error: false
};
let api = window.api;
}
locationSubmit() {
@ -62,18 +46,22 @@ export default class WeatherTile extends Component {
keyPress(e) {
if (e.keyCode === 13) {
e.preventDefault();
this.manualLocationSubmit(e.target.value);
}
}
renderWrapper(child) {
renderWrapper(child,
weatherStyle = { gradient1: "white", gradient2: "white", text: "black" }
) {
return (
<div
className="pa2 relative bg-white b--black ba"
className={"relative b--black ba " + weatherStyle.text}
style={{
width: 126,
height: 126,
background: `linear-gradient(135deg, ${weatherStyle.gradient1} 0%,` +
`${weatherStyle.gradient2} 45%, ${weatherStyle.gradient2} 65%,` +
`${weatherStyle.gradient1} 100%)`
}}>
{child}
</div>
@ -95,7 +83,7 @@ export default class WeatherTile extends Component {
onClick={() => this.locationSubmit()}>Detect -></a>
}
return this.renderWrapper(
<div>
<div className="pa2 w-100 h-100 bg-white black">
<a
className="f9 black pointer"
onClick={() =>
@ -104,10 +92,10 @@ export default class WeatherTile extends Component {
&lt;&#45;
</a>
{secureCheck}
<p className="f9 black pt2">
<p className="f9 pt2">
Please enter your{" "}
<a
className="white"
className="black"
href="https://latitudeandlongitude.org/"
target="_blank">
latitude and longitude
@ -122,12 +110,17 @@ export default class WeatherTile extends Component {
className="w-100 black bg-transparent bn f9"
type="text"
placeholder="29.558107, -95.089023"
onKeyDown={this.keyPress.bind(this)}></input>
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
this.manualLocationSubmit(e.target.value);
}}
}/>
<input
className="bg-transparent black bn pointer f9 flex-shrink-0"
type="submit"
onClick={() => this.manualLocationSubmit()}
value="->"></input>
value="->"/>
</form>
</div>
</div>
@ -136,29 +129,32 @@ export default class WeatherTile extends Component {
renderNoData() {
return this.renderWrapper((
<div onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
<p className="black f9 absolute"
<div
className="pa2 bg-white black"
onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
<p className="f9 absolute"
style={{left: 8, top: 8}}>
Weather
</p>
<p className="absolute w-100 flex-col f9 black" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
<p className="absolute w-100 flex-col f9" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
</div>
));
}
renderWithData(data) {
renderWithData(data, weatherClasses) {
let c = data.currently;
let d = data.daily.data[0];
let da = moment.unix(d.sunsetTime).format('h:mm a') || '';
return this.renderWrapper(
<div>
<p className="black f9 absolute" style={{ left: 8, top: 8 }}>
<div className="w-100 h-100"
style={{backdropFilter: "blur(35px)"}}>
<p className="f9 absolute" style={{ left: 8, top: 8 }}>
Weather
</p>
<a
className="black f9 absolute pointer"
className="f9 absolute pointer"
style={{ right: 8, top: 8 }}
onClick={() =>
this.setState({ manualEntry: !this.state.manualEntry })
@ -166,12 +162,12 @@ export default class WeatherTile extends Component {
->
</a>
<div className="w-100 absolute" style={{ left: 8, bottom: 8 }}>
<p className="f9 black">{c.summary}</p>
<p className="f9 pt1 black">{Math.round(c.temperature)}°</p>
<p className="f9 pt1 black">Sunset at {da}</p>
<p className="f9">{c.summary}</p>
<p className="f9 pt1">{Math.round(c.temperature)}°</p>
<p className="f9 pt1">Sunset at {da}</p>
</div>
</div>
);
, weatherClasses);
}
render() {
@ -182,7 +178,91 @@ export default class WeatherTile extends Component {
}
if ('currently' in data && 'daily' in data) {
return this.renderWithData(data);
let weatherStyle = {
gradient1: "",
gradient2: "",
text: ""
};
switch(data.daily.icon) {
case "clear-day":
weatherStyle = {
gradient1: "#A5CEF0",
gradient2: "#FEF4E0",
text: "black"
}
break;
case "clear-night":
weatherStyle = {
gradient1: "#56668e",
gradient2: "#000080",
text: "white"
}
break;
case "rain":
weatherStyle = {
gradient1: "#b1b2b3",
gradient2: "#b0c7ff",
text: "black"
};
break;
case "snow":
weatherStyle = {
gradient1: "#eee",
gradient2: "#f9f9f9",
text: "black"
};
break;
case "sleet":
weatherStyle = {
gradient1: "#eee",
gradient2: "#f9f9f9",
text: "black"
};
break;
case "wind":
weatherStyle = {
gradient1: "#eee",
gradient2: "#fff",
text: "black"
};
break;
case "fog":
weatherStyle = {
gradient1: "#eee",
gradient2: "#fff",
text: "black"
};
break;
case "cloudy":
weatherStyle = {
gradient1: "#eee",
gradient2: "#b1b2b3",
text: "black"
};
break;
case "partly-cloudy-day":
weatherStyle = {
gradient1: "#fcc440",
gradient2: "#b1b2b3",
text: "black"
};
break;
case "partly-cloudy-night":
weatherStyle = {
gradient1: "#7f7f7f",
gradient2: "#56668e",
text: "white"
};
break;
default:
weatherStyle = {
gradient1: "white",
gradient2: "white",
text: "black"
};
}
return this.renderWithData(data, weatherStyle);
}
return this.renderNoData();