-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
331 lines (321 loc) · 16.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" id="viewport" name="viewport">
<title>NCKU HUB｜資訊改善校園</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<link rel="stylesheet" href="dist/CSS/course.css">
<!-- <link rel="stylesheet" href="dist/CSS/course/course.css"> -->
<link rel="stylesheet" href="dist/CSS/reset.css">
<link rel="stylesheet" href="dist/CSS/table.css">
<link rel="stylesheet" href="dist/CSS/navbar.css">
<!-- <script src="dist/JS/profile/init2.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="./dist/CSS/profile/profile.css "> -->
<nav>
<div id="navbar" class="hub_navbar">
<div class="hub_navbar__right_area">
<a class="hub_navbar__logo"></a>
<!-- todo: 新增「查無結果」的顯示 -->
<input class="hub_navbar__search" type="text" v-model="search_keyword" placeholder="搜尋「課程名」或「教師名」" ><br>
<div v-if="search_keyword.replace(' ','') != ''" class="hub_navbar__search__dropdown">
<div v-for="item in result_cont" class="list_course_item" @click="openCourse(item.id)">
<div class="list_course_item_left">
<p class="list_course_item_category text_20 text_white" :class="item.dept_id"> {{ item.category }} </p>
</div>
<div class="list_course_item_mid">
<p class="list_course_item_title text_16">{{ item.dept_id }}-{{ item.class_id }} {{ item.title }}</p>
<p class="list_course_item_description text_14 text_dark">{{ item.teacher }} — {{ item.time }}</p>
</div>
<div class="list_course_item_right">
</div>
</div>
<span> {{ result }} </span>
</div>
</div>
<div class="hub_navbar__left_area">
<div class="hub_navbar__link nav_link" name="course" @click="change_tab('course')">找課程</div>
<div class="hub_navbar__link nav_link" name="table" @click="change_tab('table')">排課表 <span class="wishlist_count">5</span></div>
<div class="hub_navbar__profile nav_link" name="profile" @click="switch_profile_window()"></div>
<div class="hub_navbar__profile__dropdown">
<div class="hub_navbar__profile__dropdown__info">
<div class="hub_navbar__profile__dropdown__info__photo"></div>
<div class="hub_navbar__profile__dropdown__info__detail">
<!-- 若有開通權限則在 nav_profile_name 添加 vip class -->
<!-- todo: 這邊要 vue 化（含未登入狀態） -->
<div class="nav_profile_name vip">{{user_name}}</div>
<div v-show="user_department != ''" class="nav_profile_dept">{{user_department}}</div>
<div v-show="user_grade != ''" class="nav_profile_grade">{{user_grade}}年級</div>
</div>
</div>
<div v-show="user_name != '訪客'" class="hub_navbar__profile__dropdown__goto" @click="change_tab('profile')" >前往個人頁面</div>
<a v-show="user_name == '訪客'" href='/user/fblogin'><div class="hub_navbar__profile__dropdown__goto" @click="change_tab('profile')" >登入</div></a>
<div class="hub_navbar__profile__dropdown__links">
<a>關於 NCKU HUB</a>
<a>回報問題</a>
<a v-show="user_name != '訪客'" href='/user/logout'>登出帳戶</a>
</div>
</div>
</div>
</div>
</nav>
<body>
<div class="change_tab" name="course">
<!-- <div class="change_tab" name="course" style="display: none;"> -->
<div id="courseContent" v-show="isShow" @click.self="showContent()">
<div class="courseContentBody">
<div class="courseContentBody__left"><span class="courseSerial">{{course_data.系號}}{{course_data.選課序號}}</span>
<h2 style="margin-top:20px;">{{course_data.課程名稱}}</h2>
<div class="flex-container icon-span" style="margin-top:30px" @click="openOutline(course_data.系號,course_data.課程碼)">
<div class="content-icon see_clip"></div><span>檢視課程大綱</span>
</div>
<div class="flex-container icon-span" @click="content_addtowishlist(course_data.id)">
<div class="content-icon add_wishlist"></div><span>加入願望清單</span>
</div>
<div class="courseUnit">
<div class="block_title">
<p class="text_14">開課單位</p>
</div>
<p class="text_16">{{course_data.系所名稱}}</p>
</div>
<div class="courseUnit">
<div class="block_title">
<p class="text_14">開課老師</p>
</div>
<p class="text_16">{{course_data.老師}}</p>
</div>
<div class="courseUnit">
<div class="block_title">
<p class="text_14">開課時段</p>
</div>
<p class="text_16">{{course_data.時間}}</p>
</div>
<!--div.courseUnit
div.block_title
p.text_14 教學方法
p.text_16 course_data.lecture
-->
<!--div.courseUnit
div.block_title
p.text_14 評量方法
p.text_16 course_data.score
--><br/>
</div>
<div class="courseContentBody__right">
<div class="courseContentBody__right__score">
<div class="block_title">
<p>課程評分 ({{score_data.rates.length}})</p>
</div>
<div class="flex-container score-btn--all">
<div class="score-btn"><span>甜度</span>
<div class="arrow-left" @click="minusRate('sweet_rate')"></div><span class="score_span">{{score_data.sweet}}</span>
<input class="score_input" id="sweet_rate" type="number" value="5" min="1" max="10"/>
<div class="arrow-right" @click="addRate('sweet_rate')"></div>
</div>
<div class="score-btn"><span>涼度 </span>
<div class="arrow-left" @click="minusRate('hard_rate')"></div><span class="score_span">{{score_data.hard}}</span>
<input class="score_input" id="hard_rate" type="number" value="5" min="1" max="10"/>
<div class="arrow-right" @click="addRate('hard_rate')"></div>
</div>
<div class="score-btn"><span>推薦 </span>
<div class="arrow-left" @click="minusRate('recom_rate')"></div><span class="score_span">{{score_data.recommand}}</span>
<input class="score_input" id="recom_rate" type="number" value="5" min="1" max="10"/>
<div class="arrow-right" @click="addRate('recom_rate')"></div>
</div>
<!--button.score-btn.score-btn__submit#score_input(type="submit" @click="submit_score()") 評分-->
</div>
</div>
<div class="courseContentBody__right__comment">
<div class="block_title">
<p>課程心得 ({{comment_data.length}})</p>
</div>
<div class="courseFeedback">
<div class="courseFeedback__single courseFeedback__single--default">
<div class="courseFeedback__msg">
<p>點擊按鈕，立即提供課程心得，</p>
<p>幫助 480 位對這門課有興趣的同學！</p>
</div>
</div>
<div class="courseFeedback__single" v-for="comment in comment_data">
<div class="courseFeedback__msg">
<p v-html="comment.comment">{{comment.comment}}</p>
</div>
</div>
<!-- div.flex-container.courseFeedback__func
div.arrow-up
input(type="number" min="0" value="0").score_input
div.arrow-down
-->
</div>
</div>
</div>
</div>
</div>
<div class="course__whole">
<div class="courseList__sidenav" id="courseFilter">
<div class="block_title">
<p class="text_18">開課單位</p>
</div>
<div class="quick_search_area" style="z-index:300">
<input class="quick_search_input" id="dpmtFilter" type="text" v-model="keyword" placeholder="選擇開課單位"/>
<div class="quick_search_dropdown--course">
<div class="search_result--course" v-for="(result, index) in search_result">
<div @click="result_click(index)">
<p>{{result.prefix}} {{result.name}}</p>
</div>
</div>
</div>
</div>
<div class="courseList__sidenav__courseType" id="courseArrange">
<div class="block_title">
<p class="text_18">檢視選項</p>
</div>
<div class="quick_search_area">
<div class="quick_search_checkbox">
<input id="commentCheck" type="checkbox" @click="comment_filter()"/><span>僅顯示有心得之課程</span>
</div>
</div>
</div>
<div class="wishlist">
<div class="block_title">
<p class="text_18">願望清單（{{ wishlist_cont.length }})</p>
</div>
<div class="wishlist_cont">
<div class="list_course_item" v-for="item in wishlist_cont" style="justify-content:none">
<div class="list_course_item_left">
<p class="list_course_item_category text_20 text_white clickable" :class="item.dept_id" @click="deleteItem(item.id)">{{ item.category }}</p>
</div>
<div class="list_course_item_mid">
<p class="list_course_item_title text_16">{{ item.dept_id }}-{{ item.class_id }} {{ item.title }}</p>
<p class="list_course_item_description text_14 text_dark">{{ item.teacher }} — {{ item.time }}</p>
</div>
<div class="list_course_item_right"> </div>
</div>
</div>
<button class="btn courseList__sidenav__courseType course-btn">加入完成，開始安排課表！</button>
</div>
</div>
<div class="flex-container courseList__sideList">
<div class="card courseList__sideList__itemBox" id="courseList">
<div id="course_item" v-on:scroll="handleScroll">
<div class="list_course_item" @click.self="courseLink(index)" v-for="(course, index) in course_data">
<div class="list_course_item_left">
<p class="list_course_item_category text_white text_20" :class="course.dept_id">工</p>
</div>
<div class="list_course_item_mid">
<p class="list_course_item_title text_16">{{course.課程名稱}}</p>
<p class="list_course_item_description text_14 text_dark">{{course.系所名稱}} {{course.系號}}{{course.選課序號}} - {{course.老師}}</p>
</div>
<div class="list_course_item_right" style="width:auto">
<div class="circle--img"><img src="./dist/images/course/edit.png"/></div>
<div class="circle--img" style="z-index: 20" @click="addCourse(index)"><img src="./dist/images/course/heart.png"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="change_tab" name="table">
<!-- <div class="change_tab" name="table" style="display: none;"> -->
<div class="left_area">
<div id="user_data" class="personal_data">
<div class="personal_data_image">
<img :src="user_photo" >
</div>
<div class="personal_data_info">
<p class="text_24">{{ user_name }}的課表</p>
<p class="text_16 text_dark">目前已排課 {{ credit_count }} 學分</p>
</div>
</div>
<div id="quick_search" class="quick_search">
<!-- todo: 新增：查無結果的顯示 -->
<div class="block_title">
<p class="text_18 "> {{ title_text }} </p>
</div>
<div class="quick_search_area" :class="{ filter_mode: filter_status }" @click="clearFilter">
<div v-if="filter_status" class="quick_search_clear_filter"></div>
<input class="quick_search_input" type="text" v-model="keyword" :disabled="filter_status || class_table_locked" :class="{ locked: class_table_locked }" placeholder="輸入「課程名」或「教師名」" ><br>
</div>
<div v-if="keyword.replace(' ','') != '' && !filter_status" class="quick_search_dropdown">
<span> {{ result }} </span>
<result-list-item v-for="item in result_cont" :class_item="item"></result-list-item>
</div>
</div>
<div id="wishlist_in_table" class="wishlist">
<div class="block_title">
<p class="text_18">願望清單（{{ wishlist_cont.length }}） </p>
</div>
<div class="wishlist_cont" :class="{ locked: class_table_locked }" >
<wishlist-item v-for="item in wishlist_cont" :class_item="item"></wishlist-item>
</div>
</div>
</div>
<div class="right_area">
<div id="class_table" class="class_table" :class="{ locked: class_table_locked }">
<div class="class_table_title">
<div class="class_table_title_cell left"> </div>
<div class="class_table_title_cell"><p class="text_18">Mon</p></div>
<div class="class_table_title_cell"><p class="text_18">Tue</p></div>
<div class="class_table_title_cell"><p class="text_18">Wed</p></div>
<div class="class_table_title_cell"><p class="text_18">Thu</p></div>
<div class="class_table_title_cell"><p class="text_18">Fri</p></div>
</div>
<div class="class_table_cont">
<div class="class_table_cont_row left">
<div class="class_table_cont_cell"><p class="text_18 round">1</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">2</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">3</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">4</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">N</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">5</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">6</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">7</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">8</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">9</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">A</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">B</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">C</p></div>
<div class="class_table_cont_cell"><p class="text_18 round">D</p></div>
<div class="class_table_cont_cell"><p class="text_18">其他</p></div>
</div>
<div class="class_table_cont_row">
<class-table-cell v-for="item in monday" :cell_data="item" :day="'monday'"></class-table-cell>
</div>
<div class="class_table_cont_row">
<class-table-cell v-for="item in tuesday" :cell_data="item" :day="'tuesday'"></class-table-cell>
</div>
<div class="class_table_cont_row">
<class-table-cell v-for="item in wednesday" :cell_data="item" :day="'wednesday'"></class-table-cell>
</div>
<div class="class_table_cont_row">
<class-table-cell v-for="item in thursday" :cell_data="item" :day="'thursday'"></class-table-cell>
</div>
<div class="class_table_cont_row">
<class-table-cell v-for="item in friday" :cell_data="item" :day="'friday'"></class-table-cell>
</div>
</div>
</div>
</div>
<div id="fixed_button_table" class="fixed_button_area" :class="{ locked: class_table_locked }">
<div class="major_button" :class="[{ deep_blue_edit: class_table_locked },{ red_done: !class_table_locked }]" @click="switchLockStatus"></div>
<div class="minor_button dark_cancel" @click="switchLockStatus"></div>
</div>
</div>
<div class="change_tab" name="profile" style="background-color:rgba(247,247,247,0.8)">
<!-- <div class="change_tab" name="profile" style="display:none; background-color:rgba(247,247,247,0.8)"> -->
</div>
</body>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="dist/JS/public.js"></script>
<script src="dist/JS/navbar.js"></script>
<script src="dist/JS/course.js"></script>
<script src="dist/JS/table.js"></script>
<script src="dist/JS/table_function.js"></script>
<!-- <script src="dist/JS/profile/profile.js "></script> -->
</html>