<c8y-title>
{{ (software$ | async)?.name }}
</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
icon="c8y-management"
label="{{ 'Management' | translate }}"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
icon="c8y-tools"
path="#/software"
label="{{ 'Software repository' | translate }}"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
icon="c8y-tools"
label="{{ (software$ | async)?.name }}"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-action-bar-item [placement]="'right'">
@if (!(isLegacy$ | async)) {
<button
class="btn btn-link"
title="{{ 'Add software' | translate }}"
type="button"
data-cy="c8y-software-details--add-software-btn"
(click)="addBaseVersion()"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add software' | translate }}
</button>
}
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<button
class="btn btn-link"
title="{{ 'Reload' | translate }}"
type="button"
(click)="reload$.next()"
>
<i
c8yIcon="refresh"
[ngClass]="{ 'icon-spin': reloading$ | async }"
></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<div class="row">
<div class="col-lg-12 col-lg-max">
<div class="card card--fullpage">
<div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible">
<div class="content-flex-70">
<div class="text-center">
<i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools"></i>
<p>
<small class="label label-info">Software</small>
</p>
</div>
<div class="flex-grow col-10">
<div class="row">
<div class="col-sm-6">
<c8y-form-group>
<label class="control-label">
{{ 'Name' | translate }}
</label>
<c8y-input-group-editable
required
formGroupClass="m-b-0"
[ariaLabel]="'Software name' | translate"
[placeholder]="'e.g. My software' | translate"
[ngModel]="(software$ | async)?.name"
(save)="updateSoftware$.next({ name: $event })"
></c8y-input-group-editable>
</c8y-form-group>
</div>
<div class="col-sm-6">
<c8y-form-group>
<label class="control-label">
{{ 'Description' | translate }}
</label>
<c8y-input-group-editable
formGroupClass="m-b-0"
[ariaLabel]="'Software description' | translate"
[placeholder]="'e.g. Cloud connectivity software' | translate"
[ngModel]="(software$ | async)?.description"
(save)="updateSoftware$.next({ description: $event })"
></c8y-input-group-editable>
</c8y-form-group>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<c8y-form-group>
<label class="control-label">
{{ 'Device type' | translate }}
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{
'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'
| translate
}}"
triggers="focus"
container="body"
type="button"
>
<i c8yIcon="question-circle-o"></i>
</button>
</label>
<c8y-input-group-editable
formGroupClass="m-b-0"
[ariaLabel]="'Device type' | translate"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Linux' }"
[ngModel]="(software$ | async)?.c8y_Filter?.type"
(save)="updateSoftware$.next({ c8y_Filter: { type: $event } })"
></c8y-input-group-editable>
</c8y-form-group>
</div>
<div class="col-sm-6">
<c8y-form-group>
<label class="control-label">
{{ 'Software type' | translate }}
</label>
<div class="input-group">
<c8y-software-type
[class.ng-dirty]="isSoftwareTypeChanged"
[softwareTypeMO]="softwareTypeObject"
(onSelectSoftware)="onSelectSoftwareType($event)"
></c8y-software-type>
@if (isSoftwareTypeChanged) {
<div class="input-group-btn">
<button
class="btn btn-default"
[title]="'Cancel' | translate"
[attr.aria-label]="'Cancel' | translate"
type="button"
(click)="cancelSoftwareTypeChange()"
>
<i
c8yIcon="times"
aria-hidden="true"
></i>
</button>
<button
class="m-l-0 btn btn-primary"
[title]="'Save' | translate"
[attr.aria-label]="'Save' | translate"
type="button"
[disabled]="softwareTypeObject?.softwareType === ''"
(click)="
updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });
isSoftwareTypeChanged = false
"
>
<i
c8yIcon="check"
aria-hidden="true"
></i>
</button>
</div>
}
</div>
</c8y-form-group>
</div>
</div>
</div>
</div>
</div>
<div class="inner-scroll">
<div class="card-header separator-top-bottom sticky-top bg-component">
<div
class="card-title"
translate
>
Versions
</div>
</div>
<div class="card-block p-t-0 p-b-24">
@if ((baseVersions$ | async)?.data.length === 0) {
<c8y-ui-empty-state
[icon]="'c8y-tools'"
[title]="'No versions to display.' | translate"
[subtitle]="'Add a new version by clicking below.' | translate"
>
<p>
<button
class="btn btn-primary"
title="{{ 'Add software' | translate }}"
type="button"
(click)="addBaseVersion()"
>
{{ 'Add software' | translate }}
</button>
</p>
</c8y-ui-empty-state>
}
@if ((baseVersions$ | async)?.data.length > 0) {
<c8y-list-group>
<c8y-li
*c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'"
>
<c8y-li-icon>
<i c8yIcon="c8y-tools"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-50">
<div class="col-4">
<p
class="text-truncate-wrap"
title="{{ baseVersion.c8y_Software.version }}"
>
{{ baseVersion.c8y_Software.version }}
</p>
</div>
<div class="col-5">
<p class="text-truncate-wrap">
<span
class="text-label-small m-r-8"
translate
>
File
</span>
@if (baseVersion?.c8y_Software?.url === '') {
<span title="{{ 'Provided by device' | translate }}">
{{ 'Provided by device' | translate }}
</span>
} @else {
<span title="{{ getBinaryName$(baseVersion.c8y_Software.url) | async }}">
<c8y-file-download
[url]="baseVersion.c8y_Software.url"
></c8y-file-download>
</span>
}
</p>
</div>
<div class="col-2 d-flex a-i-start">
@if (isLegacy$ | async) {
<span class="label label-warning m-l-auto-sm">
{{ 'Legacy' | translate }}
</span>
}
@if (!(isLegacy$ | async)) {
<div class="fit-h-20">
<button
class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
title="{{ 'Delete' | translate }}"
type="button"
(click)="deleteBaseVersion(baseVersion)"
>
<i c8yIcon="delete"></i>
{{ 'Delete' | translate }}
</button>
</div>
}
</div>
@if (!(isLegacy$ | async)) {
<div class="m-l-auto fit-h-20 hidden-xs">
<button
class="btn btn-dot text-danger showOnHover"
[attr.aria-label]="'Delete' | translate"
tooltip="{{ 'Delete' | translate }}"
type="button"
data-cy="software-details-component--Delete-button"
[delay]="500"
(click)="deleteBaseVersion(baseVersion)"
>
<i c8yIcon="delete"></i>
</button>
</div>
}
</c8y-li-body>
</c8y-li>
</c8y-list-group>
}
</div>
</div>
</div>
</div>
</div>