diff options
Diffstat (limited to 'rulemgt-frontend/src/app/correlation-modal')
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">×</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">×</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); + } + } |