From b08b8edb2eeca2e183b11b97bed6d139ced1a1e4 Mon Sep 17 00:00:00 2001 From: soo01234 Date: Tue, 14 May 2024 22:21:10 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[feat]=20=EC=95=8C=EB=9E=8C=20x=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=9D=BD=EC=9D=8C?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=20#66?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/calendar.css | 2 + src/main/resources/static/css/inc/alarm.css | 59 +++------ src/main/resources/static/js/calendar.js | 5 +- src/main/resources/static/js/inc/alarm.js | 137 +++++++++++--------- 4 files changed, 98 insertions(+), 105 deletions(-) diff --git a/src/main/resources/static/css/calendar.css b/src/main/resources/static/css/calendar.css index 1ddd1b1..1ef9e55 100644 --- a/src/main/resources/static/css/calendar.css +++ b/src/main/resources/static/css/calendar.css @@ -189,6 +189,7 @@ h2{ /*border-left-width: 1px;*/ /*border-left-color: lightgrey;*/ + } ul { @@ -210,6 +211,7 @@ li { margin-bottom: .8rem; font-size: 14px; margin-right: 3px; + cursor: pointer; } .area_agenda .area_date { diff --git a/src/main/resources/static/css/inc/alarm.css b/src/main/resources/static/css/inc/alarm.css index f40f59c..d5f0597 100644 --- a/src/main/resources/static/css/inc/alarm.css +++ b/src/main/resources/static/css/inc/alarm.css @@ -32,10 +32,11 @@ height: 100vh; top: 7px; right: 0px; - width: 340px; + width: 230px; z-index: 50; /* 다른 요소 위에 표시하기 위해 z-index를 설정합니다. */ border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 가로, 세로, 흐림 정도, 색상 */; + padding: 10px; /* border-radius: .3rem; */ background-color: #ffffff; /* border-color: #4FD1C5; */ @@ -51,13 +52,13 @@ display: flex; flex-direction: column; height: 100vh; - width: 315px; + width: 86%; /*box-shadow: left only;*/ } .msg-overlay-bubble-header { margin: 0 20px; - font-size: large; + font-size: medium; font-weight: bold; border-bottom: 1px solid; @@ -107,7 +108,7 @@ display: flex; flex-direction: column; align-items: center; - width: 305px; + width: 220px; /*height: 200px;*/ font-size: small; margin-bottom: 5px; @@ -126,9 +127,10 @@ .card-name { width: 95%; - height: 15%; + height: 50%; margin: 5px 10px; font-weight: bold; + font-size: 12px; padding-left: 5px; } @@ -139,12 +141,14 @@ align-content: space-between; align-items: stretch; background-color: #ffffffe2; - width: 280px; - height: 130px; + width: 100%; + gap: 5px; + /*height: 130px;*/ border-radius: 5px; margin-bottom: 10px; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.05), 0px 5px 10px rgba(0, 0, 0, 0.1); font-weight: bold; + padding: 10px 10px; } .card-main-1 { @@ -152,8 +156,6 @@ flex-direction: row; justify-content: space-between; align-items: center; - margin: 0 10px; - height: 30%; } .card-main-2 { @@ -161,48 +163,25 @@ flex-direction: row; justify-content: space-between; align-items: center; - margin: 0 10px; - height: 30%; } .card-main-3 { display: flex; flex-direction: row; - justify-content: space-between; align-items: center; - margin: 0 10px; - height: 30%; + justify-content: space-between + } h3 { font-size: 18px; + margin: 0px; } -/* .category1 { - background-color: rgb(71, 147, 175); - border-radius: 5px; - font-weight: bold; - color: #071241; +.card-main p { + margin : 0px; } -.category2 { - background-color: rgb(255, 196, 112); - border-radius: 5px; - font-weight: bold; - color: #071241; - -} - -.category3 { - background-color: rgb(221, 87, 70); - border-radius: 5px; - font-weight: bold; - color: #071241; -} - -.category4 { - background-color: rgb(139, 50, 44); - border-radius: 5px; - font-weight: bold; - color: #071241; -} */ \ No newline at end of file +.bi bi-x-square { + z-index: 80; +} \ No newline at end of file diff --git a/src/main/resources/static/js/calendar.js b/src/main/resources/static/js/calendar.js index b3adaa7..2a2276e 100644 --- a/src/main/resources/static/js/calendar.js +++ b/src/main/resources/static/js/calendar.js @@ -177,7 +177,6 @@ $(document).ready(function() { events.forEach(event => { let li = $('
  • ').addClass('event-item'); - // 시간 정보 추가 let dateTimeArray = event.startDate.split(' '); let date = dateTimeArray[0]; // 날짜 부분 @@ -211,9 +210,7 @@ $(document).ready(function() { // 클릭 이벤트 추가 li.on('click', function () { - // 클릭한 날짜에 해당하는 캘린더 이벤트 선택 - calendar.select(event.startDate); - console.log("눌림!"); + location.href = `/schedule/detail?scheduleId=${event.scheduleId}` }); ul.append(li); diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index 2d97a06..ca57a12 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/src/main/resources/static/js/inc/alarm.js @@ -14,18 +14,50 @@ $(document).ready(function() { // 페이지가 완전히 로드된 후에 알림을 띄우는 함수 실행 showNotifications(); + // x 버튼 클릭 시 ... + $(document).on('click', '.bi.bi-x-square',function(e) { + e.stopPropagation(); // 이벤트 전파 중지 + let isRead = $(this).data('is-read'); + let notifyID = $(this).data('notify-id'); + console.log('x 클릭 하셨군요...') + console.log(isRead) // false + isRead = true; + console.log(isRead) // true + console.log("*************************8") + console.log(notifyID) + // if (isRead === true) { + // // 해당 일정의 부모 요소를 숨깁니다. + // $(this).closest('.card-outer').hide(); + // } + + $.ajax({ + type: 'PUT', + url: '/api/notify/read', + dataType: 'json', + data: { + notifyId: notifyID + }, + success: function (response) { + console.log('데이터 전송 성공:', response); + if (isRead === true) { + // 해당 일정의 부모 요소를 숨깁니다. + $(this).closest('.card-outer').hide(); + } + }, + error: function (xhr, status, error) { + console.error('데이터 전송 실패:', error); + } + }) + }) + $(document).on('click', '.card-outer', function() { // 클릭한 카드의 ID 가져오기 let scheduleId = $(this).data('schedule-id'); - // let cardId = $(this).data('card.scheduleId'); // // 클릭된 카드의 notifyCategoryId 가져오기 let notifyCategoryId = $(this).data('notify-category-id'); - // console.log('cardId') - // console.log(scheduleId) - // console.log('notifyCategoryId') - // console.log(notifyCategoryId) - - //window.location.href = '/schedule/vote?scheduleId=' + scheduleId; + console.log('두 번째 이벤트') + console.log(scheduleId) + console.log(notifyCategoryId) if (notifyCategoryId === 1) { window.location.href = '/schedule/vote?scheduleId=' + scheduleId; @@ -38,6 +70,8 @@ $(document).ready(function() { } }); + + }); // 알림을 띄우는 함수 @@ -51,16 +85,10 @@ function showNotifications() { success: function(response) { // 데이터 성공적으로 받아오면 실행되는 함수 let cardData = response.data; // 데이터 배열 - console.log('response.data 찍기') - console.log(response.data) // 데이터 배열을 순회하면서 카드 생성 cardData.forEach(function(card) { - console.log('card.voteDeadline 찍기') - console.log(card.voteDeadline) - console.log('card.startDate 찍기') - console.log(card.startDate) + //console.log(card) // 카드 생성 및 데이터 추가 - //let $cardOuter = $('
    '); let $cardOuter = $('
    '); let $cardName = $('
    '); @@ -76,19 +104,19 @@ function showNotifications() { let dateTime = card.startDate; let dateTimeArray = dateTime.split(" "); let startDate = dateTimeArray[0]; // "YYYY-MM-DD" - let startTime = dateTimeArray[1]; // "HH:mm" + let startTime = dateTimeArray[1]; // "HH:mm:ss" + let startTimeArray = startTime.split(":"); + let startTimewithoutSec = startTimeArray[0] + ":" + startTimeArray[1]; - // let deadline = card.voteDeadline; - // let deadlineArray = deadline.split(" "); - // let deadlineDate = deadlineArray[0]; // 데이터 추가 $cardName.append(card.message); - $cardMain1.append("

    " + card.name + "

    "); + $cardMain1.append("

    " + card.name + "

    "); //$cardMain2.append('

    ' + startDate + '

    '); - $cardMain2.append('

    ' + startDate + '

    '); - $cardMain2.append('

    ' + startTime + '

    '); - // $cardMain3.append("

    " + card.voteDeadline + "투표 마감

    "); + $cardMain3.append('

    ' + startDate + '

    '); + $cardMain3.append('

    ' + startTimewithoutSec + '

    '); + $cardMain1.append('

    ' + '

    '); + // 카드를 화면에 추가합니다. $cardOuter.append($cardName); @@ -99,60 +127,47 @@ function showNotifications() { $(".msg-overlay-bubble-list").append($cardOuter); if (card.placeName === null) { - $cardMain3.append('

    ' + '투표중' + '

    ') + $cardMain2.append('

    ' + '투표중' + '

    ') } else { - $cardMain3.append('

    ' + card.placeName + '

    ') + $cardMain2.append('

    ' + card.placeName + '

    ') } if (card.voteDeadline === null) { // 투표 마감일 X = 개인 일정 - $cardMain3.append(""); + $cardMain2.append(""); } else if (card.voteDeadline < today) { // 투표 마감일 지남 //$cardMain3.append("

    " + "투표 마감

    "); - $cardMain3.append(""); - } else { // 투표 마감일 전 - $cardMain3.append("

    " + deadlineDate + " 투표 마감

    "); + $cardMain2.append(""); + } else { // 투표 마감일 전 + let deadline = card.voteDeadline; + let deadlineArray = deadline.split(" "); + let deadlineDate = deadlineArray[0]; + let deadlineDateArray = deadlineDate.split("-"); + let deadlineYear = deadlineDateArray[0]; + let deadlineMonth = deadlineDateArray[1]; + let deadlineDay = deadlineDateArray[2]; + // console.log('콘소오오올') + // console.log(deadlineDateArray) // ['2024', '05', '17'] + // console.log('year') + // console.log(deadlineDateArray[0]) // 2024 + // console.log('month') + // console.log(deadlineDateArray[1]) // 05 + // console.log('day') + // console.log(deadlineDateArray[2]) // 17 + $cardMain3.append("

    " + deadlineMonth + "/" + deadlineDay + "
    투표 마감

    "); } - $cardMain1.append( + $cardMain2.append( '

    ' + + '; border-radius: 5px; padding: 2px 4px; font-size: 12px; color: #ffffff">' + card.scheduleCategoryName + "

    " ); - - // if (card.start === "투표중" && card.loc === "미정") { - // $cardName.append("새로운 투표가 등록되었습니다"); - // } else if (card.loc === "투표중") { - // $cardName.append("장소 투표를 진행 중입니다."); - // } else if ( - // (card.start != "투표중" && card.loc != "미정") || - // (card.start != "투표중" && card.loc != "미정" && card.loc != "투표중") - // ) { - // $cardName.append("일정이 확정되었습니다."); + // if(card.isRead === true) { + // $('.card-outer').hide(); // } - // - // $cardMain1.append("

    " + card.title + "

    "); - // $cardMain3.append( - // '

    ' + card.loc + "

    " - // ); - // - // $cardMain1.append( - // '

    ' + - // card.category + - // "

    " - // ); - // - // $cardMain2.append( - // '

    ' + card.startDate + "

    " - // ); - // $cardMain2.append( - // '

    ' + card.startTime + "

    " - // ); - // $cardMain3.append("

    "+card.voteEnd + "투표 마감

    "); + }); }, error: function(xhr, status, error) { From fce16f84553f0553aa3f35e5d6a742c24105b3f5 Mon Sep 17 00:00:00 2001 From: soo01234 Date: Wed, 15 May 2024 15:08:14 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[feat]=20=EC=95=8C=EB=9E=8C=20x=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=9D=BD=EC=9D=8C?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=202=20#66?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/js/inc/alarm.js | 30 ++++++++++++++--------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index ca57a12..64cedf8 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/src/main/resources/static/js/inc/alarm.js @@ -20,15 +20,18 @@ $(document).ready(function() { let isRead = $(this).data('is-read'); let notifyID = $(this).data('notify-id'); console.log('x 클릭 하셨군요...') - console.log(isRead) // false - isRead = true; - console.log(isRead) // true console.log("*************************8") + console.log("notifyID") console.log(notifyID) - // if (isRead === true) { - // // 해당 일정의 부모 요소를 숨깁니다. - // $(this).closest('.card-outer').hide(); - // } + console.log(isRead) + if (isRead === true) { + // 해당 일정의 부모 요소를 숨깁니다. + $(this).closest('.card-outer').hide(); + } else { + isRead = true; // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기 + console.log("false -> true") + console.log(isRead) + } $.ajax({ type: 'PUT', @@ -39,15 +42,20 @@ $(document).ready(function() { }, success: function (response) { console.log('데이터 전송 성공:', response); - if (isRead === true) { - // 해당 일정의 부모 요소를 숨깁니다. - $(this).closest('.card-outer').hide(); - } + // if (isRead === true) { + // // 해당 일정의 부모 요소를 숨깁니다. + // $(this).closest('.card-outer').hide(); + // } }, error: function (xhr, status, error) { console.error('데이터 전송 실패:', error); } }) + + // if (isRead === true) { + // // 해당 일정의 부모 요소를 숨깁니다. + // $(this).closest('.card-outer').hide(); + // } }) $(document).on('click', '.card-outer', function() { From d4587c5e612a812cf3f4cf1b88ce27af6c22adde Mon Sep 17 00:00:00 2001 From: soo01234 Date: Wed, 15 May 2024 15:27:41 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[feat]=20=EC=95=8C=EB=9E=8C=20x=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=9D=BD=EC=9D=8C?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=20=EC=99=84=EB=A3=8C=20#66?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/js/inc/alarm.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index 64cedf8..7857141 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/src/main/resources/static/js/inc/alarm.js @@ -13,7 +13,6 @@ $("#alarmIcon").click(function () { $(document).ready(function() { // 페이지가 완전히 로드된 후에 알림을 띄우는 함수 실행 showNotifications(); - // x 버튼 클릭 시 ... $(document).on('click', '.bi.bi-x-square',function(e) { e.stopPropagation(); // 이벤트 전파 중지 @@ -24,9 +23,9 @@ $(document).ready(function() { console.log("notifyID") console.log(notifyID) console.log(isRead) - if (isRead === true) { + if (isRead) { // 해당 일정의 부모 요소를 숨깁니다. - $(this).closest('.card-outer').hide(); + $(this).closest('.card-outer').remove(); } else { isRead = true; // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기 console.log("false -> true")