constructor() {
super();
this.state = {
menuIsOpen: false,
status: {state: 'fetching', msg: undefined},
title: "Welcome to our digital Vernisage",
intro: "Content is loading",
baseurl: null,
entries: [],
navigation: {
pushPage: this.pushPage.bind(this),
popPage: this.popPage.bind(this),
openMenu: this.open.bind(this),
displayError: this.displayError.bind(this),
},
currentPage: "overview",
language: {
fallback: 'de',
possible: ['de', 'en'],
onChange: this.onLanguageChange.bind(this)
},
refresh: this.loadData.bind(this)
};
if(typeof(Storage) !== "undefined") {
if(localStorage.language) {
this.state.language.inUse = localStorage.language;
console.log("Use stored language: " + localStorage.language);
return;
}
}
if(!this.state.language.inUse && typeof(navigator.language) !== "undefined") {
this.state.language.inUse = navigator.language.split("-")[0].split("_")[0];
console.log("Use navigator.language");
console.log("Language is: " + this.state.language.inUse);
} else {
this.state.language.inUse = this.state.language.fallback;
console.log("Use fallback");
console.log("Language is: " + this.state.language.inUse);
}
if (ons.platform.isIPhoneX()) { // Utility function
// Add empty attribute to the <html> element
document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
}
}
render() {
let newButton;
if (ons.platform.isAndroid()) {
newButton = <Fab
onClick={this.props.onNewClick}
position="right bottom" >
<Icon icon="md-edit" />
</Fab>
}
return (
<Page>
{newButton}
<List
dataSource={this.props.tasks}
renderRow={this.renderTask} />
</Page>
);
}
render() {
const toolbarLeftBtn = this.props.backButton === true ?
<BackButton onClick={this.props.navigation.popPage}>Back</BackButton>
: <ToolbarButton onClick={this.props.navigation.openMenu}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
;
const toolbarRightBtn = this.props.refresh !== null ? <ToolbarButton onClick={this.props.refresh}>
<Icon icon='ion-ios-refresh-empty, material:ion-android-refresh' />
</ToolbarButton> : null;
;
return (<OnsToolbar>
<div className='left'>{toolbarLeftBtn}</div>
<div className="center">Digital {!ons.platform.isAndroid() ?
<img src={logo} style={{verticalAlign: 'middle', height: '50%'}}/> : null} Vernissage
</div>
<div className="right">{toolbarRightBtn}</div>
</OnsToolbar>);
}
render() {
let actionButton, rightToolBarButton;
if (!ons.platform.isAndroid()) {
actionButton = <Button modifier="large" onClick={this.action}>
{ this.props.editMode?
'Save Task' :
'Add New Task'
}
</Button>;
} else {
rightToolBarButton = <div className="right">
<ToolbarButton onClick={this.action}>
<Icon icon="md-save" />
</ToolbarButton>
</div>;
}
return (
<Page id="newTaskPage"
renderToolbar={
() => <Toolbar>
<div className="left"><BackButton>Back</BackButton></div>
<div className="center">{this.props.title}</div>
{rightToolBarButton}
</Toolbar>
}>
<List
renderHeader={() => <ListHeader> Add a new task </ListHeader>}
dataSource={[
{
placeholder: 'I want to',
fieldName: 'title'
},
{
placeholder: 'Category',
fieldName: 'category'
},
{
placeholder: 'Description',
fieldName: 'description'
}
]}
renderRow={(data) => {
return (
<ListItem modifier="nodivider">
<div className='center'>
<Input
type="text"
value={this.state[data.fieldName]}
onChange={(event) => {
var newData = {};
newData[data.fieldName] = event.target.value;
this.setState(newData);
}}
placeholder={data.placeholder} float />
</div>
</ListItem>
);
}} />
{actionButton}
</Page>
);
}
calculateItemHeight={() => ons.platform.isAndroid() ? 48 : 44}
calculateItemHeight={() => ons.platform.isAndroid() ? 76 : 45}
import {platform} from 'onsenui';
import {
Page,
ProgressCircular
} from 'react-onsenui';
import NavBar from '../components/NavBar';
import WeatherIcon from '../components/WeatherIcon';
import Forecast from '../components/Forecast';
import {weatherCodeToColor} from '../util';
const styles = {
main: {
fontFamily: platform.isIOS() ? 'Lato' : null,
textAlign: 'center',
color: '#4a4a4a',
width: '100%',
position: 'absolute',
top: '50%',
transform: 'translate3d(0, -50%, 0)'
},
invalid: {
color: 'red',
fontSize: '20px'
},
progress: {
width: '50px',
height: '50px'
},