STEINNI
282 lines
12 KiB
JavaScript
282 lines
12 KiB
JavaScript
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) |