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

index.html

@@ -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>

js/components/coursesList.vue

@@ -33,14 +33,19 @@ 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){
+                if(c.temp==false){
                     temp.push(c.time)
                 }
+            }
             this.selectedTime = temp
         },
         'find_name': function(){
@@ -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">

js/components/table.vue

@@ -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>

js/index.vue

@@ -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,