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/detail.html

Go to file
 
 
Cannot retrieve contributors at this time
458 lines (413 sloc) 19.7 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>Detail</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/quill.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/image-resize.min.js"></script>
<link rel="stylesheet" href="css/element.css">
<link rel="stylesheet" href="css/sweet-alert.css">
<link rel="stylesheet" href="css/detail.css">
<link rel="stylesheet" href="css/atom-one-dark.css">
<link rel="stylesheet" href="css/quill.snow.css">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<style>
.ql-editor {
min-height: 400px;
}
</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 href="userinfo.html" v-if="user.username!=''"
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" 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">
<div class="question-container" v-if="question.user">
<div >
<div>
<el-image :src="question.user.avatar" :preview-src-list="imgSrcList" 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 Visiting：{{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;" >
{{question.content}}
</div>
<div style="margin-left: 40px;" id="question-detail" v-html="!question_detail_show ? question.detail_content.slice(0,300)+'......' :question.detail_content ">
</div>
</div>
<el-divider v-if="!question_detail_show" >
<i class="el-icon-d-arrow-right" @click="change_question_board($event)" style="transform: rotate(90deg);margin-right: 20px;"></i>Visit the detail of question
</el-divider>
<el-divider v-else></el-divider>
<div style="margin-left: 40px;" v-for="(answer,index) in answer_list" :key="index" :id="'answer_'+answer.id">
<el-image :src="answer.user.avatar" :preview-src-list="imgSrcList" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
<span style="font-size: 18px;font-weight: 500; position: relative;bottom: 20px;margin-left: 30px;">{{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：{{answer.adopt_sum}} </span>
<span style="float: right;font-size: 14px;color: grey; margin-right: 20px;">{{answer.ctime}} </span>
<div v-if="answer.content.length > 300" class="answer-content" v-html="answer.content.slice(0,300)+'......'">
</div>
<div v-else class="answer-content" v-html="answer.content">
</div>
<div style="text-align: center;">
<i v-show="answer.adopted" @click="adopt_answer($event,answer)" class="fa fa-thumbs-up fa-4x animated" style=" color: hotpink;" aria-hidden="true"></i>
<i v-show="!answer.adopted" @click="adopt_answer($event,answer)" class="fa fa-thumbs-o-up fa-4x animated" style=" color: hotpink;" aria-hidden="true"></i>
</div>
<el-divider v-if="answer.content.length > 300" @click="change_answer_board($event,index,answer.content)"><i class="el-icon-d-arrow-right" style="transform: rotate(90deg);margin-right: 20px;"></i>Visit detail </el-divider>
<el-divider v-else></el-divider>
</div>
</div>
<div v-loading="loading" element-loading-text="Uploading"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<div id="editor">
</div>
<div style="text-align: right;margin: 20px;">
<el-button type="primary" @click="submitAnswer">Submit Answer</el-button>
</div>
</div>
</div>
<el-dialog title="Sign in" :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: "",
avatar:"",
user_type:"",
id:-1
},
adopt_answer_list:[],
dialogloginVisible: false,
user_no: "",
username:"",
answer_list: [],
question: {},
show_answer:[],
loading:false,
question_detail_show:true,
imgSrcList:[],
},
beforeCreate() {
$.ajax({
url: "http://47.102.143.222:8088/detail/",
method: 'get',
xhrFields: {
withCredentials: true
},
success: (response) => {
if (response["id"] == "-1")
this.user["id"] = -1;
else
this.user = response;
}
});
},
created() {
$.ajax({
url: "http://47.102.143.222:8088/getAnswers/",
method: 'post',
xhrFields: {
withCredentials: true
},
data:{
question_id: localStorage.getItem("question_id")
},
success: (response) => {
this.answer_list = response["answer_list"];
this.question = response["question"];
this.adopt_answer_list = response['adopt_answer_list'];
if(this.question.detail_content?.length > 300)
this.question_detail_show = false;
for (let answer of this.answer_list) {
answer["adopted"] = false;
if(this.adopt_answer_list.findIndex(id => id==answer.id)!=-1)
answer["adopted"] = true;
this.imgSrcList.push(answer.user.avatar);
}
this.imgSrcList.push(this.question.user.avatar);
setTimeout(()=>{
document.querySelectorAll(".answer-content").forEach((element, index) => {
// if(this.answer_list[index].content.length <= 300)
element.querySelectorAll('pre').forEach((block) => {
hljs.highlightBlock(block);
});
});
document.querySelectorAll("#question-detail").forEach((element, index) => {
// if(this.answer_list[index].content.length <= 300)
element.querySelectorAll('pre').forEach((block) => {
hljs.highlightBlock(block);
});
});
},1000);
}
});
},
mounted() {
if(location.hash!=""){
var temp = location.hash;
location.hash = "";
setTimeout(()=>{
location.hash = temp;
},500);
}
},
methods: {
change_question_group(value) {
if (value == 1) {
this.question_list = this.questions_without_answer;
} else {
this.question_list = this.questions_with_answer;
}
},
adopt_answer(event,answer){
console.log(event);
if(this.user.id==-1){
swal("No sign in","You should login first","warning");
return;
}
if(answer.adopted){
this.$notify({
title: "Wrong",
message: "You have already support it ",
type: 'warning'
}) ;
return;
}
this.$http.post("http://47.102.143.222:8088/adopt_answer/",{
answer_id:answer.id,
user_id:this.user.id,
user_type:this.user.user_type
},{emulateJSON:true}).then(response=>{
if(response.body['result']==-1){
swal("Wrong",response.body['msg'],'error');
}
else{
swal("Success","Thanks for your supporting","success");
answer['adopted'] = true;
event.target.classList.add("fa-thumbs-up");
answer.adopt_sum += 1;
}
})
},
submitAnswer(){
if (this.user.id == -1) {
//如果没有登陆则跳转
swal("Not login", "You should log in first", "error");
return;
}
content = document.getElementsByClassName("ql-editor");
if (content[0].innerText == "\n") {
swal("The answer should not empty", " ", "error");
return;
}
this.loading = true;
var imgs = content[0].getElementsByTagName('img');
if (imgs.length > 0) {
for (let i = 0; i < imgs.length; i++) {
img_data = {
img: imgs[i].src,
index: i,
question_id:localStorage.getItem("question_id")
};
this.$http.post('http://47.102.143.222:8088/img_src_change/', img_data, {emulateJSON: true}).then(response => {
if (response.status == 200) {
// imgs[i].outerHTML =`<img src=${response.body["img_src"]}>`;
imgs[i].src = response.body["img_src"];
if (i == imgs.length - 1) {
this.save_answer(response.body['question_id'],response.body['answer_id']);
}
} else {
alert("mg src change unsuccessfully");
this.loading = false;
}
});
}
} else {
this.save_answer(localStorage.getItem("question_id"));
}
},
save_answer(question_id,answer_id){
var content = document.getElementsByClassName("ql-editor");
console.log(content[0].innerHTML);
var reply_data = {
user_id: this.user.id,
question_id: question_id,
answer_id:answer_id ? answer_id : 0,
user_type:this.user.user_type,
content: content[0].innerHTML
};
this.$http.post('http://47.102.143.222:8088/addAnswer/',reply_data, { emulateJSON: true}).then(response => {
if (response.status == 200) {
if(response.body['result']=='0'){
content[0].innerText = "\n";
swal("Success","Thanks for your answer","success");
setTimeout(() => {
location.reload()
}, 500);
}
else{
swal("Wrong","There may be something wrong","warning");
}
} else {
swal("Wrong","Server may be broken ","error");
}
this.loading = false;
})
},
change_question_board(event){
this.question_detail_show = !this.question_detail_show;
event.target.childNodes[0].style.transform="rotate(-90deg)",
event.target.childNodes[1].data = "Close detail";
for(var block of document.getElementById("question-detail").getElementsByTagName("pre")){
hljs.highlightBlock(block);
}
},
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 = "Close 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 = "Open detail";
}
for(var block of event.target.parentNode.parentNode.getElementsByTagName("pre")){
hljs.highlightBlock(block);
}
},
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);
}
);
},
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{
this.user = response;
swal("Sign in successfully", "Welcome Back", "success");
setTimeout(()=>{
location.reload();
},1000);
}
this.dialogloginVisible = false;
}
});
}
}
});
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 切换按钮
['blockquote','image','code-block'],
[{ 'header': 1 }, { 'header': 2 }], // 用户自定义按钮值
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // 上标/下标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 减少缩进/缩进
[{ 'direction': 'rtl' }], // 文本下划线
[{ 'size': ['small', false, 'large', 'huge'] }], // 用户自定义下拉
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // 主题默认下拉，使用主题提供的值
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // 清除格式
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
imageResize:{}
},
theme: 'snow'
});
var quill_editor = document.getElementsByClassName('ql-code-block')[0];
quill_editor.addEventListener("click",event=>{
console.log("sss");
for (let element of quill_editor.getElementsByTagName("pre")) {
hljs.highlightBlock(element);
}
});
</script>
</body>
</html>