summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
blob: 7fd459cc873b7ac15ff946ef3efaa7e33ce9a79c (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
<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
    (nzOnOk)="handleOk()" nzWidth="80%">
    <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]="16">
                    <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)]="slicing_order_info[item.key]"
                            [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
                            [placeholder]="item.placeholder ? item.placeholder : ''"
                            (blur)="item.required ? this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" />
                            <div *ngIf="item.coverflag" class="detail-wrap">
                               <p>Note: If coverageArea is not at all provided by the user (as it is an optional input, and also optional in Service Profile), we will assume that the entire network is required to be covered. For Coverage Area Number, please enter the rectangle grid numbers corresponding to the physical coverage areas that you see on the map image. The following image shows the rectangular grid numbers for a coverage area, you can take it as an example:</p> 
                                <img src="../../../../../../assets/images/coverageAreaMap.png" class="detail-img"/>
                            </div>
                            <img src="../../../../../../assets/images/ask-img.png" alt="" class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" />
                    </nz-tooltip>
                    <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_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-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                        *ngIf="item.type === 'select'">
                        <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
                        </nz-option>
                    </nz-select>
                    <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
                        {{rulesText[i]}}
                    </nz-form-explain>
                </nz-form-control>

                <div *ngIf="item.type === 'city-select'">
                    <app-city-select [areaList]="areaList" [level]="areaLevel"></app-city-select>
                </div>
            </nz-form-item>
        </form>
    </div>
</nz-modal>