Re: Angular controllers

Hi Jared. Is there a way I can break out the controllers I have added into the app.js file into seperate files? My app.js is getting huge. I have tried making seperate folders like you have done for the page-view. But I keep getting stuck on the require element. My hope is to just have a separate folder for a group of controllers that I can link to certain pages. This is probably basic things I have no idea what I am doing.

So I have noticed that when I change the numeric deault template to something different. Say, using the #,###. format. It makes the displayted values have a comma, but now the charts in the angular framework all get multiplied by .001. Is there something I have done wrong?

What happens if I delete the jsp directory?

I have already tried clearing my browser cache. I typically use Chrome but I am seeing the same problem in Firefox and IE.

Also, if I remove the overrides folder. Do I just cut it out and restart. Then restart the Mango instance? Then see if it works. Then re-paste the overrides folder?

Yes. From the Mango Front End.

Failed to load resource: the server responded with a status of 403 (Forbidden)
jquery-1.11.2.min.js:4 POST http://demo.systemvitality.com:8080/rest/v1/users 403 (Forbidden)
send @ jquery-1.11.2.min.js:4
ajax @ jquery-1.11.2.min.js:4
MangoAPI.ajax @ api.js:941
MangoAPI.postUser @ api.js:101
UsersView.saveUser @ UsersView.js:223
dispatch @ jquery-1.11.2.min.js:3
r.handle @ jquery-1.11.2.min.js:3

Response Headers
HTTP/1.1 403 Forbidden
Date: Wed, 04 Jan 2017 19:38:59 GMT
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: SAMEORIGIN
Content-Length: 0
Server: Jetty(9.2.12.v20150709)

Request Headers
POST /rest/v1/users HTTP/1.1
Connection: keep-alive
Content-Length: 231
Accept: application/json, text/javascript, /; q=0.01

X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Content-Type: application/json

Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: XSRF-TOKEN=a994ed2e-1731-4e00-bff6-10603736516f; MANGO8080=hrhzw8elv6oj15imw0139okrk
Request Payload
view source

In the Cookies tab. under the Request Cookies
MANGO and the XSRF-TOKEN both have a value

in the response cookies it is blank

Hey Phil. Have you got some time to help me with this. Im getting more users and I can't add them to the system.

Yeah. I don't want to do that. I am just trying to make an environment where I can try new things without disturbing our customers.

For some reason lately, when I log in. I get a Error 403 Forbidden

HTTP ERROR 403

Problem accessing /modules/dashboards/web/. Reason:

Forbidden

I am wondering if I referenced something wrong in my app.js.

Also, I am still getting a user error. I can't add or edit my users now.

I just cleared my cookies. And I am still getting the error.

When I look at the console log it says this. no element found

Cookie: MANGO8080=hus65pj7gb4lpm7okd1pn4o; XSRF-TOKEN=b8e862ad-16fa-4858-ada4-e83e0daf1234
Connection: keep-alive

So I have moved everything from the MyAdminApp to the mdAdminApp

Can I make a second instance of the mdAdminApp so I can load it on a different URL.

example.

summaes.com = mdAdminApp instance 1

summaes.com/beta = mdAdminApp instance2

will this affect the user login functions.

Hi Guys,

when I try to either delete, or add new users. I am getting this error. I switched to teh new mdAdminApp. Could the new user function on this template be affecting the user groups on Mango?

I added services to an ubuntu server and I get this error. It wont run. What have I missed

Nov 25 19:09:13 ip-172-31-62-80 systemd[1]: Starting LSB: Start or stop the Mango Automation...
Nov 25 19:09:13 ip-172-31-62-80 systemd[1]: Started LSB: Start or stop the Mango Automation.
ubuntu@ip-172-31-62-80:~/mango/bin$ sudo service mango status
● mango.service - LSB: Start or stop the Mango Automation
Loaded: loaded (/etc/init.d/mango; bad; vendor preset: enabled)
Active: active (exited) since Fri 2016-11-25 19:09:13 UTC; 36s ago
Docs: man:systemd-sysv-generator(8)
Process: 1614 ExecStop=/etc/init.d/mango stop (code=exited, status=0/SUCCESS)
Process: 1702 ExecStart=/etc/init.d/mango start (code=exited, status=0/SUCCESS)

I did that. It didnt help. What I finally did is delete the loader.js files and replaced them.

That seemd to do it.

All of a sudden last night around 12AM, this one Modbus Connection started aborting. I have this setup on a single Modbus connector looking at 4 devices. I am getting the data from the other devices but not this one. What causes the Task Currently Running

