lpio/app/html/views/dashboard-display/lp-dashboard-display.html

The last dashboard app you'll ever need

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../../behaviors/register-data.html">
<link rel="import" href="../../api/lp-api.html">
<link rel="import" href="../../settings/lp-settings.html">
<link rel="import" href="../widget/lp-widget.html">

<dom-module id="lp-dashboard-display">
    <template>
        <lp-api id="api" state="{{state}}"></lp-api>
        <lp-settings key="host" value="{{host}}"></lp-settings>
        <lp-settings key="port" value="{{port}}"></lp-settings>
        <h3>{{dashboard.name}}</h3>

        <span>Widgets:</span>
        <template is="dom-repeat" items="{{selectedWidgets}}">
            <div><span>{{item.name}}</span></div>
            <lp-widget widget="{{item}}"></lp-widget>
        </template>
    </template>
</dom-module>
<script>
    (function () {
        Polymer({
            is: 'lp-dashboard-display',

            properties: {
                dashboard:{
                    type: Object,
                    notify:true
                }
            },

            behaviors:[LinchPinBehaviors.RegisterData],

            observers:[
                'selectedChanged(state.app.currentDashboard)',
                'dashboardsChanged(state.dashboards.dashboardsById)',
                'widgetsChanged(state.widgets.widgetsByDashboardId)'
            ],

            dashboardsChanged:function(byId){
                var app = this.state.app;
                if(byId){
                    if(_.has(app,'currentDashboard') && _.has(byId,app.currentDashboard)){
                        this.set('dashboard', byId[app.currentDashboard]);
                    }
                }
            },

            widgetsChanged: function(byId){
                var app = this.state.app;
                if(byId){
                    if(_.has(app,'currentDashboard') && app.currentDashboard.length > 5 &&
                            _.has(byId,app.currentDashboard)){
                        this.setWidgets(byId[app.currentDashboard]);
                    }
                }
            },

            onConnect: function(){
                this.$.api.setOnline(true);
            },

            onDisconnect: function(){
                this.$.api.setOnline(false);
            },

            setWidgets: function(filter){
                var widgets = this.state.widgets.widgets || [];
                this.selectedWidgets = _.filter(widgets,function(widget){
                    return _.contains(filter,widget._id);
                });

                this.async(function(){
                    this.registerData();
                });
            },

            selectedChanged: function(selected){
                var dashboards = this.state.dashboards;
                var widgets = this.state.widgets;
                if(_.isString(selected) && selected.length > 5){
                    if(_.has(dashboards.dashboardsById,selected)){
                        this.set('dashboard', dashboards.dashboardsById[selected]);
                    }

                    if(_.has(widgets,'widgetsByDashboardId') && _.has(widgets.widgetsByDashboardId,selected)){
                        this.setWidgets(widgets.widgetsByDashboardId[selected]);
                    }

                    this.$.api.getWidgetsByDashboardId(selected);
                }
            }
        });
    })();
</script>