context-dashboard/dashboard-detail.component.ts
| selector | c8y-dashboard-detail |
| templateUrl | ./dashboard-detail.component.html |
Properties |
|
Methods |
Accessors |
constructor(modal: BsModalRef, iconList: string[], contextDashboardService: ContextDashboardService, navigatorService: NavigatorService, permissionsService: Permissions, translateService: TranslateService)
|
|||||||||||||||||||||
|
Parameters :
|
| close |
close()
|
|
Returns :
void
|
| getDashboardPreviewStyle |
getDashboardPreviewStyle()
|
|
Returns :
{}
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Returns :
void
|
| save |
save()
|
|
Returns :
void
|
| selectIcon | ||||
selectIcon(icon)
|
||||
|
Parameters :
Returns :
void
|
| setTitle |
setTitle()
|
|
Returns :
void
|
| setupApplyToDevicesOfTypeCheckbox |
setupApplyToDevicesOfTypeCheckbox()
|
|
Returns :
void
|
| updateFiltered | ||||||
updateFiltered(term: string)
|
||||||
|
Parameters :
Returns :
void
|
| applyToDevicesOfTypePermitted |
Type : boolean
|
| currentDashboard |
Type : ContextDashboard
|
| dashboard |
Type : ContextDashboard
|
| dashboardDetailForm |
Type : NgForm
|
Decorators :
@ViewChild('dashboardDetailForm', {static: true})
|
| dashboardName |
Type : string
|
| Readonly DEFAULT_DASHBOARD_ICON |
Type : string
|
Default value : 'th'
|
| Readonly DEFAULT_DASHBOARD_MARGIN |
Type : number
|
Default value : 12
|
| Readonly DEFAULT_DASHBOARD_PRIORITY |
Type : number
|
Default value : 10000
|
| deviceType |
Type : string
|
| filteredIcons |
Type : string[]
|
| icons |
Type : string[]
|
| isDeviceType |
Type : boolean
|
| isNamedDashboard |
Type : boolean
|
| isReport |
Type : boolean
|
| namePlaceholder |
Type : string
|
| navigatorNodes$ |
Type : Observable<NavigatorNode[]>
|
| possibleStyling |
Type : object
|
Default value : { DASHBOARD_THEME_CLASSES, WIDGET_HEADER_CLASSES }
|
| result |
Type : Promise<ContextDashboard>
|
Default value : new Promise((resolve, reject) => {
this._save = resolve;
this._cancel = reject;
})
|
| styling |
Type : object
|
Default value : {
themeClass: 'dashboard-theme-light',
headerClass: 'panel-title-regular'
}
|
| titleAction |
Type : string
|
| titleName |
Type : string
|
| applyToDevicesOfTypeTitle |
getapplyToDevicesOfTypeTitle()
|
<div class="viewport-modal">
<div class="modal-header separator-bottom">
<h3>{{ titleAction | translate }} {{ titleName | translate }}</h3>
</div>
<div class="modal-inner-scroll">
<div class="p-l-24 p-r-24">
<form #dashboardDetailForm="ngForm" class="d-contents">
<div class="row">
<div class="col-sm-6">
<div *ngIf="!isNamedDashboard || isReport">
<h6 class="legend form-block">
<span>{{ 'General' | translate }}</span>
</h6>
<div class="d-flex">
<c8y-form-group>
<label class="d-block">{{ 'Icon' | translate }}</label>
<div dropdown class="dropdown">
<button
title="{{ 'Icon' | translate }}"
class="btn-default btn btn-gray"
dropdownToggle
>
<i c8yIcon="{{ dashboard.icon }}"></i>
<span class="caret"></span>
</button>
<ul
*dropdownMenu
class="dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0"
style="max-height: 250px;"
>
<ng-container *ngFor="let icon of filteredIcons">
<li (click)="selectIcon(icon)">
<a
class="interact"
title="{{ icon }}"
[ngClass]="{ active: dashboard.icon === icon }"
>
<i class="icon" [c8yIcon]="icon"></i>
</a>
</li>
</ng-container>
</ul>
</div>
</c8y-form-group>
<c8y-form-group class="flex-grow">
<label>
<span class="m-r-4">{{ 'Menu label' | translate }}</span>
<button
class="btn btn-clean"
popover="{{
'Menu label to display in submenu when dashboard is attached' | translate
}}"
triggers="focus"
placement="right"
container="body"
>
<i [c8yIcon]="'question-circle-o'" class="text-primary"></i>
</button>
</label>
<input
title="{{ 'Menu label' | translate }}"
class="form-control"
name="name"
[(ngModel)]="dashboardName"
placeholder="{{ namePlaceholder | translate }}"
maxlength="512"
required
/>
</c8y-form-group>
</div>
<c8y-form-group *ngIf="isReport">
<label translate>Description</label>
<textarea
class="form-control"
rows="2"
name="description"
[(ngModel)]="dashboard.description"
></textarea>
</c8y-form-group>
<div class="row">
<div class="col-sm-6" *ngIf="!isReport">
<c8y-form-group>
<label>
<span class="m-r-4">{{ 'Position in navigation' | translate }}</span>
<button
class="btn btn-clean"
popover="{{
'Position in navigation menu (10000 first, -10000 last)' | translate
}}"
triggers="focus"
placement="right"
container="body"
>
<i [c8yIcon]="'question-circle-o'" class="text-primary"></i>
</button>
</label>
<input
title="{{ 'Position in navigation' | translate }}"
type="number"
class="form-control"
name="priority"
[(ngModel)]="dashboard.priority"
min="-10000"
max="10000"
placeholder="{{ 'e.g.' | translate }} 500"
required
/>
</c8y-form-group>
</div>
<div class="col-sm-6" *ngIf="isReport">
<label translate>Navigator menu item</label>
<c8y-form-group>
<label title="{{ 'Show in navigator' | translate }}" class="c8y-checkbox">
<input
type="checkbox"
name="isNavigatorNode"
[(ngModel)]="!!dashboard.c8y_IsNavigatorNode"
/><span></span>
<span>{{ 'Show in navigator' | translate }}</span>
</label>
</c8y-form-group>
</div>
<div class="col-sm-6" *ngIf="isReport">
<c8y-form-group>
<label>
<span class="m-r-4">{{ 'Position in navigator' | translate }}</span>
<ng-template #positionInNavPop>
<span>
{{
'Position in navigator (10001 first, -10000 last).' | translate
}}
{{ 'Existing nodes:' | translate }}
</span>
<ul class="list-unstyled m-t-16">
<li *ngFor="let node of navigatorNodes$ | async">
<i [c8yIcon]="node.icon"></i>
<span class="word-break m-l-4 m-r-16">
{{
node.label.length > 15
? (node.label | slice: 0:15) + '...'
: node.label
}}
</span>
<span class="pull-right"> {{ node.priority }} </span>
</li>
</ul>
</ng-template>
<button
class="btn btn-clean"
[popover]="positionInNavPop"
triggers="focus"
placement="right"
container="body"
>
<i [c8yIcon]="'question-circle-o'" class="text-primary"></i>
</button>
</label>
<input
title="{{ 'Position in navigation' | translate }}"
type="number"
class="form-control"
name="priority"
[(ngModel)]="dashboard.priority"
min="-10000"
max="20000"
placeholder="{{ 'e.g.' | translate }} 500"
/>
</c8y-form-group>
</div>
</div>
<div *ngIf="!currentDashboard && deviceType">
<div class="form-group">
<label title="{{ applyToDevicesOfTypeTitle }}" class="c8y-checkbox">
<input
type="checkbox"
name="deviceType"
[(ngModel)]="dashboard.deviceType"
[disabled]="!applyToDevicesOfTypePermitted"
/>
<span></span>
<span class="m-r-4" translate [translateParams]="{ type: dashboard.deviceTypeValue }" ngNonBindable>
Apply dashboard to all devices of type <i>{{ type }}</i>
</span>
</label>
</div>
<div class="alert alert-info m-b-24" *ngIf="isDeviceType">
<i c8y-icon="info"></i>
<span translate [translateParams]="{ type: dashboard.deviceTypeValue }" ngNonBindable>
This dashboard is shared between all devices of the type <i>{{ type }}</i>.
</span>
</div>
</div>
</div>
<c8y-appearance-settings
[(themeClass)]="styling.themeClass"
[(headerClass)]="styling.headerClass"
>
</c8y-appearance-settings>
<div class="row">
<div class="col-sm-6">
<c8y-form-group class="p-b-24 m-b-0">
<label>{{ 'Widget margin' | translate }}</label>
<div class="input-group">
<input
title="{{ 'Widget margin' | translate }}"
id="margin"
name="margin"
type="number"
class="form-control"
[(ngModel)]="dashboard.widgetMargin"
min="0"
max="50"
placeholder="{{ DEFAULT_DASHBOARD_MARGIN }}"
/>
<span class="input-group-addon">px</span>
</div>
</c8y-form-group>
</div>
<div class="col-sm-6">
<c8y-form-group class="p-b-24 m-b-0">
<label translate>Widget titles</label>
<label title="{{ 'Translate if possible' | translate }}" class="c8y-checkbox">
<input
type="checkbox"
name="translateWidgetTitle"
[(ngModel)]="dashboard.translateWidgetTitle"
/><span></span>
<span>{{ 'Translate if possible' | translate }}</span>
</label>
</c8y-form-group>
</div>
</div>
</div>
<div class="col-sm-6">
<c8y-widget-preview
[tab]="!isNamedDashboard ? dashboard : undefined"
[previewClasses]="getDashboardPreviewStyle()"
></c8y-widget-preview>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button title="{{ 'Cancel' | translate }}" class="btn btn-default" (click)="close()">
{{ 'Cancel' | translate }}
</button>
<button
title="{{ 'Save' | translate }}"
class="btn btn-primary"
(click)="save()"
[disabled]="dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine"
>
{{ 'Save' | translate }}
</button>
</div>
</div>