menus, better routes, dev tools, styling
This commit is contained in:
STEINNI
@@ -0,0 +1,174 @@
|
||||
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 */
|
||||
|
||||
|
||||
/* 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)
|
||||
Reference in New Issue
Block a user