Web SDK documentation
  1. Components
  2. DashboardDetailComponent

File

context-dashboard/dashboard-detail.component.ts

Metadata

selector c8y-dashboard-detail
templateUrl ./dashboard-detail.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(modal: BsModalRef, iconList: string[], contextDashboardService: ContextDashboardService, navigatorService: NavigatorService, permissionsService: Permissions, translateService: TranslateService)
Parameters :
Name Type Optional
modal BsModalRef No
iconList string[] No
contextDashboardService ContextDashboardService No
navigatorService NavigatorService No
permissionsService Permissions No
translateService TranslateService No

Methods

close
close()
Returns : void
getDashboardPreviewStyle
getDashboardPreviewStyle()
Returns : {}
ngAfterContentInit
ngAfterContentInit()
Returns : void
save
save()
Returns : void
selectIcon
selectIcon(icon)
Parameters :
Name Optional
icon No
Returns : void
setTitle
setTitle()
Returns : void
setupApplyToDevicesOfTypeCheckbox
setupApplyToDevicesOfTypeCheckbox()
Returns : void
updateFiltered
updateFiltered(term: string)
Parameters :
Name Type Optional
term string No
Returns : void

Properties

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' }
title
Type : string

Accessors

applyToDevicesOfTypeTitle
getapplyToDevicesOfTypeTitle() 
<div class="viewport-modal">
  <div class="modal-header separator-bottom">
    <h3>{{ title | 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
                          }}&nbsp;
                          {{ '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>

results matching ""

    No results matching ""