[HIMA-104] on noconnection visualization

package-lock.json

@@ -7174,6 +7174,14 @@
       "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
       "dev": true
     },
+    "ng-connection-service": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/ng-connection-service/-/ng-connection-service-1.0.4.tgz",
+      "integrity": "sha512-WrZfK+hUzrJS77ItxXI08rUN6Av77W3+LsaJEPufyo2wRe7Tn8xG18FHHEbbgqKkJeDT/yGJBH2xOaT+1jb22g==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ng-packagr": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.7.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "@zxing/ngx-scanner": "^1.3.0",
     "angular2-signaturepad": "^2.8.0",
     "core-js": "^2.5.4",
+    "ng-connection-service": "^1.0.4",
     "ngx-infinite-scroll": "^7.0.1",
     "rxjs": "~6.3.3",
     "scandit-sdk": "^4.1.1",

src/app/app.component.html

@@ -1,4 +1,4 @@
 
 <app-header></app-header>
-<app-content></app-content>
+<app-content [isConnected]="isConnected"></app-content>
 <app-menu></app-menu>

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { FeedService } from 'feed-service';
-import { ContentPageComponent } from './pages/content/content.component';
+import { ConnectionService } from 'ng-connection-service';
 
 @Component({
   selector: 'app-root',
@@ -9,4 +8,17 @@ import { ContentPageComponent } from './pages/content/content.component';
 })
 export class AppComponent {
   title = 'Hugendubel InstoreApp';
+  status = 'ONLINE';
+  isConnected = true;
+
+  constructor(private connectionService: ConnectionService) {
+    this.connectionService.monitor().subscribe(isConnected => {
+      this.isConnected = isConnected;
+      if (this.isConnected) {
+        this.status = 'ONLINE';
+      } else {
+        this.status = 'OFFLINE';
+      }
+    });
+  }
 }

src/app/pages/content/content.component.html

@@ -1,5 +1,9 @@
 <div class="content-body">
+  <div class="noconnection" *ngIf="isConnected === false">
+      <!-- <img src="../../../assets/images/Icon_noconnection.svg"> -->
+      Sie sind offline, keine Verbindung zum Netzwerk
+  </div>
   <app-breadcrumbs *ngIf="router.url !== '/dashboard'"></app-breadcrumbs>
   <router-outlet></router-outlet>
   <div style="height: 90px;"></div>
-</div>
+</div>

src/app/pages/content/content.component.scss

@@ -10,3 +10,11 @@
   height: calc(100% - 230px);
   top: 0;
 }
+
+.noconnection {
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #F6F8FB;
+  margin-top: -4px;
+}

src/app/pages/content/content.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { SearchResultsComponent } from 'src/app/components/search-results/search-results.component';
 import { Result } from '@zxing/library';
@@ -9,6 +9,7 @@ import { Result } from '@zxing/library';
   styleUrls: ['./content.component.scss']
 })
 export class ContentPageComponent implements OnInit {
+  @Input() isConnected;
   constructor(public router: Router) { }
 
   ngOnInit() { }

src/assets/images/Icon_noconnection.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon_noconnection</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_02_01_Hugendubel_Instoreapp_Kunden_noconnection" transform="translate(-185.000000, -161.000000)" fill="#172062">
+            <path d="M202.664071,161 L203.442714,161.778643 L189.271413,175.927697 L188.49277,175.149055 L191.073415,172.612903 L190.717464,172.256952 C191.340378,171.634038 192.030033,171.189099 192.786429,170.899889 L195.233593,168.452725 C193.07564,168.385984 190.917686,169.186874 189.29366,170.810901 L187.869855,169.387097 C190.361513,166.873192 193.832036,165.961068 197.035595,166.628476 L198.681869,164.982202 C194.499444,163.647386 189.738598,164.648498 186.423804,167.941046 L185,166.517241 C189.115684,162.401557 195.166852,161.355951 200.261402,163.40267 L202.664071,161 Z M193.565072,175.104561 C194.343715,174.303671 195.634038,174.303671 196.412681,175.104561 L194.988877,176.528365 L193.565072,175.104561 Z M194.232481,172.568409 L196.212458,170.610679 C197.324805,170.833148 198.414905,171.389321 199.282536,172.256952 L197.858732,173.680756 C196.879867,172.701891 195.500556,172.323693 194.232481,172.568409 Z M197.836485,168.964405 L199.371524,167.429366 C200.372636,167.896552 201.307008,168.56396 202.130145,169.387097 L200.70634,170.810901 C199.860957,169.965517 198.882091,169.36485 197.836485,168.964405 Z M202.352614,164.448276 C203.286986,165.026696 204.176863,165.716352 205,166.517241 L203.576196,167.941046 C202.753059,167.117909 201.840934,166.450501 200.884316,165.916574 L202.352614,164.448276 Z" id="Icon_noconnection"></path>
+        </g>
+    </g>
+</svg>