gerrit.onap Code Review - usecase-ui.git/blob

   1 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
   2 import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "../../../../../../constants/constants";
   3 import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices";
   4 import {NzMessageService} from "ng-zorro-antd";
   5
   6 @Component({
   7     selector: 'app-business-order',
   8     templateUrl: './business-order.component.html',
   9     styleUrls: ['./business-order.component.less']
  10 })
  11 export class BusinessOrderComponent implements OnInit {
  12
  13     constructor(
  14         private myhttp: SlicingTaskServices,
  15         private message: NzMessageService
  16     ) {
  17     }
  18
  19     ngOnInit() {
  20     }
  21
  22     ngOnChanges() {
  23         this.AreaFormatting();
  24     }
  25
  26     @Input() showModel: boolean;
  27     @Output() cancel = new EventEmitter<boolean>();
  28     comunicationFormItems = COMMUNICATION_FORM_ITEMS;
  29     slicing_order_info = {
  30         name: null,
  31         maxNumberofUEs: null,
  32         expDataRateDL: null,
  33         latency: null,
  34         expDataRateUL: null,
  35         resourceSharingLevel: "shared",
  36         uEMobilityLevel: "stationary",
  37         coverageArea: ''
  38     };
  39     areaList: any[] = [];
  40     isSpinning: boolean = false;
  41     validateRules: any[] = [];
  42     rulesText: any[] = [];
  43     tooltipText: string = 'Scope: 1-100000';
  44
  45     AreaFormatting() {
  46         let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
  47         this.areaList = areaList.map((item: any) => {
  48             let arr = item.split(';');
  49             item = arr.map((ite, index) => {
  50                 let key: string;
  51                 if (!index) {
  52                     key = 'province';
  53                 } else if (index === 1) {
  54                     key = 'city'
  55                 } else if (index === 2) {
  56                     key = 'district'
  57                 } else {
  58                     key = 'street'
  59                 }
  60                 const obj: any = {};
  61                 obj.key = key;
  62                 obj.selected = ite;
  63                 obj.options = [{name: ite, id: ite}]
  64                 return obj
  65             })
  66             return item;
  67         })
  68     }
  69
  70     creatAreaList(): void {
  71         let arr = [
  72             {
  73                 key: 'province',
  74                 selected: '',
  75                 options: []
  76             },
  77             {
  78                 key: 'city',
  79                 selected: '',
  80                 options: []
  81             },
  82             {
  83                 key: 'district',
  84                 selected: '',
  85                 options: []
  86             },
  87             {
  88                 key: 'street',
  89                 selected: '',
  90                 options: []
  91             }
  92         ]
  93         this.areaList.push(arr)
  94     }
  95
  96     deleteAreaList(index: number): void {
  97         this.areaList.splice(index, 1);
  98     }
  99
 100     handleChange(area: any[], areaItem: any): void {
 101         if (areaItem.key === 'province' && areaItem.options.length <= 1) {
 102             areaItem.options = COMMUNICATION_FORM_ADDRESS;
 103         } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
 104             COMMUNICATION_FORM_ADDRESS.forEach(item => {
 105                 if (item.name === area[0].selected) {
 106                     areaItem.options = item.city;
 107                 }
 108             })
 109         } else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
 110             COMMUNICATION_FORM_ADDRESS.forEach((item: any) => {
 111                 item.city.forEach(city => {
 112                     if (city.name === area[1].selected) {
 113                         areaItem.options = city.county;
 114                     }
 115                 })
 116             })
 117         } else if (areaItem.key === 'street' && areaItem.options.length <= 1) {
 118             COMMUNICATION_FORM_ADDRESS.forEach((item: any) => {
 119                 item.city.forEach(city => {
 120                     if (city.name === area[1].selected) {
 121                         city.county.forEach(county => {
 122                             if (county.name === area[2].selected) {
 123                                 areaItem.options = county.street;
 124                             }
 125                         })
 126                     }
 127                 })
 128             })
 129         }
 130     }
 131
 132     handleChangeSelected(area: any[], areaItem: any) {
 133         if (areaItem.key === 'province') {
 134             area[1].selected = ''
 135             area[1].options = [];
 136             area[2].selected = '';
 137             area[2].options = [];
 138             area[3].selected = '';
 139             area[3].options = [];
 140         } else if (areaItem.key === 'city') {
 141             area[2].selected = '';
 142             area[2].options = [];
 143             area[3].selected = '';
 144             area[3].options = [];
 145         } else if (areaItem.key === 'district') {
 146             area[3].selected = '';
 147             area[3].options = [];
 148         }
 149     }
 150
 151     handleCancel() {
 152         this.showModel = false;
 153         this.cancel.emit(this.showModel);
 154         this.slicing_order_info = {
 155             name: null,
 156             maxNumberofUEs: null,
 157             expDataRateDL: null,
 158             latency: null,
 159             expDataRateUL: null,
 160             resourceSharingLevel: "shared",
 161             uEMobilityLevel: "stationary",
 162             coverageArea: ''
 163         };
 164     }
 165
 166     changeTooltipText(title) {
 167         if (title === 'Max Number of UEs') {
 168             this.tooltipText = 'Scope: 1-100000'
 169         } else if (title === 'Data Rate Downlink (Mbps)' || title === 'Data Rate Uplink (Mbps)') {
 170             this.tooltipText = 'Scope: 100-3000'
 171         } else if (title === 'Latency') {
 172             this.tooltipText = 'Scope: 10-200'
 173         } else if (title === 'Use Interval (Month)') {
 174             this.tooltipText = 'Scope: ≥1'
 175         }
 176     }
 177
 178     getRulesText = (words, title, val, index) => {
 179         return this.rulesText[index] = words + title
 180     };
 181
 182     validator(key, val, i) {
 183         if (val === null || val.replace(/\s*/g, '').length <= 0) {
 184             this.validateRules[i] = true;
 185             this.getRulesText('Please enter', key, val, i,);
 186             return false
 187         } else {
 188             this.validateRules[i] = false;
 189         }
 190         if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) {
 191             this.validateRules[i] = true;
 192             this.getRulesText('Only numbers can be entered', '', '', i);
 193             return false
 194         } else if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) {
 195             console.log("-----maxNumberofUEs")
 196             this.validateRules[i] = true;
 197             this.getRulesText('Scope: 1-100000', '', '', i);
 198             return false
 199         } else {
 200             this.validateRules[i] = false;
 201         }
 202         if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) {
 203             this.validateRules[i] = true;
 204             this.getRulesText('Only numbers can be entered', '', '', i);
 205             return false
 206         } else if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) {
 207             this.validateRules[i] = true;
 208             this.getRulesText('Scope: 100-3000', '', '', i);
 209             return false
 210         } else {
 211             this.validateRules[i] = false;
 212         }
 213         if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) {
 214             this.validateRules[i] = true;
 215             this.getRulesText('Only numbers can be entered', '', '', i);
 216             return false
 217         } else if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) {
 218             this.validateRules[i] = true;
 219             this.getRulesText('Scope: 10-200', '', '', i);
 220             return false
 221         } else {
 222             this.validateRules[i] = false;
 223         }
 224     }
 225
 226     handleOk(): void {
 227         Object.keys(this.slicing_order_info).forEach((item, index) => {
 228             if (item !== 'resourceSharingLevel' && item !== 'uEMobilityLevel' && item !== 'coverageArea') {
 229                 this.validator(item, this.slicing_order_info[item], index)
 230             }
 231         });
 232         if (this.validateRules.indexOf(true) > -1) {
 233             return
 234         }
 235         const coverage_list: string[] = [];
 236         this.areaList.forEach(item => {
 237             let str: string = '';
 238             item.forEach(area => {
 239                 str += area.selected + ';';
 240             });
 241             coverage_list.push(str.substring(0, str.length - 1));
 242         });
 243         if (coverage_list.length > 1) {
 244             this.slicing_order_info.coverageArea = coverage_list.join('|')
 245         } else {
 246             this.slicing_order_info.coverageArea = coverage_list.toString();
 247         }
 248         let paramsObj = {
 249             slicing_order_info: this.slicing_order_info
 250         };
 251         console.log(paramsObj, "-----paramsObj");
 252         this.isSpinning = true;
 253         this.myhttp.csmfSlicingPurchase(paramsObj).subscribe(res => {
 254             const {result_header: {result_code, result_message}, result_body: {service_id, operation_id}} = res;
 255             if (+result_code === 200) {
 256                 this.isSpinning = false;
 257                 this.handleCancel();
 258             }
 259         }, (err) => {
 260             this.message.error(err);
 261             this.handleCancel();
 262             this.isSpinning = false;
 263         })
 264     }
 265 }