-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(datapoints-graph): alarm selector list item component
Alarm selector list item component added n/a
- Loading branch information
Showing
8 changed files
with
277 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
221 changes: 221 additions & 0 deletions
221
...nts-graph/alarm-selector/alarm-selector-list-item/alarm-selector-list-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
| <c8y-li | ||
| class="c8y-list__item__collapse--container-small" | ||
| [formGroup]="formGroup" | ||
| #li | ||
| > | ||
| <c8y-li-drag-handle | ||
| ><ng-content select="c8y-li-drag-handle"></ng-content | ||
| ></c8y-li-drag-handle> | ||
| <c8y-li-checkbox | ||
| class="a-s-center p-r-0" | ||
| [displayAsSwitch]="true" | ||
| formControlName="__active" | ||
| (click)="$event.stopPropagation()" | ||
| ></c8y-li-checkbox> | ||
|
|
||
| <!-- <div class="d-flex a-i-center p-l-16">--> | ||
| <!-- <div class="c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0" [title]="'Change color' | translate">--> | ||
| <!-- <div class="c8y-colorpicker">--> | ||
| <!-- <input--> | ||
| <!-- type="color"--> | ||
| <!-- [attr.aria-label]="'Color' | translate"--> | ||
| <!-- formControlName="color"--> | ||
| <!-- (click)="$event.stopPropagation()"--> | ||
| <!-- />--> | ||
| <!-- <span [style.background-color]="formGroup.value.color"></span>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
| <!-- <button--> | ||
| <!-- class="btn-clean data-point-label text-truncate"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-expanded]="!li.collapsed"--> | ||
| <!-- (click)="li.collapsed = !li.collapsed"--> | ||
| <!-- >--> | ||
| <!-- <span class="text-truncate" [title]="formGroup.value.details?.label">--> | ||
| <!-- <c8y-highlight--> | ||
| <!-- [text]="formGroup.value.details?.label"--> | ||
| <!-- [pattern]="highlightText"--> | ||
| <!-- [shouldTrimPattern]="true"--> | ||
| <!-- ></c8y-highlight>--> | ||
| <!-- </span>--> | ||
| <!-- <small class="text-truncate text-muted icon-flex" *ngIf="formGroup.value.__target">--> | ||
| <!-- <i c8yIcon="exchange"></i>--> | ||
| <!-- <span class="text-truncate">{{ formGroup.value.__target.name }}</span>--> | ||
| <!-- </small>--> | ||
| <!-- </button>--> | ||
|
|
||
| <!-- <button--> | ||
| <!-- class="btn btn-dot btn-dot--danger m-l-auto"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-label]="'Invalid' | translate"--> | ||
| <!-- [popover]="'Some entries are invalid. Check the input fields with red borders.' | translate"--> | ||
| <!-- triggers="focus"--> | ||
| <!-- placement="right"--> | ||
| <!-- container="body"--> | ||
| <!-- *ngIf="!(isValid$ | async)"--> | ||
| <!-- >--> | ||
| <!-- <i c8yIcon="warning"></i>--> | ||
| <!-- </button>--> | ||
| <!-- <div class="m-l-auto a-s-center p-r-4" *ngIf="showAddRemoveButton">--> | ||
| <!-- <button--> | ||
| <!-- class="btn btn-dot btn-dot--danger"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-label]="'Remove' | translate"--> | ||
| <!-- [tooltip]="'Remove from selected data points' | translate"--> | ||
| <!-- [delay]="500"--> | ||
| <!-- (click)="addOrRemoveItem()"--> | ||
| <!-- *ngIf="isSelected"--> | ||
| <!-- [attr.data-cy]="'datapoint-selector-list-item--remove-datapoint-button'"--> | ||
| <!-- >--> | ||
| <!-- <i class="icon-20" c8yIcon="minus-circle"></i>--> | ||
| <!-- </button>--> | ||
| <!-- <button--> | ||
| <!-- class="btn btn-dot text-primary"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-label]="'Add to selected data points' | translate"--> | ||
| <!-- [tooltip]="'Add to selected data points' | translate"--> | ||
| <!-- [delay]="500"--> | ||
| <!-- (click)="addOrRemoveItem()"--> | ||
| <!-- *ngIf="!isSelected"--> | ||
| <!-- [attr.data-cy]="'datapoint-selector-list-item--add-datapoint-button'"--> | ||
| <!-- >--> | ||
| <!-- <i class="text-primary icon-20" c8yIcon="plus-circle"></i>--> | ||
| <!-- </button>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
|
|
||
| <!-- <c8y-li-action--> | ||
| <!-- *ngIf="optionToRemove"--> | ||
| <!-- [icon]="'minus-circle'"--> | ||
| <!-- [label]="'Remove from list' | translate"--> | ||
| <!-- (click)="remove()"--> | ||
| <!-- ></c8y-li-action>--> | ||
| <!-- <c8y-li-action--> | ||
| <!-- *ngFor="let action of actions"--> | ||
| <!-- [icon]="action.icon"--> | ||
| <!-- [label]="action.label"--> | ||
| <!-- (click)="action.callback(formGroup.value)"--> | ||
| <!-- ></c8y-li-action>--> | ||
| <!-- <c8y-li-collapse>--> | ||
| <!-- <div class="data-point-details">--> | ||
| <!-- <ul class="list-unstyled small m-b-16">--> | ||
| <!-- <li class="p-t-4 p-b-4 d-flex separator-top-bottom">--> | ||
| <!-- <label class="small m-b-0 m-r-8 a-s-start text-muted" translate>Fragment</label>--> | ||
| <!-- <span class="m-l-auto">--> | ||
| <!-- <c8y-highlight--> | ||
| <!-- [text]="formGroup.value.fragment"--> | ||
| <!-- [pattern]="highlightText"--> | ||
| <!-- [shouldTrimPattern]="true"--> | ||
| <!-- ></c8y-highlight>--> | ||
| <!-- </span>--> | ||
| <!-- </li>--> | ||
| <!-- <li class="p-t-4 p-b-4 d-flex separator-bottom">--> | ||
| <!-- <label class="small m-b-0 m-r-8 a-s-start text-muted" translate>Series</label>--> | ||
| <!-- <span class="m-l-auto">--> | ||
| <!-- <c8y-highlight--> | ||
| <!-- [text]="formGroup.value.series"--> | ||
| <!-- [pattern]="highlightText"--> | ||
| <!-- [shouldTrimPattern]="true"--> | ||
| <!-- ></c8y-highlight>--> | ||
| <!-- </span>--> | ||
| <!-- </li>--> | ||
| <!-- </ul>--> | ||
| <!-- <div--> | ||
| <!-- class="form-group"--> | ||
| <!-- *ngIf="datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries"--> | ||
| <!-- >--> | ||
| <!-- <label class="d-inline-block" translate>Data point template</label>--> | ||
| <!-- <button--> | ||
| <!-- class="btn-help btn-help--sm"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-label]="'Help' | translate"--> | ||
| <!-- [popover]="datapointHintPopoverTemplate"--> | ||
| <!-- (click)="$event.stopPropagation()"--> | ||
| <!-- triggers="focus"--> | ||
| <!-- placement="top"--> | ||
| <!-- container="body"--> | ||
| <!-- ></button>--> | ||
|
|
||
| <!-- <ng-template #datapointHintPopoverTemplate>--> | ||
| <!-- {{--> | ||
| <!-- 'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'--> | ||
| <!-- | translate--> | ||
| <!-- }}--> | ||
| <!-- </ng-template>--> | ||
| <!-- <div class="d-flex">--> | ||
| <!-- <c8y-typeahead--> | ||
| <!-- class="flex-grow"--> | ||
| <!-- [placeholder]="'No template' | translate"--> | ||
| <!-- [ngModel]="formGroup.value.__template ? formGroup.value.details : undefined"--> | ||
| <!-- [ngModelOptions]="{ standalone: true }"--> | ||
| <!-- (onSearch)="setPipe($event)"--> | ||
| <!-- [displayProperty]="'label'"--> | ||
| <!-- [hideNew]="true"--> | ||
| <!-- *ngIf="datapointLibraryEntries"--> | ||
| <!-- [disabled]="isSelected && disableTypeaheadIfSelected"--> | ||
| <!-- >--> | ||
| <!-- <c8y-li--> | ||
| <!-- class="p-l-8 p-r-8 c8y-list__item--link interact"--> | ||
| <!-- *c8yFor="--> | ||
| <!-- let item of datapointLibraryEntries;--> | ||
| <!-- loadMore: 'auto';--> | ||
| <!-- pipe: filterPipe;--> | ||
| <!-- notFound: notFoundTemplate--> | ||
| <!-- "--> | ||
| <!-- (click)="dataPointTemplateSelected(item)"--> | ||
| <!-- [active]="formGroup.value.__template === item.id"--> | ||
| <!-- [attr.role]="'menuitem'"--> | ||
| <!-- >--> | ||
| <!-- <c8y-highlight [text]="item.c8y_Kpi?.label" [pattern]="pattern"></c8y-highlight>--> | ||
| <!-- <c8y-li-icon icon="circle" [style.color]="item.c8y_Kpi?.color"></c8y-li-icon>--> | ||
| <!-- </c8y-li>--> | ||
| <!-- <ng-template #notFoundTemplate>--> | ||
| <!-- <c8y-li class="bg-level-2 p-8" *ngIf="pattern.length > 0">--> | ||
| <!-- <span>No match found.</span>--> | ||
| <!-- </c8y-li>--> | ||
| <!-- </ng-template>--> | ||
| <!-- </c8y-typeahead>--> | ||
| <!-- <button--> | ||
| <!-- class="btn btn-info btn-xs btn-icon a-s-center m-l-8"--> | ||
| <!-- type="button"--> | ||
| <!-- [attr.aria-label]="'Info' | translate"--> | ||
| <!-- [popover]="datapointOverviewPopoverTemplate"--> | ||
| <!-- placement="left"--> | ||
| <!-- triggers="focus"--> | ||
| <!-- container="body"--> | ||
| <!-- *ngIf="formGroup.value.__template"--> | ||
| <!-- >--> | ||
| <!-- <i class="text-info" c8yIcon="info"></i>--> | ||
| <!-- </button>--> | ||
| <!-- <button--> | ||
| <!-- class="btn btn-danger btn-xs btn-icon a-s-center m-l-8"--> | ||
| <!-- type="button"--> | ||
| <!-- tooltip="{{ 'Unlink data point template' | translate }}"--> | ||
| <!-- [attr.aria-label]="'Unlink data point template' | translate"--> | ||
| <!-- triggers="mouseenter"--> | ||
| <!-- [delay]="500"--> | ||
| <!-- *ngIf="formGroup.value.__template && hasUnlinkTemplateOption"--> | ||
| <!-- (click)="unlinkDatapointTemplate()"--> | ||
| <!-- >--> | ||
| <!-- <i c8yIcon="unlink"></i>--> | ||
| <!-- </button>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
| <!-- <ng-template #datapointOverviewPopoverTemplate>--> | ||
| <!-- <c8y-datapoint-template-popover--> | ||
| <!-- [datapoint]="formGroup.value.details"--> | ||
| <!-- ></c8y-datapoint-template-popover>--> | ||
| <!-- </ng-template>--> | ||
| <!-- <c8y-datapoint-attributes-form--> | ||
| <!-- *ngIf="defaultFormOptions"--> | ||
| <!-- [showTarget]="defaultFormOptions.showTarget"--> | ||
| <!-- [showRange]="defaultFormOptions.showRange"--> | ||
| <!-- [showYellowRange]="defaultFormOptions.showYellowRange"--> | ||
| <!-- [showRedRange]="defaultFormOptions.showRedRange"--> | ||
| <!-- [showChart]="defaultFormOptions.showChart"--> | ||
| <!-- [showFormIfTemplateWasSelected]="defaultFormOptions.showFormIfTemplateWasSelected"--> | ||
| <!-- formControlName="details"--> | ||
| <!-- ></c8y-datapoint-attributes-form>--> | ||
| <!-- </div>--> | ||
| <!-- </c8y-li-collapse>--> | ||
| </c8y-li> |
22 changes: 22 additions & 0 deletions
22
...oints-graph/alarm-selector/alarm-selector-list-item/alarm-selector-list-item.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Component, forwardRef } from '@angular/core'; | ||
| import { FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms'; | ||
|
|
||
| @Component({ | ||
| selector: 'c8y-alarm-selector-list-item', | ||
| templateUrl: './alarm-selector-list-item.component.html', | ||
| providers: [ | ||
| { | ||
| provide: NG_VALUE_ACCESSOR, | ||
| useExisting: forwardRef(() => AlarmSelectorListItemComponent), | ||
| multi: true, | ||
| }, | ||
| { | ||
| provide: NG_VALIDATORS, | ||
| useExisting: forwardRef(() => AlarmSelectorListItemComponent), | ||
| multi: true, | ||
| }, | ||
| ], | ||
| }) | ||
| export class AlarmSelectorListItemComponent { | ||
| formGroup: FormGroup; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters