<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="'Configuration' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="'Application configuration' | translate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="row">
<div class="col-lg-12 col-lg-max">
<form #configForm="ngForm">
<div class="card card--fullpage">
<div class="card-header separator">
<div class="card-title">
{{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}
</div>
</div>
<div class="inner-scroll">
<div class="card-block p-t-0 p-b-0">
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div
class="h4 text-medium d-inline-block m-r-4"
translate
>
Title, icon, and navigator collapse
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8 p-l-16">
<div class="d-flex a-i-start gap-16">
<div class="form-group d-inline-block">
<label>{{ 'Icon' | translate }}</label>
<c8y-icon-selector-wrapper
[selectedIcon]="config?.icon?.class || 'c8y-cockpit'"
[iconSize]="24"
(onSelect)="iconSelectionChange($event)"
></c8y-icon-selector-wrapper>
</div>
<div class="form-group flex-grow">
<label
for="confAppTitle"
translate
>
Change application title
</label>
<input
class="form-control"
id="confAppTitle"
placeholder="{{ 'e.g. Cockpit' | translate }} "
type="text"
maxlength="254"
[(ngModel)]="config.appTitle"
[ngModelOptions]="{ standalone: true }"
/>
</div>
</div>
<c8y-misc-config [config]="config"></c8y-misc-config>
</div>
</fieldset>
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-4"
translate
>
Features
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Define which are the enabled features in the current application.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8">
<c8y-feature-config
[config]="config"
(onUpdate)="updateFeatures()"
></c8y-feature-config>
</div>
</fieldset>
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-8"
translate
>
Top level nodes
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-10 col-md-10">
<div class="row">
<c8y-root-node-config
[config]="config"
(onUpdate)="updateRootNodes()"
[disabled]="rootNodeDisabled"
></c8y-root-node-config>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8 col-sm-offset-3 col-md-offset-2">
<div class="row">
<c8y-li class="m-t-16">
<c8y-li-icon icon="c8y-group-open"></c8y-li-icon>
<div class="d-flex a-i-center">
<div class="p-r-16">
<p>{{ 'Show groups as top-level' | translate }}</p>
<p>
<small translate>
Show all root groups as top-level nodes in the navigator menu (only the
first 500 groups will be shown as top-level nodes).
</small>
</p>
</div>
<label class="c8y-switch c8y-switch--inline m-l-auto">
<input
[attr.aria-label]="'Show groups as top-level' | translate"
name="showGroupsAsTopNode"
type="checkbox"
[(ngModel)]="config.showGroupsAsTopNode"
(change)="updateRootNodes()"
/>
<span></span>
</label>
</div>
</c8y-li>
<c8y-li>
<c8y-li-icon icon="c8y-enterprise"></c8y-li-icon>
<div class="d-flex a-i-center">
<div class="p-r-16">
<p>{{ 'Show assets as top-level' | translate }}</p>
<p>
<small translate>
Show all root assets as top-level nodes in the navigator menu (only the
first 500 assets will be shown as top-level nodes).
</small>
</p>
</div>
<label class="c8y-switch c8y-switch--inline m-l-auto">
<input
[attr.aria-label]="'Show assets as top-level' | translate"
name="showAssetsAsTopNode"
type="checkbox"
[(ngModel)]="config.showAssetsAsTopNode"
(change)="updateRootNodes()"
/>
<span></span>
</label>
</div>
</c8y-li>
</div>
</div>
</fieldset>
@if ('CockpitDashboardModule' | c8yPluginLoaded | async) {
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-8"
translate
>
Home dashboard
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8">
<c8y-home-dashboard-config [config]="config"></c8y-home-dashboard-config>
</div>
</fieldset>
}
@if ('htmlWidgetProviders' | c8yPluginLoaded | async) {
<fieldset class="row p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-8"
translate
>
HTML widget
</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8">
<c8y-li>
<c8y-li-icon icon="code1"></c8y-li-icon>
<div class="d-flex a-i-center">
<div class="p-r-16">
<p>{{ 'Disable sanitization' | translate }}</p>
<p>
<small translate>
By default, every unsecure HTML is removed from the HTML widget. You can
disable this behavior in this application and allow unsecure HTML to be
used.
</small>
</p>
</div>
<label class="c8y-switch c8y-switch--inline m-l-auto">
<input
[attr.aria-label]="'Disable sanitization' | translate"
name="htmlWidgetDisableSanitization"
type="checkbox"
[(ngModel)]="config.htmlWidgetDisableSanitization"
/>
<span></span>
</label>
</div>
</c8y-li>
<c8y-li class="">
<c8y-li-icon icon="settings"></c8y-li-icon>
<div class="d-flex a-i-center">
<div class="p-r-16">
<p>{{ 'Enforce advanced mode' | translate }}</p>
<p>
<small translate>
If set to true, the HTML widget configuration will always be opened in
the advanced mode (web component mode).
</small>
</p>
</div>
<label class="c8y-switch c8y-switch--inline m-l-auto">
<input
[attr.aria-label]="'Enforce advanced mode' | translate"
name="htmlWidgetDefaultToAdvancedMode"
type="checkbox"
[(ngModel)]="config.htmlWidgetDefaultToAdvancedMode"
/>
<span></span>
</label>
</div>
</c8y-li>
</div>
</fieldset>
}
</div>
</div>
<div class="card-footer separator">
<button
class="btn btn-primary"
title="{{ 'Save' | translate }}"
type="submit"
[disabled]="!configForm.form.valid"
(click)="save()"
[actionName]="'cockpitConfigurationSaved'"
[actionData]="{ config: config }"
c8yProductExperience
>
{{ 'Save' | translate }}
</button>
</div>
</div>
</form>
</div>
</div>