senslog-dashboard/src/app/sensor/components/sensor.component.html

<app-nav-bar></app-nav-bar>

<div class="container graph">

    <div class="button-row">
        <button pButton type="button" label="Back to Dashboard" class="p-button-primary top-button" icon="pi pi-backward" [routerLink]="['/dashboard']" style="margin-bottom: 15px;"></button>
        <button pButton type="button" label="Back to Map" class="p-button-primary top-button" icon="pi pi-backward" [routerLink]="['/dashboard']" [queryParams]="{ tab: 'map' }" style="margin-bottom: 15px;"></button>
    </div>

  <div class="graph-information">
    <div class="graph-desc">
      <div>
        <span class="graph-attr-heading">Unit name: </span>
        <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a>
      </div>
      <div>
        <span class="graph-attr-heading">Sensor id: </span>
        {{sensor?.sensorId}}
      </div>
      <div>
        <span class="graph-attr-heading">Sensor name: </span>
        {{sensor?.sensorName}}
      </div>
      <div>
        <span class="graph-attr-heading">Sensor type: </span>
        {{sensor?.sensorType}}
      </div>
      <div>
        <span class="graph-attr-heading">Phenomenon: </span>
        {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})
      </div>
    </div>
      <div class="graph-range-dates">
          <div class="input-group column-group">
              <label for="from">From:</label>

              <p-calendar
                      id="from"
                      [style]="{'width':'100%'}"
                      [inputStyle]="{'width':'100%'}"
                      [(ngModel)]="from"
                      [showIcon]=true
                      [showTime]=true
                      (onSelect)="onDateChanged()"
                      [maxDate]="today"
                      showButtonBar=true>
              </p-calendar>
          </div>

          <div class="input-group column-group">
              <label for="to">To:</label>

              <p-calendar
                      id="to"
                      [style]="{'width':'100%'}"
                      [inputStyle]="{'width':'100%'}"
                      [(ngModel)]="to"
                      [showIcon]=true
                      [showTime]=true
                      (onSelect)="onDateChanged()"
                      [maxDate]="today"
                      showButtonBar=true>
              </p-calendar>
          </div>
          <div>
              <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
          </div>
      </div>
      <div class="y-range">
          <div>
              <form class="column-group">
                  <label for="yTo">Max y:</label><br>
                  <input type="number" class="simple-number-input" id="yTo" name="yTo" [(ngModel)]="yTo" placeholder="Max y"/>
              </form>
              <form class="column-group">
                  <label for="yFrom">Min y:</label><br>
                  <input type="number" class="simple-number-input" id="yFrom" name="yFrom" [(ngModel)]="yFrom" placeholder="Min y"/>
              </form>
          </div>

          <button pButton type="button" label="Change y" class="p-button-primary" icon="pi pi-chart-line" (click)="changeGraphY()"></button>
      </div>

      <div *ngIf="showIntervalError" class="alert alert-danger interval-alert" role="alert">
          Select a valid interval - interval should be smaller than <b>6 months</b> and the "from" date has to <b>precede</b> the "to" date!
      </div>
  </div>
  <div class="graph-view-wrapper">
    <div #viewPanel id="view" style="width:100%; height:auto;"></div>
  </div>
</div>