Projekt

Obecné

Profil

« Předchozí | Další » 

Revize a28c9b6e

Přidáno uživatelem Lukáš Moučka před téměř 4 roky(ů)

Re #8972 - Ladění frontendu
+ Add styles for responsive charts
  • Improve charts layout

Zobrazit rozdíly:

src/app/dashboard/components/dashboard.component.ts
123 123 
  deleteUnit($event: any, unit: Unit) {
124 124 
    this.confirmationService.confirm({
125 125 
      message: 'Do you want to delete this unit?',
126 
      header: 'Delete Unit Confirmation',
126 
      header: 'Delete unit confirmation',
127 127 
      icon: 'pi pi-info-circle',
128 128 
      accept: () => {
129 129 
        this.processUnitDeletion(unit);
src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
1 1 
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit&nbsp;&ndash;&nbsp;{{unit?.unitId}}"
2 2 
          [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
3 

  		




  4
  3
  
    
  <form [formGroup]="insertForm">


  		




  5
  4
  
    
  <div class="input-group form-group popup-sensors-wrapper">


  		




  6
  5
  
    
    <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">


  		












  

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





  1
  
  
    
<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation!" [style]="{width: '50vw'}" [baseZIndex]="10000">


  		




  
  1
  
    
<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation" [baseZIndex]="10000" [className]="'popup-form'">


  		




  2
  2
  
    
  <form [formGroup]="insertForm">


  		




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


  		




  
  3
  
    
      <div class="input-group form-group popup-sensors-wrapper">


  		




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


  		




  5
  
  
    
          <span class="input-group-text">Sensor name</span>


  		




  
  5
  
    
          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>


  		




  6
  6
  
    
        </div>


  		




  7
  7
  
    
        <input type="text" formControlName="sensorName" class="form-control" id="sensorName"


  		




  8
  8
  
    
               placeholder="{{sensor.sensorName}}"/>


  		




  9
  9
  
    
      </div>


  		




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


  		




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


  		




  12
  
  
    
          <span class="input-group-text">Sensor type</span>


  		




  
  12
  
    
          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>


  		




  13
  13
  
    
        </div>


  		




  14
  14
  
    
        <select formControlName="sensorType" id="sensorType">


  		




  15
  15
  
    
          <option *ngFor="let sensorType of sensorTypes; let i = index" [value]="sensorTypes[i].sensorType">


  		




  ......




  19
  19
  
    
      </div>


  		




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


  		




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


  		




  22
  
  
    
          <span class="input-group-text">Sensor phenomen</span>


  		




  
  22
  
    
          <span class="input-group-text"><i class="fas fa-tint"></i></span>


  		




  23
  23
  
    
        </div>


  		




  24
  24
  
    
        <select formControlName="phenomenon" id="phenomenon">


  		




  25
  25
  
    
          <ng-container *ngFor="let phenomenon of phenomenons; let i = index">


  		




  ......




  32
  32
  
    
  </form>


  		




  33
  33
  
    
  <p-footer>


  		




  34
  34
  
    
      <div>


  		




  35
  
  
    
        <p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>


  		




  36
  
  
    
        <p-button icon="pi pi-check" (click)="processSensorEdition()" type="submit" label="Save" class="pr-2"></p-button>


  		




  
  35
  
    
        <button pButton label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>


  		




  
  36
  
    
        <button pButton label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processSensorEdition()" type="submit"></button>


  		




  37
  37
  
    
      </div>


  		




  38
  38
  
    
  </p-footer>


  		




  39
  39
  
    
</p-dialog>


  		












  

    
      src/app/dashboard/components/sensors/sensors.component.ts
    
  





  71
  71
  
    
  deleteSensor($event: any, sensor: Sensor) {


  		




  72
  72
  
    
    this.confirmationService.confirm({


  		




  73
  73
  
    
      message: 'Do you want to delete this sensor?',


  		




  74
  
  
    
      header: 'Delete Sensor Confirmation',


  		




  
  74
  
    
      header: 'Delete sensor confirmation',


  		




  75
  75
  
    
      icon: 'pi pi-info-circle',


  		




  76
  76
  
    
      accept: () => {


  		




  77
  77
  
    
        this.processSensorDeletion(sensor);


  		












  

    
      src/app/dashboard/components/unit-popup/unit-popup.component.html
    
  





  1
  1
  
    
<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [baseZIndex]="10000" [className]="'popup-form'">


  		




  2
  
  
    

  		




  3
  2
  
    
  <form [formGroup]="insertForm">


  		




  4
  3
  
    
    <div class="input-group form-group">


  		




  5
  4
  
    
      <div class="input-group-prepend">


  		




  ......




  8
  7
  
    
      <input type="text" formControlName="unitDescription" class="form-control" id="unitDescription" placeholder="{{unit?.description}}"/>


  		




  9
  8
  
    
    </div>


  		




  10
  9
  
    
  </form>


  		




  11
  
  
    

  		




  12
  10
  
    
  <p-footer>


  		




  13
  11
  
    
    <div class="pupup-buttons">


  		




  14
  12
  
    
      <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>


  		












  

    
      src/app/sensor/components/sensor.component.html
    
  





  25
  25
  
    
      </div>


  		




  26
  26
  
    
    </div>


  		




  27
  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>


  		




  
  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>


  		




  34
  31
  
    
        </div>


  		




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


  		




  35
  33
  
    
      </div>


  		




  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>


  		




  43
  
  
    
        </div>


  		




  
  34
  
    
      <div class="graph-range-dates-separator">


  		




  
  35
  
    
        <div></div>


  		




  44
  36
  
    
      </div>


  		




  45
  
  
    
      <div>


  		




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


  		




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


  		




  
  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>


  		




  48
  40
  
    
        </div>


  		




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


  		




  49
  42
  
    
      </div>


  		




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


  		




  50
  44
  
    
      <div>


  		




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


  		




  
  45
  
    
        <button pButton label="Load data" *ngIf="dateChanged" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>


  		




  52
  46
  
    
      </div>


  		




  53
  47
  
    
    </div>


  		




  54
  48
  
    
  </div>


  		




  55
  
  
    
  <div class="row">


  		




  
  49
  
    
  <div class="graph-view-wrapper">


  		




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


  		




  57
  51
  
    
  </div>


  		




  58
  52
  
    
</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-information">


  		




  
  4
  
    
  <div class="graph-information">


  		




  5
  5
  
    
    <div class="graph-desc">


  		




  6
  6
  
    
      <div>


  		




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


  		




  ......




  9
  9
  
    
      </div>


  		




  10
  10
  
    
    </div>


  		




  11
  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>


  		




  
  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>


  		




  18
  15
  
    
        </div>


  		




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


  		




  19
  17
  
    
      </div>


  		




  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>


  		




  27
  
  
    
        </div>


  		




  
  18
  
    
      <div class="graph-range-dates-separator">


  		




  
  19
  
    
        <div></div>


  		




  28
  20
  
    
      </div>


  		




  29
  
  
    
      <div class="">


  		




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


  		




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


  		




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


  		




  33
  
  
    
          </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>


  		




  34
  24
  
    
        </div>


  		




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


  		




  35
  26
  
    
      </div>


  		




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


  		




  36
  28
  
    
      <div>


  		




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


  		




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


  		




  38
  30
  
    
      </div>


  		




  39
  31
  
    
    </div>


  		




  40
  32
  
    
  </div>


  		




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


  		




  42
  
  
    
    <div class="row">


  		




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


  		




  44
  
  
    
        Group of


  		




  45
  
  
    
        <ng-container *ngFor="let sensorType of sensorTypes">


  		




  46
  
  
    
          <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">


  		




  47
  
  
    
            {{sensorType.sensorType}}


  		




  
  33
  
    
  <div class="graph-view-wrapper">


  		




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


  		




  
  35
  
    
      <div class="row">


  		




  
  36
  
    
        <div class="graph-group-heading">


  		




  
  37
  
    
          Group of


  		




  
  38
  
    
          <ng-container *ngFor="let sensorType of sensorTypes">


  		




  
  39
  
    
            <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">


  		




  
  40
  
    
              {{sensorType.sensorType}}


  		




  
  41
  
    
            </ng-container>


  		




  48
  42
  
    
          </ng-container>


  		




  49
  
  
    
        </ng-container>


  		




  50
  
  
    
        sensors:


  		




  51
  
  
    
      </div>


  		




  52
  
  
    
      <ng-container *ngFor="let sensor of sensors">


  		




  
  43
  
    
          sensors:


  		




  
  44
  
    
        </div>


  		




  
  45
  
    
        <ng-container *ngFor="let sensor of sensors">


  		




  53
  46
  
    
          <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">


  		




  54
  47
  
    
            <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>


  		




  55
  48
  
    
            <label>{{sensor.sensorName}}</label>


  		




  56
  49
  
    
          </div>


  		




  57
  
  
    
      </ng-container>


  		




  58
  
  
    
    </div>


  		




  59
  
  
    
    <div id="vega_container_{{group}}"></div>


  		




  60
  
  
    
  </ng-container>


  		




  
  50
  
    
        </ng-container>


  		




  
  51
  
    
      </div>


  		




  
  52
  
    
      <div id="vega_container_{{group}}"></div>


  		




  
  53
  
    
    </ng-container>


  		




  
  54
  
    
  </div>


  		




  61
  55
  
    
</div>


  		












  

    
      src/assets/scss/_graph.scss
    
  





  10
  10
  
    

  		




  11
  11
  
    
  .input-group {


  		




  12
  12
  
    
    margin: 0;


  		




  
  13
  
    
    width: auto;


  		




  
  14
  
    

  		




  
  15
  
    
    @include media-breakpoint-down(sm) {


  		




  
  16
  
    
      justify-content: center;


  		




  
  17
  
    
      width: 100%;


  		




  
  18
  
    
    }


  		




  13
  19
  
    
  }


  		




  14
  20
  
    

  		




  15
  21
  
    
  .input-group-text {


  		




  ......




  34
  40
  
    
    border-color: $primary;


  		




  35
  41
  
    
    background: $white;


  		




  36
  42
  
    

  		




  
  43
  
    
    @include media-breakpoint-down(md) {


  		




  
  44
  
    
      margin-top: 10px;


  		




  
  45
  
    
    }


  		




  
  46
  
    

  		




  37
  47
  
    
    .p-listbox-item {


  		




  38
  48
  
    
      color: #0B1226;


  		




  39
  49
  
    

  		




  ......




  79
  89
  
    
.graph-desc {


  		




  80
  90
  
    
  width: 100%;


  		




  81
  91
  
    
  padding: 10px;


  		




  82
  
  
    
  font-size: $h3-font-size;


  		




  
  92
  
    
  font-size: 18px;


  		




  
  93
  
    

  		




  
  94
  
    
  @include media-breakpoint-down(xs) {


  		




  
  95
  
    
    font-size: 16px;


  		




  
  96
  
    
  }


  		




  83
  97
  
    
}


  		




  84
  98
  
    

  		




  85
  99
  
    
.graph-attr-heading {


  		




  ......




  91
  105
  
    
  display: flex;


  		




  92
  106
  
    
  align-items: center;


  		




  93
  107
  
    
  justify-content: flex-start;


  		




  
  108
  
    
  flex-wrap: wrap;


  		




  94
  109
  
    
  margin-top: $grid-gutter-width;


  		




  95
  110
  
    
  margin-bottom: $grid-gutter-width;


  		




  96
  111
  
    
  padding: 10px $grid-gutter-width;


  		




  
  112
  
    

  		




  
  113
  
    
  @include media-breakpoint-down(md) {


  		




  
  114
  
    
    justify-content: center;


  		




  
  115
  
    
    padding-left: 10px;


  		




  
  116
  
    
    padding-right: 10px;


  		




  
  117
  
    
  }


  		




  97
  118
  
    
}


  		




  98
  119
  
    

  		




  99
  120
  
    
.graph-range-dates-separator {


  		




  100
  
  
    
  @include size(10px,2px);


  		




  101
  
  
    
  margin: 0 10px;


  		




  102
  
  
    
  background: #0B1226;


  		




  
  121
  
    
  display: flex;


  		




  
  122
  
    
  align-items: center;


  		




  
  123
  
    
  justify-content: center;


  		




  
  124
  
    
  height: 42px;


  		




  
  125
  
    

  		




  
  126
  
    
  @include media-breakpoint-down(sm) {


  		




  
  127
  
    
    width: 100%;


  		




  
  128
  
    
  }


  		




  
  129
  
    

  		




  
  130
  
    
  div {


  		




  
  131
  
    
    @include size(15px,2px);


  		




  
  132
  
    
    margin: 0 10px;


  		




  
  133
  
    
    background: #0B1226;


  		




  
  134
  
    
  }


  		




  103
  135
  
    
}


  		




  104
  136
  
    

  		




  105
  137
  
    
.graph-group-heading {


  		




  106
  138
  
    
  font-weight: $font-weight-bold;


  		




  107
  139
  
    
  line-height: 2;


  		




  108
  140
  
    
}


  		




  
  141
  
    

  		




  
  142
  
    
.graph-view-wrapper {


  		




  
  143
  
    
  padding-left: $grid-gutter-width / 2;


  		




  
  144
  
    
  padding-right: $grid-gutter-width / 2;


  		




  
  145
  
    

  		




  
  146
  
    
  @include media-breakpoint-down(lg) {


  		




  
  147
  
    
    overflow-x: scroll;


  		




  
  148
  
    
  }


  		




  
  149
  
    
}


  		












  

    
      src/assets/scss/_popup-form.scss
    
  





  20
  20
  
    
  }


  		




  21
  21
  
    

  		




  22
  22
  
    
  .p-dialog {


  		




  23
  
  
    
    width: 100vw;


  		




  
  23
  
    
    width: 100%;


  		




  24
  24
  
    

  		




  25
  25
  
    
    @include media-breakpoint-up(md) {


  		




  26
  
  
    
      width: 50vw;


  		




  
  26
  
    
      width: 800px;


  		




  27
  27
  
    
    }


  		




  28
  28
  
    

  		




  29
  29
  
    
    .p-dialog-header, .p-dialog-content, .p-dialog-footer {


  		












Také k dispozici:  Unified diff