File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="main">
<div class="myplan">
<div class="title-box flex justify-between mb40">
<p class="title">오늘 공부할 내용을 확인해봅시다.</p>
</div>
<div class="wrap" style="border-radius: 0; min-height: 197px;">
<p class="title1" v-if="!schedules || schedules.length === 0"> 오늘 학습할 내용이 없습니다.</p>
<div class="flex-column" style="gap: 20px;" v-else v-for="(schedule, index) in schedules" :key="index">
<div class="flex justify-between align-center" style="gap: 70px;">
<div><img src="../../../resources/img/img217_22s.png" alt=""></div>
<div class="wrap cs-pt planBox" :class="{ 'cs-pt-clicked': isClicked }" style="width: 100%;">
<div class="text-lf flex justify-between align-center">
<div>
<p class="title2" s>grade 3</p>
<div class="flex align-center mb10" style="gap: 10px; margin-top: 1.5em;">
<p class="title2"><em class="gray-bd">{{ schedule.schdl_unit }}교시</em></p>
<p class="title1">{{ schedule.schedule_time }}</p>
</div>
<div class="title-box mb10">
<span class="title">{{ schedule.unit_nm }}</span>
</div>
<p class="title2">{{ schedule.book_nm }}</p>
<!-- <p class="title2">wirte a</p> -->
</div>
<button v-if="schedule.finish == 'T'" type="button" title="바로가기" class="yellow-btn"
@click="goToPage('Dashboard', schedule.schdl_id)">
학습완료
</button>
<button v-else type="button" title="바로가기" class="yellow-btn"
@click="goToPage('Dashboard', schedule.schdl_id)">
바로가기
</button>
<div><img src="../../../resources/img/img214_19s.png" alt=""
style="height: 130px; width: 100px; "></div>
<button type="button" class="popup-close-btn"
@click="deleteSchedule(schedule.schdl_id)">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="yellow-box mt30">
<div class="title-box flex justify-between align-center">
<div>
<p class="title">오늘 공부를 계획해봅시다.</p>
<p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
</div>
<button type="button" title="바로가기" class="yellow-btn" @click="goToPage2('MyPlan2')">
바로가기
</button>
</div>
</div>
<div class="wrap mt30">
<p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p>
<div class="imgGroup flex justify-between">
<div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
<img src="../../../resources/img/img215_22s.png" alt="">
<p class="title2 mt10">추천 학습 단원</p>
</div>
<div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
<img src="../../../resources/img/img215_22s.png" alt="">
<p class="title2 mt10">추천 학습 단원</p>
</div>
<div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
<img src="../../../resources/img/img215_22s.png" alt="">
<p class="title2 mt10">추천 학습 단원</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
mdiWindowClose: mdiWindowClose,
showModal: false,
searchOpen: false,
schedules: [],
stdId: "2",
timeList: [
{ label: "1교시", time: "08:00 ~ 09:00", value: "1" },
{ label: "2교시", time: "09:00 ~ 10:00", value: "2" },
{ label: "3교시", time: "10:00 ~ 11:00", value: "3" },
{ label: "4교시", time: "11:00 ~ 12:00", value: "4" },
{ label: "5교시", time: "13:00 ~ 14:00", value: "5" },
{ label: "6교시", time: "14:00 ~ 15:00", value: "6" },
],
}
},
methods: {
goToPage(page, scheduleId) {
const startScheduleIndex = this.schedules.findIndex(schedule => schedule.schdl_id === scheduleId);
if (startScheduleIndex === -1) {
console.error("해당 스케줄을 찾을 수 없습니다.");
return;
}
const updates = [];
const currentSchedule = this.schedules[startScheduleIndex];
if (currentSchedule.finish === null || currentSchedule.finish === "T") {
updates.push(
axios.post("/schedule/scheduleUpdate.json", { scheduleId: currentSchedule.schdl_id, finish: "F" }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
);
}
for (let i = startScheduleIndex + 1; i < this.schedules.length; i++) {
const nextSchedule = this.schedules[i];
if (nextSchedule.finish === "T") {
updates.push(
axios.post("/schedule/scheduleUpdate.json", { scheduleId: nextSchedule.schdl_id, finish: "F" }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
);
}
}
Promise.all(updates)
.then(() => {
const schedule = this.schedules[startScheduleIndex];
this.$router.push({
name: page,
query: {
schdl_id: schedule.schdl_id,
book_id: schedule.book_id,
unit_id: schedule.unit_id
}
});
})
.catch(error => {
console.error("Error updating schedules:", error);
alert("학습 계획을 업데이트하는 중 오류가 발생했습니다.");
});
},
goToPage2(page) {
this.$router.push({ name: page });
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
}, fetchSchedules() {
axios.post("/schedule/selectSchedule.json", { stdId: this.stdId }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
.then(response => {
this.schedules = response.data.map(schedule => {
const matchingTime = this.timeList.find(time => time.value === schedule.schdl_unit);
return {
...schedule,
schedule_time: matchingTime ? matchingTime.time : "시간 정보 없음"
};
});
console.log(this.schedules);
})
.catch(error => {
console.error("fetchUnits - error:", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
}, deleteSchedule(scheduleId) {
axios.post("/schedule/scheduleDelete.json", { scheduleId: scheduleId }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
.then(response => {
alert("학습일정이 삭제되었습니다.")
window.location.reload();
})
.catch(error => {
console.error("fetchUnits - error:", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
}
},
watch: {
},
computed: {
},
components: {
SvgIcon
},
mounted() {
console.log('Main2 mounted');
this.fetchSchedules();
}
}
</script>
<style>
.planBox {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.096) 0px 6px 6px;
border: none;
margin: 0px 0px 20px;
}
.aiClick {
cursor: pointer;
}
</style>