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: '<hvac-overview></hvac-overview>',
                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>
        &lt;md-card-content&gt;
            &lt;hvac-map units=&quot;$ctrl.units&quot; on-select-unit=&quot;$ctrl.onSelectUnit(unit)&quot;&gt;&lt;/hvac-map&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;

    &lt;hvac-selected-unit-card ng-if=&quot;$ctrl.selectedUnit&quot; unit=&quot;$ctrl.selectedUnit&quot;&gt;&lt;/hvac-selected-unit-card&gt;
&lt;/div&gt;
&lt;div flex=&quot;100&quot; flex-gt-sm=&quot;50&quot; flex-gt-md=&quot;40&quot;&gt;
    &lt;md-card&gt;
        &lt;md-card-header&gt;
            &lt;p md-colors=&quot;::{color: 'accent'}&quot;&gt;Units&lt;/p&gt;
        &lt;/md-card-header&gt;

        &lt;md-card-content&gt;
            &lt;hvac-units-table units=&quot;$ctrl.units&quot;&gt;&lt;/hvac-units-table&gt;
        &lt;/md-card-content&gt;
    &lt;/md-card&gt;
&lt;/div&gt;

</div>

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.