WARN 2016-11-22 08:11:30,779 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:11:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:13:30,764 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:13:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:20:30,777 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:20:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:22:30,772 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:22:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:30:30,766 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:30:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:32:30,766 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:32:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:41:30,776 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:41:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:43:30,771 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:43:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:50:30,768 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:50:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:52:30,776 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:52:30.764 aborted because Task Currently Running
WARN 2016-11-22 08:59:30,765 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 08:59:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:01:30,776 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:01:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:08:30,767 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:08:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:10:30,779 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:10:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:17:30,777 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:17:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:19:30,772 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:19:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:26:30,767 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:26:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:28:30,765 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:28:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:35:30,770 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:35:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:37:30,764 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:37:30.764 aborted because Task Currently Running
ERROR 2016-11-22 09:42:41,356 (com.serotonin.m2m2.rt.maint.UpgradeCheck.run:54) - org.apache.http.HttpException: Invalid response code 503, reason=Service Unavailable:
Service Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

WARN 2016-11-22 09:44:30,772 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:44:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:46:30,773 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:46:30.764 aborted because Task Currently Running
WARN 2016-11-22 09:50:30,770 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:50:30.764 aborted because Task Currently Running
INFO 2016-11-22 09:51:04,321 (com.serotonin.m2m2.rt.RuntimeManager.stopDataSource:375) - Data source 'GFSB' stopped
INFO 2016-11-22 09:51:12,774 (com.serotonin.m2m2.rt.RuntimeManager.initializeDataSource:302) - Data source 'GFSB' initialized
INFO 2016-11-22 09:51:12,774 (com.serotonin.m2m2.rt.RuntimeManager.initializeDataSource:307) - Data source 'GFSB' took 403.4739ms to start
WARN 2016-11-22 09:51:31,729 (com.serotonin.m2m2.meta.MetaPointLocatorRT.execute:264) - Context not created for meta point with xid: DP_261613 attempting to create context now.
WARN 2016-11-22 09:51:56,468 (com.serotonin.m2m2.meta.MetaPointLocatorRT.execute:264) - Context not created for meta point with xid: DP_425720 attempting to create context now.
WARN 2016-11-22 09:51:56,484 (com.serotonin.m2m2.meta.MetaPointLocatorRT.execute:264) - Context not created for meta point with xid: DP_967443 attempting to create context now.
WARN 2016-11-22 09:52:00,015 (com.serotonin.m2m2.meta.MetaPointLocatorRT.execute:264) - Context not created for meta point with xid: DP_833829 attempting to create context now.
WARN 2016-11-22 09:52:01,015 (com.serotonin.m2m2.meta.MetaPointLocatorRT.execute:264) - Context not created for meta point with xid: DP_064995 attempting to create context now.
WARN 2016-11-22 09:54:12,783 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:54:12.774 aborted because Task Currently Running
WARN 2016-11-22 09:56:12,789 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 09:56:12.774 aborted because Task Currently Running
WARN 2016-11-22 10:00:12,776 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 10:00:12.774 aborted because Task Currently Running
WARN 2016-11-22 10:03:12,781 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 10:03:12.774 aborted because Task Currently Running
WARN 2016-11-22 10:05:12,785 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 10:05:12.774 aborted because Task Currently Running
WARN 2016-11-22 10:08:12,785 (com.serotonin.m2m2.rt.dataSource.PollingDataSource$2.execute:226) - GFSB: poll scheduled at 2016/11/22 10:08:12.774 aborted because Task Currently Running

I don't have a loadConfig in my overrides? Should I?

Also. The core is showing 2.7.10

Yes. In the modules page it is showing it there and is paid. Vs. 3.2.4

I upgraded the dashboard module. Now, when I try to run my dashboard I am getting this error in the console.

Uncaught TypeError: Cannot read property 'module' of undefined(…) maAppComponents.js:12

Uncaught TypeError: Cannot read property 'module' of undefined(…)
serial.js:1 Uncaught SyntaxError: Unexpected token <
gauge.js:1 Uncaught SyntaxError: Unexpected token <
pie.js:1 Uncaught SyntaxError: Unexpected token <
gantt.js:1 Uncaught SyntaxError: Unexpected token <
amcharts.js:1 Uncaught SyntaxError: Unexpected token <
blob.js:1 Uncaught SyntaxError: Unexpected token <
fabric.min.js:1 Uncaught SyntaxError: Unexpected token <
FileSaver.min.js:1 Uncaught SyntaxError: Unexpected token <
jszip.min.js:1 Uncaught SyntaxError: Unexpected token <
pdfmake.min.js:1 Uncaught SyntaxError: Unexpected token <
xlsx.min.js:1 Uncaught SyntaxError: Unexpected token <
globalize.js:1 Uncaught SyntaxError: Unexpected token <
message.js:1 Uncaught SyntaxError: Unexpected token <
unresolved.js:1 Uncaught SyntaxError: Unexpected token <
vfs_fonts.js:1 Uncaught SyntaxError: Unexpected token <
export.js:1 Uncaught SyntaxError: Unexpected token <
require.js:8 Uncaught Error: Load timeout for modules: angular-material,mdPickers,angular-material-data-table,angular-animate,angular-aria,angular-messages(…)

