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>
<p class="title1" v-if="state === 'finish'">오늘 공부를 다했어요! 너무 고생했어요!</p>
<p class="title1" v-else-if="state === 'notRegistered'">지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</p>
<!-- 1번 템플릿 -->
<div v-else class="main">
<div class="race-wrap">
<div class="title-box">
<p class="title">{{ roadmapData[0].unit_nm }}</p>
<p class="subtitle">{{ roadmapData[0].book_nm }}</p>
</div>
<div class="race-box">
<div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
<div class="rcon flex justify-end mb5">
<div class="race-btn" @click="goToPage('Chapter1')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="1">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>지문1</p>
</div>
<div class="race-btn" @click="goToPage('Chapter2')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="2">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>단어장</p>
</div>
</div>
<div class="lcon flex justify-between mb5">
<div class="race-btn" @click="goToPage('Chapter7')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="7">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>문제1</p>
</div>
<div class="race-btn" @click="goToPage('Chapter6')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="6">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>단어장</p>
</div>
<div class="race-btn" @click="goToPage('Chapter5')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="5">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>지문2</p>
</div>
<div class="race-btn" @click="goToPage('Chapter4')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="4">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>문제2</p>
</div>
<div class="race-btn" @click="goToPage('Chapter3')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="3">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>문제1</p>
</div>
</div>
<div class="rcon flex">
<div class="race-btn" @click="goToPage('Chapter8')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="8">
<img :src="item.imgSrc3">
<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p class="long">중간 평가</p>
</div>
<div class="race-btn" @click="goToPage('Chapter9')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="9">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>지문3</p>
</div>
<div class="race-btn" @click="goToPage('Chapter10')">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="10">
<img :src="item.imgSrc1">
<img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p>단어장</p>
</div>
<div class="race-btn">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
data-num="11">
<img :src="item.imgSrc3">
<img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
</button>
<p class="long">최종 평가</p>
</div>
</div>
<button class="login-btn mt50" type="submit" style="width: 100%;" @click="finishSchedule"><img
src="../../../resources/img/btn07_s.png" alt="" style="width: 100%; height: 100px;">
<p>학습 종료하기</p>
</button>
<div class="complete-wrap smt50 myphoto">
<h2 class="mb40">이 단원을 끝낸 친구들</h2>
<article class=" flex-column" style="gap: 5px;">
<div class="flex" style="gap: 5px;">
<div @click="buttonSearch2" class="photo"><img src="../../../resources/img/img143_75s.png"
alt="">
</div>
<div @click="buttonSearch" class="photo"><img src="../../../resources/img/img143_75s.png"
alt="">
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
import axios from 'axios';
export default {
data() {
return {
items: [
{
imgSrc1: 'client/resources/img/img11_1_s.png',
imgSrc2: 'client/resources/img/img12_1_s.png',
imgSrc3: 'client/resources/img/img11_2_s.png',
imgSrc4: 'client/resources/img/img12_2_s.png',
isSecondImageVisible: false
},
],
mdiMagnify: mdiMagnify,
mdiWindowClose: mdiWindowClose,
mdiHeart: mdiHeart,
showModal: false,
searchOpen: false, // 사진 상세보기 모달창
searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
showCameraModal: false, // 카메라 모달창
showPhotoModal: false, // 사진꾸미기 모달창
photoTaken: false,
photo: null, //캡쳐 사진
videoReady: false, // 비디오 준비 상태를 나타내는 플래그
stream: null,
canvasWidth: 0,
canvasHeight: 0,
selectedIndex: 0, //툴 선택 여부 인덱스
stickersVisible: false, // 스티커 표시 여부
roadViewTF: false,
roadmapData: [],
schedules: [],
nowSchedule: "",
state: ''
}
},
methods: {
//은진
fetchSchedule() {
axios({
url: "/schedule/selectSchedule.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
stdId: "2",
}
}).then(response => {
this.schedules = response.data;
if (this.schedules.length == 0) {
this.state = 'notRegistered';
} else {
// 모든 계획의 finish 값이 T인지 확인
const allFinished = this.schedules.every(schedule => schedule.finish === "T");
if (allFinished) {
this.state = 'finish';
} else {
this.nowSchedule = this.schedules.find(schedule => schedule.finish === null || schedule.finish === "F");
if (this.nowSchedule) {
this.fetchRoadmapData(); // 진행 중인 스케줄이 있을 때 데이터를 가져오는 함수 호출
this.state = 'studying';
} else {
this.state = 'notRegistered';
}
}
}
console.log(this.state);
})
.catch(error => {
console.error("Error fetching roadmap data:", error);
});
},
finishSchedule() {
axios({
url: "/schedule/scheduleUpdate.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
scheduleId: this.nowSchedule.schdl_id,
finish: "T"
}
})
.then(response => {
const nextSchedule = this.schedules.find(schedule => schedule.schdl_id > this.nowSchedule.schdl_id);
alert("학습을 완료했습니다!");
if (nextSchedule) {
// 다음 스케줄로 이동
this.nowSchedule = nextSchedule;
this.$router.push({ name: 'Dashboard' });
} else {
window.location.reload(); // 전체 페이지 새로고침
alert("모든 학습을 완료했습니다!");
// 페이지를 새로고침하여 Dashboard.vue를 다시 로드
}
})
.catch(error => {
console.error("Error updating schedule:", error);
});
},
fetchRoadmapData() {
axios({
url: "/unitLearning/find.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
unit_id: this.schedules[0].unit_id,
book_id: this.schedules[0].book_id
}
})
.then(response => {
this.roadmapData = response.data;
this.roadViewTF = this.roadmapData.length > 0;
})
.catch(error => {
console.error("Error fetching roadmap data:", error);
});
},
goToPage(page) {
this.$router.push({ name: page });
},
adjustContainerSize() {
const video = this.$refs.modalVideoElement;
const container = this.$refs.container;
const body = this.$refs.body;
if (video && container) {
container.style.width = `${video.videoWidth}px`;
container.style.height = `${video.videoHeight}px`;
body.style.height = `${video.videoHeight}px`;
}
},
buttonSearch() {
this.searchOpen = true;
},
buttonSearch2() {
this.searchOpen2 = true;
},
closeBtn() {
this.searchOpen = false;
},
getNonNullColumn(item) {
if (item.prblm_id !== null) return '문제';
if (item.wd_book_id !== null) return '단어장';
if (item.text_id !== null) return '지문';
if (item.eval_id !== null) return '평가';
return '';
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
},
components: {
SvgIcon,
},
mounted() {
console.log('main mounted');
this.fetchSchedule();
},
computed() {
},
beforeDestroy() {
// 컴포넌트가 파괴되기 전에 리스너 제거
window.removeEventListener('resize', this.updateCanvasRect);
this.$refs.canvas.removeEventListener('click', this.handleCanvasClick);
}
}
</script>
<style>
.body {
width: 1435px;
height: auto;
margin: 0 auto;
}
#container {
position: relative;
margin: auto;
border: 10px #333 solid;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
video {
width: 100%;
height: auto;
background-color: #666;
}
.mirrored {
transform: scaleX(-1);
}
.new-btn:disabled {
background-color: #FFF3D7;
cursor: not-allowed;
}
.sticker {
position: absolute;
cursor: move;
}
.sticker-handle {
width: 15px;
height: 15px;
background: rgba(255, 255, 255, 0.521);
position: absolute;
bottom: 0;
right: 0;
cursor: nwse-resize;
font-size: 13px;
font-weight: bolder;
color: rgb(63, 63, 63);
}
.sticker-delete {
position: absolute;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.425);
color: white;
padding: 5px;
cursor: pointer;
}
.toolbar {
display: flex;
justify-content: center;
margin-top: 10px;
}
.toolbar button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}
.toolbar input {
margin: 5px;
}
.rabbit-end {
cursor: pointer;
}
</style>