File
Implements
Methods
|
Async
addConnection
|
addConnection()
|
|
|
|
changePassword
|
changePassword()
|
|
|
|
Async
deleteConnection
|
deleteConnection(originalConnection)
|
Parameters :
| Name |
Optional |
| originalConnection |
No
|
|
|
Async
loadConnections
|
loadConnections()
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
Async
resetEditedUnsavedConnection
|
resetEditedUnsavedConnection()
|
|
|
|
Async
save
|
save()
|
|
Returns : unknown
|
|
Async
saveConnection
|
saveConnection()
|
|
|
|
Async
setAdminAndCoreApiVersion
|
setAdminAndCoreApiVersion()
|
|
|
|
Async
setModel
|
setModel(connectionObj: null)
|
Parameters :
| Name |
Type |
Optional |
Default value |
| connectionObj |
null
|
No
|
null
|
|
|
allowedSpecialCharacters
|
Type : string
|
Default value : '~!@$^(){}[]|:,<+=,.`_ -'
|
|
cardHeader
|
Default value : gettext('Actility connections')
|
|
connections
|
Default value : Array<ActilityConnection>()
|
|
connectorsForm
|
Type : NgForm
|
Decorators :
@ViewChild('connectorsForm', {static: false})
|
|
namePattern
|
Default value : `^[a-zA-Z0-9 ${escapeRegExp(this.allowedSpecialCharacters)}]*$`
|
|
namePatternError
|
Default value : this.translateService.instant(
gettext(
'Connection name can only contain letters, numbers, spaces, and the following symbols: {{ symbols }}'
),
{
symbols: this.allowedSpecialCharacters
}
)
|
|
showPassword
|
Default value : false
|
|
state
|
Type : LpwanState
|
Default value : 'loadingConnection'
|
<ng-container *ngIf="state === 'loadingConnection'; else renderListAndForm">
<c8y-loading></c8y-loading>
</ng-container>
<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[label]="'Settings' | translate"
[icon]="'cog'"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'cog'"
[label]="'Connectivity' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'cog'"
[label]="'Actility' | translate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<ng-template #renderListAndForm>
<no-connections-found
(onAction)="addConnection()"
*ngIf="connections.length === 0 && state !== 'addConnections'"
[header]="cardHeader | translate"
></no-connections-found>
<div>
<div
class="card content-fullpage split-view--5-7"
*ngIf="connections.length !== 0 || state === 'addConnections'"
>
<div class="card-header separator grid__col--fullspan">
<div class="card-title">{{ cardHeader | translate }}</div>
</div>
<div class="inner-scroll split-view__list">
<div class="bg-level-1 flex-grow">
<c8y-list-group class="nav c8y-nav-stacked">
<c8y-li
class="c8y-stacked-item p-0"
[class.active]="connection.name === connectionBeingEdited"
*ngFor="let connection of connections; let index = index"
(click)="setModel(connection)"
>
<c8y-li-icon [icon]="'plug'"></c8y-li-icon>
<span title="{{ connection.name }}">
{{ connection.name }}
</span>
</c8y-li>
<c8y-li
*ngIf="state === 'addConnections'"
class="c8y-nav-stacked active"
(click)="addConnection()"
>
<c8y-li-icon [icon]="'plug'"></c8y-li-icon>
{{ 'New connection' | translate }}
</c8y-li>
</c8y-list-group>
</div>
<div class="card-footer separator-top">
<button
[disabled]="state === 'addConnections'"
title="{{ 'Add connection' | translate }}"
class="btn btn-default"
(click)="addConnection()"
>
<i [c8yIcon]="'plus-circle'"></i>
{{ 'Add connection' | translate }}
</button>
</div>
</div>
<!-- 'split-view__detail--selected' condition needs to be fixed. this is needed so that both columns are visible in tablet format -->
<div
class="inner-scroll split-view__detail"
ng-class="{ 'split-view__detail--selected': vm.selected && vm.jsonSchemaObjects }"
>
<div class="card-header separator visible-sm visible-xs fit-w sticky-top">
<button
title="{{ 'Back' | translate }}"
class="btn btn-clean text-primary"
ng-click="vm.deselect()"
>
<i [c8yIcon]="'chevron-left'"></i>
<span>{{ 'Back' | translate }}</span>
</button>
</div>
<form #connectorsForm="ngForm" class="d-contents">
<div class="flex-grow">
<div class="card-block large-padding">
<c8y-form-group>
<label for="name">
{{ 'Name' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="'e.g. Actility connection' | translate"
id="name"
name="name"
[(ngModel)]="connection.name"
required
[pattern]="namePattern"
/>
<c8y-messages>
<c8y-message name="pattern" [text]="namePatternError"></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label for="description">
{{ 'Description' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="
'e.g. This connection has a built-in functionality to…' | translate
"
id="description"
name="description"
[(ngModel)]="connection.description"
/>
</c8y-form-group>
<c8y-form-group>
<label for="baseUrl">
{{ 'URL' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="
'e.g. {{ example }}' | translate: { example: 'https://dx-api.thingpark.io' }
"
id="baseUrl"
name="baseUrl"
[(ngModel)]="connection.baseUrl"
required
/>
</c8y-form-group>
<c8y-form-group>
<label for="profileId">
{{ 'Profile ID' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'dev1-api' }"
id="profileId"
name="profileId"
[(ngModel)]="connection.profileId"
required
/>
</c8y-form-group>
<!-- DM-1171 start-->
<c8y-form-group>
<label for="applicationServerId">
{{ 'Application server ID' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="'e.g. Application Server' | translate"
id="applicationServerId"
name="applicationServerId"
[(ngModel)]="connection.routeApplicationServerId"
[required]="connection.routeApplicationServerKey ? 'required' : null"
/>
</c8y-form-group>
<c8y-form-group>
<label for="applicationServerKey">
{{ 'Application server key' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="
'e.g. {{ example }}'
| translate: { example: '0011AEDF0011AEDF0011AEDF0011AEDF' }
"
id="applicationServerKey"
name="applicationServerKey"
[(ngModel)]="connection.routeApplicationServerKey"
[required]="connection.routeApplicationServerId ? 'required' : null"
pattern="[A-Fa-f0-9]{32}"
/>
<c8y-messages>
<c8y-message
name="pattern"
text="{{ 'Must be a valid server key' | translate }}"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label for="adminApiVersion">
{{ 'Admin API version' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'v102' }"
id="adminApiVersion"
name="adminApiVersion"
[(ngModel)]="connection.adminApiVersion"
required
pattern="^v\d+$|latest"
/>
<c8y-messages>
<c8y-message
name="pattern"
text="{{ 'Must be a valid API version' | translate }}"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label for="coreApiVersion">
{{ 'Core API version' | translate }}
</label>
<input
type="text"
class="form-control"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'v121' }"
id="coreApiVersion"
name="coreApiVersion"
[(ngModel)]="connection.coreApiVersion"
required
pattern="^v\d+$|latest"
/>
<c8y-messages>
<c8y-message
name="pattern"
text="{{ 'Must be a valid API version' | translate }}"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<!-- DM-1171 end-->
<c8y-form-group>
<label for="username">
{{ 'Username' | translate }}
</label>
<input
type="text"
class="form-control"
placeholder="{{ 'e.g. joe`LOCALIZE`' | translate }}"
id="username"
name="username"
[(ngModel)]="connection.username"
required
/>
</c8y-form-group>
<c8y-form-group *ngIf="showPassword">
<label for="password">
{{ 'Password' | translate }}
</label>
<input
type="password"
class="form-control"
placeholder="{{ 'e.g. my_password' | translate }}"
id="password"
name="password"
[(ngModel)]="connection.password"
required
/>
</c8y-form-group>
<!-- DM-1254 begins -->
<c8y-form-group>
<label title="{{ 'Connection type' | translate }}">
{{ 'Connection type' | translate }}
</label>
<label title="{{ 'Thingpark Enterprise' }}" class="c8y-radio radio-inline">
<input type="radio" name="c8y-group" [value]="true"
[(ngModel)]="connection.enterpriseConnection" required>
<span></span>
<span>{{ 'Thingpark Enterprise' }}</span>
</label>
<label title="{{ 'Thingpark Wireless' }}" class="c8y-radio radio-inline">
<input type="radio" name="c8y-group" [value]="false"
[(ngModel)]="connection.enterpriseConnection" required>
<span></span>
<span>{{ 'Thingpark Wireless' }}</span>
</label>
</c8y-form-group>
<!-- DM-1254 ends -->
<button
*ngIf="state === 'updateConnection'"
type="button"
class="btn btn-default"
name="changePassword"
(click)="changePassword()"
>
<span title="{{ 'Change password' | translate }}" *ngIf="!showPassword">
{{ 'Change password' | translate }}
</span>
<span title="{{ 'Cancel password change' | translate }}" *ngIf="showPassword">
{{ 'Cancel password change' | translate }}
</span>
</button>
</div>
</div>
<div class="card-footer separator-top">
<button
title="{{ 'Cancel' | translate }}"
class="btn btn-default"
(click)="setModel()"
translate
type="button"
>
Cancel
</button>
<button
*ngIf="state === 'updateConnection'"
title="{{ 'Delete' | translate }}"
class="btn btn-danger"
data-cy="actility-multiple-lns-connector--delete-connectivity"
(click)="deleteConnection(originalConnection)"
translate
type="button"
>
Delete
</button>
<button
[disabled]="!this.connectorsForm.form.valid || this.connectorsForm.form.pristine"
title="{{ 'Save' | translate }}"
class="btn btn-primary"
data-cy="actility-multiple-lns-connector.component--save-connectivity"
(click)="save()"
translate
type="submit"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>
</ng-template>