87 lines
2.6 KiB
Vue
87 lines
2.6 KiB
Vue
var courseDiv = {
|
|
props: ['course'],
|
|
template: `
|
|
<div style='border: 5px #1abc9c solid; text-align: center;'>
|
|
{{ course }}
|
|
<button type="button"
|
|
v-on:click="$emit('remove-course', course)"
|
|
class="btn btn-danger btn-sm"
|
|
>
|
|
刪
|
|
</button>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
var courseTable = {
|
|
props: ['select_c'],
|
|
data: function(){
|
|
return {
|
|
'tableBody': "<tbody>",
|
|
'courses': {},
|
|
}
|
|
},
|
|
methods: {
|
|
'exist': function(time){
|
|
for(var c of this.select_c){
|
|
if(c.time==time){
|
|
this.course = c
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
},
|
|
'removeCourseHandler': function(course){
|
|
this.$emit('remove-course', course)
|
|
}
|
|
},
|
|
watch: {
|
|
'select_c': function(){
|
|
this.courses = {}
|
|
for(var c of this.select_c){
|
|
this.courses[c.time] = c.name
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
'course-div': courseDiv
|
|
},
|
|
template: `
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<th scope="col" class="col-md-1">#</th>
|
|
<th scope="col" class="col-md-2">一</th>
|
|
<th scope="col" class="col-md-2">二</th>
|
|
<th scope="col" class="col-md-2">三</th>
|
|
<th scope="col" class="col-md-2">四</th>
|
|
<th scope="col" class="col-md-2">五</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="hour in 13">
|
|
<template v-if="hour+7==12">
|
|
<th style='text-align: center;' scope='row'>
|
|
{{ hour+7 }}~{{ hour+8 }} <br> z
|
|
</th>
|
|
<td style='text-align: center; background-color: #1abc9c;' colspan='5'>
|
|
中午休息時間
|
|
</td>
|
|
</template>
|
|
<template v-else>
|
|
<th style='text-align: center;' scope='row'>
|
|
{{ hour+7 }} ~ {{ hour+8 }} <br>
|
|
{{ String.fromCharCode(97+((hour<5)?(hour-1):(hour-2))) }}
|
|
</th>
|
|
<td v-for='week in 5'>
|
|
<course-div
|
|
v-if="exist(week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2))))"
|
|
v-bind:course="courses[week+String.fromCharCode(97+((hour<5)?(hour-1):(hour-2)))]"
|
|
v-on:remove-course="removeCourseHandler"
|
|
></course-div>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`
|
|
} |