class EICUIView extends EICDomContent { DOMContentLoaded() { /* tabdefault : show_code_start */ let tab = new Tab(); tab.addTabs(this.findAll('MENU[eictab].sample1 li'), this.findAll('.tab-content.sample1')); tab.disableByIndex(1); /* tabdefault : show_code_end */ /* tabvertical : show_code_start */ tab = new Tab(); tab.addTabs(this.findAll('MENU[eictab].sample2 li'), this.findAll('.tab-content.sample2')); tab.disableByIndex(2); /* tabvertical : show_code_end */ /* growlerexample : show_code_start */ let growlButtons = this.findAll('button.growl-test'); for(let i = 0; i < growlButtons.length; i++) { let button = growlButtons[i]; button.addEventListener('click', function(event) { event.stopPropagation(); event.preventDefault(); let button = event.currentTarget; ui.growl.append(button.dataset.message, button.dataset.severity); }); } /* growlerexample : show_code_end */ /* dialogexample : show_code_start */ let dialogButton = this.find('button.dialog-test'); dialogButton.addEventListener('click', function(event) { event.stopPropagation(); event.preventDefault(); this.openDialog(('Do you see this dialog?')) .then(function(result) { if(result) ui.growl.append('You approved the dialog', 'success'); else ui.growl.append('You dismissed the dialog', 'warning'); }) .catch(function() { ui.growl.append('You canceled the dialog', 'warning'); }) /**/ }.bind(this)); /* dialogexample : show_code_end */ let components = ui.eicfy(this.el); let togglers = components.filter(el => el.el.getAttribute('type')=='toggler') for(let toggy of togglers) toggy.onToggle = (val, obj) => console.log('toggler:',val, obj) let grid = new DataGrid(this.find('[eicdatagrid]'), { headers: [ {label: 'name', filter: 'text', sortable:true}, {label: 'ingredients', filter: 'list', sortable:true}, {label: 'price', type: 'currency', sortable:true}, ], height: '150px' }); grid.addRow('1', [ 'Margarita', new Array('tomato', 'mozza'), 8.50 ]); grid.addRow('2', [ 'Chorizo', new Array('tomato', 'mozza', 'chorizo'), 10.50 ]); grid.addRow('3', [ 'Regina', new Array('tomato', 'mozza', 'ham', 'schrooms'), 10.50 ]); grid.addRow('4', [ 'Hawaï', new Array('tomato', 'mozza', 'ham', 'Pineapple'), 11.50 ]); grid.addRow('5', [ 'Garlic', new Array('tomato', 'mozza', 'garlic'), 10.00 ]); grid.addRow('6', [ 'Napoli', new Array('tomato', 'mozza', 'ham', 'Olive'), 13.00 ]); /* gridexample : show_code_end */ /* barchart : show_code_start */ new BarChart(this.find('[eicbarchart]'), { title: 'Bars sample', height: 200, data: [ {value: 10, label:'', severity: 'danger'}, {value: 20, label:'', severity: 'warning'}, {value: 30, label:'', severity: 'primary'}, {value: 50, label:'', severity: 'success'}, ] }); /* barchart : show_code_end */ /* linechart : show_code_start */ this.linechart = new LineChart(this.find('[eiclinechart]'), { title: 'Weather Forecast', height: 180, data: [ { severity: 'primary', unit: '°C', data: [ 0, 5, 12, 24, 17] }, { severity: 'danger', unit: '°C', data: [ 2, 3, 14, 22, 13] }, { severity: 'success', unit: '°C', data: [ 19, 11, 9, 10, 12] } ], labels: [ '27 jun', '28 jun', '29 jun', '30 jun', '1 jul' ] }); /* linechart : show_code_end */ /* pietreechart : show_code_start */ new PieTreeChart(this.find('[pietreechart1]'), { title: '', height: 200, data: [ { severity: 'danger', value: 25 }, { severity: 'success', value: 30 }, { severity: 'secondary', value: 15 }, { severity: 'primary', value: 22 }, { severity: 'warning', value: 8 }, ], angularGap:0, }) new PieTreeChart(this.find('[pietreechart2]'), { title: '', height: 200, data: [ { severity: 'danger', value: 25 }, { severity: 'success', value: 30 }, { severity: 'secondary', value: 15 }, { severity: 'primary', value: 22 }, { severity: 'warning', value: 8 }, ], angularGap:5, innerRadius:0, outerRadius:50 }) new PieTreeChart(this.find('[pietreechart3]'), { title: '', height: 200, center:['70%','30%'], sort: ((a,b) => a.value < b.value ? 1 : -1), data: [ { severity: 'danger', value: 25, children: [ { severity: 'secondary', value: 10 }, { severity: 'primary', value: 20 }, { severity: 'success', value: 30 }, { severity: 'warning', value: 40 }, ] }, { severity: 'success', value: 30 }, { severity: 'secondary', value: 15 }, { severity: 'primary', value: 22 }, { severity: 'warning', value: 8 }, ], innerRadius:5, outerRadius:50 }) new PieTreeChart(this.find('[pietreechart4]'), { title: '', height: 200, data: [ { severity: 'danger', value: 25, dataset:{ id:'aa', val:25 }, children: [ { severity: 'inherit', brightness:'120%', value: 10, dataset:{ id:'aa.1', val:10 } }, { severity: 'inherit', brightness:'120%', value: 20, dataset:{ id:'aa.2', val:20 } }, { severity: 'inherit', brightness:'120%', value: 30, dataset:{ id:'aa.3', val:30 } }, { severity: 'inherit', brightness:'120%', value: 40, dataset:{ id:'aa.4', val:40 } }, ] }, { severity: 'success', value: 30, dataset:{ id:'bb', val:30 } }, { severity: 'secondary', value: 15, dataset:{ id:'cc', val:15 }, children: [ { severity: 'inherit', brightness:'120%', value: 50, dataset:{ id:'cc.1', val:50 } }, { severity: 'inherit', brightness:'120%', value: 20, dataset:{ id:'cc.2', val:20 } }, { severity: 'inherit', brightness:'120%', value: 30, dataset:{ id:'cc.3', val:30 } }, ] }, { severity: 'primary', value: 22, dataset:{ id:'dd', val:22 } }, { severity: 'warning', value: 8, dataset:{ id:'ee', val:8 } }, ], innerRadius:5, outerRadius:50, click: (e=>console.log('Clicked:',e.target.dataset )) }) new PieTreeChart(this.find('[pietreechart5]'), { title: '', height: 200, data: [ { severity: 'danger', value: 25, title:'Red root area', children: [ { severity: 'inherit', brightness:'80%', value: 10, title:'Red direct child 1 area' }, { severity: 'inherit', brightness:'80%', value: 20, title:'Red direct child 2 area' }, { severity: 'inherit', brightness:'80%', value: 30, title:'Red direct child 3 area' }, { severity: 'inherit', brightness:'80%', value: 40, title:'Red direct child 4 area' }, ] }, { severity: 'success', value: 30, title:'Green root area', children: [ { severity: 'inherit', brightness:'80%', value: 2, title:'Green direct child 1 area' }, { severity: 'inherit', brightness:'80%', value: 4, title:'Green direct child 2 area' }, { severity: 'inherit', brightness:'80%', value: 6, title:'Green direct child 3 area' }, ] }, { severity: 'secondary', value: 15, title:'Grey root area', children: [ { severity: 'inherit', brightness:'80%', value: 50, title:'Grey direct child 1 area', children: [ { severity: 'inherit', brightness:'60%', value: 10, title:'Grey grand-child 1 area' }, { severity: 'inherit', brightness:'60%', value: 10, title:'Grey grand-child 2 area' }, { severity: 'inherit', brightness:'60%', value: 5 , title:'Grey grand-child 3 area' }, ] }, { severity: 'inherit', brightness:'80%', value: 20, title:'Grey direct child 2 area' }, { severity: 'inherit', brightness:'80%', value: 30, title:'Grey direct child 3 area' }, ] }, { severity: 'primary', value: 22, title:'Blue root area' }, { severity: 'warning', value: 8, title:'Orange root area' }, ], innerRadius:5, outerRadius:50 }) /* pietreechart : show_code_end */ /* fileuploadexample : show_code_start */ // Normal server : this.fileUpload = new FileUpload(this.find('.filupld'), { uploadUrl: 'https://myserver.com/upload?file=', uploadMethod: 'POST', allowedExtensions: ['pdf'], allowDrop: true, maxFiles: 3, minFiles: 1, dndLabel : 'Drop your pitch PDFs here !' }); /* fileuploadexample : show_code_end */ // To AWS S3 bucket (pre-requesting a signed URL) /* Nike: Dependency async issue in this page, * but this AWS thing is meant to be deprecated anyway (cooloff period end: 31/11/2024) */ // this.awsfileUpload = new AwsFileUpload(this.find('.filupld2'), { // getSignedUrlUrl : 'https://api.dev.eismea.eu/vod/source?file=', // getSignedUrlMethod : 'PUT', // apiKey: 'xxxyyyyzzzz', // uploadUrl: '', // uploadMethod: 'PUT', // allowedExtensions: ['mp4'], // allowedMimes: ['video/mp4'], // allowDrop: true, // maxFiles: 1, // minFiles: 1, // dndLabel : 'Drop your presentation video (mp4) here !' // }); let codeButtons = components.filter(el => el.el.classList.contains('show-code')) for(let codeButton of codeButtons) { codeButton.click = this.showCode.bind(this, codeButton) } } async showCode(buttonObj, event) { event.preventDefault(); event.stopPropagation(); let styleguideTemplate = app.Assets.Store.html[`/app/views/${this._className}.html`]; let styleguideCode = this.DOMContentLoaded.toString(); let result = await this.openDialog(await this.loadContent('system/tools/dialogs/codeTemplateDialog', { title: `Code explorer` }, { styleguideView : this, styleguideTemplate : styleguideTemplate, styleguideCode: styleguideCode, codeclass: buttonObj.el.dataset.codeclass, }) ); } DOMContentResized() { super.DOMContentResized(); this.linechart.redraw(); } } app.registerClass('EICUIView', EICUIView)