Upgrade materialize

azure-pipelines.yml

@@ -15,7 +15,7 @@ steps:
   displayName: Start Integration Tests
   errorActionPreference: continue
 
-- powershell: .\src\UniversalDashboard.Materialize\Tests\driver.ps1 -OutputTestResultXml
+- powershell: .\src\UniversalDashboard.Materialize\Tests\driver.ps1 -OutputTestResultXml -Release
   displayName: Materialize Tests
   errorActionPreference: continue
 

src/UniversalDashboard.Materialize/Components/index.js

@@ -1,4 +1,6 @@
-import Materialize from "materialize-css";
+require('materialize-css/dist/css/materialize.min.css');
+//require('materialize-css/dist/fonts/roboto/Roboto-Regular.woff');
+//require('materialize-css/dist/fonts/roboto/Roboto-Regular.woff2');
 
 import TabContainer from './tabs';
 import UDChart from './ud-chart';
@@ -14,6 +16,11 @@ import UdInput from './ud-input';
 import UdInputField from './ud-input-field';
 import UdMonitor from './ud-monitor';
 import UDLoading from './ud-loading';
+import UDModal from './ud-modal';
+import UDCheckbox from './ud-checkbox';
+import UDCollapsible from './ud-collapsible';
+import UDSelect from './ud-select';
+import UDDesigner from './ud-designer';
 
 UniversalDashboard.register("ud-chart", UDChart);
 UniversalDashboard.register("ud-counter", UDCounter);
@@ -28,4 +35,9 @@ UniversalDashboard.register("ud-navbar", UDNavbar);
 UniversalDashboard.register("ud-udnavigation", UDNavigation);
 UniversalDashboard.register("ud-input", UdInput);
 UniversalDashboard.register("ud-input-field", UdInputField);
-UniversalDashboard.register("ud-loading", UDLoading);
+UniversalDashboard.register("ud-loading", UDLoading);
+UniversalDashboard.register("ud-modal", UDModal);
+UniversalDashboard.register("ud-checkbox", UDCheckbox);
+UniversalDashboard.register("ud-collapsible", UDCollapsible);
+UniversalDashboard.register("ud-select", UDSelect);
+UniversalDashboard.register("ud-designer", UDDesigner);

src/UniversalDashboard.Materialize/Components/tabs.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import M from 'materialize-css';
 
 export default class TabContainer extends React.Component {
 
     componentDidMount() {
-        $('ul.tabs').tabs();
+        M.Tabs.init(this.element);
     }
 
     renderTabHeaders() {
@@ -38,7 +39,7 @@ export default class TabContainer extends React.Component {
         return (
             <div className="row">
             <div className="col s12">
-              <ul className="tabs">
+              <ul className="tabs" ref={x => this.element = x}>
                 {headers}
               </ul>
             </div>

src/UniversalDashboard.Materialize/Components/ud-checkbox.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Checkbox} from 'react-materialize';
+
+export default class UDCheckbox extends React.Component {
+
+    onChanged(e) {
+        if (this.props.onChange == null) {
+            return
+        }
+
+        var val = e.target.checked;
+
+        UniversalDashboard.publish('element-event', {
+            type: "clientEvent",
+            eventId: this.props.onChange,
+            eventName: 'onChange',
+            eventData: val.toString()
+        });
+    }
+
+    render() {
+        return <Checkbox 
+                    checked={this.props.checked} 
+                    label={this.props.label}
+                    id={this.props.id}
+                    filledIn={this.props.filledIn}
+                    disabled={this.props.disabled}
+                    onChange={this.onChanged.bind(this)} />
+    }
+}

src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {Collapsible} from 'react-materialize';
+import cx from 'classnames';
+import UDIcon from './ud-icon';
+import ReactInterval from 'react-interval';
+
+export default class UDCollapsible extends React.Component {
+    render() {
+
+        var style = {
+            color: this.props.color,
+            backgroundColor: this.props.backgroundColor
+        }
+
+        var children = this.props.items.map(x => <UDCollapsibleItem {...x}/>);
+
+        return (
+            <Collapsible 
+                id={this.props.id}
+                accordion={this.props.accordion}
+                popout={this.props.popout}
+                className="ud-collapsible"
+                style={style}
+                >
+                {children}
+            </Collapsible>
+        )
+    }
+}
+
+class UDCollapsibleItem extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            content: props.content,
+            error: null
+        }
+    }
+
+    loadData() {
+        if (this.props.endpoint) {
+            UniversalDashboard.get("/api/internal/component/element/" + this.props.id, function(data) {
+                if (data.error) {
+                    this.setState({
+                        content: data.error.message
+                    })
+                    return;
+                }
+
+                this.setState({
+                    content: data,
+                    error: null
+                });
+            }.bind(this));
+        }
+    }
+
+    componentWillMount() {
+        this.loadData();
+    }
+
+    render() {
+
+        var style = {
+            color: this.props.color,
+            backgroundColor: this.props.backgroundColor
+        }
+
+      return [
+        <li className={cx(this.props.className, { active: this.props.active })} {...this.props} style={style}>
+          <div
+            className={cx('collapsible-header', { active: this.props.active })}
+          >
+            {this.props.icon && <UDIcon icon={this.props.icon}/>}
+            {this.props.title}
+          </div>
+          <div className="collapsible-body">{UniversalDashboard.renderComponent(this.state.content)}</div>
+        </li>,
+        <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>
+      ]
+    }
+}

src/UniversalDashboard.Materialize/Components/ud-designer.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import UdIcon from './ud-icon.jsx';
+import UdTerminal from './ud-terminal';
+import M from 'materialize-css';
+
+export default class UDDesigner extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            open : false
+        }
+    }
+
+    componentDidMount() {
+        this.modalInstance = M.Modal.init(this.modal);
+    }
+
+    componentWillUnmount() {
+        this.modalInstance.destroy();
+    }
+
+    toggleTerminal() {
+        if (this.state.open) {
+            this.modalInstance.close();
+        } else {
+            this.modalInstance.open();
+        }
+    }
+
+    render() {
+        return (
+            [
+                <div className="fixed-action-btn">
+                    <a className="btn-floating btn-large red" onClick={this.toggleTerminal.bind(this)} id='btnDesignTerminal'>
+                        <i className="large fa fa-terminal"></i>
+                    </a>
+                </div>,
+                <div ref={modal => this.modal = modal} className="modal bottom-sheet">
+                    <div className="modal-content">
+                        <h4><UdIcon icon={'terminal'}/>  Design Terminal</h4>
+                        <UdTerminal />
+                    </div>
+                </div>
+            ]
+        )
+    }
+}

src/UniversalDashboard.Materialize/Components/ud-grid.jsx

@@ -260,7 +260,7 @@ export default class UdGrid extends React.Component {
                         }]}
                         pageProperties={{
                             currentPage: this.state.currentPage,
-                            pageSize: this.state.pageSize,
+                            pageSize: this.props.noPaging ? Number.MAX_SAFE_INTEGER : this.state.pageSize,
                             recordCount: this.state.recordCount,
                         }}
                         events={{