adding status bar as a component.

Author: MathiasHusum

eform-client/src/app/common/models/common/index.ts

@@ -1,4 +1,5 @@
-export * from './pagination-model'
+export * from './pagination-model';
 export * from './common-dictionary.model';
 export * from './key-value.model';
 export * from './common-dictionary-text.model';
+export * from './status-bar.model';

eform-client/src/app/common/models/common/status-bar.model.ts

@@ -0,0 +1,3 @@
+export class StatusBarModel {
+  status: number;
+}

eform-client/src/app/common/modules/eform-shared/components/index.ts

@@ -2,3 +2,4 @@ export * from './eform-page-subheader/eform-page-subheader.component';
 export * from './eform-pagination/eform-pagination.component';
 export * from './eform-spinner/eform-spinner.component';
 export * from './eform-page-size/eform-page-size.component';
+export * from './status-bar/status-bar.component';

eform-client/src/app/common/modules/eform-shared/components/status-bar/status-bar.component.html

@@ -0,0 +1,19 @@
+<!--<div class="progress-bar" role="progressbar" style="width: {{trashInspection.status-bar}}%"></div>-->
+<div class="progress" *ngIf="statusBar.status == 0" style="height: 2em">
+  <div class="progress-bar grey" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'Ready for server' | translate}}</div>
+</div>
+<div class="progress" *ngIf="statusBar.status == 33" style="height: 2em">
+  <div class="progress-bar orange text" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'Received by server' | translate}}</div>
+</div>
+<div class="progress" *ngIf="statusBar.status == 66" style="height: 2em">
+  <div class="progress-bar yellow text-black-60" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'Ready for device' | translate}}</div>
+</div>
+<div class="progress" *ngIf="statusBar.status == 70" style="height: 2em">
+  <div class="progress-bar info-color" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'Retrieved by device' | translate}}</div>
+</div>
+<div class="progress" *ngIf="statusBar.status == 77" style="height: 2em">
+  <div class="progress-bar success-color" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'Completed' | translate}}</div>
+</div>
+<div class="progress" *ngIf="statusBar.status == 110" style="height: 2em; padding-left: 2px;">
+  <div class="progress-bar danger-color" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%; padding-left: 5px; padding-right: 5px;">{{'System error: Contact Microting' | translate}}</div>
+</div>

eform-client/src/app/common/modules/eform-shared/components/status-bar/status-bar.component.scss

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { StatusBarModel} from '../../../../models/common';
+
+@Component({
+  selector: 'status-bar',
+  templateUrl: './status-bar.component.html',
+  styleUrls: ['./status-bar.component.scss']
+})
+export class StatusBarComponent implements OnInit {
+  statusBar: StatusBarModel = new StatusBarModel();
+  constructor() { }
+  @Input()
+  get status() {
+    return this.statusBar.status;
+  }
+  set status(status: number) {
+    this.statusBar.status = status;
+  }
+
+ ngOnInit() {
+  }
+
+}

eform-client/src/app/common/modules/eform-shared/components/status-bar/status-bar.component.ts

@@ -8,7 +8,8 @@ import {
   EformPageSubheaderComponent,
   EformPaginationComponent,
   EformSpinnerComponent,
-  EformPageSizeComponent
+  EformPageSizeComponent,
+  StatusBarComponent
 } from './components';
 
 @NgModule({
@@ -22,13 +23,15 @@ import {
     EformPageSubheaderComponent,
     EformPaginationComponent,
     EformSpinnerComponent,
-    EformPageSizeComponent
+    EformPageSizeComponent,
+    StatusBarComponent
   ],
   exports: [
     EformPageSubheaderComponent,
     EformPaginationComponent,
     EformSpinnerComponent,
-    EformPageSizeComponent
+    EformPageSizeComponent,
+    StatusBarComponent
   ]
 })
 export class EformSharedModule {