From fd1d6e1d884b3d64d126b25cc0a6367b982aad60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= Date: Thu, 16 May 2024 13:43:11 +0900 Subject: [PATCH] =?UTF-8?q?[Fix]=20=EC=A7=80=EB=82=9C=20=EA=B7=B8=EB=A3=B9?= =?UTF-8?q?=20=EC=9D=BC=EC=A0=95=20=EC=A1=B0=ED=9A=8C=20=EB=B6=88=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/mapper/scheduleMapper.xml | 2 +- src/main/resources/static/css/table/table.css | 16 ++ src/main/resources/static/js/calendar.js | 1 - src/main/resources/static/js/inc/alarm.js | 35 ---- src/main/resources/static/js/module/ajax.js | 47 ++++++ .../resources/static/js/module/sweetAlert.js | 3 - .../resources/static/js/schedule/detail.js | 1 + src/main/resources/static/js/table/table.js | 157 +++++++++++++++++- src/main/webapp/WEB-INF/views/table/table.jsp | 8 + 9 files changed, 229 insertions(+), 41 deletions(-) diff --git a/src/main/resources/mapper/scheduleMapper.xml b/src/main/resources/mapper/scheduleMapper.xml index 518fbba..2a2d79d 100644 --- a/src/main/resources/mapper/scheduleMapper.xml +++ b/src/main/resources/mapper/scheduleMapper.xml @@ -289,7 +289,7 @@ JOIN schedule s ON ms.schedule_id = s.schedule_id WHERE ms.email = #{email} - AND s.end_date < CURRENT_DATE + AND s.start_date < CURRENT_DATE AND s.schedule_category_id = #{categoryId} diff --git a/src/main/resources/static/css/table/table.css b/src/main/resources/static/css/table/table.css index 110bc77..b368ade 100644 --- a/src/main/resources/static/css/table/table.css +++ b/src/main/resources/static/css/table/table.css @@ -20,6 +20,13 @@ body { align-items: center; } +.chart-container { + gap: 30px; + display: flex; + justify-content: center; + align-items: center; +} + .foot-container { display: flex; flex-direction: column; @@ -117,6 +124,15 @@ body { +/* 차트 */ +.chart { + width: 300px; +} +/* 차트 End*/ + + + + /* 필터링 컨테이너 */ diff --git a/src/main/resources/static/js/calendar.js b/src/main/resources/static/js/calendar.js index 5c277c7..897da35 100644 --- a/src/main/resources/static/js/calendar.js +++ b/src/main/resources/static/js/calendar.js @@ -16,7 +16,6 @@ $(document).ready(async function() { // 달력 표시 let scheduleData; await getCalendarSchedule(); - console.log(scheduleData) const calendar = displayEventsOnCalendar(scheduleData); // ajax 통해 서버에서 일정 데이터 가져오는 함수 diff --git a/src/main/resources/static/js/inc/alarm.js b/src/main/resources/static/js/inc/alarm.js index d4eae56..4ab8952 100644 --- a/src/main/resources/static/js/inc/alarm.js +++ b/src/main/resources/static/js/inc/alarm.js @@ -18,24 +18,9 @@ $(".msg-overlay-bubble-list").ready(function() { 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) - // } if (isRead != true) { isRead = true; // isRead 의 값이 false 인 경우, x 버튼을 누르면 true 로 바꾸기 - console.log("false -> true") - console.log(isRead) } $.ajax({ @@ -46,18 +31,11 @@ $(".msg-overlay-bubble-list").ready(function() { notifyId: notifyID }, success: function (response) { - console.log('데이터 전송 성공:', response); - - // let $this = $(this); - // $this.closest('.card-outer').remove(); - - //$(this).closest('.card-outer').remove(); let $cardToRemove = $(document).find('[data-notify-id="' + notifyID + '"]').closest('.card-outer'); $cardToRemove.remove(); }, error: function (xhr, status, error) { - console.error('데이터 전송 실패:', error); } }) }) @@ -67,9 +45,6 @@ $(".msg-overlay-bubble-list").ready(function() { let scheduleId = $(this).data('schedule-id'); // // 클릭된 카드의 notifyCategoryId 가져오기 let notifyCategoryId = $(this).data('notify-category-id'); - console.log('두 번째 이벤트') - console.log(scheduleId) - console.log(notifyCategoryId) if (notifyCategoryId === 1) { // 모임 일정 초대 location.href = '/schedule/vote?scheduleId=' + scheduleId; @@ -99,7 +74,6 @@ function showNotifications() { let cardData = response.data; // 데이터 배열 // 데이터 배열을 순회하면서 카드 생성 cardData.forEach(function(card) { - //console.log(card) // 카드 생성 및 데이터 추가 let $cardOuter = $('
'); @@ -168,14 +142,6 @@ function showNotifications() { 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 $cardMain2.append("

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