Thanks Jared. That worked. But the problem now is that the values are incorrect. And on one of them, it shows it as disabled.

If I use a standard drop down box with the device name as the input. I get the right values. Im trying to not have to hand enter each list selector.

Is it not possible to make the json object go directly into the ma-point-query.

so instead of : <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="powerPoints"></ma-point-query>

its more like : <ma-point-query query="{deviceName:{powerDevice}}" sort="'name'" points="powerPoints"></ma-point-query>

I am getting a parser error when I try to run this page.

What I am trying to do is run a ma-point-query on a specific device that I have listed either in a json object or in the ng-init. I have it in the ng-init for this code. But I would like to have it as part of a JSON object.

Am I using the {{brackets}} wrong? I've tried everything I could think of.

Also lines 142 - 148 was an attempt to force the name into a md-select and its options. This didn't work either. I would like to figure out how to do this as wel, so I can have in my JSON object the list of the device names and it would create the cropdown box for me.

<!-- 
 @copyright 2016 {@link http://proxyem.com|PROXYEM LLC.} All rights reserved.
 @author Christopher Atkins
 --> 

<!DOCTYPE html>
<html lang="en">


<!--  USER INPUT SECTION -->
<!--vvvvvvvvvvvvvvvvvvvvvv-->

<!--  Instructions:   
            1)-->

    <!-- BUILDING NAME and assign it to an output variable "bldgName" -->
    <div ng-app="" 

    ng-init="
            
            building= 'admiss';          
            campus= 'mountainside';
            location= 'admiss';
            home= 'home';
            powerDevice= '032 POWER East';
            heatingDevice= '032 GAS East';
            coolingDevice= 'CW Meter';
        ">
    
      
<!--^^^^^^^^^^^^^^^^^^^^^^^^-->
<!-- USER INPUT SECTION   -->


<!--  NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY -->
<!--  NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY NO TOUCHY -->
<!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
<!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->

<!--  SERVER SIDE QUERIES SECTION -->
<!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
        <!-- Server side query for points with given device name, and server side sort -->
    
      
    
        <ma-point-query query="{deviceName:deviceName}" sort="'name'" points="powerPoints"></ma-point-query>
        <ma-point-query query="{{heatingDevice}}" sort="'name'" points="heatingPoints"></ma-point-query>
        <ma-point-query query="{{coolingDevice}" sort="'name'" points="coolingPoints"></ma-point-query>
        <ma-point-query query="{{waterDevice}}" sort="'name'" points="waterPoints"></ma-point-query>
        <ma-point-query query="{{renewDevice}}" sort="'name'" points="renewPoints"></ma-point-query>
        <ma-point-query query="{{weather}}" sort="'name'" points="weatherPoints"></ma-point-query>
        
        <ma-get-point-value points="powerPoints" from="from" to="to" rollup="AVERAGE" rollup-interval="15 minutes"></ma-get-point-value>

        <!-- POWER DATA  Client side filter by name -->
        <ma-calc input="powerPoints | filter:{name:'KW'} | first" output="kW"></ma-calc>
        <ma-calc input="powerPoints | filter:{name:'KW Peak'} | first" output="kWPeak"></ma-calc>
        <ma-calc input="powerPoints | filter:{name:'KWH 15 Delta'} | first" output="kWh15Delta"></ma-calc>
        <ma-calc input="powerPoints | filter:{name:'KWH MTD Delta'} | first" output="kWhMtdDelta"></ma-calc>
        <ma-calc input="powerPoints | filter:{name:'PF'} | first" output="powerFactor"></ma-calc>
        <ma-calc input="powerPoints | filter:{name:'PF MIN'} | first" output="powerFactorMin"></ma-calc>


        <ma-point-values point="kW" values="kWValues" latest="1"></ma-point-values>

        <ma-point-values point="kWPeak" values="kWPeakValues" latest="1"></ma-point-values>

        <ma-point-values point="kWh15Delta" values="kWh15DeltaValues" latest="1"></ma-point-values>

        <ma-point-values point="kWhMtdDelta" values="kWhMtdValues" latest="1"></ma-point-values>

        <ma-point-values point="powerFactor" values="pfValues" latest="1"></ma-point-values>

        <ma-point-values point="powerFactorMin" values="pfMinValues" latest="1"></ma-point-values>


        <!-- HEATING DATA Client side filter by name -->
    <!--     <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc>
        <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc>
 -->
        <!-- COOLING DATA Client side filter by name -->
 <!--        <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc>
        <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc>
 -->

        <!-- WATER DATA Client side filter by name -->
   <!--      <ma-calc input="waterPoints | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc>
        <ma-calc input="waterPoints | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc>
 -->
        <!-- WEATHER DATA Client side filter by name -->
   <!--      <ma-calc input="device1points | filter:{name:'Volume Rate'} | first" output="vRate"></ma-calc>
        <ma-calc input="device1points | filter:{name:'Volume Total'} | first" output="vTotal"></ma-calc>

        
        <ma-point-statistics point="vTotal" from="from" to="to" statistics="statsObj"></ma-point-statistics>
 
 
        <ma-point-values point="vRate" values="vRateValues" latest="1"></ma-point-values>

        <ma-point-values point="vTotal" values="vTotalValues" latest="1"></ma-point-values>

        <ma-point-values point="vTotal" values="rateValues" from="from" to="to" rollup="DELTA" rollup-interval="1 minutes" limit="1000"></ma-point-values>
        

        <ma-point-values point="Rate" values="point5Values" latest="1"></ma-point-values> -->


    </div>

