Description

This component can be placed on a floor and will display the lowest and highest temperatures from which equip, at which date and time.  The blue icon in the top right of the component will pull up the date picker, where the user can choose which day, week, month, or year they would like to see the highest and lowest from.

Completed Model (Basic)

Download: 20170511093731.zip

Moment.js: moment.min.js

Video

Example: 

Ractive Code

Template

<div class="view-container">
  <table class="s-table">
    <tr>
      <td>
          <label class="view-superman-label s-mainText">Compare Point</label><br><label> {{#if myStart==myEnd}}{{.myStart}}{{else}}{{.myStart}} to {{.myEnd}}{{/if}}</label>
      </td>
      <td align="right">
          <label class="view-superman-value round icon-calendar s-cal" on-click="calendar"></label>
      </td>
    </tr>
    <tr><td>  </td></tr>
    <tr>
      <td class="view-superman-value status-stale">
          {{#myMax}}
          <span class="s-title">{{equipRefDis}}</span>
          <br><span class="s-small1">
          {{description}}</span><span class="s-small">
          <br><br>
          {{ts}}</span>
          <br>
          <span class="s-temp">{{val.toFixed(1)}}ºF</span>
          <br>
          <span class="s-small">Highest</span>
          {{/myMax}}
      </td>
      <td class="view-superman-value">
          {{#myMin}}
          <span class="s-title">{{equipRefDis}}</span>
          <br><span class="s-small1">
          {{description}}</span><span class="s-small">
          <br><br>
          {{ts}}</span>
          <br>
          <span class="s-temp">{{val.toFixed(1)}}ºF</span>
          <br>
          <span class="s-small">Lowest</span>
          {{/myMin}}
      </td>
    </tr>
  </table>
</div>

This sets up the HTML for the design of the component

Model

{
    data:
    {
        myMax:[],
        myMin:[],
        myStart,
        myEnd,
        pointId: null
        }
    }
}

This sets up myMax, myMin, and pointId to get the data from the query.

Style

.selectBox{
  height:25px;
}
.s-table{
 width:100%; 
 border-collapse: collapse;
}
.s-space{
    padding-top: 5px;
}
.s-mainText{
    font-size: 16px;
}
.s-title{
    font-size: 18px;
}
.s-small1{
    font-size: 14px;
    font-family: Sans-Serif;
    font-weight: normal;
}
.s-small{
    font-size: 12px;
    font-family: Sans-Serif;
    font-weight: normal;
}
.s-temp{
    font-size: 30px;
    font-family: Arial;
    font-weight: 100;
}
.s-cal{
    cursor: pointer;
}

This is the css to style the model

INIT

var ractive= this.ractive;
ractive.fire('obtainData');
 
this.ractive.on("calendar", function(event){
top.app.ShowCalendar(null,function(data)
    {
     var start = moment(data.range.start).format("YYYY-MM-DD");
     var end   = moment(data.range.end).format("YYYY-MM-DD");
     var dateStringStart = start;
     var startDate = new moment(dateStringStart).format('MM/DD/YYYY');
     var dateStringEnd = end;
     var endDate = new moment(dateStringEnd).format('MM/DD/YYYY');
      setTimeout(function() {
          var id = ractive.get('pointId');
        finstack.eval('finMinAndMaxRoomTemp('+id+', "'+start+'..'+end+'", false)', function(data){
          var myPointsMin = data.result.toObj();
        ractive.set('myMin', myPointsMin);
        });
        finstack.eval('finMinAndMaxRoomTemp('+id+', "'+start+'..'+end+'", true)', function(data){
          var myPointsMax = data.result.toObj();
        ractive.set('myMax', myPointsMax);
        ractive.set('myStart', startDate);
      ractive.set('myEnd', endDate);
        });
      }, 200);
     },
    {periods:true});
});

obtainData is what connects the Ractive model to the program.  Calendar is what pulls up the date picker, queries for what is selected, and sets it to the ractive component


Program

var self = this;
var myTarget = query('targetPoint');
this.pointId = myTarget.pointId;
finstack.eval('finMinAndMaxRoomTemp('+myTarget.pointId+',"today()", true)', function(data){
    self.myMax=data.result.toObj();
});
 
finstack.eval('finMinAndMaxRoomTemp('+myTarget.pointId+',"today()", false)', function(data){
    self.myMin=data.result.toObj();
});

finstack.eval is where the query is defined and by default it will show the highest and lowest for today, but the data can be changed from the date picker

Function

(flrRf, dateRange: "today()", showMax: true) => do
  points: readAll(floorRef == flrRf and temp and sensor and his and point and air)
  foundMax: []
  foundMin: []
  realMax: null
  realMin: null
  maxData: null
  minData: null

  //find maxes and mins
  points.each x => do
    hisRec: x.hisRead(dateRange.eval)
    curMax: hisRec.toRecList[0]->v0
    curMin: hisRec.toRecList[0]->v0

    hisRec.each rec => do
      curMax = max(curMax, rec->v0)
      curMin = min(curMin, rec->v0)

      if(curMax == rec->v0) maxData = rec
      if(curMin == rec->v0) minData = rec
    end

    foundMax = foundMax.add({id: x->id, val: curMax, ts: maxData->ts})
    foundMin = foundMin.add({id: x->id, val: curMin, ts: minData->ts})

    maxData = null
    minData = null
  end

  //find max of max
  realMax = foundMax[0]->val

  foundMax.each x => do
    realMax = max(realMax, x->val)
    if(realMax == x->val) maxData = x
  end

  //find min of min
  realMin = foundMin[0]->val

  foundMin.each x => do
    realMin = min(realMin, x->val)
    if(realMin == x->val) minData = x
  end

  //return data
  if(showMax) maxData.merge({max, equipRef: readById(maxData->id)->equipRef, description: try readById(maxData->id)->equipRef.readById->description catch ""})
  else minData.merge({min, equipRef: readById(minData->id)->equipRef, description: try readById(minData->id)->equipRef.readById->description catch ""})

end

This is the function that must be installed to run the program, that finds the highest and lowest for each date selected.

Adding the function

Go to Funcs

Click New

Name the function finMinAndMaxRoomTemp

Copy and paste the code for the function

Click save


How To Make your Own