studioweb documentation
  1. Components
  2. DashPanel

File

src/app/dashboard/dash-panel.ts

Extends

Compbaser

Implements

AfterViewInit

Metadata

selector dash-panel
styles .twitter-timeline { width: 100% !important; } iframe { width: 100% !important; }
templateUrl ./dash-panel.html

Constructor

constructor(yp: YellowPepperService, rp: RedPepperService)
Defined in src/app/dashboard/dash-panel.ts:36

Methods

_listenLiveLog
_listenLiveLog()
Defined in src/app/dashboard/dash-panel.ts:54
Returns : void
_listenLoadLines
_listenLoadLines()
Defined in src/app/dashboard/dash-panel.ts:63
Returns : void
_listenStationsConnection
_listenStationsConnection()
Defined in src/app/dashboard/dash-panel.ts:68
Returns : void
ngAfterViewInit
ngAfterViewInit()
Defined in src/app/dashboard/dash-panel.ts:86
Returns : void
_loadStationData
_loadStationData()
Defined in src/app/dashboard/dash-panel.ts:101
Returns : void
setTwitterWidth
setTwitterWidth()
Defined in src/app/dashboard/dash-panel.ts:105
Returns : void
destroy
destroy()
Defined in src/app/dashboard/dash-panel.ts:113
Returns : void

Properties

isBrandingDisabled
isBrandingDisabled: Observable<boolean>
Defined in src/app/dashboard/dash-panel.ts:36
m_campaigns$
m_campaigns$: any
Defined in src/app/dashboard/dash-panel.ts:31
m_lastSave$
m_lastSave$: any
Defined in src/app/dashboard/dash-panel.ts:28
m_lines$
m_lines$: any
Defined in src/app/dashboard/dash-panel.ts:33
m_liveLog
m_liveLog: List<LiveLogModel>
Defined in src/app/dashboard/dash-panel.ts:35
m_resources$
m_resources$: any
Defined in src/app/dashboard/dash-panel.ts:32
m_scenes$
m_scenes$: any
Defined in src/app/dashboard/dash-panel.ts:30
m_timelines$
m_timelines$: any
Defined in src/app/dashboard/dash-panel.ts:34
m_totalStationsConnected
m_totalStationsConnected: number
Default value : 0
Defined in src/app/dashboard/dash-panel.ts:26
m_totalStationsDisconnected
m_totalStationsDisconnected: number
Default value : 0
Defined in src/app/dashboard/dash-panel.ts:27
m_userModel$
m_userModel$: any
Defined in src/app/dashboard/dash-panel.ts:29
 
import {AfterViewInit, Component} from "@angular/core";
import {Compbaser} from "ng-mslib";
import {YellowPepperService} from "../../services/yellowpepper.service";
import {EFFECT_LOAD_FASTERQ_LINES, EFFECT_LOAD_STATIONS} from "../../store/effects/appdb.effects";
import {RedPepperService} from "../../services/redpepper.service";
import {List} from "immutable";
import {StationModel} from "../../models/StationModel";
import {Observable} from "rxjs/Observable";
import {LiveLogModel} from "../../models/live-log-model";
import {ACTION_LIVELOG_UPDATE} from "../../store/actions/appdb.actions";

@Component({
    selector: 'dash-panel',
    styles: [`
        .twitter-timeline {
            width: 100% !important;
        }

        iframe {
            width: 100% !important;
        }
    `],
    templateUrl: './dash-panel.html'
})
export class DashPanel extends Compbaser implements AfterViewInit {
    m_totalStationsConnected = 0;
    m_totalStationsDisconnected = 0;
    m_lastSave$;
    m_userModel$;
    m_scenes$;
    m_campaigns$;
    m_resources$;
    m_lines$;
    m_timelines$;
    m_liveLog:List<LiveLogModel>;
    isBrandingDisabled: Observable<boolean>;


    constructor(private yp: YellowPepperService, private rp: RedPepperService) {
        super();
        this.m_lastSave$ = this.yp.ngrxStore.select(store => store.appDb.uiState.appSaved)
        this.m_userModel$ = this.yp.listenUserModel();
        this.m_scenes$ = this.yp.getScenes();
        this.m_campaigns$ = this.yp.getCampaigns();
        this.m_resources$ = this.yp.getResources();
        this.m_lines$ = this.yp.listenFasterqLines();
        this.m_timelines$ = this.yp.getTimelines();
        this.isBrandingDisabled = this.yp.isBrandingDisabled();
        this._listenStationsConnection();
        this._listenLoadLines();
        this._listenLiveLog();
    }

    _listenLiveLog() {
        this.cancelOnDestroy(
            this.yp.ngrxStore.select(store => store.appDb.liveLog)
                .subscribe((i_liveLog) => {
                    this.m_liveLog = i_liveLog;
                }, (e) => console.error(e))
        )
    }

