Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 91e53981

Přidáno uživatelem Lukáš Moučka před více než 3 roky(ů)

Re #8971 - Úpravy layoutu sekce s grafy a kódování responzivity této sekce
+ Add styles for datepicker
  • Improve sensors desc

Zobrazit rozdíly:

src/app/dashboard/components/sensors/sensors.component.html
5 5 
    </div>
6 6 
  </div>
7 7 
  <div class="col-sm-5 col-md-4 col-lg-3 col-xl-2 dashboard-sensor-heading">
8 
    <button [id]="sensor.sensorName" pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unit.unitId, 'sensor', sensor.sensorId]" [queryParams]="{unitName: unit.description}" title="Sensor" icon="pi pi-chart-line"></button>
8 
    <button pButton type="button" label="View graph" class="p-button-primary" [id]="sensor.sensorName" [routerLink]="['/dashboard/unit', unit.unitId, 'sensor', sensor.sensorId]" [queryParams]="{unitName: unit.description}" title="Sensor" icon="pi pi-chart-line"></button>
9 9 
    <ng-container *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1">
10 10 
      <div class="dashboard-button-separator"></div>
11 11 
      <p-button [id]="'manipulation_sensor_'+sensor.sensorId" icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, sensor); menu.toggle($event)"></p-button>
src/app/sensor/components/sensor.component.html
1 1 
<app-nav-bar></app-nav-bar>
2 2 

  		




  3
  3
  
    
