354 lines
14 KiB
JavaScript
354 lines
14 KiB
JavaScript
import React, {useState, useEffect, useCallback, PureComponent} from 'react';
|
|
import {Link, useLocation} from 'react-router-dom';
|
|
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
|
|
|
|
import * as EgovNet from 'api/egovFetch';
|
|
import URL from 'constants/url';
|
|
import CODE from 'constants/code';
|
|
|
|
import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';
|
|
|
|
function EgovAdminScheduleList(props) {
|
|
console.group("EgovAdminScheduleList");
|
|
console.log("[Start] EgovAdminScheduleList ------------------------------");
|
|
console.log("EgovAdminScheduleList [props] : ", props);
|
|
|
|
const location = useLocation();
|
|
console.log("EgovAdminScheduleList [location] : ", location);
|
|
|
|
const DATE = new Date();
|
|
const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
|
|
|
|
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate()});
|
|
const [calendarTag, setCalendarTag] = useState([]);
|
|
|
|
const [scheduleList, setScheduleList] = useState([]);
|
|
const [dailyUserLogList, setDailyUserLogList] = useState([]);
|
|
|
|
const innerConsole = (...args) => {
|
|
console.log(...args);
|
|
}
|
|
|
|
const getLastDateOfMonth = (year, month) => {
|
|
const LAST_DATE_SUPPLMENT = 1;
|
|
return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
|
|
}
|
|
const getFirstDateOfMonth = (year, month) => {
|
|
return new Date(year, month, 1);
|
|
}
|
|
|
|
const changeDate = (target, amount) => {
|
|
let changedDate;
|
|
|
|
if (target === CODE.DATE_YEAR) {
|
|
changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
|
|
}
|
|
|
|
if (target === CODE.DATE_MONTH) {
|
|
changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
|
|
}
|
|
setSearchCondition({...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate()});
|
|
}
|
|
|
|
const retrieveList = useCallback((srchcnd) => {
|
|
console.groupCollapsed("EgovAdminScheduleList.retrieveList()");
|
|
|
|
const retrieveListURL = '/schedule/month' + EgovNet.getQueryString(srchcnd);
|
|
|
|
const requestOptions = {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
}
|
|
}
|
|
|
|
EgovNet.requestFetch(retrieveListURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
setScheduleList(resp.result.resultList);
|
|
},
|
|
function (resp) {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
console.groupEnd("EgovAdminScheduleList.retrieveList()");
|
|
}, []);
|
|
|
|
const drawCalendar = () => {
|
|
console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
|
|
const PREV_MONTH_ADDITION = -1;
|
|
|
|
let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
|
|
let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
|
|
let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);
|
|
|
|
console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
|
|
console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
|
|
console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
|
|
console.log("scheduleList : ", scheduleList);
|
|
|
|
let firstDayOfThisMonth = firstOfThisMonth.getDay();
|
|
let lastDateOfThisMonth = lastOfThisMonth.getDate();
|
|
console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)
|
|
|
|
let monthArr = [];
|
|
let weekArr = [];
|
|
|
|
// firstWeek Date Set START
|
|
let firstWeekDateCount = 0;
|
|
for (let day = 0; day < 7; day++) {
|
|
if (day < firstDayOfThisMonth) { //
|
|
weekArr.push(0);
|
|
firstWeekDateCount = 0;
|
|
} else {
|
|
weekArr.push(++firstWeekDateCount);
|
|
}
|
|
}
|
|
monthArr.push(weekArr);
|
|
console.log("FirstWeek monthArr : ", monthArr);
|
|
// firstWeek Date Set END
|
|
|
|
// otherWeek Date Set START
|
|
let dayCount = 0;
|
|
weekArr = [];//초기화
|
|
for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {
|
|
|
|
if (dayCount % 7 !== 6) {
|
|
weekArr.push(day);
|
|
} else {
|
|
weekArr.push(day);
|
|
monthArr.push(weekArr);
|
|
weekArr = [];
|
|
dayCount = -1;
|
|
}
|
|
dayCount++;
|
|
}
|
|
// otherWeek Date Set END
|
|
|
|
// lastWeek Date Set START
|
|
if (weekArr.length > 0) {//남은 부분
|
|
for (let day = weekArr.length; day < 7; day++) {
|
|
weekArr.push(0);
|
|
}
|
|
monthArr.push(weekArr);
|
|
}
|
|
// lastWeek Date Set END
|
|
console.log("OtherWeek monthArr : ", monthArr);
|
|
|
|
let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
|
|
console.log("mutsUseYearMonth : ", mutsUseYearMonth);
|
|
|
|
let mutCalendarTagList = [];
|
|
let keyIdx = 0;
|
|
|
|
//draw Calendar
|
|
monthArr.forEach((week, weekIdx) => {
|
|
console.log();
|
|
mutCalendarTagList.push(
|
|
<tr key={keyIdx++}>{
|
|
week.map((day, dayIdx) => {
|
|
if (day !== 0) {//당월 일별 구현
|
|
let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
|
|
let iUseDate = Number(mutsUseYearMonth + sDate);
|
|
if (scheduleList.length > 0) {//일정 있는 경우
|
|
return (
|
|
<td key={keyIdx++}>
|
|
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
|
key={keyIdx++}>{day}</Link><br/>
|
|
{
|
|
scheduleList.map((schedule, scheduleIdx) => {
|
|
let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8));
|
|
let iEndDate = Number(schedule.schdulEndde.substring(0, 8));
|
|
innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
|
|
innerConsole("schedule.schdulId ", schedule.schdulId);
|
|
if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
|
|
return (
|
|
<>
|
|
<Link to={{pathname: URL.ADMIN_SCHEDULE_DETAIL}}
|
|
state={{schdulId: schedule.schdulId}}
|
|
key={keyIdx++}>{schedule.schdulNm}
|
|
</Link>
|
|
<br/>
|
|
</>
|
|
);
|
|
} else return <></>
|
|
})
|
|
}
|
|
</td>
|
|
);
|
|
} else {//일정 없는 경우
|
|
return (
|
|
<td key={keyIdx++}>
|
|
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
|
key={keyIdx++}>{day}</Link><br/>
|
|
</td>);
|
|
}
|
|
} else if (day === 0) {// 이전달/다음달 구현
|
|
return (<td key={keyIdx++}></td>);
|
|
} else return <></>
|
|
})
|
|
}</tr>);
|
|
})
|
|
console.log("mutCalendarTagList : ", mutCalendarTagList);
|
|
setCalendarTag(mutCalendarTagList);
|
|
console.groupEnd("EgovAdminScheduleList.drawCalendar()");
|
|
}
|
|
|
|
const Location = React.memo(function Location() {
|
|
return (
|
|
<div className="location">
|
|
<ul>
|
|
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
|
<li><Link to={URL.ADMIN}>사이트관리</Link></li>
|
|
<li>일정관리</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
});
|
|
|
|
useEffect(() => {
|
|
//retrieveList(searchCondition); disabled by thkim
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [searchCondition]);
|
|
|
|
useEffect(() => {
|
|
drawCalendar();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [scheduleList]);
|
|
|
|
const [isDailyChart, setChart] = useState(true);
|
|
|
|
const getDailyUserLogList = useCallback(() => {
|
|
console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
|
|
|
console.log("@@@ isDailyChart : " + isDailyChart);
|
|
|
|
const dailyUserLogListURL = isDailyChart ? '/admin/dashboard/daily-user-log-list' : '/admin/dashboard/monthly-user-log-list';
|
|
|
|
const requestOptions = {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
}
|
|
}
|
|
|
|
EgovNet.requestFetch(dailyUserLogListURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
setDailyUserLogList(resp.result.dailyUserLogList);
|
|
console.log("@@@ : " + dailyUserLogList);
|
|
},
|
|
function (resp) {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
|
}, [isDailyChart]);
|
|
|
|
useEffect(() => {
|
|
getDailyUserLogList();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isDailyChart]);
|
|
|
|
const handleChartToggle = () => {
|
|
setChart(!isDailyChart);
|
|
};
|
|
|
|
const ChartToggle = ({onToggle}) => {
|
|
|
|
const handleToggle = () => {
|
|
onToggle(!isDailyChart);
|
|
};
|
|
|
|
return (
|
|
<button onClick={handleToggle}>
|
|
{isDailyChart ? '월별차트보기' : '일별차트보기'}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const data = dailyUserLogList.map(item => ({
|
|
logDt: item.logDt,
|
|
uv: item.mobileCnt,
|
|
"사용자 접속현황": item.logCnt,
|
|
amt: item.pcCnt,
|
|
}));
|
|
|
|
const CustomTooltip = ({active, payload, label}) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="custom-tooltip">
|
|
<p className="desc">사용자 접속 현황</p>
|
|
<p className="label">{`${label} : ${payload[0].value}`}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
class UserLogChart extends PureComponent {
|
|
static demoUrl = 'https://codesandbox.io/s/tooltip-with-customized-content-lyxvs';
|
|
|
|
render() {
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
width={500}
|
|
height={300}
|
|
data={data}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3"/>
|
|
<XAxis dataKey="logDt"/>
|
|
<YAxis/>
|
|
<Tooltip content={<CustomTooltip/>}/>
|
|
<Legend/>
|
|
<Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
}
|
|
|
|
console.log("------------------------------EgovAdminScheduleList [End]");
|
|
console.groupEnd("EgovAdminScheduleList");
|
|
return (
|
|
<div className="container">
|
|
<div className="c_wrap">
|
|
{/* <!-- Location --> */}
|
|
<Location/>
|
|
{/* <!--// Location --> */}
|
|
|
|
<div className="layout">
|
|
{/* <!-- Navigation --> */}
|
|
<EgovLeftNav></EgovLeftNav>
|
|
{/* <!--// Navigation --> */}
|
|
|
|
<div className="contents NOTICE_LIST" id="contents">
|
|
{/* <!-- 본문 --> */}
|
|
|
|
<div className="top_tit">
|
|
<h1 className="tit_1">사이트관리</h1>
|
|
</div>
|
|
|
|
<h2 className="tit_2"></h2>
|
|
|
|
<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>
|
|
|
|
<div style={{width: 1000, height: 300}}>
|
|
<UserLogChart/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EgovAdminScheduleList; |