SiLeBAT/FSK-Lab

View on GitHub
de.bund.bfr.knime.js/framed.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>RAKIP WEB Landing Page</title>
        <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    </head>
    <body>
        <!-- vendors js -->
        <script src="assets/js/lib/jquery.3.4.1.min.js" ></script>
        <!-- bfr data js -->
        <script src="assets/js/editor_data.js"></script>
        <!-- bfr app js -->
        <script src="assets/js/app.js"></script>
        <!-- page script for initializing app -->
        <script>
            
            var _endpoint = _endpoint || 'https://knime.bfr.berlin/backend/';//http://localhost:8080/' //'https://knime.bfr.berlin/landingpage/';
            var _endpoints     = {
                metadata        : _endpoint + 'metadata/',
                image            : _endpoint + 'image/',
                download        : _endpoint + 'download/',
                uploadDate        : _endpoint + 'uploadDate/',
                executionTime    : _endpoint + 'executionTime/',
                simulations        : _endpoint + 'simulations/',
                execution         : _endpoint + 'execute/',
                search             : _endpoint + 'search/',
                filter             : _endpoint + 'filter'
            };

            var _appVars = {
                header                 : false,
                // header            : {
                //     brand            : {
                //         logo            : 'assets/img/bfr_logo.gif', // false
                //         title            : 'FSK-Web Landing Page Test' // false or ''
                //     },
                //     nav                : [
                //         {
                //             title        : 'Infos',
                //             href        : '#'
                //         },
                //         {
                //             title        : 'Imprint',
                //             href        : '#'
                //         },
                //         {
                //             title        : 'Privacy Policy',
                //             href        : '#'
                //         }
                //     ]
                // },
                mainTable             : {
                    rowSelectable     : 'multiple',
                    rowActions         : [
                        // {
                        //     type             : 'modal',
                        //     idPrefix         : 'mtActionDetails_',
                        //     icon            : 'icon-eye',
                        //     title             : 'Details',
                        //     target            : '#mtModalDetails'
                        // },
                        // {
                        //     type             : 'link',
                        //     idPrefix         : 'mtActionDetails_',
                        //     icon            : 'icon-download',
                        //     title             : 'Download',
                        //     on                 : {
                        //         click             : ( O, $action, rowIndex, rowData ) => {
                        //             window.open( _endpoints.download + rowIndex, '_blank' );
                        //         }
                        //     }
                        // },
                        // {
                        //     type             : 'modal',
                        //     idPrefix         : 'mtActionSim_',
                        //     icon            : 'icon-play',
                        //     title             : 'Simulation',
                        //     target            : '#mtModalSim'
                        // },
                        {
                            type             : 'link',
                            idPrefix         : 'mtActionMerge_',
                            icon            : 'icon-git-merge',
                            title             : 'Merge',
                            on                 : {
                                click             : ( O, $action, rowIndex, rowData ) => {
                                    _log( 'on > clickMerge', 'hook' ); // example hook output
                                    _log( O );
                                    _log( $action );
                                    _log( rowIndex );
                                    _log( rowData );
                                }
                            }
                        },
                        {
                            type             : 'link',
                            idPrefix         : 'mtActionEdit_',
                            icon            : 'icon-edit-2',
                            title             : 'Edit',
                            on                 : {
                                click             : ( O, $action, rowIndex, rowData ) => {
                                    _log( 'on > clickEdit', 'hook' ); // example hook output
                                    _log( O );
                                    _log( $action );
                                    _log( rowIndex );
                                    _log( rowData );
                                }
                            }
                        }
                    ],
                    cols             : [
                        {
                            id             : 'colModel',
                            label        : 'Model',
                            field         : 'modelName',
                            classes     : {
                                th             : 'td-label min-200',
                                td             : 'td-label min-200 td-model'
                            },
                            sortable     : true, // sortable
                        },
                        {
                            id             : 'colSoftware',
                            label        : 'Software',
                            field         : 'software',
                            classes     : {
                                th             : null,
                                td             : 'td-soft'
                            },
                            sortable     : true, // sortable
                            facet         : {
                                tooltip             : true,
                                select2             : true,
                                select2SingleRow     : true,
                                placeholder         : 'Software',
                                maxSelectable         : 1
                            }
                        },
                        {
                            id             : 'colEnvironment',
                            label        : 'Environment',
                            field         : 'environment',
                            classes     : {
                                th             : 'min-300',
                                td             : 'td-env min-300'
                            },
                            sortable     : true, // sortable
                            facet         : {
                                tooltip             : true,
                                select2             : true,
                                select2SingleRow     : true,
                                placeholder         : 'Environment',
                                maxSelectable         : 1
                            },
                            collapsable    : true, // data-toggle-td
                            formatter     : '_list' // _formatter subroutine
                        },
                        {
                            id             : 'colHazard',
                            label        : 'Hazard',
                            field         : 'hazard',
                            classes     : {
                                th             : null,
                                td             : 'td-haz'
                            },
                            sortable     : true, // sortable
                            facet         : {
                                tooltip             : true,
                                select2             : true,
                                select2SingleRow     : true,
                                placeholder         : 'Hazard',
                                maxSelectable         : 1
                            }
                        },
                        {
                            id             : 'colType',
                            label        : 'Type',
                            field         : 'modelType',
                            classes     : {
                                th             : null,
                                td             : 'td-type'
                            },
                            sortable     : true, // sortable
                            facet         : {
                                tooltip             : true,
                                select2             : true,
                                select2SingleRow     : true,
                                placeholder         : 'Type',
                                maxSelectable         : 1
                            }
                        },
                        // {
                        //     id             : 'colExecTime',
                        //     label        : 'Execution Time',
                        //     field         : 'executionTime',
                        //     classes     : {
                        //         th             : null,
                        //         td             : null
                        //     },
                        //     sortable     : true, // sortable
                        //     sorter         : '_execution', // _sorter subroutine
                        //     switchable     : true, // data-switchable
                        //     formatter     : '_execution' // _formatter subroutine
                        // },
                        // {
                        //     id             : 'colUploadDate',
                        //     label        : 'Upload Date',
                        //     field         : 'uploadDate',
                        //     classes     : {
                        //         th             : null,
                        //         td             : null
                        //     },
                        //     sortable     : true, // sortable
                        //     switchable     : true, // data-switchable
                        //     formatter     : '_uploadDate' // _formatter subroutine
                        // }
                    ],
                    on                 : {            
                        afterInit         : ( O ) => {
                            _log( 'on > afterInit', 'hook' ); // example hook output
                            _log( O );
                        },
                        // create            : ( O ) => {
                        //     // create details modal
                        //     O._modalDetails = new APPModalMTDetails( {
                        //         data         : O._metadata,
                        //         id             : 'mtModalDetails',
                        //         classes     : 'modal-details',
                        //         type         : 'mtDetails'
                        //     }, O._$container );
                        //     _log( O._modalDetails );

                        //     // create simulations modal
                        //     O._modalSim = new APPModalMTSimulations( {
                        //         data         : O._metadata,
                        //         id             : 'mtModalSim',
                        //         classes     : 'modal-sim',
                        //         type         : 'mtSim',
                        //         on             : {
                        //             simRunModelView : ( O, modelId, simulation )=> {
                        //                 _log( 'on > simRunModelView', 'hook' ); // example hook output
                        //                 _log( O );
                        //                 _log( modelId );
                        //                 _log( simulation );
                        //             }
                        //         }
                        //     }, O._$container );
                        //     _log( O._modalSim );
                        // },
                        afterPopulate     : ( O, tableData ) => {
                            _log( 'on > afterPopulate', 'hook' ); // example hook output
                            _log( O );
                            _log( tableData );
                        },
                        selectRow         : ( O, rowIndex, rowData ) => {
                            _log( 'on > selectRow', 'hook' ); // example hook output
                            _log( O );
                            _log( rowIndex );
                            _log( rowData );
                        },
                        deselectRow     : ( O, rowIndex, rowData ) => {
                            _log( 'on > deselectRow', 'hook' ); // example hook output
                            _log( O );
                            _log( rowIndex );
                            _log( rowData );
                        },
                        updateFilter     : ( O, filtered ) => {
                            _log( 'on > updateFilter', 'hook' ); // example hook output
                            _log( O );
                            _log( filtered );
                        }
                    }
                }
            };


            /**
             * app
             * initialization of main app
             */

            $( document ).ready( () => { 
                _debug = true;
                _app = new APPLandingpage( _appVars, $( '.landingpage' ) );
            } );


        </script>

        <div class="landingpage"></div>

    </body>
</html>