알림설정(무음/진동/소리)

알람설정 영역

<div class="alram_set"
             id = "pushSel"
             data-alimslct = "{{ pushSel.alimSlct }}"
             data-pushmsgyn = "{{ pushSel.pushMsgYn }}"
             data-pushconcnyn = "{{ pushSel.pushConcnYn }}"
             data-pfviewyn = "{{ pushSel.pfViewYn }}"
        >

        <ul class="list_alarm" id="alarm_setting">
            <!-- 알림 설정 -->
            <div class="alarm_set">
                <div class="alarm_set__tit">알림 모드</div>
                <div class="alarm_set__content">
                    <!-- 알림 터치영역 박스 전체 -->
                    <!-- 활성화 시 on 클래스 추가 -->
                    <div class="alarm_set__box {% if data.alimSlct == 'n'%}on{% endif %}">
                        <div class="alarm_set__ico alarm_set__ico-silence"></div>
                        <div class="alarm_set__radio">
                            <div class="radio__box">
                                <input class="radio__input alimSlct" type="radio" name="alarmSetting" id="alarm_radio_btn01" value="n"{% if data.alimSlct == 'n'%}checked{% endif %}>
                                <label class="radio__lb" for="alarm_radio_btn01">
                                    <span>무음</span>
                                    <span class="radio__chk radio__chk-s"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="alarm_set__box_bar"></div>
                    <div class="alarm_set__box {% if data.alimSlct == 'v'%}on{% endif %}">
                        <div class="alarm_set__ico alarm_set__ico-vibrate"></div>
                        <div class="alarm_set__radio">
                            <div class="radio__box">
                                <input class="radio__input alimSlct" type="radio" name="alarmSetting" id="alarm_radio_btn02" value="v"{% if data.alimSlct == 'v'%}checked{% endif %}>
                                <label class="radio__lb"  for="alarm_radio_btn02">
                                    <span>진동</span>
                                    <span class="radio__chk radio__chk-s"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="alarm_set__box_bar"></div>
                    <div class="alarm_set__box {% if data.alimSlct == 's'%}on{% endif %}">
                        <div class="alarm_set__ico alarm_set__ico-sound"></div>
                        <div class="alarm_set__radio">
                            <div class="radio__box">
                                <input class="radio__input alimSlct" type="radio" name="alarmSetting" id="alarm_radio_btn03" value="s"{% if data.alimSlct == 's'%}checked{% endif %}>
                                <label class="radio__lb" for="alarm_radio_btn03">
                                    <span>소리</span>
                                    <span class="radio__chk radio__chk-s"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="space"></div>

알림설정js

알림화면 퍼블리싱을 받고 내가 추가할 class와 id를 지정했다. 그리고 pebble문법과 javaScript를 활용해서 알림체크가 되어있으면 class에 'on'을 넣어 알림된 영역을 진하게 설정하게끔 하였다.

// 알림 모드 변경 시
        this.vars.doms.$alimSlct.on('change', (e) => {
            // 다른 알림 종류 클릭('change')시 동작할 함수(e)
            $('.alarm_set__box').removeClass('on');
            // 해당클래스들의 'on'을 제거
            let target = $(e.currentTarget).closest(".alarm_set__box");
            // 클릭한 태그의 가까운 클래스를 찾아 변수에 담는다
            target.addClass('on');
            // 담아논 변수의 클래스에 'on'을 추가

            let typeValue = $(e.currentTarget).val();
            // 해당 태그의 value값을 변수(typeValue)에 담는다 
            let toastText = '';
            // 변수를 생성한뒤 조건문을 실행
            switch (typeValue) {
                case 'n' : { toastText = '무음으로'; break; }
                case 's' : { toastText = '소리로'; break; }
                case 'v' : { toastText = '진동으로'; break; }
            }
            // value가 'n'일때 무음,'s'일떄 소리, 'v'일때 진동
            try {
                // 알림모드 변경
                Notification.setNotificationMode({
                    memNo: CookieUtil.gCCV().NO,
                    //쿠키값의 넘버를 memNo의 vlue값에 담고
                    alimSlct: typeValue
                    // 알림 타입을 alimSlct에 담는다.
                }, (res) => {
                    if (res === 1) {
                        //결과 값이 있을때
                        Toast.makeText(
                            `알림모드가 ${toastText} 변경되었습니다.`, {
                                position : Toast.POSITION.CENTER // 토스트메세지 위치 가운데로 설정
                            });
                    }
                });
            } catch (e) {
                console.error('실패 ==> ' + e);
            }
        });

 

 

 

결과 화면