P42_UI/app/views/system/tools/EICUIView.js

class EICUIView extends WindozDomContent {
    
    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)