gateway-form.tpl.html 13.4 KB
<!--

    Copyright © 2016-2020 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form name="gatewayConfiguration" class="gateway-form">
    <md-expansion-panel-group>
        <md-expansion-panel md-component-id="thingsboardPanelId">
            <md-expansion-panel-collapsed>
                <div class="tb-panel-title">{{ 'gateway.thingsboard' | translate | uppercase }}</div>
                <span flex></span>
                <md-expansion-panel-icon></md-expansion-panel-icon>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
                <md-expansion-panel-header ng-click="$mdExpansionPanel('thingsboardPanelId').collapse()">
                    <div class="tb-panel-title">{{ 'gateway.thingsboard' | translate | uppercase }}</div>
                    <span flex></span>
                    <md-expansion-panel-icon></md-expansion-panel-icon>
                </md-expansion-panel-header>
                <md-expansion-panel-content>
                    <tb-gateway-config-select tb-required="true"
                                              ng-model="vm.configurations.singleSelect"
                                              the-form="gatewayConfiguration"
                                              gateway-list="vm.gateways"
                                              get_access_token="vm.getAccessToken"
                                              create-device="vm.createDevice">
                    </tb-gateway-config-select>
                    <md-input-container class="md-block">
                        <label>{{'gateway.security-type' | translate }}</label>
                        <md-select name="securityType" ng-model="vm.configurations.securityType">
                            <md-option ng-repeat="securityType in vm.securityTypes" ng-value="securityType.value">
                                {{securityType.name}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                    <div layout="row" class="gateway-form-row"
                         ng-class="{'gateway-config-row-vertical': vm.changeAlignment}">
                        <md-input-container class="md-block" flex>
                            <label>{{ 'gateway.thingsboard-host' | translate }}</label>
                            <input type="text" name="host" ng-model="vm.configurations.host" required>
                            <div ng-messages="gatewayConfiguration.host.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>
                        <md-input-container class="md-block" flex>
                            <label>{{ 'gateway.thingsboard-port' | translate }}</label>
                            <input type="number" min="1" max="65535" step="1" name="port"
                                   ng-model="vm.configurations.port" required>
                            <div ng-messages="gatewayConfiguration.port.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                                <div ng-message="max" translate>max</div>
                                <div ng-message="min" translate>min</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div ng-if="vm.configurations.securityType=='tls'">
                        <md-input-container class="md-block security-type">
                            <label>{{'gateway.tls-path-ca-certificate' | translate }}</label>
                            <input type="text" ng-model="vm.configurations.caCertPath" name="caCertPath"/>
                        </md-input-container>
                        <md-input-container class="md-block">
                            <label>{{'gateway.tls-path-private-key' | translate }}</label>
                            <input type="text" ng-model="vm.configurations.privateKeyPath" name="privateKeyPath"/>
                        </md-input-container>
                        <md-input-container class="md-block">
                            <label>{{'gateway.tls-path-client-certificate' | translate }}</label>
                            <input type="text" ng-model="vm.configurations.certPath" name="certPath"/>
                        </md-input-container>
                    </div>
                    <md-checkbox ng-model="vm.configurations.remoteConfiguration"
                                 name="remoteConfiguration"
                                 ng-click="vm.setSaveTypeConfig({item: vm.configurations.remoteConfiguration})"
                                 aria-label="{{ 'gateway.remote-tip' | translate }}">
                        {{ 'gateway.remote' | translate }}
                        <md-tooltip md-direction="right">{{'gateway.remote-tip' | translate }}</md-tooltip>
                    </md-checkbox>
                    <div layout="row" class="gateway-form-row"
                         ng-class="{'gateway-config-row-vertical': vm.changeAlignment}">
                        <md-input-container class="md-block md-select-container" flex>
                            <label>{{'gateway.remote-logging-level' | translate }}</label>
                            <md-select name="loggingLevel" ng-model="vm.configurations.remoteLoggingLevel">
                                <md-option ng-repeat="loggingLevel in vm.types.gatewayLogLevel"
                                           ng-value="loggingLevel" ng-selected="$index === 5">
                                    {{loggingLevel}}
                                </md-option>
                            </md-select>
                        </md-input-container>
                        <md-input-container class="md-block" flex>
                            <label>{{'gateway.remote-logging-path-logs' | translate }}</label>
                            <input type="text" ng-model="vm.configurations.remoteLoggingPathToLogs"
                                   name="remoteLoggingPathToLogs" required>
                            <div ng-messages="gatewayConfiguration.remoteLoggingPathToLogs.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>
                    </div>
                </md-expansion-panel-content>
            </md-expansion-panel-expanded>
        </md-expansion-panel>
        <md-expansion-panel md-component-id="storagePanelId">
            <md-expansion-panel-collapsed>
                <div class="tb-panel-title">{{ 'gateway.storage' | translate | uppercase }}</div>
                <span flex></span>
                <md-expansion-panel-icon></md-expansion-panel-icon>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
                <md-expansion-panel-header ng-click="$mdExpansionPanel('storagePanelId').collapse()">
                    <div class="tb-panel-title">{{ 'gateway.storage' | translate | uppercase }}</div>
                    <span flex></span>
                    <md-expansion-panel-icon></md-expansion-panel-icon>
                </md-expansion-panel-header>
                <md-expansion-panel-content>
                    <md-input-container class="md-block" flex>
                        <label>{{'gateway.storage-type' | translate }}</label>
                        <md-select required ng-model="vm.configurations.storageType">
                            <md-option ng-repeat="storageType in vm.storageTypes" ng-value="storageType.value">
                                {{storageType.name}}
                            </md-option>
                        </md-select>
                    </md-input-container>

                    <div layout="row" class="gateway-form-row"
                         ng-class="{'gateway-config-row-vertical': vm.changeAlignment}">
                        <md-input-container class="md-block" flex>
                            <label>{{'gateway.storage-read-time' | translate }}</label>
                            <input type="number" min="1" name="readRecordsCount"
                                   ng-model='vm.configurations.readRecordsCount' required/>
                            <div ng-messages="gatewayConfiguration.readRecordsCount.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>

                        <md-input-container class="md-block" flex>
                            <label>{{'gateway.storage-max-time' | translate }}</label>
                            <input type="number" min="1" name="maxRecordsCount"
                                   ng-model='vm.configurations.maxRecordsCount' required/>
                            <div ng-messages="gatewayConfiguration.maxRecordsCount.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>
                    </div>

                    <div layout="row" class="gateway-form-row"
                         ng-if="vm.configurations.storageType == 'fileStorage'"
                         ng-class="{'gateway-config-row-vertical': vm.changeAlignment}">
                        <md-input-container class="md-block" flex>
                            <label>{{'gateway.storage-max-files' | translate }}</label>
                            <input type="number" min="1" name="maxFilesCount" ng-model='vm.configurations.maxFilesCount'
                                   required/>
                            <div ng-messages="gatewayConfiguration.maxFilesCount.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>

                        <md-input-container class="md-block" flex>
                            <label>{{'gateway.storage-data-path' | translate }}</label>
                            <input type="text" name="dataFolderPath" ng-model='vm.configurations.dataFolderPath'
                                   required/>
                            <div ng-messages="gatewayConfiguration.dataFolderPath.$error">
                                <div ng-message="required" translate>extension.field-required</div>
                            </div>
                        </md-input-container>
                    </div>
                </md-expansion-panel-content>
            </md-expansion-panel-expanded>
        </md-expansion-panel>
        <md-expansion-panel md-component-id="connectorsPanelId">
            <md-expansion-panel-collapsed>
                <div class="tb-panel-title">{{ 'gateway.connectors' | translate | uppercase }}</div>
                <span flex></span>
                <md-expansion-panel-icon></md-expansion-panel-icon>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
                <md-expansion-panel-header ng-click="$mdExpansionPanel('connectorsPanelId').collapse()">
                    <div class="tb-panel-title">{{ 'gateway.connectors' | translate | uppercase }}</div>
                    <span flex></span>
                    <md-expansion-panel-icon></md-expansion-panel-icon>
                </md-expansion-panel-header>
                <md-expansion-panel-content>
                    <tb-gateway-config
                            gateway-config="vm.configurations.connectors"
                            change-alignment="vm.changeAlignment">
                    </tb-gateway-config>
                </md-expansion-panel-content>
            </md-expansion-panel-expanded>
        </md-expansion-panel>
    </md-expansion-panel-group>
    <section layout="row" layout-align="end center" class="form-action-buttons">
        <md-button class="md-primary md-raised"
                   ng-click="vm.exportConfig()"
                   ng-if="!vm.configurations.remoteConfiguration"
                   ng-disabled="gatewayConfiguration.$invalid || !gatewayConfiguration.$dirty"
                   aria-label="{{ 'gateway.download-tip' | translate }}">
            {{'action.download' | translate }}
            <md-tooltip>{{'gateway.download-tip' | translate }}</md-tooltip>
        </md-button>

        <md-button class="md-primary md-raised"
                   ng-click="vm.saveAttributeConfig()"
                   ng-if="vm.configurations.remoteConfiguration"
                   ng-disabled="gatewayConfiguration.$invalid || !gatewayConfiguration.$dirty"
                   aria-label="{{ 'gateway.save-tip' | translate }}">
            {{'action.save' | translate }}
            <md-tooltip ng-if="vm.configurations.remoteConfiguration">{{'gateway.save-tip' | translate }}</md-tooltip>
        </md-button>
    </section>
</form>