covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
176 lines (164 loc) • 6.39 kB
JavaScript
import Container from '../../../node_modules/neo.mjs/src/container/Base.mjs';
import CountryStore from '../store/Countries.mjs';
import SelectField from '../../../node_modules/neo.mjs/src/form/field/Select.mjs';
/**
* @class Covid.view.HeaderContainer
* @extends Neo.container.Base
*/
class HeaderContainer extends Container {
static getConfig() {return {
/**
* @member {String} className='Covid.view.HeaderContainer'
* @protected
*/
className: 'Covid.view.HeaderContainer',
/**
* @member {String[]} cls=['covid-header-container']
*/
cls: ['covid-header-container'],
/**
* @member {Number} height=70
*/
height: 120,
/**
* @member {Object} layout={ntype: 'hbox', align: 'stretch'}
*/
layout: {ntype: 'hbox', align: 'stretch'},
/**
* @member {Array} items
*/
items: [{
ntype : 'component',
minWidth : 267,
reference: 'logo',
style : {margin: '10px'},
width : 267,
vdom: {
tag: 'img',
src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/covid_logo_dark.jpg'
}
}, {
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
items : [{
ntype : 'container',
height : 65,
layout : {ntype: 'hbox'},
reference: 'total-stats',
itemDefaults: {
ntype: 'component'
},
items: [{
cls : ['covid-numberbox'],
vdom: {cn: [
{cls: ['covid-numberbox-title', 'cases'], html:'Cases'},
{cls: ['covid-numberbox-number', 'cases']}
]}
}, {
cls : ['covid-numberbox'],
vdom: {cn: [
{cls: ['covid-numberbox-title', 'active'], html:'Active'},
{cls: ['covid-numberbox-number', 'active']}
]}
}, {
cls : ['covid-numberbox'],
vdom: {cn: [
{cls: ['covid-numberbox-title', 'recovered'], html:'Recovered'},
{cls: ['covid-numberbox-number', 'recovered']}
]}
}, {
cls : ['covid-numberbox'],
vdom: {cn: [
{cls: ['covid-numberbox-title', 'deaths'], html:'Deaths'},
{cls: ['covid-numberbox-number', 'deaths']}
]}
}, {
flex: 1
}, {
style: {padding: '10px'},
width: 125,
vdom : {
cn: [{
tag : 'a',
'aria-label' : 'Star neomjs/neo on GitHub',
cls : ['github-button'],
'data-show-count': 'true',
'data-size' : 'large',
href : 'https://github.com/neomjs/neo',
html : 'Star'
}]
}
}, {
style: {padding: '10px'},
width: 105,
vdom : {
cn: [{
tag : 'a',
'aria-label' : 'Sponsor @tobiu on GitHub',
cls : ['github-button'],
'data-icon' : 'octicon-heart',
'data-size' : 'large',
href : 'https://github.com/sponsors/tobiu',
html : 'Sponsor'
}]
}
}]
}, {
ntype : 'container',
layout: {ntype: 'hbox'},
itemDefaults: {
ntype: 'component'
},
items : [{
module : SelectField,
displayField : 'country',
flex : 'none',
height : 25,
labelPosition: 'inline',
labelText : 'Select a Country',
minWidth : 140,
reference : 'country-field',
style : {marginTop: '15px'},
width : 200,
bind: {
value: data => data.country
},
listeners: {
change: 'onCountryFieldChange'
},
store: {
module : CountryStore,
sorters: [{
property : 'country',
direction: 'ASC'
}]
}
}, {
ntype : 'button',
flex : 'none',
handler: 'onSwitchThemeButtonClick',
height : 25,
iconCls: 'fa fa-sun',
style : {marginLeft: '10px', marginTop: '15px'},
text : 'Theme Light'
}, {
ntype : 'button',
flex : 'none',
handler: 'onReloadDataButtonClick',
height : 25,
iconCls: 'fa fa-sync-alt',
style : {marginLeft: '10px', marginTop: '15px'},
text : 'Reload Data'
},{
ntype : 'label',
height : 25,
reference: 'last-update',
style : {marginLeft: '10px', marginTop: '18px'},
text : ''
}]
}]
}]
}}
}
Neo.applyClassConfig(HeaderContainer);
export {HeaderContainer as default};