covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
223 lines (205 loc) • 7.33 kB
JavaScript
import BoxLabel from '../../../node_modules/neo.mjs/src/component/BoxLabel.mjs';
import Container from '../../../node_modules/neo.mjs/src/container/Base.mjs';
import Gallery from './country/Gallery.mjs';
import GalleryContainerController from './GalleryContainerController.mjs';
import Panel from '../../../node_modules/neo.mjs/src/container/Panel.mjs';
import RangeField from '../../../node_modules/neo.mjs/src/form/field/Range.mjs';
/**
* @class Covid.view.GalleryContainer
* @extends Neo.container.Base
*/
class GalleryContainer extends Container {
static getConfig() {return {
/**
* @member {String} className='Covid.view.GalleryContainer'
* @protected
*/
className: 'Covid.view.GalleryContainer',
/**
* @member {String[]} cls=['neo-gallery-maincontainer', 'neo-viewport']
*/
cls: ['neo-gallery-maincontainer', 'neo-viewport'],
/**
* @member {Neo.controller.Component|null} controller=GalleryContainerController
*/
controller: GalleryContainerController,
/**
* @member {Neo.component.Gallery|null} gallery=null
*/
gallery: null,
/**
* @member {Object|null} galleryConfig=null
*/
galleryConfig: null,
/**
* @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
*/
layout: {ntype: 'hbox', align: 'stretch'},
/**
* @member {Object[]|null} items
*/
items: [{
ntype : 'container',
flex : 1,
layout: 'fit',
items : []
}, {
module : Panel,
cls : ['neo-configuration-panel', 'neo-panel', 'neo-container'],
layout : {ntype: 'vbox', align: 'stretch'},
reference: 'controls-panel',
style : {backgroundColor: '#2b2b2b'},
width : 260,
containerConfig: {
style: {overflowY: 'scroll'}
},
headers: [{
dock: 'top',
items: [{
ntype : 'button',
handler: 'onCollapseButtonClick',
text : 'X'
}, {
ntype: 'label',
text : 'Gallery Controls'
}]
}],
itemDefaults: {
flex : '0 1 auto',
labelWidth : '110px',
style : {padding: '10px'},
useInputEvent: true
},
items: [{
module : RangeField,
labelText: 'Translate X',
maxValue : 5000,
minValue : 0,
name : 'translateX',
value : 0,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
module : RangeField,
labelText: 'Translate Y',
maxValue : 1500,
minValue : -1500,
name : 'translateY',
value : 0,
listeners: {
change: 'onRangefieldChange'
}
}, {
module : RangeField,
labelText: 'Translate Z',
maxValue : 550,
minValue : -4500,
name : 'translateZ',
value : 0,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
module : RangeField,
labelText: 'Amount Rows',
maxValue : 15,
minValue : 1,
name : 'amountRows',
value : 3,
listeners: {
change: 'onRangefieldChange'
}
}, {
ntype : 'button',
handler: 'onOrderButtonClick',
text : 'Order by Row',
style : {margin: '20px'}
}, {
ntype: 'label',
text : 'Sort By:'
}, {
ntype : 'container',
layout: {ntype: 'hbox', align: 'stretch'},
style : {minHeight: '134px', padding: '0'},
items : [{
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'cases',
text : 'Cases',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'deaths',
text : 'Deaths',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'country',
text : 'Country',
style: {margin: '10px', marginTop: 0}
}, {
field: 'recovered',
text : 'Recovered',
style: {margin: '10px', marginTop: 0}
}]
}, {
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'todayCases',
text : 'Cases today',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'todayDeaths',
text : 'Deaths today',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'critical',
text : 'Critical',
style: {margin: '10px', marginBottom: '43px', marginTop: 0}
}]
}]
}, {
module: BoxLabel,
text : [
'<b>Navigation Concept</b>',
'<p>You can use the Arrow Keys to walk through the items.</p>'
].join('')
}]
}]
}}
/**
* @param {Object} config
*/
construct(config) {
super.construct(config);
const me = this;
me.gallery = Neo.create({
module : Gallery,
appName : me.appName,
parentId : me.id,
reference: 'gallery',
...me.galleryConfig
});
me.items[0].items.push(me.gallery);
}
/**
*
*/
destroy(...args) {
this.gallery = null;
super.destroy(...args);
}
}
Neo.applyClassConfig(GalleryContainer);
export {GalleryContainer as default};