Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

300COM_10438543_Luhong-Wu/playground.html

Go to file
 
 
Cannot retrieve contributors at this time
265 lines (234 sloc) 11 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="assets/favicon2.ico">
<title>Q & A platform</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/element.js"></script>
<script src="js/sweet-alert.js"></script>
<script src="js/highlight.pack.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/element.css">
<link rel="stylesheet" href="css/sweet-alert.css">
<link rel="stylesheet" href="css/playground.css">
<link rel="stylesheet" href="css/atom-one-dark.css">
<style>
</style>
</head>
<body>
<div id="app">
<div class="index-nav">
<a @click="dialogloginVisible=true" v-if="user.username==''"
style="float: right;position: relative;right: 30px;top: 25px;text-decoration: none;cursor: pointer;">
Sign in
</a>
<a href="#" v-if="user.username!=''" @click='signout'
style="float: right;position: relative;right: 30px;top: 25px;text-decoration: none; margin-left: 30px;">
Sign out
</a>
<a v-if="user.username!=''" href="userinfo.html"
style="float: right;position: relative;right: 30px;top: 25px;text-decoration: none;">
{{user.username}}
</a>
<div style="float: right;position: relative;top: 10px;right: 50px;">
<img v-if="user.username!=''" :src="user.avatar" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
</div>
<div class="logo-container" onclick="window.location.href='/index.html'">
<img class="logo" src="assets/logo2.jpg">
<div style="align-self: center;font-size: 25px;font-family: xingshu;">Intelligent Q&A System</div>
<el-link class="nav-link" href="index.html">Search</el-link>
<el-link class="nav-link" type="primary" href="playground.html">Q & A platform</el-link>
<el-link v-if="user.user_type=='teacher'" class="nav-link" href="manager.html">Manage</el-link>
</div>
</div>
<div id="question-container" v-loading = "loading">
<div class="change-group">
<span @click="change_question_group(1)" :class="[question_group==1 ? 'group-checked' :'' ]">Not Solved</span>
<span>/</span>
<span @click="change_question_group(2)" :class="[question_group==2 ? 'group-checked' : '']">Solved</span>
</div>
<div id="question-list">
<div class="question-container" v-for="(question, index) in question_list" :key="index">
<div >
<div>
<img :src="question.user.avatar" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
<span style="font-size: 18px;font-weight: 500; position: relative;bottom: 20px;margin-left: 30px;">{{question.user.username}} </span>
<span style="float: right;font-size: 14px;color: grey;"><i class="el-icon-view" style="margin-right: 5px;"></i>Number of browse：{{question.visit_sum}} </span>
<span style="float: right;font-size: 14px;color: grey;margin-right: 20px;">{{question.ctime}} </span>
</div>
<div class="question-content" style="margin: 30px;font-size: 20px;" @click="toDetail(question.id)">
{{question.content}}
</div>
</div>
<div style="margin-left: 40px;" v-if="question.answer">
<img :src="question.answer.user.avatar" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
<span style="font-size: 18px;font-weight: 500; position: relative;bottom: 20px;margin-left: 30px;">{{question.answer.user.username}} </span>
<span style="float: right;font-size: 14px;color: grey;"><i class="el-icon-circle-check" style="margin-right: 5px;"></i>Number of adapted:{{question.answer.adopt_sum}} </span>
<span style="float: right;font-size: 14px;color: grey; margin-right: 20px;">{{question.answer.ctime}} </span>
<div v-if="question.answer.content.length > 300" class="answer-content" v-html="question.answer.content.slice(0,300)+'......'">
</div>
<div v-else class="answer-content" v-html="question.answer.content">
</div>
<el-divider v-if="question.answer.content.length > 300" @click="change_answer_board($event,index,question.answer.content)"><i class="el-icon-d-arrow-right" style="transform: rotate(90deg);margin-right: 20px;"></i>查看详情 </el-divider>
</div>
<el-divider ></el-divider>
</div>
</div>
</div>
<el-dialog title="Login" :visible.sync="dialogloginVisible">
<el-form>
<el-form-item label="Username">
<el-input v-model="username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Student NO">
<el-input v-model="user_no" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogloginVisible = false">Cancel</el-button>
<el-button type="primary" @click="login">Login</el-button>
</div>
</el-dialog>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {
username:""
},
dialogloginVisible: false,
user_no: "",
username:"",
show_Questions:[],
question_list:[],
questions_with_answer:[],
questions_without_answer:[],
show_Questions:[],
question_group:1,
show_answer:[],
loading:true
},
beforeCreate() {
$.ajax({
url:"http://47.102.143.222:8088/playground/",
method:'get',
xhrFields:{withCredentials:true},
success:(response)=>{
if(response["id"]=="-1")
this.user["id"] = -1;
else
this.user =response;
}
});
this.$http.get("http://47.102.143.222:8088/getQuestions/").then(
response=>{
var question_list = response.body["question_list"];
for(let question of question_list){
if(question.answer_sum == 0){
this.questions_without_answer.push(question);
}
else{
this.questions_with_answer.push(question);
}
}
this.question_list = this.questions_without_answer;
this.loading = false;
}
)
},
methods: {
change_question_group(value){
if(value==1){
this.question_list = this.questions_without_answer;
}
else{
this.question_list = this.questions_with_answer;
}
this.question_group = value;
setTimeout(()=>{
for(var block of document.getElementsByTagName("pre")){
hljs.highlightBlock(block);
}
},100);
},
toDetail(question_id){
window.localStorage.setItem("question_id",question_id);
//window.location.href = window.location.origin + '/detail.html';
window.open("detail.html");
},
signout(){
var cookies = document.cookie.split(";");
var new_cookie = [];
for(let cookie of cookies){
new_cookie.push(cookie.split("=")[0] + "=")
}
document.cookie = new_cookie.join(";");
swal({
title:"Sign out successfully",
text:"Hope next login",
type:"success",
},
()=>{
location.reload(true);
}
);
},
change_answer_board(event,index,content){
if(!this.show_answer[index]){
this.show_answer[index] = true;
console.log(event);
document.getElementsByClassName("answer-content")[index].innerHTML = content;
event.target.childNodes[0].style.transform="rotate(-90deg)",
event.target.childNodes[1].data = "Open detail";
}
else{
this.show_answer[index] = false;
document.getElementsByClassName("answer-content")[index].innerHTML = content.slice(0,300)+'......';
event.target.childNodes[0].style.transform="rotate(90deg)",
event.target.childNodes[1].data = "Visit detail";
}
for(var block of event.target.parentNode.parentNode.getElementsByTagName("pre")){
hljs.highlightBlock(block);
}
},
login() {
if(this.username =="" || this.user_no==""){
this.dialogloginVisible = false;
swal("Please input username or password", "Check it again", "warning");
return;
}
$.ajax({
url: "http://47.102.143.222:8088/login/",
method: 'post',
xhrFields: {
withCredentials: true
},
data: {
user_no: this.user_no,
username: this.username
},
success: (response) => {
if (response["id"] == "-1"){
this.user["id"] = -1;
swal("Wrong", "incorrect username or password", "error");
}
else{
swal("Sign in successfully", "Welcome back", "success");
this.user = response;
}
this.dialogloginVisible = false;
}
});
},
}
})
</script>
</body>
</html>