Merge pull request #4545 from tsiegleauq/projector-offline-indicator

Add offline indicator to projector
This commit is contained in:
Norman Jäckel 2019-03-29 11:49:40 +01:00 committed by GitHub
commit 193514ec9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 3 deletions

View File

@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
import { WebsocketService } from './websocket.service';
/**
* This service handles everything connected with being offline.
@ -18,7 +19,16 @@ export class OfflineService {
/**
*/
public constructor() {}
public constructor(private socketService: WebsocketService) {}
/**
* Determines of you are either in Offline mode or not connected via websocket
*
* @returns whether the client is offline or not connected
*/
public isOffline(): boolean {
return this.offline || !this.socketService.isConnected;
}
/**
* Sets the offline flag. Restores the DataStoreService to the last known configuration.

View File

@ -1,5 +1,10 @@
<div id="container" [osResized]="resizeSubject" [ngStyle]="containerStyle" #container>
<div id="projector" [ngStyle]="projectorStyle">
<div id="offline-indicator" *ngIf="isOffline()">
<mat-icon>
fiber_manual_record
</mat-icon>
</div>
<div id="header" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
<!-- projector logo -->
<img *ngIf="enableLogo && projectorLogo" src="{{ projectorLogo }}" class="projector-logo-main" />
@ -16,7 +21,12 @@
</div>
<div *ngFor="let slide of slides">
<os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [projector]="projector"></os-slide-container>
<os-slide-container
[slideData]="slide"
[scroll]="scroll"
[scale]="scale"
[projector]="projector"
></os-slide-container>
</div>
<div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">

View File

@ -8,6 +8,17 @@
background-color: lightgoldenrodyellow;
position: relative;
#offline-indicator {
top: 5;
right: 0;
color: red;
position: absolute;
z-index: 100;
.mat-icon {
font-size: 14pt;
}
}
#projector {
position: absolute;
top: 0;

View File

@ -8,6 +8,7 @@ import { BaseComponent } from 'app/base.component';
import { ConfigService } from 'app/core/ui-services/config.service';
import { ViewProjector } from 'app/site/projector/models/view-projector';
import { Size } from 'app/site/projector/size';
import { OfflineService } from 'app/core/core-services/offline.service';
import { SlideData, ProjectorDataService } from 'app/core/core-services/projector-data.service';
import { ProjectorRepositoryService } from 'app/core/repositories/projector/projector-repository.service';
@ -160,7 +161,8 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
translate: TranslateService,
private projectorDataService: ProjectorDataService,
private projectorRepository: ProjectorRepositoryService,
private configService: ConfigService
private configService: ConfigService,
private offlineService: OfflineService
) {
super(titleService, translate);
// projector logo / background-image
@ -192,6 +194,15 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
});
}
/**
* determine if the server is offline
*
* @returns whether the client is offlien
*/
public isOffline(): boolean {
return this.offlineService.isOffline();
}
/**
* Scales the projector to the right format.
*/