(chartInit)="chartInit($event)">
Bar Chart
</div>
+<div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;margin-top: 20px">
+ <img src="../../../../assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;">
+ {{this.initData["customer"]}}
+</div>
\ No newline at end of file
updateOption: any;
chartDataChange() {
this.updateOption = this.chartData;
+ console.log(this.initData.customer)
}
chartInit(chart) {
this.chartIntance = chart;
<div class="customer_title">
<div class="customers">
<span>Customer</span>
- <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd">
+ <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd" style="cursor: pointer">
</div>
</div>
<div class="customer_detail">
<div class="customer_add" *ngIf="customeradd">
- <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default">
- <button nz-button nzType="primary" class="customer_addbut">Add</button>
+ <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default" [(ngModel)]="addNewCustomer">
+ <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer()">Add</button>
</div>
<div class="customer_list">
<ul>
- <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"><img src="./assets/images/customer05.png" alt=""><span>{{item.name}}</span><i
- class="anticon anticon-delete" nzType="info"></i></li>
+ <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)">
+ <img src="./assets/images/customer05.png" alt="">
+ <span>{{item.name}}</span>
+ <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i>
+ </li>
</ul>
</div>
</div>
<div class="services_type_title">
<div class="servicess">
<span>Services Type</span>
- <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd ">
+ <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd " style="cursor: pointer">
</div>
</div>
<div class="services_type_detail">
<div class="services_add" *ngIf="servicesadd">
<input nz-input placeholder="Input services type" class="services_name" nzSize="default">
- <button nz-button nzType="primary" class="services_addbut">Add</button>
+ <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType()">Add</button>
</div>
<div class="services_list">
<div class="border_size"></div>
<div style="padding:0 20px;">
<ul>
- <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li>
+ <li *ngFor = "let item of AllServiceTypes" >
+ <span>{{item.type}}</span>
+ <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i>
+ </li>
</ul>
</div>
</div>
</div>
</div>
+
+ <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCustomerCancel()"
+ (nzOnOk)="deleteCustomerOk()" nzClassName="deleteModel">
+ <h3><span style="color: red">* </span>Are you sure delete this Customer ?</h3>
+ <div class="question">
+ <h4>Customer Name:</h4>
+ <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div>
+ </div>
+ <div class="question">
+ <h4>Customer ID:</h4>
+ <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
+ </div>
+ </nz-modal>
+ <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle="Delete" (nzOnCancel)="deleteServiceTypeCancel()"
+ (nzOnOk)="deleteServiceTypeOk()" nzClassName="deleteModel deleteServiceTypeModel">
+ <h3><span style="color: red">* </span>Are you sure delete this Service Type ?</h3>
+ <div class="question">
+ <h4>Customer Name:</h4>
+ <div class="deleteModelContent">{{selectCustomer.name}}</div>
+ </div>
+ <div class="question">
+ <h4>Customer ID:</h4>
+ <div class="deleteModelContent">{{selectCustomer.id}}</div>
+ </div>
+ <div class="question">
+ <h4>Service Type:</h4>
+ <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
+ </div>
+ </nz-modal>
</div>
\ No newline at end of file
*/
.content {
width: 100%;
- height: 100vh;
+ height: 100%;
i.anticon {
cursor: pointer;
font-size: 18px;
}
}
.customer {
- height: 580px;
+ height: 100%;
overflow: hidden;
width: 32%;
margin-right: 1.5%;
vertical-align: top;
.customer_title {
line-height: 3.5;
- height: 50px;
+ height: 5%;
width: 100%;
border-bottom: 1px #07A9E1 solid;
.customers {
}
}
.customer_detail {
- height: 535px;
+ height: 95%;
width: 100%;
border-top: 1px #07A9E1 solid;
.customer_add {
height: 50px;
line-height: 3.5;
width: 100%;
+ cursor: pointer;
img {
width: 10%;
}
}
.services_type {
overflow: hidden;
- height: 580px;
+ height: 100%;
border-radius: 5px;
width: 32%;
background-color: #fff;
vertical-align: top;
.services_type_title {
line-height: 3.5;
- height: 50px;
+ height: 5%;
width: 100%;
border-bottom: 1px #07A9E1 solid;
.servicess {
}
}
.services_type_detail {
- height: 535px;
+ height: 95%;
width: 100%;
border-top: 1px #07A9E1 solid;
.services_add {
.services_list {
background:linear-gradient(to right, #E5F6FF, #CFEEFA);
- height: 530px;
+ height: 100%;
.border_size{
position: absolute;
margin-left: -8px;
}
li {
height: 50px;
- line-height: 3.5;
+ line-height: 50px;
width: 100%;
+ vertical-align: middle;
border-bottom: 2px #FFFFFF dashed;
+ position: relative;
i {
- float: right;
- clear: both;
- padding-top: 17px;
+ display: inline-block;
+ vertical-align: middle;
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ top: 0;
+ right: -16px;
+ line-height: 46px;
}
}
}
width: 32%;
margin-right: 1.5%;
vertical-align: top;
+ height: 100%;
>div{
padding: 20px 20px;
}
.Cu {
- height: 280px;
+ height: 48%;
width: 100%;
- margin-bottom: 20px;
+ margin-bottom: 7%;
margin-right: 2.5%;
border-radius: 5px;
background-color: #fff;
}
.legend {
height: 10px;
- width: 20px;
+ width: 10px;
display: inline-block;
background: linear-gradient(to right,#7DCEFB, #0DA9E2);
- border-radius: 1px;
+ border-radius: 50%;
margin: 15px 4px 0 43%;
}
}
.type {
- height: 280px;
+ height: 48%;
width: 100%;
- margin-bottom: 20px;
margin-right: 2.5%;
border-radius: 5px;
background-color: #fff;
constructor(private managemencs: ManagemencsService) { }
- ngOnInit() {
- this.getAllCustomers();
- this.getCustomersPie();
- }
- AllCustomersdata = [];
- AllServiceTypes = [];
- customerber = [];
- // Get all customers
- active;
- getAllCustomers() {
- this.managemencs.getAllCustomers().subscribe((data) => {
- this.AllCustomersdata = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}});
- this.active = this.AllCustomersdata[0].id
- this.getServiceTypes(this.active);
- this.getCustomersColumn(this.active);
- })
-
- }
- // Get all servicetype
- getServiceTypes(item){
- this.managemencs.getServiceTypes(item).subscribe((data) => {
- this.AllServiceTypes = data.map((item) => {return {type:item["service-type"],id:item["global-customer-id"]}});
- })
- }
- // Switch user data
- choseCustomer(index,item){
- this.chose = index;
- this.getServiceTypes(item);
- this.getCustomersColumn(item);
- }
- customeradd = false;
- servicesadd = false;
- //Customer pie
- CUChartData: Object;
- CUChartInit: Object = {
- height: 180,
- option: {
- color: ["#F2F6FD"],
- series: [{
- type: 'pie',
- name: "customer",
- radius: '90%',
- center: ['50%', '53%'],
- data: [{
- value: 67,
+ ngOnInit() {
+ this.getAllCustomers();
+ }
- }, {
- value: 10,
+ AllCustomersdata = [];
+ AllServiceTypes = [];
+ customerber = [];
+ // Get all customers
+ active;
+ selectCustomer = {
+ name:null,
+ id:null
+ };
+ addNewCustomer = null;
+ addNewServiceType = null;
+ deleteCustomerModelVisible = false;
+ deleteServiceTypeModelVisible = false;
- }, {
- value: 17,
+ getAllCustomers() {
+ this.managemencs.getAllCustomers().subscribe((data) => {
+ this.AllCustomersdata = data.map((item) => {
+ return {name: item["subscriber-name"], id: item["global-customer-id"]}
+ });
+ this.active = this.selectCustomer = this.AllCustomersdata[0];
+ this.serviceInit["customer"] = this.AllCustomersdata[0].name;
+ this.getCustomersPie();
+ this.getServiceTypes(this.active);
+ this.getCustomersColumn(this.active);
+ })
- }, {
- value: 33,
- },],
- label: {
- normal: {
- position: 'center',
- show: false,
- formatter: ' {b|{b}：{d}%} ',
- backgroundColor: 'rgba(51,51,51,0.9)',
- borderColor: 'rgba(51,51,51,0.9)',
- borderWidth: 1,
- borderRadius: 4,
- rich: {
- b: {
- fontSize: 16,
- color: '#fff',
- lineHeight: 33
- }
- }
- },
- emphasis: {
- show: true,
+ }
- }
- },
- itemStyle: {
- normal: {
- borderWidth: 2,
- borderColor: '#ffffff',
- },
- emphasis: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#7DCEFB' // 0% 处的颜色
- }, {
- offset: 1, color: '#0DA9E2' // 100% 处的颜色
- }],
- global: false // 缺省为 false
- },
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 10, 5, 0)'
- }
- }
- }]
+ // Get all servicetype
+ getServiceTypes(item) {
+ this.managemencs.getServiceTypes(item).subscribe((data) => {
+ this.AllServiceTypes = data.map((item) => {
+ return {type: item["service-type"], id: item["global-customer-id"]}
+ });
+ })
}
- };
- // get customers chart pie
- getCustomersPie(){
- this.managemencs.getCustomersPie().subscribe((data)=>{
- this.CUChartData = {
- series: [{
- data: data
- }]
- }
- console.log(this.CUChartData)
- }, (err) => {
- console.log(err);
- });
- }
- // service bar
- serviceData: Object;
- serviceInit: Object = {
- height: 200,
- width:280,
- option: {
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: "{c}"
- },
- grid: {
- top: '5%',
- left: '5%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: "#EDEDED"
- }
- },
- axisLabel: {
- color: "#3C4F8C"
- }
+ // Switch user data
+ choseCustomer(index, item) {
+ this.chose = index;
+ this.selectCustomer = item;
+ this.serviceInit["customer"] = this.selectCustomer.name;
+ this.getServiceTypes(item);
+ this.getCustomersColumn(item);
+ }
+
+ customeradd = false;
+ servicesadd = false;
+ //Customer pie
+ CUChartData: Object;
+ CUChartInit: Object = {
+ height: 200,
+ option: {
+ color: ["#F2F6FD"],
+ series: [{
+ type: 'pie',
+ name: "customer",
+ radius: '90%',
+ center: ['50%', '50%'],
+ data: [{
+ value: 67,
+ }, {
+ value: 10,
+ }, {
+ value: 17,
+ }, {
+ value: 33,
+ },],
+ label: {
+ normal: {
+ position: 'center',
+ show: false,
+ formatter: ' {b|{b}：{d}%} ',
+ backgroundColor: 'rgba(51,51,51,0.9)',
+ borderColor: 'rgba(51,51,51,0.9)',
+ borderWidth: 1,
+ borderRadius: 4,
+ rich: {
+ b: {
+ fontSize: 16,
+ color: '#fff',
+ lineHeight: 33
+ }
+ }
+ },
+ emphasis: {
+ show: true,
+
+ }
+ },
+ itemStyle: {
+ normal: {
+ borderWidth: 3,
+ borderColor: '#ffffff',
+ },
+ emphasis: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#7DCEFB'
+ }, {
+ offset: 1, color: '#0DA9E2'
+ }],
+ global: false
+ },
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 10, 5, 0)'
+ }
+ }
+ }]
}
+ };
- ],
- yAxis: [
- {
- type: 'category',
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: "#EDEDED"
+ // get customers chart pie
+ getCustomersPie() {
+ this.managemencs.getCustomersPie().subscribe((data) => {
+ this.CUChartData = {
+ series: [{
+ data: data
+ }]
}
- },
- axisLabel: {
- color: "#3C4F8C"
- },
- data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
- },
+ console.log(this.CUChartData)
+ }, (err) => {
+ console.log(err);
+ });
+ }
- ],
- series: [
- {
- name: '',
- barWidth: '40%',
- type: 'bar',
- data: [2800, 1700, 1200, 1000, 900],
- itemStyle: {
- normal: {
- color: function (params) {
- // build a color map as your need.
- var colorList = [
- {
+ // service bar
+ serviceData: Object;
+ serviceInit: Object = {
+ customer: '',
+ height: 230,
+ width: 410,
+ option: {
+ tooltip: {
+ show: true,
+ trigger: 'item',
+ formatter: "{c}"
+ },
+ grid: {
+ top: '5%',
+ left: '5%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#EDEDED"
+ }
+ },
+ axisLabel: {
+ color: "#3C4F8C"
+ }
+ }
+
+ ],
+ yAxis: [
+ {
+ type: 'category',
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#EDEDED"
+ }
+ },
+ axisLabel: {
+ color: "#3C4F8C"
+ },
+ data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
+ },
+
+ ],
+ series: [
+ {
+ name: '',
+ barWidth: '40%',
type: 'bar',
- colorStops: [{
- offset: 0,
- color: '#FCCE2B'
- }, {
- offset: 1,
- color: '#FEE956'
- }],
- globalCoord: false,
- },
- {
+ data: [2800, 1700, 1200, 1000, 900],
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ // build a color map as your need.
+ var colorList = [
+ {
+ type: 'bar',
+ colorStops: [{
+ offset: 0,
+ color: '#FCCE2B'
+ }, {
+ offset: 1,
+ color: '#FEE956'
+ }],
+ globalCoord: false,
+ },
+ {
+ type: 'bar',
+ colorStops: [{
+ offset: 0,
+ color: '#F43A59'
+ }, {
+ offset: 1,
+ color: '#FA6C92'
+ }],
+ globalCoord: false,
+ },
+ {
+ type: 'bar',
+ colorStops: [{
+ offset: 0,
+ color: '#4F5B60'
+ }, {
+ offset: 1,
+ color: '#879499'
+ }],
+ globalCoord: false,
+ },
+ {
+ type: 'bar',
+ colorStops: [{
+ offset: 0,
+ color: '#31DAC3'
+ }, {
+ offset: 1,
+ color: '#5FEFE3'
+ }],
+ globalCoord: false,
+ },
+ {
+ type: 'bar',
+ colorStops: [{
+ offset: 0,
+ color: '#999999'
+ }, {
+ offset: 1,
+ color: '#C9C9C9'
+ }],
+ globalCoord: false,
+ }
+ ];
+ return colorList[params.dataIndex]
+ },
+ }
+ }
+ },
+ {
+ name: 'Type4',
+ type: 'bar',
+ stack: '',
+ data: 2800,
+
+ },
+ {
+ name: 'Type1',
type: 'bar',
- colorStops: [{
- offset: 0,
- color: '#F43A59'
- }, {
- offset: 1,
- color: '#FA6C92'
- }],
- globalCoord: false,
- },
- {
+ stack: '',
+ data: 1700
+ },
+ {
+ name: 'Type2',
type: 'bar',
- colorStops: [{
- offset: 0,
- color: '#4F5B60'
- }, {
- offset: 1,
- color: '#879499'
- }],
- globalCoord: false,
- },
- {
+ stack: '',
+ data: 1500
+ },
+ {
+ name: 'Type3',
type: 'bar',
- colorStops: [{
- offset: 0,
- color: '#31DAC3'
- }, {
- offset: 1,
- color: '#5FEFE3'
- }],
- globalCoord: false,
- },
- {
+ stack: '',
+ data: 1300
+ },
+ {
+ name: 'Other',
type: 'bar',
- colorStops: [{
- offset: 0,
- color: '#999999'
- }, {
- offset: 1,
- color: '#C9C9C9'
- }],
- globalCoord: false,
- }
- ];
- return colorList[params.dataIndex]
- },
+ stack: '',
+ data: 1000,
+
+ }
+ ]
+ }
+ };
+ name_s = [];
+ value_s = [];
+
+ getCustomersColumn(item) {
+ this.name_s = [];
+ this.value_s = [];
+ this.managemencs.getCustomersColumn(item).subscribe((data) => {
+ data.forEach((item) => {
+ this.name_s.push(item.name);
+ this.value_s.push(item.value);
+ })
+ this.serviceData = {
+ yAxis: [{
+ data: this.name_s
+ }],
+ series: [{
+ data: this.value_s
+ }]
}
- }
- },
- {
- name: 'Type4',
- type: 'bar',
- stack: '',
- data: 2800,
+ console.log(this.serviceData)
+ })
+ }
- },
- {
- name: 'Type1',
- type: 'bar',
- stack: '',
- data: 1700
- },
- {
- name: 'Type2',
- type: 'bar',
- stack: '',
- data: 1500
- },
- {
- name: 'Type3',
- type: 'bar',
- stack: '',
- data: 1300
- },
- {
- name: 'Other',
- type: 'bar',
- stack: '',
- data: 1000,
+ createNewCustomer() {
+ let createParams = {
+ customerId: this.addNewCustomer
+ };
+ this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.getAllCustomers();
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
- }
- ]
+ // Customer delete model
+ thisdeleteCustomer={
+ name:null,
+ id:null
+ };
+ deleteCustomerModel(itemCustomer) {
+ this.thisdeleteCustomer = itemCustomer;
+ this.deleteCustomerModelVisible = true;
+ }
+ deleteCustomerCancel() {
+ this.deleteCustomerModelVisible = false;
+ }
+ deleteCustomerOk() {
+ this.deleteCustomerModelVisible = false;
+ this.getCustomerVersion(this.thisdeleteCustomer);
+ }
+ getCustomerVersion(thisdeleteCustomer){
+ this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ let params = {
+ customerId:thisdeleteCustomer.id,
+ version:data["result"]["resource-version"]
+ };
+ this.deleteCustomer(params);
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
+ deleteCustomer(params){
+ this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.getAllCustomers();
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
+
+ createNewServiceType() {
+ let createParams = {
+ customer: this.selectCustomer,
+ ServiceType:this.addNewServiceType
+ };
+ this.managemencs.createServiceType(createParams).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.getCustomersColumn(this.selectCustomer);
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
+
+ // ServiceType delete model
+ thisdeleteServiceType={
+ type:null
+ };
+ deleteServiceTypeModel(itemServiceType) {
+ this.thisdeleteServiceType = itemServiceType;
+ this.deleteServiceTypeModelVisible = true;
+ }
+ deleteServiceTypeCancel() {
+ this.deleteServiceTypeModelVisible = false;
+ }
+ deleteServiceTypeOk() {
+ this.deleteServiceTypeModelVisible = false;
+ this.getServiceTypeVersion();
+ }
+ getServiceTypeVersion(){
+ let params={
+ customerId:this.selectCustomer.id,
+ ServiceType:this.thisdeleteServiceType["type"]
+ };
+ this.managemencs.getdeleteServiceTypeVersion(params).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ let params = {
+ customerId:this.selectCustomer,
+ ServiceType:this.thisdeleteServiceType["type"],
+ version:data["result"]["resource-version"]
+ };
+ this.deleteServiceType(params);
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
+ deleteServiceType(params){
+ this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.getCustomersPie();
+ this.getServiceTypes(params.customerId);
+ this.getCustomersColumn(params.customerId);
+ console.log(data, "Interface returned success")
+ } else {
+ console.log(data, "Interface returned error")
+ }
+ })
}
- }
- name_s = [];
- value_s = [];
- getCustomersColumn(item){
- this.name_s = [];
- this.value_s = [];
- this.managemencs.getCustomersColumn(item).subscribe((data)=>{
- data.forEach((item)=>{
- this.name_s.push(item.name);
- this.value_s.push(item.value);
- })
- this.serviceData = {
- yAxis:[{
- data:this.name_s
- }],
- series :[{
- data:this.value_s
- }]
- }
- console.log(this.serviceData)
- })
- }
-
-
}
export class ManagemencsService {
constructor(private http: HttpClient) { }
- baseUrl = baseUrl.baseUrl
+ baseUrl = baseUrl.baseUrl;
- /* location */
- url = {
- customers:this.baseUrl + "/customers/customers_list.json?",
- serviceType:this.baseUrl + "/serviceTypes.json?*_*",
- CustomersPir:this.baseUrl + "/customers/customersber.json?",
- CustomersColumn:this.baseUrl + "/customers/customersber.json?",
-
- }
+ /* location */
+ // url = {
+ // customers: this.baseUrl + "/customers/customers_list.json",
+ // serviceType: this.baseUrl + "/serviceTypes.json?*_*",
+ // CustomersPir: this.baseUrl + "/customers/customersber.json",
+ // CustomersColumn: this.baseUrl + "/customers/customersber.json?*_*",
+ // createCustomer: this.baseUrl + "/customers/createCustomer.json?",
+ // createServiceType: this.baseUrl + "/customers/createServiceType.json",
+ // getCustomerResourceVersion: this.baseUrl + "/customers/deleteCustomer.json?*_*",
+ // deleteCustomer: this.baseUrl + "/customers/createServiceType.json",
+ // getServiceTypeResourceVersion: this.baseUrl + "/customers/deleteCustomer.json?*_*",
+ // deleteServiceType: this.baseUrl + "/customers/createServiceType.json",
+ // };
- /* line up */
- // url = {
- // customers:this.baseUrl + "/uui-lcm/customers",/* get */
- // serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions",/* get */
- // CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer",/* get */
- // CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*",/* get */
- // }
+ /* line up */
+ url = {
+ customers:this.baseUrl + "/uui-lcm/customers", /* get */
+ serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions", /* get */
+ CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */
+ CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*", /* get */
+ createCustomer:this.baseUrl+"/uui-lcm/customers/", /* put */
+ createServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */
+ getCustomerresourceVersion:this.baseUrl+"/uui-lcm/customers/*_*", /* put */
+ deleteCustomer:this.baseUrl+"/uui-lcm/customers?customerId=*_*&resourceVersion=*+*",
+ getServiceTypeResourceVersion:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*",
+ deleteServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@* ",
+ };
// Get all customers
let url = this.url.CustomersColumn.replace("*_*", customer.id);
return this.http.get<any>(url);
}
+ // create New Customer
+ createCustomer(customer, createParams) {
+ let url = this.url.createCustomer + customer;
+ // return this.http.get(url, createParams);//location
+ return this.http.put(url,createParams);//online
+ }
+
+ createServiceType(createParams) {
+ let customerId = createParams.customer.id,
+ ServiceType = createParams.ServiceType;
+ let url = this.url.createServiceType.replace("*_*", customerId).replace("*+*", ServiceType);
+ // return this.http.get(url,createParams);//location
+ return this.http.put(url, createParams);//online
+ }
+
+ getdeleteCustomerVersion(thisdeleteCustomer) {
+ let url = this.url.getCustomerresourceVersion.replace("*_*", thisdeleteCustomer.id);
+ return this.http.get(url);
+ }
+
+ deleteSelectCustomer(params) {
+ let customerId = params.customerId,
+ version = params.version;
+ let url = this.url.deleteCustomer.replace("*_*", customerId).replace("*+*", version);
+ return this.http.delete(url);
+ }
+
+ getdeleteServiceTypeVersion(params) {
+ let customerId = params.customerId.id,
+ ServiceType = params.ServiceType;
+ let url = this.url.getServiceTypeResourceVersion.replace("*_*", customerId).replace("*+*", ServiceType);
+ return this.http.get(url);
+ }
+
+ deleteSelectServiceType(params) {
+ let customerId = params.customerId.id,
+ ServiceType = params.ServiceType,
+ version = params.version;
+ let url = this.url.deleteServiceType.replace("*_*", customerId).replace("*+*", ServiceType).replace("*@*", version);
+ return this.http.delete(url);
+ }
}
See the License for the specific language governing permissions and
limitations under the License.
-->
-<div class="content" style="padding: 20px 20px;">
- <div class="management" [@showHideAnimate]="show" >
+<div class="content" style="padding: 20px 20px;height: 100vh">
+ <div class="management" *ngIf="nocuster" >
<div class="title">
<p>Create initial customer</p>
<span>Customer has not been created in ONAP </span>
<span>please create customer and its service type</span>
<img src="../../assets/images/customer01.png" alt="">
- <input nz-input placeholder="input customer name" nzSize="large">
- <button nz-button nzType="primary" class="cancel">Cancel</button>
- <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button>
+ <input nz-input placeholder="input customer name" nzSize="large" style="height: 50px" [(ngModel)]="firstCustomer">
+ <div class="action">
+ <button nz-button nzType="primary" class="cancel" (click) = "clearCustomerInput()">Cancel</button>
+ <button nz-button nzType="primary" class="add" (click) = "createNewCustomer(firstCustomer)">Add</button>
+ </div>
</div>
<div class="image">
<img src="../../assets/images/customer02.png" alt="">
</div>
</div>
- <div [@showHideAnimate]="hide">
+ <div *ngIf="!nocuster" style="height: 100%">
<app-customer></app-customer>
</div>
</div>
img {
padding-top: 8%;
width: 55%;
- margin-left: 18%;
+ margin-left: 20%;
margin-bottom: 5%;
}
input {
width: 50%;
- margin-left: 20%;
+ margin: 0 auto;
margin-bottom: 5%;
display: block;
+
+ }
+ .action{
+ width: 50%;
+ height: 40px;
+ margin: 0 auto;
+ }
+ .action button{
+ width: 40%;
+ height: 40px;
+ margin: 0 4%;
}
.cancel{
background-color: #eee;
border-color: #eee;
color: #9DA7C5;
- width: 80px;
- margin-left: 25%;
- margin-right: 2%;
}
.add {
color: #fff;
- width: 80px;
background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
border-color: #1890ff;
}
this.getAllCustomers();
}
- show = "show";
- hide = "hide";
- custerhide = false;
- AllCustomersdata = [];
- // Get all customers
- getAllCustomers() {
- this.managemencs.getAllCustomers().subscribe((data) => {
- if(data.length > 0){
- this.show = "hide";
- this.hide = "show";
- this.custerhide = false;
- }else{
- this.show = "show";
- this.hide = "hide";
- this.custerhide = true;
- }
- })
- }
- customershow(){
- this.show = "show";
- this.hide = "hide";
- this.custerhide = true;
- }
- customerhide(){
- this.show = "hide";
- this.hide = "show";
- this.custerhide = false;
- }
+ nocuster = true;
+ firstCustomer = null;
+ AllCustomersdata = [];
+
+ // Get all customers
+ getAllCustomers() {
+ this.managemencs.getAllCustomers().subscribe((data) => {
+ if (data.length > 0) {
+ this.nocuster = false;
+ } else {
+ this.nocuster = true;
+ }
+ })
+ }
+ createNewCustomer(customer) {
+ let createParams = {
+ customerId: customer
+ };
+ this.managemencs.createCustomer(customer, createParams).subscribe((data) => {
+ if (data["status"] == 'SUCCESS') {
+ this.nocuster = false;
+ } else {
+ this.nocuster = true;
+ console.log(data, "Interface returned error")
+ }
+ })
+ }
+ clearCustomerInput(){
+ this.firstCustomer=null;
+ }
}
}
}
}
-
+nz-modal .deleteServiceTypeModel.ant-modal{
+ height: 510px !important;
+}
nz-modal .healModel.ant-modal {
min-height: 470px !important;
}
Code Review / usecase-ui.git / commitdiff