Difference between revisions of "Página de pruebas 3"
Adelo Vieira (talk | contribs) (→CA - Network design for high availability) (Tag: Blanking) |
Adelo Vieira (talk | contribs) |
||
Line 1: | Line 1: | ||
+ | <syntaxhighlight lang="ts"> | ||
+ | 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; | ||
+ | } | ||
+ | </syntaxhighlight> |
Revision as of 14:31, 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;
}