|
|
| Line 2: |
Line 2: |
| | import React from 'react'; | | import React from 'react'; |
| | | | |
| − | import WeatherIcon from '../components/WeatherIcon';
| + | const WeatherIcon = ({icon, className, ...props}) => ( |
| − | import {platform} from 'onsenui';
| + | <i {...props} className={`wi wi-owm-${icon} ${className || ''}`} /> |
| − | | |
| − | import {
| |
| − | Page,
| |
| − | ProgressCircular
| |
| − | } from 'react-onsenui';
| |
| − | | |
| − | import {
| |
| − | IonButtons,
| |
| − | IonCard,
| |
| − | IonCardContent,
| |
| − | IonCardHeader,
| |
| − | IonCardSubtitle,
| |
| − | IonCardTitle,
| |
| − | IonContent,
| |
| − | IonHeader,
| |
| − | IonIcon,
| |
| − | IonItem,
| |
| − | IonLabel,
| |
| − | IonList,
| |
| − | IonListHeader,
| |
| − | IonMenuButton,
| |
| − | IonPage,
| |
| − | IonTitle,
| |
| − | IonToolbar
| |
| − | } from '@ionic/react';
| |
| − | | |
| − | | |
| − | const name: React.CSSProperties = {
| |
| − | textTransform: 'uppercase',
| |
| − | fontSize: '24px',
| |
| − | lineHeight: '24px'
| |
| − | }
| |
| − | | |
| − | const styles = {
| |
| − | main: {
| |
| − | fontFamily: platform.isIOS() ? 'Lato' : null,
| |
| − | textAlign: 'center',
| |
| − | color: '#4a4a4a',
| |
| − | width: '100%',
| |
| − | marginTop: '30px'
| |
| − | } as React.CSSProperties,
| |
| − | invalid: {
| |
| − | color: 'red',
| |
| − | fontSize: '20px'
| |
| − | } as React.CSSProperties,
| |
| − | progress: {
| |
| − | width: '50px',
| |
| − | height: '50px'
| |
| − | } as React.CSSProperties,
| |
| − | name: {
| |
| − | textTransform: 'uppercase',
| |
| − | fontSize: '24px',
| |
| − | lineHeight: '24px'
| |
| − | } as React.CSSProperties,
| |
| − | country: {
| |
| − | margin: '2px 0 0 0',
| |
| − | textTransform: 'uppercase',
| |
| − | fontSize: '12px',
| |
| − | lineHeight: '12px'
| |
| − | } as React.CSSProperties,
| |
| − | icon: {
| |
| − | fontSize: '100px',
| |
| − | margin: '20px 0 0px 0'
| |
| − | } as React.CSSProperties,
| |
| − | data: {
| |
| − | fontSize: '40px',
| |
| − | fontWeight: 300,
| |
| − | display: 'flex',
| |
| − | margin: '40px 25px'
| |
| − | } as React.CSSProperties,
| |
| − | dataColumn: {
| |
| − | flexGrow: 1,
| |
| − | display: 'flex',
| |
| − | flexDirection: 'column'
| |
| − | } as React.CSSProperties,
| |
| − | dataValue: {
| |
| − | fontSize: '60px'
| |
| − | } as React.CSSProperties,
| |
| − | dataCaption: {
| |
| − | fontSize: '14px',
| |
| − | fontWeight: 400
| |
| − | } as React.CSSProperties
| |
| − | };
| |
| − | | |
| − | | |
| − | interface Home2Props{
| |
| − | | |
| − | }
| |
| − | | |
| − | interface Home2State{
| |
| − | result: any;
| |
| − | num1: string;
| |
| − | num2: string
| |
| − | }
| |
| − | | |
| − | export default class Home2 extends React.Component<Home2Props, Home2State> {
| |
| − | public constructor(props: Home2Props){
| |
| − | super(props)
| |
| − | this.state = {
| |
| − | result: "",
| |
| − | num1: "",
| |
| − | num2: ""
| |
| − | };
| |
| − | }
| |
| − | public render(){
| |
| − | return (
| |
| − | <IonPage>
| |
| − | <IonHeader>
| |
| − | <IonToolbar>
| |
| − | <IonButtons slot="start">
| |
| − | <IonMenuButton />
| |
| − | </IonButtons>
| |
| − | <IonTitle>Home1</IonTitle>
| |
| − | </IonToolbar>
| |
| − | </IonHeader>
| |
| − | <IonContent>
| |
| − | <IonCard className="welcome-card">
| |
| − | <img src="https://www.fodors.com/wp-content/uploads/2018/10/HERO_UltimateParis_Heroshutterstock_112137761.jpg" alt=""/>
| |
| − | <IonCardHeader>
| |
| − | <IonCardTitle>Paris</IonCardTitle>
| |
| − | <IonCardSubtitle>France</IonCardSubtitle>
| |
| − | </IonCardHeader>
| |
| − | <IonCardContent>
| |
| − | <div>
| |
| − | <input
| |
| − | type="string"
| |
| − | value={this.state.num1}
| |
| − | onChange={e => this._onTodoChangeInput1(e.target.value)}
| |
| − | />
| |
| − | <input
| |
| − | type="string"
| |
| − | value={this.state.num2}
| |
| − | onChange={e => this._onTodoChangeInput2(e.target.value)}
| |
| − | />
| |
| − | <button onClick={() => this._add()}>Add</button>
| |
| − | <div> {this.state.result} </div>
| |
| − | <Page>
| |
| − | <div style={styles.main}>
| |
| − | <div style={styles.name}>
| |
| − | Name
| |
| − | {/* {name} */}
| |
| − | </div>
| |
| − | | |
| − | <div style={styles.country}>
| |
| − | NAME
| |
| − | {/* {countries[country.toUpperCase()].name} */}
| |
| − | </div>
| |
| − | | |
| − | <div style={{...styles.icon}}>
| |
| − | <i className="wi wi-owm-540" />
| |
| − | {/* <WeatherIcon icon={"540"} className="" /> */}
| |
| − | </div>
| |
| − | {/* <div style={{...styles.icon, color: weatherColor}}>
| |
| − | <WeatherIcon icon={icon} />
| |
| − | </div> */}
| |
| − | | |
| − | <div style={styles.data}>
| |
| − | <div style={styles.dataColumn}>
| |
| − | <div style={styles.dataValue}>
| |
| − | Temperature
| |
| − | {/* {temperature}° */}
| |
| − | </div>
| |
| − | <div style={styles.dataCaption}>
| |
| − | TEMPERATURE
| |
| − | </div>
| |
| − | </div>
| |
| − | <div style={styles.dataColumn}>
| |
| − | <div style={styles.dataValue}>
| |
| − | Humidity
| |
| − | {/* {humidity}% */}
| |
| − | </div>
| |
| − | <div style={styles.dataCaption}>
| |
| − | HUMIDITY
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | {/* <Forecast days={forecast} /> */}
| |
| − | </div>
| |
| − | </Page>
| |
| − | </div>
| |
| − | </IonCardContent>
| |
| − | </IonCard>
| |
| − |
| |
| − | <IonList lines="none">
| |
| − | </IonList>
| |
| − | </IonContent>
| |
| − | </IonPage>
| |
| − | );
| |
| − | }
| |
| − | private _add(){
| |
| − | // The "+" before the variable conver is to convert from string to number
| |
| − | const resultado = +this.state.num1 + +this.state.num2;
| |
| − | // this.setState({result: resultado.toString()})
| |
| − | (async () => {
| |
| − | const data = await getData();
| |
| − | this.setState({result: data})
| |
| − | })();
| |
| − | }
| |
| − | private _onTodoChangeInput1(value: string){
| |
| − | this.setState({
| |
| − | num1: value
| |
| − | });
| |
| − | }
| |
| − | private _onTodoChangeInput2(value: string){
| |
| − | this.setState({
| |
| − | num2: value
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − | | |
| − | async function getData(){
| |
| − | const response = await fetch("http://www.apilayer.net/api/live?access_key=cb51ac5d62bd1e6713b4b6c6e015d6b6");
| |
| − | const json = await response.json();
| |
| − | console.log("hola!")
| |
| − | console.log(json.quotes.USDEUR)
| |
| − | return json.quotes.USDEUR as string;
| |
| − | }
| |
| − | | |
| − | async function getWeather(city: string){
| |
| − | const API_KEY = '5a043a1bd95bf3ee500eb89de107b41e';
| |
| − | const API_URL = 'http://api.openweathermap.org/data/2.5';
| |
| − | const url = 'http://api.openweathermap.org/data/2.5/weather?q=dublin&appid=5a043a1bd95bf3ee500eb89de107b41e';
| |
| − | const response = await fetch(`${API_URL}/weather?q=${city.trim()}&appid=${API_KEY}`);
| |
| − | const json = await response.json();
| |
| − | console.log(json.quotes.USDEUR)
| |
| − | return json.quotes.USDEUR as string;
| |
| − | }
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | import React from 'react';
| |
| − | import { Redirect, Route } from 'react-router-dom';
| |
| − | import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
| |
| − | import { IonReactRouter } from '@ionic/react-router';
| |
| − | import { AppPage } from './declarations';
| |
| − | | |
| − | import Menu from './components/Menu';
| |
| − | import Home from './pages/Home';
| |
| − | import Home2 from './pages/Home2';
| |
| − | import List from './pages/List';
| |
| − | import { home, list } from 'ionicons/icons';
| |
| − | | |
| − | /* Core CSS required for Ionic components to work properly */
| |
| − | import '@ionic/react/css/core.css';
| |
| − | | |
| − | /* Basic CSS for apps built with Ionic */
| |
| − | import '@ionic/react/css/normalize.css';
| |
| − | import '@ionic/react/css/structure.css';
| |
| − | import '@ionic/react/css/typography.css';
| |
| − | | |
| − | /* Optional CSS utils that can be commented out */
| |
| − | import '@ionic/react/css/padding.css';
| |
| − | import '@ionic/react/css/float-elements.css';
| |
| − | import '@ionic/react/css/text-alignment.css';
| |
| − | import '@ionic/react/css/text-transformation.css';
| |
| − | import '@ionic/react/css/flex-utils.css';
| |
| − | import '@ionic/react/css/display.css';
| |
| − | | |
| − | /* Theme variables */
| |
| − | import './theme/variables.css';
| |
| − | | |
| − | const appPages: AppPage[] = [
| |
| − | {
| |
| − | title: 'Home',
| |
| − | url: '/home',
| |
| − | icon: home
| |
| − | },
| |
| − | {
| |
| − | title: 'List',
| |
| − | url: '/home/list',
| |
| − | icon: list
| |
| − | },
| |
| − | {
| |
| − | title: 'Home2',
| |
| − | url: '/home/home2',
| |
| − | icon: list
| |
| − | }
| |
| − | ];
| |
| − | | |
| − | const App: React.FC = () => (
| |
| − | <IonApp>
| |
| − | <IonReactRouter>
| |
| − | <IonSplitPane contentId="main">
| |
| − | <Menu appPages={appPages} />
| |
| − | <IonRouterOutlet id="main">
| |
| − | <Route path="/home" component={Home} exact={true} />
| |
| − | <Route path="/home/home2" component={Home2} exact={true} />
| |
| − | <Route path="/home/list" component={List} exact={true} />
| |
| − | <Route path="/" render={() => <Redirect to="/home"/> } exact={true} />
| |
| − | </IonRouterOutlet>
| |
| − | </IonSplitPane>
| |
| − | </IonReactRouter>
| |
| − | </IonApp>
| |
| | ); | | ); |
| | | | |
| − | export default App; | + | export default WeatherIcon; |
| − | | |
| | </syntaxhighlight> | | </syntaxhighlight> |