<div class="container graph">


  		




  4
  
  
    
  <div class="row graph-desc">


  		




  5
  
  
    
    <div class="col">


  		




  6
  
  
    
      <span class="graph-attr-heading">Unit name: </span>


  		




  7
  
  
    
      <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a>


  		




  8
  
  
    
    </div>


  		




  9
  
  
    
    <div class="col-12">


  		




  10
  
  
    
      <span class="graph-attr-heading">Sensor id: </span>


  		




  11
  
  
    
      {{sensor?.sensorId}}


  		




  12
  
  
    
    </div>


  		




  13
  
  
    
    <div class="col-12">


  		




  14
  
  
    
      <span class="graph-attr-heading">Sensor name: </span>


  		




  15
  
  
    
      {{sensor?.sensorName}}


  		




  16
  
  
    
    </div>


  		




  17
  
  
    
    <div class="col-12">


  		




  18
  
  
    
      <span class="graph-attr-heading">Sensor type: </span>


  		




  19
  
  
    
      {{sensor?.sensorType}}


  		




  20
  
  
    
    </div>


  		




  21
  
  
    
    <div class="col-12">


  		




  22
  
  
    
      <span class="graph-attr-heading">Phenomenon: </span>


  		




  23
  
  
    
      {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})


  		




  
  4
  
    
  <div class="row graph-information">


  		




  
  5
  
    
    <div class="graph-desc">


  		




  
  6
  
    
      <div>


  		




  
  7
  
    
        <span class="graph-attr-heading">Unit name: </span>


  		




  
  8
  
    
        <a [routerLink]="['/dashboard/unit', unitId]">{{unitDescription}}</a>


  		




  
  9
  
    
      </div>


  		




  
  10
  
    
      <div>


  		




  
  11
  
    
        <span class="graph-attr-heading">Sensor id: </span>


  		




  
  12
  
    
        {{sensor?.sensorId}}


  		




  
  13
  
    
      </div>


  		




  
  14
  
    
      <div>


  		




  
  15
  
    
        <span class="graph-attr-heading">Sensor name: </span>


  		




  
  16
  
    
        {{sensor?.sensorName}}


  		




  
  17
  
    
      </div>


  		




  
  18
  
    
      <div>


  		




  
  19
  
    
        <span class="graph-attr-heading">Sensor type: </span>


  		




  
  20
  
    
        {{sensor?.sensorType}}


  		




  
  21
  
    
      </div>


  		




  
  22
  
    
      <div>


  		




  
  23
  
    
        <span class="graph-attr-heading">Phenomenon: </span>


  		




  
  24
  
    
        {{sensor?.phenomenon?.phenomenonName}} ({{sensor?.phenomenon?.unit}})


  		




  
  25
  
    
      </div>


  		




  24
  26
  
    
    </div>


  		




  25
  
  
    
  </div>


  		




  26
  
  
    
  <div class="row graph-range-dates">


  		




  27
  
  
    
    <div>


  		




  28
  
  
    
      <div class="input-group form-group">


  		




  29
  
  
    
        <div class="input-group-prepend">


  		




  30
  
  
    
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  27
  
    
    <div class="graph-range-dates">


  		




  
  28
  
    
      <div>


  		




  
  29
  
    
        <div class="input-group form-group">


  		




  
  30
  
    
          <div class="input-group-prepend">


  		




  
  31
  
    
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  32
  
    
          </div>


  		




  
  33
  
    
          <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>


  		




  31
  34
  
    
        </div>


  		




  32
  
  
    
        <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>


  		




  33
  35
  
    
      </div>


  		




  34
  
  
    
    </div>


  		




  35
  
  
    
    <div class="graph-range-dates-separator"></div>


  		




  36
  
  
    
    <div>


  		




  37
  
  
    
      <div class="input-group form-group">


  		




  38
  
  
    
        <div class="input-group-prepend">


  		




  39
  
  
    
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  36
  
    
      <div class="graph-range-dates-separator"></div>


  		




  
  37
  
    
      <div>


  		




  
  38
  
    
        <div class="input-group form-group">


  		




  
  39
  
    
          <div class="input-group-prepend">


  		




  
  40
  
    
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  41
  
    
          </div>


  		




  
  42
  
    
          <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>


  		




  40
  43
  
    
        </div>


  		




  41
  
  
    
        <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>


  		




  42
  44
  
    
      </div>


  		




  43
  
  
    
    </div>


  		




  44
  
  
    
    <div>


  		




  45
  
  
    
      <div class="input-group form-group">


  		




  46
  
  
    
        <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>


  		




  
  45
  
    
      <div>


  		




  
  46
  
    
        <div class="input-group form-group">


  		




  
  47
  
    
          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>


  		




  
  48
  
    
        </div>


  		




  
  49
  
    
      </div>


  		




  
  50
  
    
      <div>


  		




  
  51
  
    
        <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-chart-line" styleClass="p-button" (click)="showGraph()"></p-button>


  		




  47
  52
  
    
      </div>


  		




  48
  
  
    
    </div>


  		




  49
  
  
    
    <div>


  		




  50
  
  
    
      <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-chart-line" styleClass="p-button" (click)="showGraph()"></p-button>


  		




  51
  53
  
    
    </div>


  		




  52
  54
  
    
  </div>


  		




  53
  55
  
    
  <div class="row">


  		




  54
  
  
    
    <div class="col-10">


  		




  55
  
  
    
      <div id="view"></div>


  		




  56
  
  
    
    </div>


  		




  
  56
  
    
    <div id="view"></div>


  		




  57
  57
  
    
  </div>


  		




  58
  58
  
    
</div>


  		












  

    
      src/app/unit/components/unit.component.html
    
  





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


  		




  2
  2
  
    

  		




  3
  3
  
    
