Create units table component

Creating a table component to show the units variables.

July 10th, 2020


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:

Units Table

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>

            <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>
    </div>
    <div flex="100" flex-gt-sm="50" flex-gt-md="40">
        <md-card>
            <md-card-header>
                <p md-colors="::{color: 'accent'}">Units</p>
            </md-card-header>

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

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

Overview page

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:

Overview page

Go to Create KPI indicators component.

Copyright © 2020 Radix IoT, LLC.