Skip to content

Commit

Permalink
Merge pull request #81 from hyosung-second-team1/jsp-calendar
Browse files Browse the repository at this point in the history 
[feat] 메인페이지 알람 클릭 시 페이지 이동
  • Loading branch information
@soo01234
soo01234 authored May 15, 2024
2 parents 9a964a8 + d4587c5 commit c1399c0
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 105 deletions.
2 changes: 2 additions & 0 deletions src/main/resources/static/css/calendar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ h2{
/*border-left-width: 1px;*/
/*border-left-color: lightgrey;*/


}

ul {
Expand All @@ -210,6 +211,7 @@ li {
margin-bottom: .8rem;
font-size: 14px;
margin-right: 3px;
cursor: pointer;
}

.area_agenda .area_date {
Expand Down
59 changes: 19 additions & 40 deletions src/main/resources/static/css/inc/alarm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; */
Expand All @@ -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;

Expand Down Expand Up @@ -107,7 +108,7 @@
display: flex;
flex-direction: column;
align-items: center;
width: 305px;
width: 220px;
/*height: 200px;*/
font-size: small;
margin-bottom: 5px;
Expand All @@ -126,9 +127,10 @@

.card-name {
width: 95%;
height: 15%;
height: 50%;
margin: 5px 10px;
font-weight: bold;
font-size: 12px;
padding-left: 5px;
}

Expand All @@ -139,70 +141,47 @@
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 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 10px;
height: 30%;
}

.card-main-2 {
display: flex;
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;
} */
.bi bi-x-square {
z-index: 80;
}
5 changes: 1 addition & 4 deletions src/main/resources/static/js/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,6 @@ $(document).ready(function() {

events.forEach(event => {
let li = $('<li>').addClass('event-item');

// 시간 정보 추가
let dateTimeArray = event.startDate.split(' ');
let date = dateTimeArray[0]; // 날짜 부분
Expand Down Expand Up @@ -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);
Expand Down
144 changes: 83 additions & 61 deletions src/main/resources/static/js/inc/alarm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,58 @@ $("#alarmIcon").click(function () {
$(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("*************************8")
console.log("notifyID")
console.log(notifyID)
console.log(isRead)
if (isRead) {
// 해당 일정의 부모 요소를 숨깁니다.
$(this).closest('.card-outer').remove();
} else {
isRead = true; // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기
console.log("false -> true")
console.log(isRead)
}

$.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);
}
})

// if (isRead === true) {
// // 해당 일정의 부모 요소를 숨깁니다.
// $(this).closest('.card-outer').hide();
// }
})

$(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;
Expand All @@ -38,6 +77,8 @@ $(document).ready(function() {
}

});


});

// 알림을 띄우는 함수
Expand All @@ -51,16 +92,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 = $('<div class = "card-outer" data-card-id="{{card.scheduleId}}"></div>');
let $cardOuter = $('<div class="card-outer" data-schedule-id="' + card.scheduleId + '" data-notify-category-id="' + card.notifyCategoryId + '"></div>');

let $cardName = $('<div class = "card-name"></div>');
Expand All @@ -76,19 +111,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("<h3 style='margin-top: 5px; font-weight: bold;'>" + card.name + "</h3>");
$cardMain1.append("<h3 style='font-weight: bold; font-size: 15px;'>" + card.name + "</h3>");
//$cardMain2.append('<p><i class="bi bi-calendar-check"> </i>' + startDate + '</p>');
$cardMain2.append('<p style="margin-top: 16px;"><i class="bi bi-calendar-check" style="margin-top: 16px;"> </i>' + startDate + '</p>');
$cardMain2.append('<p style="margin-top: 16px;"><i class="bi bi-clock" style="margin-top: 16px;"> </i>' + startTime + '</p>');
// $cardMain3.append("<p>" + card.voteDeadline + "투표 마감</p>");
$cardMain3.append('<p style="font-size: 12px;"><i class="bi bi-calendar-check" style="margin-top: 16px;"> </i>' + startDate + '</p>');
$cardMain3.append('<p style="font-size: 12px;"><i class="bi bi-clock" style="margin-top: 16px;"> </i>' + startTimewithoutSec + '</p>');
$cardMain1.append('<p style="font-size: 20px;"><i class="bi bi-x-square" style="margin-top: 16px; color: #000000" data-is-read="' + card.isRead + '" data-notify-id="' + card.notifyId + '"></i>' + '</p>');


// 카드를 화면에 추가합니다.
$cardOuter.append($cardName);
Expand All @@ -99,60 +134,47 @@ function showNotifications() {
$(".msg-overlay-bubble-list").append($cardOuter);

if (card.placeName === null) {
$cardMain3.append('<p style="margin-top: 16px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + '투표중' + '</p>')
$cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + '투표중' + '</p>')
} else {
$cardMain3.append('<p style="margin-top: 16px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + card.placeName + '</p>')
$cardMain2.append('<p style="font-size: 12px;"><i class="bi bi-geo-alt" style="margin-top: 16px;"> </i>' + card.placeName + '</p>')
}

if (card.voteDeadline === null) { // 투표 마감일 X = 개인 일정
$cardMain3.append("");
$cardMain2.append("");
} else if (card.voteDeadline < today) { // 투표 마감일 지남
//$cardMain3.append("<p style='margin-top: 16px;'>" + "투표 마감</p>");
$cardMain3.append("");
} else { // 투표 마감일 전
$cardMain3.append("<p style='margin-top: 16px;'>" + deadlineDate + " 투표 마감</p>");
$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("<p style='font-size: 12px;'>" + deadlineMonth + "/" + deadlineDay + " <br>투표 마감</p>");
}

$cardMain1.append(
$cardMain2.append(
'<p class="highlight-category" style="background-color: ' +
card.color + // 카테고리에 해당하는 색상을 가져옵니다.
'; border-radius: 5px; padding: 3px 6px; margin-top: 8px;">' +
'; border-radius: 5px; padding: 2px 4px; font-size: 12px; color: #ffffff">' +
card.scheduleCategoryName +
"</p>"
);


// 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("<h3>" + card.title + "</h3>");
// $cardMain3.append(
// '<p><i class="bi bi-geo-alt"> </i>' + card.loc + "</p>"
// );
//
// $cardMain1.append(
// '<p class="highlight-category" style="background-color: ' +
// categoryColor[0][card.category] + // 카테고리에 해당하는 색상을 가져옵니다.
// '; border-radius: 5px; padding: 3px 6px;">' +
// card.category +
// "</p>"
// );
//
// $cardMain2.append(
// '<p><i class="bi bi-calendar-check"> </i>' + card.startDate + "</p>"
// );
// $cardMain2.append(
// '<p><i class="bi bi-clock"> </i>' + card.startTime + "</p>"
// );
// $cardMain3.append("<p>"+card.voteEnd + "투표 마감</p>");

});
},
error: function(xhr, status, error) {
Expand Down

0 comments on commit c1399c0

Please sign in to comment.