summaryrefslogtreecommitdiffstats
path: root/rulemgt-frontend/src/app/correlation-modal
diff options
context:
space:
mode:
authorminfanyang <yang.minfan@zte.com.cn>2018-08-24 09:28:10 +0800
committerminfanyang <yang.minfan@zte.com.cn>2018-08-24 09:28:10 +0800
commit6e26bf0b71a8b8493fbd1575717a2c5e539f93ee (patch)
tree122b28e8c4ebf9ab70051ba34cec8e6ca022d27c /rulemgt-frontend/src/app/correlation-modal
parent448a62b47b193dd8a658b6d7c0ddf52dbfe2589b (diff)
Fixed ui error
Change-Id: I2a26998cc093a7aaf6458f28dc752b152f0cf666 Issue-ID: HOLMES-163 Signed-off-by: minfanyang <yang.minfan@zte.com.cn>
Diffstat (limited to 'rulemgt-frontend/src/app/correlation-modal')
-rw-r--r--rulemgt-frontend/src/app/correlation-modal/modal.component.css21
-rw-r--r--rulemgt-frontend/src/app/correlation-modal/modal.component.html31
-rw-r--r--rulemgt-frontend/src/app/correlation-modal/modal.component.ts51
-rw-r--r--rulemgt-frontend/src/app/correlation-modal/modal.service.ts16
4 files changed, 76 insertions, 43 deletions
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.css b/rulemgt-frontend/src/app/correlation-modal/modal.component.css
new file mode 100644
index 0000000..8c8f248
--- /dev/null
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.css
@@ -0,0 +1,21 @@
+/**
+Copyright 2018 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+.modal-position {
+ position: absolute;
+ z-index: 9999;
+ left: 200px;
+ top: 100px;
+}
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.html b/rulemgt-frontend/src/app/correlation-modal/modal.component.html
index cc1cb2c..8f8216c 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.component.html
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.html
@@ -13,19 +13,20 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<div class="modal fade in" id="myModal" #sifModal>
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
- <h4 class="modal-title">{{modalTitle|translate}}</h4>
- </div>
- <div class="modal-body">
- <p>{{modalBodyMessage|translate}}</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-primary" data-dismiss="modal">{{closeBtnTitle|translate}}</button>
- </div>
- </div>
+<!--<div *ngIf="showModal" class="popover-card" id="myModal" #sifModal>-->
+ <div *ngIf="showModal" class="modal-position modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" (click)="cancelModal()"><span aria-hidden="true">&times;</span><span
+ class="sr-only">Close</span></button>
+ <h4 class="modal-title">{{modalTitle|translate}}</h4>
+ </div>
+ <div class="modal-body">
+ <p>{{modalBodyMessage|translate}}</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="cancelModal()">{{closeBtnTitle|translate}}</button>
+ </div>
</div>
-</div> \ No newline at end of file
+ </div>
+<!--</div>-->
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.ts b/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
index cafb8e5..1d458b0 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
@@ -13,31 +13,38 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component, Input, OnInit } from '@angular/core';
-import { ModalService } from './modal.service';
-import { Msg } from './msg';
-declare var $: any;
-@Component({
-
- selector: 'sif-modal',
- templateUrl: './modal.component.html',
+import {Component, OnInit} from '@angular/core';
+import {ModalService} from './modal.service';
+import {Msg} from './msg';
+@Component({
+ selector: 'sif-modal',
+ templateUrl: './modal.component.html',
+ styleUrls: ['./modal.component.css']
})
export class SifModalComponent implements OnInit {
- constructor(private modalServer: ModalService) { };
- modalTitle = 'modalTitleDefault';
- modalBodyMessage = 'modalBodyMessageDefault';
- closeBtnTitle = 'closeBtnTitleDefault';
-
- ngOnInit(): void {
- this.modalServer.getmodalObservable.subscribe((msg: Msg) => {
- console.log('receive ' + msg);
- this.modalTitle = msg.title || this.modalTitle;
- this.modalBodyMessage = msg.message || this.modalBodyMessage;
- this.closeBtnTitle = msg.btn || this.closeBtnTitle;
- $('#myModal').modal('show');
- });
- }
+ modalTitle = 'modalTitleDefault';
+ modalBodyMessage = 'modalBodyMessageDefault';
+ closeBtnTitle = 'closeBtnTitleDefault';
+
+ showModal = false;
+
+ constructor(private modalServer: ModalService) {
+ this.modalServer.openModalAnnounced$.subscribe((msg: Msg) => {
+ console.log('receive ', msg);
+ this.modalTitle = msg.title || this.modalTitle;
+ this.modalBodyMessage = msg.message || this.modalBodyMessage;
+ this.closeBtnTitle = msg.btn || this.closeBtnTitle;
+ this.showModal = true;
+ });
+ };
+
+ ngOnInit(): void {
+ }
+
+ cancelModal(): void {
+ this.showModal = false;
+ }
}
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.service.ts b/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
index 11b4378..d71f960 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
@@ -13,12 +13,16 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Subject } from 'rxjs';
-import { Injectable } from '@angular/core';
+import {Subject} from 'rxjs';
+import {Injectable} from '@angular/core';
+
@Injectable()
export class ModalService {
- private modalObservable = new Subject();
- get getmodalObservable() {
- return this.modalObservable;
- }
+ private openModalAnnouncedSource = new Subject<any>();
+ openModalAnnounced$ = this.openModalAnnouncedSource.asObservable();
+
+ announceOpenModal(message: any) {
+ this.openModalAnnouncedSource.next(message);
+ }
+
}