"); } @@ -195,7 +161,6 @@ function showNotifications() { }, error: function(xhr, status, error) { // 데이터 받아오지 못할 경우 예외 처리 - console.error("Error: ", error); } }); }; diff --git a/src/main/resources/static/js/module/ajax.js b/src/main/resources/static/js/module/ajax.js index 6051c9c..3c06108 100644 --- a/src/main/resources/static/js/module/ajax.js +++ b/src/main/resources/static/js/module/ajax.js @@ -268,5 +268,52 @@ export async function getScheduleHistory(catogoryId, keyword, page, size) { // 실패 시 예외 처리 } + return response; +} + + + +// 월별 통계불러오기 +export async function getMonthStatic(year, isGroup) { + const response = await $.ajax({ + type: "GET", + dataType : 'json', + contentType: 'application/json', + url: `/api/stats/me/schedule`, + data : { + "year" : year, + "isGroup" : isGroup + } + }); + if (!response.isSuccess) { + // 실패 시 예외 처리 + } + + return response; +} + + + +// 카테고리별 통계불러오기 +export async function getCategoryStatic(year, month, isGroup) { + console.log(year, month) + + const response = await $.ajax({ + type: "GET", + dataType : 'json', + contentType: 'application/json', + // url: `/api/stats/me/category?year=${year}?month=${month}`, + url: `/api/stats/me/category`, + data : { + "month" : month, + "year" : year, + "isGroup" : isGroup + } + }); + + if (!response.isSuccess) { + // 실패 시 예외 처리 + } + return response; } \ No newline at end of file diff --git a/src/main/resources/static/js/module/sweetAlert.js b/src/main/resources/static/js/module/sweetAlert.js index d637548..aada8b5 100644 --- a/src/main/resources/static/js/module/sweetAlert.js +++ b/src/main/resources/static/js/module/sweetAlert.js @@ -7,8 +7,6 @@ export async function successModal(text) { // confirmButtonText: '로그인', showConfirmButton: false }) - - console.log(result); } // 실패 모달 @@ -21,5 +19,4 @@ export async function infoModal(text) { showConfirmButton: false }) - console.log(result); } \ No newline at end of file diff --git a/src/main/resources/static/js/schedule/detail.js b/src/main/resources/static/js/schedule/detail.js index 7c27658..101343e 100644 --- a/src/main/resources/static/js/schedule/detail.js +++ b/src/main/resources/static/js/schedule/detail.js @@ -6,6 +6,7 @@ import {getRoute} from '/js/module/mobility.js' const urlSearch = new URLSearchParams(location.search); let scheduleId = await urlSearch.get('scheduleId'); let scheduleInfo = await aj.getScheduleDetail(scheduleId); +console.log(scheduleInfo) const targetInfo = scheduleInfo.scheduleDetailInfo; // ---- 사용자 정보 ---- const myInfo = await aj.getMyInfo(); diff --git a/src/main/resources/static/js/table/table.js b/src/main/resources/static/js/table/table.js index 8453d35..5fe51da 100644 --- a/src/main/resources/static/js/table/table.js +++ b/src/main/resources/static/js/table/table.js @@ -12,6 +12,12 @@ let page = 0; let size = 10; let keyword = ""; let isLast = true; +// 차트 관련 +const today = new Date(); +let isGroup; +let barIsGroup = null; +let circleIsGroup = null; + // !왼쪽 사이드 캐러셀 let leftSlid = 0; @@ -62,6 +68,11 @@ $('.down-btn').click(async function(e) { }) +// ! 차트 +const circleChart = await showFirstCircleChart(); +const barChart = await showFirstBarChart(); + + @@ -188,4 +199,148 @@ async function getSchedules() { // isLast = schedulesInfo.last; } // ---- 데이터 불러오기 End ---- -// 2. 데이터 테이블 End \ No newline at end of file +// 2. 데이터 테이블 End + + + +// 3. 차트 +// --- 원 그래프 데이터 가져오기 ---- +async function getCircleData() { + const year = today.getFullYear(); + const month = (today.getMonth() + 1).toString().padStart(2, '0'); + + const response = await aj.getCategoryStatic(year, month, isGroup); + const countData = response.data; + + const data = { + labels: [], + datasets: [ + { + label: '전체 카테고리 통계', + data: [], + backgroundColor: [], + } + ] + }; + + $.each(countData, function (idx, category) { + data.labels.push(category.categoryName); + data.datasets[0].data.push(category.scheduleCount); + data.datasets[0].backgroundColor.push(category.color); + }); + + return data +} +// --- 원 그래프 데이터 가져오기 ---- + + +// --- 막대 그래프 데이터 가져오기 ---- +async function getBarData() { + const year = today.getFullYear(); + + const data = { + labels: [], + datasets: [ + { + label: '전체', + data: [], + borderColor: '#4FD1C5', + backgroundColor: '#4FD1C5', + borderWidth: 2, + }, + { + label: '그룹', + data: [], + borderColor: '#4FD1C5', + backgroundColor: '#4FD1C5', + borderWidth: 2, + }, + { + label: '개인', + data: [], + borderColor: '#4FD1C5', + backgroundColor: '#4FD1C5', + borderWidth: 2, + }, + ] + }; + + // 전체 일정 + const response1 = await aj.getMonthStatic(year); + const countData1 = response1.data; + + $.each(countData1, function (idx, month) { + data.labels.push(month.month); + data.datasets[0].data.push(month.scheduleCount); + }); + + // 그룹 일정 + const response2 = await aj.getMonthStatic(year, true); + const countData2 = response1.data; + $.each(countData2, function (idx, month) { + data.datasets[1].data.push(month.scheduleCount); + }); + + // 개인 일정 + const response3 = await aj.getMonthStatic(year, false); + const countData3 = response1.data; + $.each(countData3, function (idx, month) { + data.datasets[2].data.push(month.scheduleCount); + }); + + return data +} +// --- 막대 그래프 데이터 가져오기 ---- + +// ---- 원 그래프 처음 보여주기 ---- +async function showFirstCircleChart() { + const barEl = $('#circle-chart > canvas'); + + const data = await getCircleData(); + var myChart = new Chart(barEl, { + type: 'doughnut', + data: data, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: '카테고리별 일정 통계' + } + } + }, + }); + + return myChart; +} +// ---- 원 그래프 처음 보여주기 End ---- + +// ---- 막대 그래프 처음 보여주기 ---- +async function showFirstBarChart() { + const barEl = $('#bar-chart > canvas'); + + const data = await getBarData(); + var myChart = new Chart(barEl, { + type: 'bar', + data: data, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: '월별 일정 통계' + } + } + }, + }); + + return myChart; +} +// ---- 막대 그래프 처음 보여주기 End ---- +// ---- 원 그래프 End ---- \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/views/table/table.jsp b/src/main/webapp/WEB-INF/views/table/table.jsp index 3133598..a5ea3b5 100644 --- a/src/main/webapp/WEB-INF/views/table/table.jsp +++ b/src/main/webapp/WEB-INF/views/table/table.jsp @@ -75,6 +75,14 @@ pageEncoding="UTF-8"%>
+
+
+ +
+
+ +
+