186 lines
8.3 KiB
PHP
186 lines
8.3 KiB
PHP
<?php var_dump(session('interrupted_key'));?>
|
|
<style>
|
|
.card {
|
|
position: relative;
|
|
width: 18rem;
|
|
}
|
|
.card-img-top {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
/* 비활성화된 날짜의 스타일 */
|
|
.fc-day-past {
|
|
background-color: #f9f9f9; /* 비활성화된 날짜의 배경색 */
|
|
color: #666; /* 비활성화된 날짜의 텍스트 색상 */
|
|
}
|
|
|
|
/* 오늘 날짜 스타일 */
|
|
.fc-day-today {
|
|
background-color: #ff9; /* 오늘 날짜의 배경색 */
|
|
border: 1px solid #ffa500; /* 오늘 날짜의 테두리 */
|
|
}
|
|
</style>
|
|
<section class="content-section content-section-play bg-custom-bronze text-white"">
|
|
<div class="card" style="width: 18rem;">
|
|
<!--<img src="/img/play_image.jpg" class="card-img-top">-->
|
|
|
|
<div class="card-body">
|
|
<h5 class="card-title center-txt">Let's start studying now</h5>
|
|
<!--<ul class="list-group list-group-flush">
|
|
<li class="list-group-item display-12">일일 학습 목표 시간: <b class="display-12"><?/*= $user['daily_words'] */?></b> 단어 / 일</li>
|
|
<li class="list-group-item display-12">주간 학습 요일: <b><?/*= $user['learning_days'] */?></b></li>
|
|
<li class="list-group-item display-12">단어 반복 횟수: <b><?/*= $user['repetition'] */?>회</b></li>
|
|
<li class="list-group-item display-12">전일 단어 복습: <b><?/*= $user['review_percentage'] */?>%</b></li>
|
|
<li class="list-group-item display-12">학습 끝 테스트 진행: <b><?/*= $user['test_mode'] */?></b></>
|
|
</ul>-->
|
|
<div id="calendar"></div>
|
|
<div id="eventDetails" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
|
<script src='/js/index.global.js'></script>
|
|
<script src='/js/ko.global.js'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var data_date = new Date().toISOString().substring(0, 10);
|
|
var calendarEl = document.getElementById('calendar');
|
|
var tomorrow = new Date(data_date);
|
|
tomorrow.setDate(tomorrow.getDate() + 1); // 현재 날짜에 1을 더해 다음 날을 구함
|
|
var tomorrowStr = tomorrow.toISOString().substring(0, 10); // "YYYY-MM-DD" 형식으로 변환
|
|
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
validRange: {
|
|
start: '1900-01-01',
|
|
end: tomorrowStr // 오늘 날짜를 끝으로 설정
|
|
},
|
|
timeZone: 'UTC', // 전체 캘린더를 UTC로 설정
|
|
headerToolbar: {
|
|
left: 'prev,next',
|
|
center: 'title',
|
|
right: ''
|
|
},
|
|
themeSystem: 'standard',
|
|
contentHeight: 280,
|
|
locale: 'ko',
|
|
//initialDate: new Date(),
|
|
initialDate: new Date(data_date),
|
|
editable: true,
|
|
selectable: true,
|
|
// selectMirror: true, // 선택 중인 날짜에 대해 시각적 피드백 제공
|
|
// select: function(arg) {
|
|
// console.log("Selected date: " + arg.startStr);
|
|
// },
|
|
businessHours: true,
|
|
dayMaxEvents: true, // allow "more" link when too many events
|
|
events: '/playdatajson', // PHP 파일에서 이벤트 데이터를 가져옴
|
|
dayCellContent: function(info) { // 일 제거
|
|
var number = document.createElement("a");
|
|
number.classList.add("fc-daygrid-day-number");
|
|
number.innerHTML = info.dayNumberText.replace("일","");
|
|
if(info.view.type === "dayGridMonth"){
|
|
return {
|
|
html: number.outerHTML
|
|
};
|
|
}
|
|
return {
|
|
domNodes:[]
|
|
};
|
|
},
|
|
dateClick: function(info) {
|
|
handleDateClick(info);
|
|
},
|
|
eventsSet: function(events) {
|
|
// 이벤트가 모두 설정된 후에 특정 날짜를 처리
|
|
var fakeInfo = {
|
|
date: new Date(data_date),
|
|
dateStr: data_date,
|
|
allDay: true
|
|
};
|
|
handleDateClick(fakeInfo);
|
|
}
|
|
});
|
|
|
|
function handleDateClick(info) {
|
|
|
|
// 날짜를 UTC로 포맷하여 타임존 영향 없애기
|
|
var clickedDate = new Date(info.dateStr + 'T00:00:00Z');
|
|
var today = new Date().toISOString().substring(0, 10);
|
|
|
|
// 해당 날짜의 모든 이벤트를 가져옵니다.
|
|
var dateEvents = calendar.getEvents().filter(function(event) {
|
|
return event.start.toISOString().substring(0, 10) === info.dateStr;
|
|
});
|
|
|
|
var events = calendar.getEvents();
|
|
var detailsDiv = document.getElementById('eventDetails');
|
|
if (dateEvents.length > 0 || info.dateStr == today) {
|
|
var dates;
|
|
var eventDetails = dateEvents.map(function(event) {
|
|
// 이벤트 타입에 따라 다른 정보를 표시
|
|
dates = info.dateStr;
|
|
var description = event.extendedProps.description || 'No description';
|
|
|
|
return '<strong>' + event.title + '</strong> ' + description;
|
|
}).join("<br>");
|
|
|
|
|
|
//console.log(description);
|
|
|
|
if(info.dateStr == today) {
|
|
detailsDiv.innerHTML = '';
|
|
detailsDiv.innerHTML = info.dateStr + eventDetails + '<br><button type="button" id="todaytest" class="btn btn-custom-bronze btn-sm mt-2">Start studying today</button>';
|
|
const button = document.getElementById('todaytest');
|
|
button.addEventListener('click', function () {
|
|
location.href='/basicstart';
|
|
});
|
|
}
|
|
|
|
if(dates != "" && dates != undefined) {
|
|
detailsDiv.innerHTML = info.dateStr + '<br>' + eventDetails + '<br><button type="button" id="testagain" class="btn btn-custom-bronze btn-sm mt-2">Let\'s study again</button>';
|
|
const button = document.getElementById('testagain');
|
|
button.addEventListener('click', function () {
|
|
const id = this.getAttribute('data-info'); // 버튼의 data-info 속성 값 가져오기
|
|
const url = '/replaysession/' + dates;
|
|
fetch(url, {
|
|
method: 'GET'
|
|
}).then(response => {
|
|
console.log(response);
|
|
if (!response.ok) {
|
|
// alert('문제가 발생했습니다. 다시 시도해주세요.');
|
|
// location.reload();
|
|
}
|
|
return response.text(); // PHP 스크립트로부터 반환된 응답을 텍스트로 변환
|
|
}).then(data => {
|
|
if (data == "ok") {
|
|
location.href = '/starttest';
|
|
//console.log('Success:', data); // 성공적으로 데이터를 받으면 콘솔에 출력
|
|
} else {
|
|
//console.log('Success:', data); // 성공적으로 데이터를 받으면 콘솔에 출력
|
|
// alert('문제가 발생했습니다. 다시 시도해주세요.');
|
|
// location.reload();
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error:', error); // 에러 발생 시 콘솔에 에러 메시지 출력
|
|
});
|
|
});
|
|
}
|
|
} else {
|
|
detailsDiv.innerHTML = 'No events on ' + info.dateStr;
|
|
}
|
|
}
|
|
|
|
calendar.render();
|
|
|
|
// 자동으로 2024년 5월 1일을 선택
|
|
calendar.select(new Date(data_date));
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|