290 lines
10 KiB
Vue
290 lines
10 KiB
Vue
var mainWindow = {
|
||
data: function(){
|
||
return {
|
||
'courses': [],
|
||
'selectCourses': [],
|
||
'departments': [],
|
||
'selectDepartment': '',
|
||
'foundName': "",
|
||
"user": "",
|
||
'token': ""
|
||
}
|
||
},
|
||
created() {
|
||
var main = this
|
||
window.fbAsyncInit = function() {
|
||
FB.init({
|
||
appId : '',
|
||
cookie : true,
|
||
xfbml : true,
|
||
version : 'v9.0'
|
||
});
|
||
|
||
FB.AppEvents.logPageView();
|
||
main.getCourseTable()
|
||
};
|
||
|
||
(function(d, s, id){
|
||
var js, fjs = d.getElementsByTagName(s)[0];
|
||
if (d.getElementById(id)) {return;}
|
||
js = d.createElement(s); js.id = id;
|
||
js.src = "https://connect.facebook.net/en_US/sdk.js";
|
||
fjs.parentNode.insertBefore(js, fjs);
|
||
}(document, 'script', 'facebook-jssdk'));
|
||
},
|
||
mounted() {
|
||
var main = this
|
||
axios
|
||
.get("./output.json")
|
||
.then(response => (main.courses = response.data))
|
||
.then(function(){
|
||
for(var course of main.courses){
|
||
// console.log(course.name)
|
||
if(main.departments.indexOf(course.department)==-1){
|
||
main.departments.push(course.department)
|
||
}
|
||
}
|
||
})
|
||
.then(function(){
|
||
main.departments.sort()
|
||
main.selectDepartment = main.departments[15]
|
||
})
|
||
},
|
||
methods: {
|
||
'login': function(){
|
||
var main = this
|
||
FB.login(function(){
|
||
main.getCourseTable()
|
||
})
|
||
},
|
||
'logout': function(){
|
||
var main = this
|
||
FB.logout(function(response) {
|
||
main.user = ""
|
||
main.token = ""
|
||
});
|
||
},
|
||
'getCourseTable': function(){
|
||
var main = this
|
||
FB.getLoginStatus(function(response) {
|
||
main.statusChangeCallback(response);
|
||
});
|
||
},
|
||
'statusChangeCallback': function(response){
|
||
if(response.status == "connected"){
|
||
this.token = response.authResponse.accessToken
|
||
|
||
var main = this
|
||
FB.api('/me', function(response){main.user = response.name})
|
||
|
||
fetch('https://api.snsd0805.com/courseTable?token='+this.token)
|
||
.then(function(response){
|
||
return response.json()
|
||
}).then(function(jsonData){
|
||
console.log(jsonData)
|
||
main.selectCourses = JSON.parse(jsonData['data'])
|
||
})
|
||
.catch(function(err){
|
||
alert("錯誤： "+err)
|
||
})
|
||
}
|
||
},
|
||
'saveCourseTable': function(){
|
||
var main = this
|
||
if(this.token!=""){
|
||
fetch('https://api.snsd0805.com/courseTable',{
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
'token': main.token,
|
||
'data': main.selectCourses
|
||
})
|
||
})
|
||
.then(function(response){
|
||
return response.json()
|
||
})
|
||
.then(function(response){
|
||
if(response.status=="saved"){
|
||
alert("已儲存")
|
||
}else{
|
||
alert("錯誤")
|
||
}
|
||
})
|
||
.catch(function(err){
|
||
alert("錯誤： "+err)
|
||
})
|
||
|
||
}else{
|
||
this.login()
|
||
}
|
||
},
|
||
'getTime': function(timeString){
|
||
ans = []
|
||
number = ""
|
||
for(var i of timeString){
|
||
if(i>="0" && i<="9"){
|
||
number = i
|
||
}else if(i>="a" && i<="z"){
|
||
ans.push(number+i)
|
||
}
|
||
else{
|
||
ans.push(timeString)
|
||
break
|
||
}
|
||
}
|
||
return ans
|
||
},
|
||
'select': function(department){
|
||
this.selectDepartment = department
|
||
},
|
||
'founded': function(courseName){
|
||
this.foundName = courseName
|
||
},
|
||
'addCourse': function(course){
|
||
var time = this.getTime(course.time)
|
||
for(var t of time){
|
||
this.selectCourses.push({
|
||
'time': t,
|
||
'name': course.name,
|
||
'temp': false
|
||
})
|
||
}
|
||
},
|
||
'removeCourse': function(course){
|
||
console.log("remove "+course)
|
||
for(var i=this.selectCourses.length-1;i>=0;i--){
|
||
if(this.selectCourses[i].name == course){
|
||
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,
|
||
'choose-department': chooseDepartment,
|
||
'course-anslist': coursesList
|
||
},
|
||
template: `
|
||
<div>
|
||
<!-- Navigation-->
|
||
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
|
||
<div class="container">
|
||
<a class="navbar-brand js-scroll-trigger" href="#page-top">暨大排課表</a>
|
||
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||
Menu
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
|
||
|
||
<li v-if="token==''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href='#' v-on:click="login()">Facebook登入</a></li>
|
||
<li v-if="token!=''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#" v-on:click="logout()">登出Facebook—{{user}}</a></li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<br><br>
|
||
|
||
|
||
<section class="page-section portfolio" id="portfolio">
|
||
<div class="container" id='table'>
|
||
<!-- Portfolio Section Heading-->
|
||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">課表</h2>
|
||
<!-- Icon Divider-->
|
||
<div class="divider-custom">
|
||
<div class="divider-custom-line"></div>
|
||
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
|
||
<div class="divider-custom-line"></div>
|
||
</div>
|
||
<div class="divider-custom">
|
||
<div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
|
||
<div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-3">
|
||
<div class="row">
|
||
<choose-department
|
||
v-bind:departments="departments"
|
||
v-bind:selected="selectDepartment"
|
||
v-on:selectok="select"
|
||
v-on:foundedok="founded"
|
||
>
|
||
</choose-department><br>
|
||
</div><br><br>
|
||
<div class="row">
|
||
<course-anslist
|
||
v-bind:courses="courses"
|
||
v-bind:selected_d="selectDepartment"
|
||
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>
|
||
</div>
|
||
|
||
<div class="col-lg-9 table-responsive " >
|
||
<course-table
|
||
v-bind:selectCourses="selectCourses"
|
||
v-bind:select_c="selectCourses"
|
||
v-bind:is_shared="false"
|
||
v-on:remove-course="removeCourse"
|
||
></course-table>
|
||
</div>
|
||
</div>
|
||
<!-- Portfolio Grid Items-->
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="exampleModalLabel">資訊公告</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
已經更新為 1092 新課表<br>
|
||
但因學校未更新通識課資料，因此還沒有「通識課程分類」<br><br>
|
||
2021 01/14 更新
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">我知道了</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
} |