Skip to content

Commit 682ea17

Browse files
tobiutobiu
committed
#282 Covid.view.CountryGallery
1 parent f78ad3a commit 682ea17

1 file changed

Lines changed: 252 additions & 0 deletions

File tree

‎apps/covid/view/CountryGallery.mjs‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
import CountryStore from '../store/Countries.mjs';
2+
import Gallery from '../../../src/component/Gallery.mjs';
3+
4+
/**
5+
* @class Covid.view.CountryGallery
6+
* @extends Neo.component.Gallery
7+
*/
8+
class CountryGallery extends Gallery {
9+
static getStaticConfig() {return {
10+
/**
11+
* A regex to replace blank chars
12+
* @member {RegExp} flagRegEx=/ /gi
13+
* @private
14+
* @static
15+
*/
16+
flagRegEx: / /gi
17+
}}
18+
19+
static getConfig() {return {
20+
/**
21+
* @member {String} className='Covid.view.CountryGallery'
22+
* @private
23+
*/
24+
className: 'Covid.view.CountryGallery',
25+
/**
26+
* @member {String[]} cls=['neo-country-gallery', 'neo-gallery', 'page', 'view']
27+
*/
28+
cls: ['neo-country-gallery', 'neo-gallery', 'page', 'view'],
29+
/**
30+
* The image height of the gallery
31+
* @member {Number} imageHeight=240
32+
*/
33+
imageHeight: 280,
34+
/**
35+
* The image width of the gallery
36+
* @member {Number} imageWidth=320
37+
*/
38+
imageWidth: 340,
39+
/**
40+
* @member {Object} itemTpl_
41+
*/
42+
itemTpl: {
43+
cls : ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
44+
tabIndex: '-1',
45+
cn: [{
46+
cls : ['neo-item-wrapper'],
47+
style: {},
48+
cn: [{
49+
tag : 'div',
50+
cls : ['neo-country-gallery-item'],
51+
style: {},
52+
53+
cn: [{
54+
cls: ['neo-item-header'],
55+
cn: [{
56+
tag: 'img',
57+
cls: ['neo-flag']
58+
}, {
59+
60+
}]
61+
}, {
62+
tag: 'table',
63+
cls: ['neo-content-table'],
64+
cn : [{
65+
tag: 'tr',
66+
cn : [
67+
{tag: 'td', html: 'Cases'},
68+
{tag: 'td', cls: ['neo-align-right']},
69+
{tag: 'td', style: {width: '100%'}},
70+
{tag: 'td', html: 'Cases today'},
71+
{tag: 'td', cls: ['neo-align-right']}
72+
]
73+
}, {
74+
tag: 'tr',
75+
cn : [
76+
{tag: 'td', html: 'Deaths'},
77+
{tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
78+
{tag: 'td', style: {width: '100%'}},
79+
{tag: 'td', html: 'Deaths today'},
80+
{tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
81+
]
82+
}, {
83+
tag: 'tr',
84+
cn : [
85+
{tag: 'td', html: 'Recovered'},
86+
{tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
87+
{tag: 'td', style: {width: '100%'}},
88+
{tag: 'td', html: 'Critical'},
89+
{tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
90+
]
91+
}]
92+
}]
93+
}]
94+
}]
95+
},
96+
/**
97+
* The unique record field containing the id.
98+
* @member {String} keyProperty='id'
99+
*/
100+
keyProperty: 'country',
101+
/**
102+
* True to select the item inside the middle of the store items on mount
103+
* @member {Boolean} selectOnMount=false
104+
*/
105+
selectOnMount: false,
106+
/**
107+
* @member {Neo.data.Store} store=CountryStore
108+
*/
109+
store: CountryStore
110+
}}
111+
112+
/**
113+
* Override this method to get different item-markups
114+
* @param {Object} vdomItem
115+
* @param {Object} record
116+
* @param {Number} index
117+
* @returns {Object} vdomItem
118+
*/
119+
createItem(vdomItem, record, index) {
120+
let me = this,
121+
firstChild = vdomItem.cn[0].cn[0],
122+
table = firstChild.cn[1];
123+
124+
vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
125+
126+
vdomItem.cn[0].style.height = me.imageHeight + 'px';
127+
128+
firstChild.style.height = (me.imageHeight - 70) + 'px';
129+
firstChild.style.width = me.imageWidth + 'px';
130+
131+
firstChild.cn[0].cn[0].src = me.getCountryFlagUrl(record.country);
132+
firstChild.cn[0].cn[1].html = record.country;
133+
134+
table.cn[0].cn[1].html = record.cases;
135+
table.cn[1].cn[1].html = record.deaths;
136+
table.cn[2].cn[1].html = record.recovered;
137+
138+
table.cn[0].cn[4].html = record.todayCases;
139+
table.cn[1].cn[4].html = record.todayDeaths;
140+
table.cn[2].cn[4].html = record.critical;
141+
142+
return vdomItem;
143+
}
144+
145+
/**
146+
*
147+
* @param {String} name
148+
* @return {String} url
149+
*/
150+
getCountryFlagUrl(name) {
151+
let imageName = name.toLowerCase();
152+
153+
imageName = imageName.replace(CountryGallery.flagRegEx, '-');
154+
155+
switch(imageName) {
156+
case 'channel-islands':
157+
imageName = 'jersey';
158+
break;
159+
case 'curaçao':
160+
imageName = 'curacao';
161+
break;
162+
case 'czechia':
163+
imageName = 'czech-republic';
164+
break;
165+
case 'diamond-princess':
166+
imageName = 'japan'; // cruise ship?
167+
break;
168+
case 'drc':
169+
imageName = 'democratic-republic-of-congo';
170+
break;
171+
case 'eswatini':
172+
imageName = 'swaziland';
173+
break;
174+
case 'faeroe-islands':
175+
imageName = 'faroe-islands';
176+
break;
177+
case 'french-guiana':
178+
imageName = 'france'; // ?
179+
break;
180+
case 'guadeloupe':
181+
imageName = 'france'; // ?
182+
break;
183+
case 'mayotte':
184+
imageName = 'france'; // ?
185+
break;
186+
case 'north-macedonia':
187+
imageName = 'republic-of-macedonia';
188+
break;
189+
case 'poland':
190+
imageName = 'republic-of-poland';
191+
break;
192+
case 'réunion':
193+
imageName = 'france';
194+
break;
195+
case 'saint-lucia':
196+
imageName = 'st-lucia';
197+
break;
198+
case 's.-korea':
199+
imageName = 'south-korea';
200+
break;
201+
case 'st.-barth':
202+
imageName = 'st-barts';
203+
break;
204+
case 'saint-martin':
205+
imageName = 'sint-maarten';
206+
break;
207+
case 'st.-vincent-grenadines':
208+
imageName = 'st-vincent-and-the-grenadines';
209+
break;
210+
case 'u.s.-virgin-islands':
211+
imageName = 'virgin-islands';
212+
break;
213+
case 'uae':
214+
imageName = 'united-arab-emirates';
215+
break;
216+
case 'uk':
217+
imageName = 'united-kingdom';
218+
break;
219+
case 'usa':
220+
imageName = 'united-states-of-america';
221+
break;
222+
}
223+
224+
return 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/' + imageName + '.png'
225+
}
226+
227+
/**
228+
*
229+
* @param {String} vnodeId
230+
* @returns {String} itemId
231+
*/
232+
getItemId(vnodeId) {
233+
return vnodeId.split('__')[1];
234+
}
235+
236+
/**
237+
*
238+
* @param {Array} items
239+
*/
240+
onStoreLoad(items) {
241+
super.onStoreLoad(items);
242+
243+
setTimeout(() => {
244+
this.selectOnMount = true;
245+
this.onMounted();
246+
}, Neo.config.environment === 'development' ? 200 : 500);
247+
}
248+
}
249+
250+
Neo.applyClassConfig(CountryGallery);
251+
252+
export {CountryGallery as default};

0 commit comments

Comments
 (0)