Sunbird Portal Documentation
  1. Components
  2. NetworkStatusComponent

File

src/app/modules/shared/components/network-status/network-status.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-network-status
styleUrls ./network-status.component.scss
templateUrl ./network-status.component.html

Index

Properties
Methods

Constructor

constructor(resourceService: ResourceService, connectionService: ConnectionService)
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:14
Parameters :
Name Type Optional
resourceService ResourceService No
connectionService ConnectionService No

Methods

ngOnDestroy
ngOnDestroy()
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:24
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:18
Returns : void

Properties

isConnected
Default value : false
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:12
Public resourceService
Type : ResourceService
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:15
showLoadContentModal
Type : any
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:14
Public unsubscribe$
Default value : new Subject<void>()
Defined in src/app/modules/shared/components/network-status/network-status.component.ts:13
 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ResourceService, ConnectionService } from '../../services';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-network-status',
  templateUrl: './network-status.component.html',
  styleUrls: ['./network-status.component.scss']
})
export class NetworkStatusComponent implements OnInit, OnDestroy {
  isConnected = false;
  public unsubscribe$ = new Subject<void>();
  showLoadContentModal: any;
  constructor(public resourceService: ResourceService,
    private connectionService: ConnectionService) { }

  ngOnInit() {
    this.connectionService.monitor().pipe(takeUntil(this.unsubscribe$)).subscribe(isConnected => {
      this.isConnected = isConnected;
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

}

<!--Online/Offline-->
<div>
  <div class="status-container p-8 mr-16 my-16" *ngIf="isConnected">
    <div class="d-flex flex-ai-center flex-jc-center">
      <div class="status-container__icon mr-8">
        <img height="37px" src="assets/images/Online.svg" width="24px">
      </div>
      <div class="fnormal status-container__title">{{resourceService?.messages?.stmsg?.desktop?.onlineStatus}}
      </div>
    </div>
  </div>

  <div class="status-container p-8 mr-16 my-16" *ngIf="!isConnected">
    <div class="d-flex flex-ai-center flex-jc-center">
      <div class="status-container__icon mr-8">
        <img height="37px" src="assets/images/Offline.svg" width="24px">
      </div>
      <div class="fnormal status-container__title">{{resourceService?.frmelmnts?.lbl?.offline}}</div>
    </div>
  </div>
</div>

<!--/Online/Offline-->

./network-status.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.status-container{
    border-radius: calculateRem(24px);
    background-color: var(--sbt-filter-bar-bg);
    position: relative;
    z-index: 9;
}
.load-content-section{
    border-radius: calculateRem(24px);
    background-color: var(--sbt-filter-bar-bg);
    position: relative;
    z-index: 9;
    .load-content-title{
      font-size: calculateRem(14px);
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""