    _listenLoadLines() {
        this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_FASTERQ_LINES, payload: {}})
        this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'updating remote stations status'})}));
    }

    _listenStationsConnection() {
        this.cancelOnDestroy(
            this.yp.listenStations()
                .map((i_stationModels: List<StationModel>) => {
                    i_stationModels.forEach(i_stationModel => {
                        if (i_stationModel.connection == 0) {
                            this.m_totalStationsDisconnected++;
                        } else {
                            this.m_totalStationsConnected++;
                        }
                    });
                    return i_stationModels;
                }).subscribe(() => {
            }, (e) => console.error(e))
        );
        this._loadStationData();
    }

    ngAfterViewInit() {
        var twitter = function (d: any, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            // if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = p + "://platform.twitter.com/widgets.js";
            js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {});");
            fjs.parentNode.insertBefore(js, fjs);
            // }
        }(document, "script", "twitter-wjs");
        this.setTwitterWidth();

    }

    _loadStationData() {
        this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_STATIONS, payload: {userData: this.rp.getUserData()}});
    }

    setTwitterWidth() {
        Observable.interval(400)
            .take(5)
            .subscribe(() => {
                jQuery('.twitter-timeline').css({width: '100%'});
            })
    }

    destroy() {
    }
}

<small class="debug">{{me}}</small>

<div class="row">
    <br/>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_campaigns$ | async)?.size" [value3]="'total campaigns'" [icon]="'fa-bars'"></Infobox>
    </div>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_resources$ | async)?.size" [value3]="'total resources'" [icon]="'fa-certificate'"></Infobox>
    </div>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_scenes$ | async)?.length" [value3]="'total scenes'" [icon]="'fa-crosshairs'"></Infobox>
    </div>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_timelines$ | async)?.size" [value3]="'total timelines'" [icon]="'fa-list'"></Infobox>
    </div>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_lines$ | async)?.size" [value3]="'fasterq lines'" [icon]="'fa-user-o'"></Infobox>
    </div>
    <div class="col-sm-4 col-lg-2">
        <Infobox [value1]="(m_userModel$ | async)?.getRememberMe() == true ? 'ON' : 'OFF'" [value3]="'auto login'" [icon]="'fa-circle-o'"></Infobox>
    </div>
</div>

<div class="row">
    <br/>
    <div class="col-sm-6 col-lg-4">
        <server-avg style="width: 100%"></server-avg>
    </div>
    <div class="col-sm-6 col-lg-4">
        <storage-used style="width: 100%"></storage-used>
    </div>
    <div class="responsive-pad-top col-sm-12 col-lg-4">
        <div class="row">
            <div class="col-xm-12">
                <Infobox style="color: green" [value1]="m_totalStationsConnected" [value3]="'stations connected'" icon="fa-tv"></Infobox>
            </div>
            <div class="col-xm-12">
                <Infobox style="color: red" [value1]="m_totalStationsDisconnected" [value3]="'stations disconnected'" icon="fa-tv"></Infobox>
            </div>
        </div>
    </div>
</div>

<div class="row" >
    <br/>
    <div *ngIf="(isBrandingDisabled | async)==true" class="col-sm-12 col-lg-4">
        <a class="twitter-timeline" href="https://twitter.com/MediaSignage" data-widget-id="378653740623863808">Tweets by @MediaSignage</a>
        <!--<div *ngIf="(isBrandingDisabled | async)==false" style="border: 1px solid #dbdbdb; background-color: #fafafa; height: 400px">AAAA</div>-->
    </div>
    <div [ngClass]="{'col-sm-12':true, 'col-lg-8': (isBrandingDisabled | async)==true}">
        <div class="row">
            <div class="col-sm-12 col-lg-6">
                <Infobox [value1]="(m_userModel$ | async)?.user()" [value3]="'business id ' + (m_userModel$ | async)?.businessId()" [icon]="'fa-user-circle-o'"></Infobox>
            </div>
            <div class="col-sm-12 col-lg-6">
                <Infobox [value1]="(m_lastSave$ | async)" [value3]="'last save'" [icon]="'fa-save'"></Infobox>
            </div>
        </div>
        <div class="row" style="margin: 0px 0px 10px 0px">
            <div class="col-xs-12" style="border: 1px solid #dbdbdb; background-color: #fafafa; height: 275px; padding: 0">
                <div style="overflow-x: scroll">
                    <div style="width: 100%; height: 250px">
                        <simpleGridTable #simpleGrid>
                            <thead>
                            <tr>
                                <th>time</th>
                                <th>action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="simpleGridRecord" simpleGridRecord *ngFor="let item of m_liveLog; let index=index" [item]="item" [index]="index">
                                <td simpleGridData style="width: 20%" [editable]="false" field="date" [item]="item"></td>
                                <td simpleGridData style="width: 80%" [editable]="false" field="event" [item]="item"></td>
                            </tr>
                            </tbody>
                        </simpleGridTable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""