Difference between revisions of "Página de pruebas 3"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
Line 231: | Line 231: | ||
return json.quotes.USDEUR as string; | 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; | ||
+ | |||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 21:24, 10 December 2019
import React from 'react';
import WeatherIcon from '../components/WeatherIcon';
import {platform} from 'onsenui';
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;