File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
changes
|
Type : DeviceSoftwareChange[]
|
|
deviceSoftwareChangesOperation
|
Type : IOperation
|
Outputs
|
apply
|
Type : EventEmitter<void>
|
|
clear
|
Type : EventEmitter<void>
|
|
drop
|
Type : EventEmitter<DeviceSoftwareChange>
|
|
hideSoftwareChanges
|
Type : EventEmitter
|
Methods
|
ngOnChanges
|
ngOnChanges(changes: SimpleChanges)
|
Parameters :
| Name |
Type |
Optional |
| changes |
SimpleChanges
|
No
|
|
|
changes$
|
Default value : new BehaviorSubject<DeviceSoftwareChange[]>([])
|
|
installations$
|
Default value : this.changes$.pipe(
map(changes => {
return changes.filter(change => change.action === 'install');
})
)
|
|
PRODUCT_EXPERIENCE
|
Default value : PRODUCT_EXPERIENCE_REPOSITORY_SHARED
|
|
removals$
|
Default value : this.changes$.pipe(
map(changes => {
return changes.filter(change => change.action === 'delete');
})
)
|
Accessors
|
applyButtonLabel
|
getapplyButtonLabel()
|
<div class="inner-scroll d-flex d-col">
<div class="card-header separator sticky-top visible-sm visible-xs">
<button
class="btn btn-dot text-primary"
[title]="'Back' | translate"
type="button"
(click)="hideSoftwareChanges.emit()"
>
<i c8yIcon="chevron-left"></i>
<span translate>Back</span>
</button>
</div>
<div class="card-header separator large-padding sticky-top">
<div
class="card-title"
translate
>
Software changes
</div>
</div>
<div class="flex-grow">
<fieldset
class="card-block large-padding bg-level-2 p-0"
id="operation-block"
*ngIf="deviceSoftwareChangesOperation"
>
<c8y-operation-details [operation]="deviceSoftwareChangesOperation"></c8y-operation-details>
</fieldset>
</div>
<div
class="flex-grow inner-scroll"
id="software-changes-list"
>
<div
class="card-block large-padding"
*ngIf="(changes$ | async).length === 0; else changesList"
>
<div class="c8y-empty-state">
<div class="h1 c8y-icon c8y-icon-device-control c8y-icon-duocolor"></div>
<p>
<strong translate>No software changes.</strong>
<br />
<small translate>Selected actions will be displayed here.</small>
</p>
</div>
</div>
<ng-template #changesList>
<fieldset
class="card-block p-t-0 p-b-0"
*ngIf="(installations$ | async).length > 0"
[disabled]="changesInProgress"
>
<div
class="form-block legend"
translate
>
Installations`software`
</div>
<c8y-device-software-list
[softwareList]="installations$ | async"
(remove)="drop.emit($event)"
></c8y-device-software-list>
</fieldset>
<fieldset
class="card-block p-t-0 p-b-0"
*ngIf="(removals$ | async).length > 0"
[disabled]="changesInProgress"
>
<div
class="form-block legend"
translate
>
Removals`software`
</div>
<c8y-device-software-list
[softwareList]="removals$ | async"
(remove)="drop.emit($event)"
></c8y-device-software-list>
</fieldset>
</ng-template>
</div>
<div
class="card-footer separator large-padding sticky-bottom"
*ngIf="(changes$ | async).length > 0"
>
<button
class="btn btn-default"
title="{{ 'Clear changes' | translate }}"
type="button"
(click)="clear.emit()"
[disabled]="changesInProgress"
translate
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB"
[actionData]="{
component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,
action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.CLEAR_SOFTWARE_CHANGES
}"
>
Clear`changes`
</button>
<button
class="btn btn-primary"
title="{{ applyButtonLabel | translate }}"
type="button"
[ngClass]="{ 'btn-pending': changesInProgress }"
[disabled]="changesInProgress"
(click)="apply.emit(); hideSoftwareChanges.emit()"
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB"
[actionData]="{
component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,
action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.APPLY_SOFTWARE_CHANGES
}"
>
{{ applyButtonLabel | translate }}
</button>
</div>
</div>