Move links and icons to Materialize module. (#728)

* Move links and icons to Materialize module. * Add default framework id. Move error card. * Moving all materialize controls out of main module. * Fixing tests. * Fix default dashboard. * Remove font icon tests. * Fix some tests. * Fix cache tests. * Fix a few more tests.
ironmansoftware · Apr 4, 2019 · b60b37d · b60b37d
1 parent 8709684
commit b60b37d
Show file tree

Hide file tree

Showing 81 changed files with 5,869 additions and 4,109 deletions.
diff --git a/src/UniversalDashboard.MaterialUI/UniversalDashboard.MaterialUI.psm1 b/src/UniversalDashboard.MaterialUI/UniversalDashboard.MaterialUI.psm1
@@ -16,6 +16,7 @@ $Maps | ForEach-Object {
 }
 
 $MUAssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterScript($JSFile.FullName)
+[UniversalDashboard.Services.AssetService]::Instance.RegisterFramework("MaterialUI", $MUAssetId)
 
 # Load out controls
 Get-ChildItem (Join-Path $PSScriptRoot "Scripts") -File -Filter "*.ps1" | ForEach-Object {

diff --git a/src/UniversalDashboard.Materialize/.babelrc b/src/UniversalDashboard.Materialize/.babelrc
@@ -1,3 +1,19 @@
 {
-    "presets" : ["es2015", "react"]
-  }
+  "presets" : [
+    [
+      "@babel/preset-env", {
+        "targets":{
+          "browsers":[
+            ">0.5%",
+            "not dead"
+          ]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-dynamic-import"
+  ]
+}
diff --git a/src/client/src/app/basics/custom-cell.jsx → ...rd.Materialize/Components/custom-cell.jsx b/src/client/src/app/basics/custom-cell.jsx → ...rd.Materialize/Components/custom-cell.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import moment from 'moment';
-import renderComponent from './../services/render-service.jsx';
 
 export default class CustomCell extends React.Component {
     render() {
@@ -27,11 +26,11 @@ export default class CustomCell extends React.Component {
             }
         } else if (y.type && validComponents.indexOf(y.type) !== -1) {
             y.preventUnregister = true;
-            return renderComponent(y);
+            return UniversalDashboard.renderComponent(y);
         }
         else if (y.type) {
             y.preventUnregister = true;
-            return renderComponent(y);
+            return UniversalDashboard.renderComponent(y);
         }else if (typeof(y) === "boolean"){            
             y = y.toString();
         }

diff --git a/src/UniversalDashboard.Materialize/Components/error-card.jsx b/src/UniversalDashboard.Materialize/Components/error-card.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Card, Row, Col} from 'react-materialize';
+import UdIcon from './ud-icon.jsx';
+
+export default class ErrorCard extends React.Component {
+    render() {
+        return <Card title={this.props.title} id={this.props.id}>
+                    <Row>
+                        <Col s={12} className="black-text">
+                            <h4><UdIcon icon="exclamation-triangle" style={{color: 'red'}} /> {this.props.message}</h4>
+                            <h5>{this.props.location}</h5>
+                        </Col>
+                    </Row>
+                </Card>
+    }
+}
diff --git a/src/UniversalDashboard.Materialize/Components/index.js b/src/UniversalDashboard.Materialize/Components/index.js
@@ -1,5 +1,35 @@
+import Materialize from "materialize-css";
+
 import TabContainer from './tabs';
+import UDChart from './ud-chart';
+import UDCounter from './ud-counter';
+import UDErrorCard from './error-card';
+import UDGrid from './ud-grid';
+import UDLink from './ud-link';
 import UdImageCarousel from './ud-image-carousel';
+import UDIcon from './ud-icon';
+import UDNavbar from './ud-navbar';
+import UDNavigation from './ud-navigation';
+import UdFooter from './ud-footer';
+import UdInput from './ud-input';
+import UdInputField from './ud-input-field';
+import UdMonitor from './ud-monitor';
+import UDLoading from './ud-loading';
+
+import("font-awesome/css/font-awesome.min.css" /* webpackChunkName: "font-awesome" */);
 
+UniversalDashboard.register("ud-chart", UDChart);
+UniversalDashboard.register("ud-counter", UDCounter);
 UniversalDashboard.register("tab-container", TabContainer);
-UniversalDashboard.register("image-carousel", UdImageCarousel);
+UniversalDashboard.register("image-carousel", UdImageCarousel);
+UniversalDashboard.register("ud-errorcard", UDErrorCard);
+UniversalDashboard.register("ud-grid", UDGrid);
+UniversalDashboard.register("ud-footer", UdFooter);
+UniversalDashboard.register("ud-icon", UDIcon);
+UniversalDashboard.register("ud-link", UDLink);
+UniversalDashboard.register("ud-monitor", UdMonitor);
+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);
diff --git a/src/client/src/app/basics/text-size.jsx → ...oard.Materialize/Components/text-size.jsx b/src/client/src/app/basics/text-size.jsx → ...oard.Materialize/Components/text-size.jsx
diff --git a/src/UniversalDashboard.Materialize/Components/ud-chart.jsx b/src/UniversalDashboard.Materialize/Components/ud-chart.jsx
@@ -0,0 +1,241 @@
+import React,{Suspense} from 'react';
+import {Row, Col} from 'react-materialize';
+import {Doughnut, Bar, Line, Polar, Radar, Pie, HorizontalBar} from 'react-chartjs-2';
+import ReactInterval from 'react-interval';
+import UdInputField from './ud-input-field.jsx';
+
+const UdLinkComponent = React.lazy(() => import('./ud-link.jsx' /* webpackChunkName: "ud-link" */))
+const UdErrorCardComponent = React.lazy(() => import('./error-card.jsx' /* webpackChunkName: "ud-error-card" */))
+
+export default class UdChart extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            chartData: null,
+            errorMessage: "",
+            hasError: false,
+            fields: props.filterFields
+        }
+    }
+
+    onIncomingEvent(eventName, event) {
+        if (event.type === "syncElement") {
+            this.loadData();
+        }
+    }
+
+    onChartClicked(elements) {
+
+        if (!this.props.clickable) {
+            return;
+        }
+
+        UniversalDashboard.publish('element-event', {
+            type: "clientEvent",
+            eventId: this.props.id + "onClick",
+            eventName: 'onClick',
+            eventData: JSON.stringify(elements.map(x => x._view))
+        });
+    }
+
+    componentWillUnmount() {
+        UniversalDashboard.unsubscribe(this.pubSubToken);
+    }
+
+    onValueChanged(fieldName, value) {
+        var fields = this.state.fields.map(function(x) {
+            if (x.name === fieldName) {
+                x.value = value;
+            }
+
+            return x;
+        });
+
+        this.setState({
+            fields: fields
+        });
+
+        this.loadData();
+    }
+
+    loadData(){
+
+        var queryString = "";
+
+        if (this.state.fields != null) {
+            queryString = "?"
+            for(var i = 0; i < this.state.fields.length; i++) {
+                var field = this.state.fields[i];
+
+                queryString += field.name + "=" + escape(field.value) + "&";
+            }
+
+            queryString = queryString.substr(0, queryString.length - 1);
+        }
+
+        UniversalDashboard.get(`/api/internal/component/element/${this.props.id}${queryString}`, function(json){
+                if (json.error) {
+                    this.setState({
+                        hasError: true, 
+                        errorMessage: json.error.message
+                    })
+                } else {
+                    this.setState({
+                        chartData: json
+                    });
+                }
+            }.bind(this));
+    }
+
+    componentWillMount() {
+        this.loadData();
+        this.pubSubToken = UniversalDashboard.subscribe(this.props.id, this.onIncomingEvent.bind(this));
+    }
+
+    renderArea() {
+            return <Polar data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderDoughnut() {
+            return <Doughnut data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderBar() {
+        return <Bar  data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderLine() {
+        return <Line data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderRadar() {
+        return <Radar data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderPie() {
+        return <Pie data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    renderHorizontalBar() {
+        return <HorizontalBar data={this.state.chartData} options={this.props.options} onElementsClick={this.onChartClicked.bind(this)}/>
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return [
+                <Suspense fallback={<div>Loading...</div>}>
+                    <UdErrorCardComponent message={this.state.errorMessage} key={this.props.id} id={this.props.id} title={this.props.title}/>, <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>
+                </Suspense>
+                ]
+        }
+
+        var fields = null;
+
+        if (this.state.fields != null) {
+            fields = this.state.fields.map(x => {
+                return <Col><UdInputField key={x.name} {...x} fontColor={this.props.fontColor} onValueChanged={this.onValueChanged.bind(this)} debounceTimeout={300}/></Col> 
+            });
+
+            fields = <Row>{fields}</Row>
+        }
+
+        if(this.props.width !== null && this.props.height !== null){
+            var cardStyle = {
+                background:this.props.backgroundColor,
+                color:this.props.fontColor,
+                width:this.props.width,
+                height:this.props.height,
+                marginBottom:'3rem'
+            }
+            var options = {
+                maintainAspectRatio: false,
+                layout:{
+                    padding:{
+                        bottom:25
+                    }
+                }
+            }
+
+            this.props.options = {...options, ...this.props.options}
+
+        }
+        else if(this.props.width !== null && this.props.height === null){
+            var cardStyle = {
+                background:this.props.backgroundColor,
+                color:this.props.fontColor,
+                width:this.props.width,
+            }
+        }
+        else if(this.props.width === null && this.props.height !== null){
+            return [
+                <Suspense fallback={<div>Loading...</div>}>
+                    <UdErrorCardComponent message={'Width property is missing'} key={this.props.id} id={this.props.id} title={this.props.title}/>, <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>
+                </Suspense>
+            ]
+
+        }
+        else{
+            var cardStyle = {
+                background:this.props.backgroundColor,
+                color:this.props.fontColor,
+            }
+        }
+
+        var chart = null;
+        if (this.state.chartData != null) {
+            switch(this.props.chartType) {
+                // Bar
+                case 0:
+                    chart = this.renderBar();
+                    break;
+                // Line
+                case 1:
+                    chart = this.renderLine();
+                    break;
+                // Area
+                case 2:
+                    chart = this.renderArea();
+                    break;
+                // Doughnut
+                case 3:
+                    chart = this.renderDoughnut();
+                    break;
+                // Radar
+                case 4:
+                chart = this.renderRadar();
+                    break;
+                // Pie
+                case 5:
+                chart = this.renderPie();
+                    break;
+                // Horizontal Bar
+                case 6:
+                chart = this.renderHorizontalBar();
+                    break;
+            }
+        }
+
+        var actions = null 
+        if (this.props.links) {
+            var links = this.props.links.map(function(x, i) {
+                return <Suspense fallback={<div>Loading...</div>}>
+                    <UdLinkComponent {...x} key={x.url} />
+                </Suspense>
+            })
+            actions = <div className="card-action">
+                {links}
+            </div>
+        }
+
+        return <div className="card ud-chart" key={this.props.id} id={this.props.id} style={{background:cardStyle.background,color:cardStyle.color,marginBottom:cardStyle.marginBottom}}>
+                    <div className="card-content" style={{width:cardStyle.width,height:cardStyle.height}}>
+                        <span className="card-title">{this.props.title}</span>
+                        {chart}
+                        {fields}
+                        <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>
+                    </div>
+                        {actions}
+                </div>
+    }
+}