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

fix: 可用課程名稱搜尋(#3)

Browse Source 
$emit is from ChooseDepartment.
This commit is contained in:
snsd0805 2020-09-25 21:16:06 +08:00
parent 7e44759f30
commit b77cd4340b
4 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -51,6 +51,7 @@
v-bind:departments="departments" v-bind:departments="departments"
v-bind:selected="selectDepartment" v-bind:selected="selectDepartment"
v-on:selectok="select" v-on:selectok="select"
v-on:foundedok="founded"
> >
</choose-department><br> </choose-department><br>
</div><br><br> </div><br><br>
@ -59,6 +60,7 @@
v-bind:courses="courses" v-bind:courses="courses"
v-bind:selected_d="selectDepartment" v-bind:selected_d="selectDepartment"
v-bind:selected_c="selectCourses" v-bind:selected_c="selectCourses"
v-bind:find_name="foundName"
v-on:add-course="addCourse" v-on:add-course="addCourse"
> >
</course-anslist> </course-anslist>

10
js/components/chooseDepartment.vue
View File

@ -2,7 +2,8 @@ var chooseDepartment = {
props: ['departments', 'selected'], props: ['departments', 'selected'],
data: function(){ data: function(){
return { return {
initSelect: this.selected initSelect: this.selected,
initFounded: "",
} }
}, },
watch: { watch: {
@ -11,10 +12,17 @@ var chooseDepartment = {
}, },
'initSelect': function(){ 'initSelect': function(){
this.$emit("selectok", this.initSelect) this.$emit("selectok", this.initSelect)
},
'initFounded': function(){
this.$emit("foundedok", this.initFounded)
} }
}, },
template: ` template: `
<div> <div>
<h5>1. 「課程名稱」直接搜尋</h5>
<input class="form-control" type='text' v-model='initFounded'>
<br>或<br><br>
<h5>1. 選擇類別</h5> <h5>1. 選擇類別</h5>
<select class="custom-select mr-sm-2" v-model="initSelect"> <select class="custom-select mr-sm-2" v-model="initSelect">
<option v-for="(item, index) in departments" :key="index" <option v-for="(item, index) in departments" :key="index"

72
js/components/coursesList.vue
View File

@ -1,8 +1,9 @@
var coursesList = { var coursesList = {
props: ['courses', 'selected_d', 'selected_c'], props: ['courses', 'selected_d', 'selected_c', 'find_name'],
data: function(){ data: function(){
return { return {
selectedTime: [] selectedTime: [],
foundedCourses: []
} }
}, },
methods: { methods: {
@ -42,31 +43,64 @@ var coursesList = {
} }
this.selectedTime = temp this.selectedTime = temp
}, },
'find_name': function(){
var temp = []
for(var c of this.courses){
if(c.name.indexOf(this.find_name) != -1){
temp.push(c)
}
}
this.foundedCourses = temp
}
}, },
template: ` template: `
<div> <div>
<h5>2. 安排課程</h5> <h5>2. 安排課程</h5>
<p style="color: orange" v-if="find_name"> ※ 已套用「名稱」搜尋： <br>{{find_name}}</p>
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tr v-for="(course, index) in courses" :key="index" <template v-if="find_name">
v-if="course.department == selected_d"> <tr v-for="(course, index) in foundedCourses" :key="index">
<td> <td>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b> <b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b>
</div>
<div class="row">
<div class="col-sm-8">
{{ course.teacher }} ‧ {{ course.time }}
</div> </div>
<div class="col-sm-4"> <div class="row">
<button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary"> <div class="col-sm-8">
<span>&#43;</span> {{ course.teacher }} ‧ {{ course.time }}
</button> </div>
<div class="col-sm-4">
<button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
<span>&#43;</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </td>
</td> </tr>
</tr> </template>
<template v-else>
<tr v-for="(course, index) in courses" :key="index"
v-if="course.department == selected_d">
<td>
<div class="container">
<div class="row">
<b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b>
</div>
<div class="row">
<div class="col-sm-8">
{{ course.teacher }} ‧ {{ course.time }}
</div>
<div class="col-sm-4">
<button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
<span>&#43;</span>
</button>
</div>
</div>
</div>
</td>
</tr>
</template>
</table> </table>
</div> </div>
` `

4
js/index.vue
View File

@ -5,6 +5,7 @@ var vm = new Vue({
'selectCourses': [], 'selectCourses': [],
'departments': [], 'departments': [],
'selectDepartment': '', 'selectDepartment': '',
'foundName': "",
}, },
mounted() { mounted() {
axios axios
@ -43,6 +44,9 @@ var vm = new Vue({
'select': function(department){ 'select': function(department){
this.selectDepartment = department this.selectDepartment = department
}, },
'founded': function(courseName){
this.foundName = courseName
},
'addCourse': function(course){ 'addCourse': function(course){
var time = this.getTime(course.time) var time = this.getTime(course.time)
for(var t of time){ for(var t of time){