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

@@ -42,12 +42,15 @@
           <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
         <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
-      </div>
+      </div>      
       <!-- <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox> -->
       <div>
         <button pButton label="Load data" *ngIf="dateChanged" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
+    <div *ngIf="showIntervalError" class="alert alert-danger" role="alert">
+      Select data from interval smaller than <b>6 months</b>!
+    </div>
   </div>
   <div class="graph-view-wrapper">
     <div id="view"></div>

src/app/sensor/components/sensor.component.ts

@@ -28,6 +28,7 @@ export class SensorComponent implements OnInit, OnDestroy {
   unitDescription: string;
   today: Date = moment().toDate();
   subscription: Subscription[] = [];
+  showIntervalError: boolean = false;
 
   constructor(
     private activatedRoute: ActivatedRoute,    
@@ -72,7 +73,15 @@ export class SensorComponent implements OnInit, OnDestroy {
    * Shows get data button
    */
   onDateChanged(): void {
-    this.dateChanged = true;
+    if (moment(this.to).diff(moment(this.from), 'months') > 6){
+      this.dateChanged = false;
+      this.showIntervalError = true;
+    }
+    else{
+      this.dateChanged = true;
+      this.showIntervalError = false;
+    }
+    
   }
 
   /**

src/app/shared/nav-bar/components/data-download/data-download-popup.component.html

@@ -2,9 +2,13 @@
           [baseZIndex]="10000" [className]="'popup-form'">
 
   <form [formGroup]="downloadForm">
-    <div class="input-group form-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
+
+    <div>
+      
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
+        </div>
         <select formControlName="sensor_id" id="sensor_id">
           <option value="null" disabled>Select sensor</option>
           <option *ngFor="let s of sensors; let i = index" [value]="sensors[i].sensorId">
@@ -12,24 +16,31 @@
           </option>
         </select>
       </div>
-    </div>
-    <div class="input-group form-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text"><i class="far fa-calendar-alt"></i>From</span>
+
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="far fa-calendar-alt"></i>From</span>          
+        </div>      
         <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2021" dateFormat="d. m. yy" inputId="navigators" formControlName="from"></p-calendar>
       </div>
-    </div>
-    <div class="input-group form-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text"><i class="far fa-calendar-alt"></i>To</span>
+
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text"><i class="far fa-calendar-alt"></i>To</span>         
+        </div>
         <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2021" dateFormat="d. m. yy" inputId="navigators" formControlName="to"></p-calendar>
       </div>
+
+      <p-listbox [options]="units" formControlName="selectedUnits" [metaKeySelection]="false" [checkbox]="true" [filter]="true" filterPlaceHolder="Search and select units"
+                 optionLabel="description" optionValue="unitId"
+                 emptyFilterMessage="No units for specified filter" [multiple]="true" [listStyle]="{'max-height':'250px'}" [style]="{'width':'100%'}">
+      </p-listbox>
+
     </div>
-    <p-listbox [options]="units" formControlName="selectedUnits" [metaKeySelection]="false" [checkbox]="true" [filter]="true" filterPlaceHolder="Search and select units"
-               optionLabel="description" optionValue="unitId"
-               emptyFilterMessage="No units for specified filter" [multiple]="true" [listStyle]="{'max-height':'250px'}" [style]="{'width':'100%'}">
-    </p-listbox>
+
+  
   </form>
+
   <div *ngIf="inProgress" class="download-progress">Export in progress<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar></div>
   <p-footer>
     <div class="row">

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

@@ -31,6 +31,9 @@
         <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
+    <div *ngIf="showIntervalError" class="alert alert-danger" role="alert">
+      Select data from interval smaller than <b>6 months</b>!
+    </div>
   </div>
 
   <p-accordion [multiple]="true" class="graph-view-wrapper">
@@ -49,13 +52,13 @@
       
       <ng-template pTemplate="content">
 
-        <div class="row">
-          <ng-container *ngFor="let sensor of sensors">
-            <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
-              <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>
-              <label>{{sensor.sensorName}}</label>
+        <div class="d-inline-flex">
+          <div *ngFor="let sensor of sensors">
+            <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group">
+              <p-checkbox class="align-text-top" [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
+              <label >{{sensor.sensorName}}</label>
             </div>
-          </ng-container>
+          </div>
         </div>
         
         

src/app/unit/components/unit.component.ts

@@ -35,6 +35,7 @@ export class UnitComponent implements OnInit, OnDestroy {
   sensorTypes: SensorType[];
   unitDescription: string;
   subscription: Subscription[] = [];
+  showIntervalError: boolean = false;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -93,7 +94,14 @@ export class UnitComponent implements OnInit, OnDestroy {
    * Shows get data button
    */
   onDateChanged() {
-    this.dateChanged = true;
+    if (moment(this.to).diff(moment(this.from), 'months') > 6){
+      this.dateChanged = false;
+      this.showIntervalError = true;
+    }
+    else{
+      this.dateChanged = true;
+      this.showIntervalError = false;
+    }
   }
 
   /**

src/assets/scss/_forms.scss

@@ -0,0 +1,12 @@
+.input-group {
+    margin-bottom: 1rem;
+}
+
+.input-group-prepend span {
+    padding-right: 18px;
+    padding-left: 18px;
+    border-color: $terciary;
+    color: #F2F2F2;
+    background: $terciary;
+    height: 100%;
+}

src/assets/scss/_login.scss

@@ -24,24 +24,24 @@
     border-radius: 10px;
     background: $primary;
     border: 2px solid $primary;
-
-    @include media-breakpoint-down(xs) {
-      width: auto;
-      height: 350px;
-    }
-
+    
     .form-control {
       border-color: #F2F2F2;
       background-color: #F2F2F2;
     }
   }
 
+  .input-group{
+    margin-bottom: 1rem;
+  }
+
   .input-group-prepend span {
     padding-right: 18px;
     padding-left: 18px;
     border-color: $terciary;
     color: #F2F2F2;
     background: $terciary;
+    height: 100%;
   }
 }
 
@@ -73,7 +73,7 @@
 }
 
 .login-copyright {
-  displey: flex;
+  display: flex;
   align-items: center;
   position: absolute;
   bottom: 0;

src/assets/scss/_navbar.scss

@@ -12,7 +12,7 @@
     margin: 0 5px;
     color: #0B1226;
     text-transform: uppercase;
-    font-size: 18px;
+    font-size: 15px;
 
     @include media-breakpoint-down(lg) {
       margin: 0 3px;

src/assets/scss/styles.scss

@@ -2,9 +2,9 @@
 
 @import "/node_modules/bootstrap/scss/bootstrap";
 
-$primary: #174B97 !default;
-$secondary: #727271 !default;
-$terciary: #1B3059 !default;
+$primary: #174B97;
+$secondary: #727271;
+$terciary: #1B3059;
 
 @import "themes";
 @import "fonts";
@@ -13,6 +13,7 @@ $terciary: #1B3059 !default;
 @import "dashboard";
 @import "graph";
 @import "popup-form";
+@import "forms";
 
 .p-tabview .p-tabview-panels {
   color: $terciary;