snsd0805/NCNU_Course
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增排課預覽(#6)

Browse Source
This commit is contained in:
Ting-Jun Wang 2020-11-14 23:36:31 +08:00
parent 2339a73018
commit bf09ac280a
Signed by: snsd0805
GPG Key ID: 8DB0D22BC1217D33
4 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -62,6 +62,8 @@
v-bind:selected_c="selectCourses"
v-bind:find_name="foundName"
v-on:add-course="addCourse"
v-on:show-temp="saveTemp"
v-on:delete-temp="deleteTemp"
>
</course-anslist>
</div><br><br>

13
js/components/coursesList.vue
View File

@ -33,13 +33,18 @@ var coursesList = {
}
}
return true
},
'log': function(name, data){
console.log(name, data)
}
},
watch: {
'selected_c': function(){
var temp = []
for(var c of this.selected_c){
temp.push(c.time)
if(c.temp==false){
temp.push(c.time)
}
}
this.selectedTime = temp
},
@ -60,7 +65,8 @@ var coursesList = {
<div style="width:275px;height:500px;overflow:auto">
<table class="table table-striped table-bordered">
<template v-if="find_name">
<tr v-for="(course, index) in foundedCourses" :key="index">
<tr v-for="(course, index) in foundedCourses" :key="index"
v-on:mouseenter="$emit('show-temp', course)" v-on:mouseleave="$emit('delete-temp', course)">
<td>
<div class="container">
<div class="row">
@ -83,7 +89,8 @@ var coursesList = {
</template>
<template v-else>
<tr v-for="(course, index) in courses" :key="index"
v-if="course.department == selected_d">
v-if="course.department == selected_d"
v-on:mouseenter="$emit('show-temp', course)" v-on:mouseleave="$emit('delete-temp', course)">
<td>
<div class="container">
<div class="row">

28
js/components/table.vue
View File

@ -2,9 +2,9 @@ var courseDiv = {
props: ['course'],
template: `
<div style='border: 5px #1abc9c solid; text-align: center;'>
{{ course }}
{{ course.name }}
<button type="button"
v-on:click="$emit('remove-course', course)"
v-on:click="$emit('remove-course', course.name)"
class="btn btn-danger btn-sm"
>
刪
@ -12,7 +12,14 @@ var courseDiv = {
</div>
`
}
var tempDiv = {
props: ['course'],
template: `
<div style='border: 5px #cf1d5e solid; text-align: center;'>
{{ course.name }}
</div>
`
}
var courseTable = {
props: ['select_c'],
data: function(){
@ -41,7 +48,10 @@ var courseTable = {
var weekendLock = false
for(var c of this.select_c){
this.courses[c.time] = c.name
this.courses[c.time] = {
'name': c.name,
'temp': c.temp
}
if(c.time[0]==6 || c.time[0]==7){
weekendLock = true
@ -55,7 +65,8 @@ var courseTable = {
}
},
components: {
'course-div': courseDiv
'course-div': courseDiv,
'temp-div': tempDiv
},
template: `
<table class="table table-bordered" style="table-layout: fixed;word-wrap: break-word;">
@ -86,6 +97,7 @@ var courseTable = {
v-bind:course="courses[week+'z']"
v-on:remove-course="removeCourseHandler"
></course-div>
</td>
</template>
<template v-else>
@ -95,10 +107,14 @@ var courseTable = {
</th>
<td v-for='week in (existWeekend)?7:5'>
<course-div
v-if="exist(week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2))))"
v-if="exist(week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))) && !courses[week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))].temp"
v-bind:course="courses[week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))]"
v-on:remove-course="removeCourseHandler"
></course-div>
<temp-div
v-if="exist(week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))) && courses[week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))].temp"
v-bind:course="courses[week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))]"
></temp-div>
</td>
</template>
</tr>

26
js/index.vue
View File

@ -52,7 +52,8 @@ var vm = new Vue({
for(var t of time){
this.selectCourses.push({
'time': t,
'name': course.name
'name': course.name,
'temp': false
})
}
},
@ -63,7 +64,28 @@ var vm = new Vue({
this.selectCourses.splice(i, 1)
}
}
}
},
'saveTemp': function(course){
if(course==null){
}else{
this.tempCourse = []
var time = this.getTime(course.time)
for(var t of time){
this.selectCourses.push({
'time': t,
'name': course.name,
'temp': true
})
}
}
},
'deleteTemp': function(course){
for(var i=this.selectCourses.length-1;i>=0;i--){
if(this.selectCourses[i].name == course.name && this.selectCourses[i].temp == true){
this.selectCourses.splice(i, 1)
}
}
},
},
components: {
'course-table': courseTable,