setting of notification is implemented

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

@@ -26,7 +26,7 @@
             class="setting-category"
           ></ucap-settings-privacy>
         </mat-tab> -->
-        <!-- <mat-tab>
+        <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-bell"></span>
             알림
@@ -36,7 +36,7 @@
             (changed)="onChangedNotificationSetting($event)"
             class="setting-category"
           ></ucap-settings-notification>
-        </mat-tab> -->
+        </mat-tab>
         <!-- <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-headset"></span>

projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts

@@ -48,7 +48,11 @@ export const environment: Environment = {
         timezone: 'Asia/Seoul'
       },
       notification: {
-        chatMessage: true
+        use: true,
+        method: 'SOUND_ALERT',
+        alertExposureTime: 5,
+        receiveForMobile: false,
+        receiveForMessage: false
       }
     },
     CommonSetting: {

projects/ucap-webmessenger-app/src/environments/environment.daesang.prod.ts

@@ -48,7 +48,11 @@ export const environment: Environment = {
         timezone: 'Asia/Seoul'
       },
       notification: {
-        chatMessage: true
+        use: true,
+        method: 'SOUND_ALERT',
+        alertExposureTime: 5,
+        receiveForMobile: false,
+        receiveForMessage: false
       }
     },
     CommonSetting: {

projects/ucap-webmessenger-app/src/environments/environment.dev.ts

@@ -48,7 +48,11 @@ export const environment: Environment = {
         timezone: 'Asia/Seoul'
       },
       notification: {
-        chatMessage: true
+        use: true,
+        method: 'SOUND_ALERT',
+        alertExposureTime: 5,
+        receiveForMobile: false,
+        receiveForMessage: false
       }
     },
     CommonSetting: {

projects/ucap-webmessenger-app/src/environments/environment.prod.ts

@@ -48,7 +48,11 @@ export const environment: Environment = {
         timezone: 'Asia/Seoul'
       },
       notification: {
-        chatMessage: true
+        use: true,
+        method: 'SOUND_ALERT',
+        alertExposureTime: 5,
+        receiveForMobile: false,
+        receiveForMessage: false
       }
     },
     CommonSetting: {

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts

@@ -114,12 +114,15 @@ export class GeneralComponent implements OnInit, OnDestroy {
   onChangeAutoStart(event: MatCheckboxChange) {
     this.emit({ ...this.setting, autoLaunch: event.checked });
   }
+
   onChangeStartupHideWindow(event: MatCheckboxChange) {
     this.emit({ ...this.setting, startupHideWindow: event.checked });
   }
+
   onChangeContinueRunWhenClose(event: MatCheckboxChange) {
     this.emit({ ...this.setting, continueRunWhenClose: event.checked });
   }
+
   onChangeAutoLogin(event: MatCheckboxChange) {
     this.emit({ ...this.setting, autoLogin: event.checked });
   }

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.html

@@ -2,37 +2,54 @@
   <mat-list>
     <h1 mat-subheader>메시지</h1>
     <mat-list-item>
-      <span class="item-title">채팅 메시지</span>
+      <span class="item-title">알림 받기</span>
+    </mat-list-item>
+    <mat-list-item>
+      <span class="item-input" fullWidth>
+        <mat-radio-group
+          aria-label="Select an option"
+          [value]="setting.use ? 'true' : 'false'"
+          (change)="onChangeUse($event)"
+        >
+          <mat-radio-button value="true">알림 받음</mat-radio-button>
+          <mat-radio-button value="false">알림 받지 않음</mat-radio-button>
+        </mat-radio-group>
+      </span>
+    </mat-list-item>
+    <mat-list-item>
+      <span class="item-title">알림 방법</span>
       <span class="item-input">
         <mat-form-field>
-          <mat-select>
+          <mat-select
-            <mat-option value="bannerAndEmail">
+            [value]="setting.method"
-              배너 및 전자 메일
+            (selectionChange)="onSelectionChangeMethod($event)"
+          >
+            <mat-option value="SOUND">
+              소리
             </mat-option>
-            <mat-option value="banner">
+            <mat-option value="ALERT">
-              배너
+              알림창
             </mat-option>
-            <mat-option value="off">
+            <mat-option value="SOUND_ALERT">
-              끔
+              소리 + 알림창
             </mat-option>
           </mat-select>
         </mat-form-field>
       </span>
     </mat-list-item>
+
     <mat-list-item>
-      <span class="item-title">내가 시작한 대화에 답장</span>
+      <span class="item-title">알림창 설정</span>
       <span class="item-input">
         <mat-form-field>
-          <mat-select>
+          <mat-select
-            <mat-option value="bannerAndEmail">
+            value="{{ setting.alertExposureTime }}"
-              배너 및 전자 메일
+            (selectionChange)="onSelectionChangeAlertExposureTime($event)"
-            </mat-option>
+          >
-            <mat-option value="banner">
+            <mat-option value="5">5</mat-option>
-              배너
+            <mat-option value="10">10</mat-option>
-            </mat-option>
+            <mat-option value="15">15</mat-option>
-            <mat-option value="off">
+            <mat-option value="20">20</mat-option>
-              끔
-            </mat-option>
           </mat-select>
         </mat-form-field>
       </span>
@@ -40,41 +57,34 @@
 
     <mat-divider></mat-divider>
 
-    <h1 mat-subheader>기타</h1>
+    <h1 mat-subheader>모바일</h1>
     <mat-list-item>
-      <span class="item-title">알림 소리</span>
+      <span class="item-title">모바일 알림</span>
-      <span class="item-input">
-        <mat-form-field>
-          <mat-select>
-            <mat-option value="bannerAndEmail">
-              모두
-            </mat-option>
-            <mat-option value="banner">
-              통화, 채팅
-            </mat-option>
-            <mat-option value="off">
-              끔
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </span>
     </mat-list-item>
     <mat-list-item>
-      <span class="item-title">부재 중 활동 전자 메일</span>
+      <span class="item-input" fullWidth>
-      <span class="item-input">
+        <mat-checkbox
-        <mat-form-field>
+          [checked]="setting.receiveForMobile"
-          <mat-select>
+          (change)="onChangeReceiveForMobile($event)"
-            <mat-option value="bannerAndEmail">
+          >항상 모바일 알림을 받음</mat-checkbox
-              배너 및 전자 메일
+        >
-            </mat-option>
+        <br />(해제 시 PC버전이 부재중인 경우에만 모바일 알림을 받음)
-            <mat-option value="banner">
+      </span>
-              배너
+    </mat-list-item>
-            </mat-option>
+
-            <mat-option value="off">
+    <mat-divider></mat-divider>
-              끔
+    <h1 mat-subheader>쪽지</h1>
-            </mat-option>
+    <mat-list-item>
-          </mat-select>
+      <span class="item-title">쪽지 알림</span>
-        </mat-form-field>
+    </mat-list-item>
+    <mat-list-item>
+      <span class="item-input" fullWidth>
+        <mat-checkbox
+          [checked]="setting.receiveForMessage"
+          (change)="onChangeReceiveForMessage($event)"
+          >쪽지 수신 시 팝업보기</mat-checkbox
+        >
+        <br />(해제 시 쪽지 알림만 받음)
       </span>
     </mat-list-item>
   </mat-list>

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.scss

@@ -5,3 +5,7 @@
 .item-input {
   width: 20rem;
 }
+
+.item-input[fullWidth] {
+  width: 100%;
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.ts

@@ -1,6 +1,18 @@
-import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
+import {
-import { FormGroup, FormBuilder } from '@angular/forms';
+  Component,
+  OnInit,
+  ChangeDetectorRef,
+  Input,
+  Output,
+  EventEmitter
+} from '@angular/core';
 import { NotificationSetting } from '../models/settings';
+import {
+  MatRadioChange,
+  MatSelectChange,
+  MatCheckboxChange
+} from '@angular/material';
+import { NGXLogger } from 'ngx-logger';
 
 @Component({
   selector: 'ucap-settings-notification',
@@ -11,14 +23,40 @@ export class NotificationComponent implements OnInit {
   @Input()
   setting: NotificationSetting;
 
-  loginForm: FormGroup;
+  @Output()
+  changed = new EventEmitter<NotificationSetting>();
 
   constructor(
-    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef,
-    private changeDetectorRef: ChangeDetectorRef
+    private logger: NGXLogger
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.logger.debug('setting', this.setting);
+  }
 
-  onClickLogin() {}
+  onChangeUse(event: MatRadioChange) {
+    this.emit({ ...this.setting, use: 'true' === event.value ? true : false });
+  }
+
+  onSelectionChangeMethod(event: MatSelectChange) {
+    this.emit({ ...this.setting, method: event.value });
+  }
+
+  onSelectionChangeAlertExposureTime(event: MatSelectChange) {
+    this.emit({ ...this.setting, alertExposureTime: event.value });
+  }
+
+  onChangeReceiveForMobile(event: MatCheckboxChange) {
+    this.emit({ ...this.setting, receiveForMobile: event.checked });
+  }
+
+  onChangeReceiveForMessage(event: MatCheckboxChange) {
+    this.emit({ ...this.setting, receiveForMessage: event.checked });
+  }
+
+  private emit(setting: NotificationSetting) {
+    this.setting = setting;
+    this.changed.emit(this.setting);
+  }
 }

projects/ucap-webmessenger-ui-settings/src/lib/models/settings.ts

@@ -10,7 +10,11 @@ export interface GeneralSetting {
 }
 
 export interface NotificationSetting {
-  chatMessage: boolean;
+  use: boolean;
+  method: 'SOUND' | 'ALERT' | 'SOUND_ALERT';
+  alertExposureTime: number;
+  receiveForMobile: boolean;
+  receiveForMessage: boolean;
 }
 
 export interface Settings {

projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts

@@ -10,6 +10,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatRadioModule } from '@angular/material/radio';
 
 import { CallComponent } from './components/call.component';
 import { DeviceComponent } from './components/device.component';
@@ -38,7 +39,8 @@ const SERVICES = [];
     MatListModule,
     MatSelectModule,
     MatSlideToggleModule,
-    MatTabsModule
+    MatTabsModule,
+    MatRadioModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]