<div class="container graph">


  		




  4
  
  
    
  <div class="row graph-desc">


  		




  5
  
  
    
    <div class="col-12">


  		




  6
  
  
    
      <span class="graph-attr-heading">Unit description: </span>


  		




  7
  
  
    
      {{unitDescription}}


  		




  
  4
  
    
  <div class="row graph-information">


  		




  
  5
  
    
    <div class="graph-desc">


  		




  
  6
  
    
      <div>


  		




  
  7
  
    
        <span class="graph-attr-heading">Unit description: </span>


  		




  
  8
  
    
        {{unitDescription}}


  		




  
  9
  
    
      </div>


  		




  8
  10
  
    
    </div>


  		




  9
  
  
    
  </div>


  		




  10
  
  
    
  <div class="row graph-range-dates">


  		




  11
  
  
    
    <div>


  		




  12
  
  
    
      <div class="input-group form-group">


  		




  13
  
  
    
        <div class="input-group-prepend">


  		




  14
  
  
    
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  11
  
    
    <div class="graph-range-dates">


  		




  
  12
  
    
      <div class="col-xs-12">


  		




  
  13
  
    
        <div class="input-group form-group">


  		




  
  14
  
    
          <div class="input-group-prepend">


  		




  
  15
  
    
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  16
  
    
          </div>


  		




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


  		




  15
  18
  
    
        </div>


  		




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


  		




  17
  19
  
    
      </div>


  		




  18
  
  
    
    </div>


  		




  19
  
  
    
    <div class="graph-range-dates-separator"></div>


  		




  20
  
  
    
    <div>


  		




  21
  
  
    
      <div class="input-group form-group">


  		




  22
  
  
    
        <div class="input-group-prepend">


  		




  23
  
  
    
          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  20
  
    
      <div class="graph-range-dates-separator"></div>


  		




  
  21
  
    
      <div class="col-xs-12">


  		




  
  22
  
    
        <div class="input-group form-group">


  		




  
  23
  
    
          <div class="input-group-prepend">


  		




  
  24
  
    
            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>


  		




  
  25
  
    
          </div>


  		




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


  		




  24
  27
  
    
        </div>


  		




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


  		




  26
  28
  
    
      </div>


  		




  27
  
  
    
    </div>


  		




  28
  
  
    
    <div>


  		




  29
  
  
    
      <div class="input-group form-group">


  		




  
  29
  
    
      <div class="">


  		




  30
  30
  
    
        <div class="input-group form-group">


  		




  31
  
  
    
          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>


  		




  
  31
  
    
          <div class="input-group form-group">


  		




  
  32
  
    
            <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>


  		




  
  33
  
    
          </div>


  		




  32
  34
  
    
        </div>


  		




  33
  35
  
    
      </div>


  		




  34
  
  
    
    </div>


  		




  35
  
  
    
    <div>


  		




  36
  
  
    
      <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-cog" styleClass="p-button" (click)="showGraph()"></p-button>


  		




  
  36
  
    
      <div>


  		




  
  37
  
    
        <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-check" (click)="showGraph()"></button>


  		




  
  38
  
    
      </div>


  		




  37
  39
  
    
    </div>


  		




  38
  40
  
    
  </div>


  		




  39
  
  
    

  		




  40
  41
  
    
  <ng-container *ngFor="let group of sensorGroups">


  		




  41
  42
  
    
    <div class="row">


  		




  42
  43
  
    
      <div class="graph-group-heading">


  		












  

    
      src/assets/scss/_graph.scss
    
  





  69
  69
  
    
  }


  		




  70
  70
  
    
}


  		




  71
  71
  
    

  		




  
  72
  
    
.graph-information {


  		




  
  73
  
    
  margin-bottom: $grid-gutter-width;


  		




  
  74
  
    
  border: 1px solid $primary;


  		




  
  75
  
    
  background: #F2F2F2;


  		




  
  76
  
    
}


  		




  
  77
  
    

  		




  72
  78
  
    
.graph-desc {


  		




  
  79
  
    
  width: 100%;


  		




  73
  80
  
    
  padding: 10px;


  		




  74
  81
  
    
  font-size: $h3-font-size;


  		




  75
  
  
    
  background: #F2F2F2;


  		




  76
  82
  
    
}


  		




  77
  83
  
    

  		




  78
  84
  
    
.graph-attr-heading {


  		




  ......




  87
  93
  
    
  margin-top: $grid-gutter-width;


  		




  88
  94
  
    
  margin-bottom: $grid-gutter-width;


  		




  89
  95
  
    
  padding: 10px $grid-gutter-width;


  		




  90
  
  
    
  background: #F2F2F2;


  		




  91
  96
  
    
}


  		




  92
  97
  
    

  		




  93
  98
  
    
.graph-range-dates-separator {


  		












Také k dispozici:  Unified diff