thingsboard/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html

<form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
  <div fxLayout="row wrap" fxLayoutGap="6px">
    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="15" class="mat-block">
      <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
      <mat-select formControlName="protocolVersion">
        <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
          {{smppVersion.value}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
      <input required matInput formControlName="host">
      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
        {{'admin.smpp-provider.smpp-host-required' | translate}}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="30" class="mat-block">
      <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
      <input required matInput type="number" formControlName="port">
      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
        {{'admin.smpp-provider.smpp-port-required' | translate}}
      </mat-error>
    </mat-form-field>
  </div>
  <div fxLayout="row wrap" fxLayoutGap="6px">
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>admin.smpp-provider.system-id</mat-label>
      <input required matInput formControlName="systemId">
      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
        {{'admin.smpp-provider.system-id-required' | translate}}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>admin.smpp-provider.password</mat-label>
      <input required matInput type="password" autocomplete="new-password" formControlName="password">
      <tb-toggle-password matSuffix></tb-toggle-password>
      <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('password').hasError('required')">
        {{'admin.smpp-provider.password-required' | translate}}
      </mat-error>
    </mat-form-field>
  </div>
  <mat-accordion multi>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title translate>
          admin.smpp-provider.type-settings
        </mat-panel-title>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.system-type</mat-label>
          <input matInput formControlName="systemType">
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.bind-type</mat-label>
          <mat-select formControlName="bindType">
            <mat-option *ngFor="let bindType of bindTypes" [value]="bindType">
              {{bindTypesTranslation.get(bindType) | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.service-type</mat-label>
          <input matInput formControlName="serviceType">
        </mat-form-field>
      </ng-template>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title translate>
          admin.smpp-provider.source-settings
        </mat-panel-title>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.source-address</mat-label>
          <input matInput formControlName="sourceAddress">
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.source-ton</mat-label>
          <mat-select formControlName="sourceTon">
            <mat-option *ngFor="let sourceTon of typeOfNumber" [value]="typeOfNumberMap.get(sourceTon).value">
              {{typeOfNumberMap.get(sourceTon).name | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.source-npi</mat-label>
          <mat-select formControlName="sourceNpi">
            <mat-option *ngFor="let sourceNpi of numberingPlanIdentification" [value]="numberingPlanIdentificationMap.get(sourceNpi).value">
              {{numberingPlanIdentificationMap.get(sourceNpi).name | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </ng-template>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title translate>
          admin.smpp-provider.destination-settings
        </mat-panel-title>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.destination-ton</mat-label>
          <mat-select formControlName="destinationTon">
            <mat-option *ngFor="let destinationTon of typeOfNumber" [value]="typeOfNumberMap.get(destinationTon).value">
              {{typeOfNumberMap.get(destinationTon).name | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.destination-npi</mat-label>
          <mat-select formControlName="destinationNpi">
            <mat-option *ngFor="let destinationNpi of numberingPlanIdentification" [value]="numberingPlanIdentificationMap.get(destinationNpi).value">
              {{numberingPlanIdentificationMap.get(destinationNpi).name | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </ng-template>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title translate>
          admin.smpp-provider.additional-settings
        </mat-panel-title>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.address-range</mat-label>
          <input matInput formControlName="addressRange">
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label translate>admin.smpp-provider.coding-scheme</mat-label>
          <mat-select formControlName="codingScheme">
            <mat-option *ngFor="let codingScheme of codingSchemes" [value]="codingSchemesMap.get(codingScheme).value">
              {{codingSchemesMap.get(codingScheme).name | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </ng-template>
    </mat-expansion-panel>
  </mat-accordion>
</form>