summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
blob: c746e30f453f1e1f047ce1bf076d316739617f11 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<nz-modal
  [(nzVisible)]="cloudLeasedLineShowFlag"
  nzTitle="Create Cloud Leased Line"
  (nzOnCancel)="cancel()"
  nzWidth="70%"
  [nzFooter]="modalFooter"
>
  <div class="subnet_params_container">
    <form nz-form>
        <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
            <nz-form-label
              [nzSpan]="7"
              [nzRequired]="item.required"
              [nzFor]=" item.key"
            >
                {{ item.title }}
            </nz-form-label>
            <nz-form-control [nzSpan]="10">
              <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
              <nz-tooltip
                [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
                [nzPlacement]="'right'"
                [nzTrigger]="'focus'"
              >
                <input
                  nz-input
                  nz-tooltip
                  [id]="item.key"
                  [name]="item.key"
                  *ngIf="item.type === 'input'"
                  [(ngModel)]="cloud_leased_line_info[item.key]"
                  [placeholder]="item.placeholder ? item.placeholder : ''"
                />
              </nz-tooltip>
              <nz-select
                [name]="item.key"
                [(ngModel)]="cloud_leased_line_info[item.key]"
                *ngIf="item.type === 'select'"
              >
                <nz-option
                  [nzValue]="option"
                  [nzLabel]="option"
                  *ngFor="let option of cloudPointOptions"
                >
                </nz-option>
              </nz-select>
              <div *ngIf="item.type === 'node_select_one'">
                <div>
                  <span>{{item.rateName}}:</span>
                  <input
                    nz-input
                    nz-tooltip
                    [id]="item.rateName"
                    [name]="item.rateName"
                    [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
                    [placeholder]="item.placeholder ? item.placeholder : ''"
                  />
                </div>
                <div>
                  <span>{{item.nodeName}}:</span>
                  <nz-select
                    [name]="item.nodeName"
                    [(ngModel)]="cloud_leased_line_info[item.key].name"
                  >
                    <nz-option
                      [nzValue]="option"
                      [nzLabel]="option"
                      *ngFor="let option of nodeLists"
                    >
                    </nz-option>
                  </nz-select>
                </div>
              </div>
              <nz-radio-group
                [name]="item.key"
                [(ngModel)]="cloud_leased_line_info[item.key]"
                *ngIf="item.type === 'radio'"
              >
                <label
                  nz-radio
                  [nzValue]="option.key"
                  *ngFor="let option of item.options"
                >
                  {{ option.title }}
                </label>
              </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
    </form>
  </div>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="cancel()">Cancel</button>
    <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
  </ng-template>
</nz-modal>