<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-->
<!-- SERVER SIDE SERVER QUERIES SECTION   -->

<!--  HTML                        -->
<!--vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/resources/angular-csp.css"></link>
    <link rel="stylesheet" href="../../../../vendor/angular-material/angular-material.css">
    <link rel="stylesheet" href="../../../../vendor/material-design-icons/iconfont/material-icons.css">
    <link rel="stylesheet" href="../../../../vendor/mdPickers/mdPickers.css">
    <link rel ="stylesheet" ng-href="/modules/dashboards/web/beta/styles/vitality.css">
    <get-json url="/modules/dashboards/web/beta/json/buildingPageData.json" output="buildingPageData"></get-json>
    <!-- <pre ng-bind="buildingPageData|json"></pre> -->
    <get-json url="/modules/dashboards/web/beta/json/{{building}}.json" output="buildingData"></get-json>
    <!-- <pre ng-bind="buildingData|json"></pre> -->
    
</head>

<body layout="column">
    <div ng-if="appLoading">
        <span>App is loading..</span>

    </div>





    <div ng-cloak layout="column" flex layout-fill>
        <!-- Your content here -->
        <div ng-hide>
        <md-select ng-model="deviceName" ng-init="">
                            <md-option ng-value="{powerDevice}"></md-option>
                        </md-select>
                        </div>
        <div>
            <div flex="initial" layout="row" layout-wrap layout-align="end center">
                <md-card-actions flex="initial" layout="row" layout-wrap>
                    <a ui-sref="dashboard.{{home}}"><md-button class="vitality-button">Home</md-button></a>
                    <a ui-sref="dashboard.{{campus}}.{{location}}_p"><md-button class="vitality-button">Power</md-button></a>
                    <a ui-sref="dashboard.{{campus}}.{{location}}_h"><md-button class= "vitality-button">Heating</md-button></a>
                    <a ui-sref="dashboard.{{campus}}.{{location}}_c"><md-button class= "vitality-button">Cooling</md-button></a>
                    <a ui-sref="dashboard.{{campus}}.{{location}}_w"><md-button class= "vitality-button">Water</md-button></a>
                </md-card-actions>
            </div>

                              
                    <div flex layout="row" layout-align="space-between" layout-padding layout-fill layout-wrap>
                    
                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" >
                    
                        <!-- DEMAND CARD -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingPageData.header1}}</h2>
                                </div>
                               <div flex layout="row" flex="100">
                                    <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm>
                                        <img src={{buildingPageData.imageFile}}{{buildingPageData.demandImage}} ma-tr={{buildingPageData.demandmatr}} alt="test" class="icon-size" >
                                    </div>
                                    <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100">
                                    <h2 class="home-labels">{{buildingPageData.label1}} <span style="color:#ffffff;"><ma-point-value point="kW"></ma-point-value></span><br>{{buildingPageData.label2}} <span style="color:#ffffff;"><ma-point-value point="kWPeak"></ma-point-value></span></h2>
                                    </div>
                                </div>
                                <div flex layout="row" layout-align="center">
                                    <P class="home-disclaimer">{{buildingPageData.disclaimer1}}</P>
                                </div>
                            </md-card-content>
                        </div>
                    </md-card>

                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" >
                        <!--MONTHLY ENERGY USE CARD  -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingPageData.header2}}</h2>
                                </div>
                                <div flex layout="row" flex="100">
                                    <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm>
                                        <img src={{buildingPageData.imageFile}}{{buildingPageData.monthlyEnergyImage}} ma-tr={{buildingPageData.monthlyEnergymatr}} alt="test" class="icon-size" >
                                    </div>
                                    <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100">
                                    <h2 class="home-labels">{{buildingPageData.label3}} <span style="color:#ffffff;"><ma-point-value point="kWh15Delta"></ma-point-value></span><br>{{buildingPageData.label4}} <span style="color:#ffffff;"><ma-point-value point="kWhMtdDelta"></ma-point-value></span></h2>
                                    </div>
                                </div>
                                <div flex layout="row" layout-align="center">
                                    <P class="home-disclaimer">{{buildingPageData.disclaimer2}}</P>
                                </div>
                            </md-card-content>
                        </div>    
                    </md-card>

                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" >
                        <!-- POWER QUALITY CARD -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingPageData.header3}}</h2>
                                </div>
                                <div flex layout="row" flex="100">
                                    <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm>
                                        <img src={{buildingPageData.imageFile}}{{buildingPageData.qualityImage}} ma-tr={{buildingPageData.qualitymatr}} alt="test" class="icon-size" >
                                    </div>
                                    <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100">
                                    <h2 class="home-labels">{{buildingPageData.label5}} <span style="color:#ffffff;"><ma-point-value point="powerFactor"></ma-point-value></span><br>{{buildingPageData.label6}} <span style="color:#ffffff;"><ma-point-value point="powerFactorMin"></ma-point-value></span></h2>
                                    </div>
                                </div>
                                <div flex layout="row" layout-align="center">
                                    <P class="home-disclaimer">{{buildingPageData.disclaimer3}}</P>
                                </div>
                            </md-card-content>
                        </div> 
                    </md-card>

                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" >
                        <!-- WEATHER CARD -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingPageData.header4}}</h2>
                                </div>
                                <div flex layout="row" flex="100">
                                    <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm>
                                        <img src={{buildingPageData.imageFile}}{{buildingPageData.weatherImage}} ma-tr={{weathermatr}} alt="test" class="icon-size" >
                                    </div>
                                    <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100">
                                    <h2 class="home-labels">{{buildingPageData.label7}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgTempPnt}}></ma-point-value></span><br>{{buildingPageData.label8}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgCondPnt}}></ma-point-value></span></h2>
                                    </div>
                                </div>
                                <div flex layout="row" layout-align="center">
                                    <P class="home-disclaimer">{{buildingPageData.disclaimer1}}</P>
                                </div>
                            </md-card-content>
                        </div> 
                    </md-card>

                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor" hide-xs hide-sm>
                        <!-- BUILDING CARD -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingData.bldgName}}</h2>
                                </div>
                                <div flex layout="column" layout-align="center center" >
                                    <div flex>
                                        <img src={{buildingPageData.custImageFile}}{{buildingData.bldgImage}} ma-tr={{buildingData.bldgAcro}} alt="test" class="building-image" >
                                    </div>
                                </div>
                            </md-card-content>
                        </div>     
                    </md-card>

                    <md-card flex="30" flex-sm="45" flex-xs="100" class= "cardcolor">
                        <!-- BTU CARD -->
                        <div layout="column">
                            <md-card-content>
                                <div flex layout="row" layout-align="center">
                                    <h2 class="home-card">{{buildingPageData.header5}}</h2>
                                </div>
                                <div flex layout="row" flex="100">
                                    <div layout="column" layout-align="center end" flex="30" hide-xs hide-sm>
                                        <img src={{buildingPageData.imageFile}}{{buildingPageData.btuImage}} ma-tr={{buildingPageData.btumatr}} alt="test" class="icon-size" >
                                    </div>
                                    <div layout="column" layout-align="space-around start" flex="70" flex-sm="100" flex-xs="100">
                                        <h2 class="home-labels">{{buildingPageData.label9}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgChwBtuPnt}}></ma-point-value></span><br>{{buildingPageData.label10}} <span style="color:#ffffff;"><ma-point-value point-xid={{buildingData.bldgHtwBtuPnt}}></ma-point-value></span></h2>
                                    </div>
                                </div>
                                <div flex layout="row" layout-align="center">
                                        <P class="home-disclaimer">{{buildingPageData.disclaimer2}}</P>
                                </div>
                            </md-card-content>
                        </div> 
                    </md-card>

            </div>
        </div>

    </div>


</body>

</html>