Create units table component

This is the 5th article of a Dashboard development series. You can check all the articles by clicking here

In this article we are going to build the next table component:

It shows all the relevant from the HVAC units. Let's start by creating the unitsTable.js and unitsTable.html files in the components/unitsTable directory.

unitsTable.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */

define(['angular', 'require'], (angular, require) => {
'use strict';

class UnitsTableController { static get $$ngIsClass() { return true; }

static get $inject() {
    return [];
}

constructor() {

}

$onInit() {

}

}

return { bindings: { units: '<' }, controller: UnitsTableController, templateUrl: require.toUrl('./unitsTable.html') };

});

We pass a units binding to share the units from the overview page.

unitsTable.html

<p>Units table</p>

Then, we need to import it in hvac.js module:

hvac.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */

define([
'angular',
'require',

'./pages/overview/overview.js',

'./components/map/map.js', './components/selectedUnitCard/selectedUnitCard.js', './components/unitsTable/unitsTable.js',

'./services/unit.js'

], (
angular,
require,
overview,
map,
selectedUnitCard,
unitsTable,
unitService
) => {
'use strict';

const hvacModule = angular .module('hvacModule', ['maUiApp']) .component('hvacOverview', overview) .component('hvacMap', map) .component('hvacSelectedUnitCard', selectedUnitCard) .component('hvacUnitsTable', unitsTable)

.factory('hvacUnit', unitService);

hvacModule.config([ 'maUiMenuProvider', (maUiMenuProvider) => { maUiMenuProvider.registerMenuItems([ { name: 'ui.overview', url: '/overview', menuIcon: 'map', template: '', menuText: 'Overview', weight: 100 }, ]); } ]);

return hvacModule;


}); // define

Let's call the hvac-units-table component in the overview.html file:

overview.html

<div layout="row" layout-wrap layout-align="space-between start">
    <div flex="100" flex-gt-sm="50" flex-gt-md="60">
        <md-card>
            <md-card-header>
                <p md-colors="::{color: 'accent'}">Active Alarms</p>
            </md-card-header>

    <md-card-content>
        <hvac-map units="$ctrl.units" on-select-unit="$ctrl.onSelectUnit(unit)"></hvac-map>
    </md-card-content>
</md-card>

<hvac-selected-unit-card ng-if="$ctrl.selectedUnit" unit="$ctrl.selectedUnit"></hvac-selected-unit-card>

Units

    <md-card-content>
        <hvac-units-table units="$ctrl.units"></hvac-units-table>
    </md-card-content>
</md-card>

``` ```

Reload the page, and you should see something like this:

Now, let's create our table and add some styles. We will use md-data-table to do this, Mango already comes with this library installed.

unitsTable.js

/**
 * @copyright 2020 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Luis Güette
 */

define(['angular', 'require'], (angular, require) => {
'use strict';

class UnitsTableController { static get $$ngIsClass() { return true; }

static get $inject() {
    return [];
}

constructor() {
    this.query = {
        limit: 10,
        page: 1
    }
}

$onInit() {

}

}

return { bindings: { units: '<' }, controller: UnitsTableController, templateUrl: require.toUrl('./unitsTable.html') };

});

We create a query variable to mangage the pagination.

unitsTable.html

<md-table-container>
    <table md-table>
        <thead md-head>
            <tr md-row>
                <th md-column>Unit name</th>
                <th md-column>Status</th>
                <th md-column>Power</th>
                <th md-column>kW/ton</th>
                <th md-column>Occupancy</th>
                <th></th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="unit in $ctrl.units | limitTo: $ctrl.query.limit: ($ctrl.query.page - 1) * $ctrl.query.limit">
                <td class="name" md-colors="{color: unit.points.status.value ? 'primary-700' : 'background-500'}" md-cell ng-bind="unit.name"></td>
                <td class="status" md-cell>
                    <ma-point-value point="unit.points.status"></ma-point-value>
                </td>
                <td class="power" md-cell>
                    <ma-point-value
                            ng-if="unit.points.status.value"
                            md-colors="{color: 'primary-700'}"
                            point="unit.points.power"
                    ></ma-point-value>
                    <span ng-if="!unit.points.status.value" md-colors="{color: 'background-500'}">—</span>
                </td>
                <td class="kwton" md-cell>
                    <ma-point-value
                            ng-if="unit.points.status.value"
                            md-colors="{color: 'primary-700'}"
                            point="unit.points.kwTon"
                    ></ma-point-value>
                    <span ng-if="!unit.points.status.value" md-colors="{color: 'background-500'}">—</span>
                </td>
                <td class="occupancy" md-cell>
                    <ma-point-value
                            ng-if="unit.points.status.value"
                            md-colors="{color: 'primary-700'}"
                            point="unit.points.occupancy"
                    ></ma-point-value>
                    <span ng-if="!unit.points.status.value" md-colors="{color: 'background-500'}">—</span>
                </td>
                <td class="visibility" md-cell>
                    <md-icon md-colors="{color: unit.points.status.value ? 'accent' : 'background-500'}">visibility</md-icon>
                </td>
            </tr>
        </tbody>
    </table>
</md-table-container>

<md-table-pagination
md-limit="$ctrl.query.limit"
md-limit-options="[5, 10, 15]"
md-page="$ctrl.query.page"
md-total="{{$ctrl.units.length}}"
></md-table-pagination>

We make a client pagination, check the md-data-table library for more information.

Finally add the next css to hvac.css file:

...
hvac-units-table thead tr.md-row,
hvac-units-table tbody tr.md-row .name,
hvac-units-table tbody tr.md-row .status,
hvac-units-table tbody tr.md-row .occupancy {
    text-transform: uppercase;
}

hvac-units-table md-table-container thead tr.md-row {
height: 2rem !important;
color: var(--ma-accent);
}

hvac-units-table md-table-container thead th {
font-size: 1rem !important;
}

hvac-units-table md-table-container thead th.md-column:first-of-type {
padding-left: unset !important;
}

hvac-units-table md-table-container thead th.md-column:last-of-type {
padding-right: unset !important;
}

hvac-units-table md-table-container table.md-table td.md-cell {
border-top: 0;
padding-top: 1rem !important;
}

hvac-units-table md-table-container tbody tr.md-row:first-of-type td.md-cell {
border-top: 1px solid var(--ma-primary-700);
}

hvac-units-table md-table-container tbody tr td.md-cell:first-of-type {
padding-left: unset !important;
}

hvac-units-table md-table-container tbody tr td.md-cell:last-of-type {
padding-right: unset !important;
}

hvac-units-table md-table-pagination {
color: var(--ma-primary-700) !important;
margin-top: 2rem;
border-top: 0 !important;
padding: 0 !important;
}

hvac-units-table md-table-pagination div {
height: 2rem !important;
}
...

Reload the page, and you will see something like this:

Go to Create KPI indicators component.

HVAC Dashboard Development Overview — Full series index for the HVAC dashboard tutorials
HVAC Dashboard: KPI Indicators — Next step: build the KPI indicators component

Related Pages​

Related Pages