267 lines
13 KiB
JavaScript
267 lines
13 KiB
JavaScript
const token = localStorage.getItem("token");
|
|
let contentpage = document.getElementById("content")
|
|
const groups = ["Control", "Leaderboard", "Badges", "Points"];
|
|
const users = {};
|
|
const questions = {};
|
|
let selecteduser = undefined;
|
|
let selectedAnswers = undefined;
|
|
let selectedQuestion = undefined;
|
|
document.getElementById("csverstellen").addEventListener("click", (ev)=>{
|
|
ev.preventDefault()
|
|
fetch(`/users/csv?uid=${selecteduser.uid}&token=${token}`).then((response)=>{
|
|
if(response.status<400){
|
|
response.arrayBuffer().then((arrayBuffer)=>{
|
|
const csvld = document.getElementById("csvdl");
|
|
csvld.setAttribute("download", `csv${selecteduser.uid}.tar`);
|
|
csvld.setAttribute("href", URL.createObjectURL(new Blob([arrayBuffer])));
|
|
csvld.setAttribute("style", "");
|
|
})
|
|
}
|
|
})
|
|
})
|
|
fetch("/users?token="+token).then((response)=>{
|
|
if(response.status<400){
|
|
response.json().then((json)=>{
|
|
json.forEach((data)=>{
|
|
if(data.xp){
|
|
if(users[groups[data.group]]){
|
|
users[groups[data.group]][data.uid]=new user(data);
|
|
}else{
|
|
const item = {};
|
|
item[data.uid]=new user(data);
|
|
users[groups[data.group]]=item;
|
|
}
|
|
}
|
|
|
|
})
|
|
const allcsv = document.getElementById("allecsv");
|
|
allcsv.setAttribute("style", "");
|
|
allcsv.addEventListener("click", (ev)=>{
|
|
ev.preventDefault();
|
|
fetch("/users/csv?token="+token).then((response)=>{
|
|
if(response.status<400){
|
|
response.arrayBuffer().then((arrayBuffer)=>{
|
|
const csvld = document.getElementById("csvdl");
|
|
csvld.setAttribute("download", `csv${selecteduser.uid}.tar`);
|
|
csvld.setAttribute("href", URL.createObjectURL(new Blob([arrayBuffer])));
|
|
csvld.setAttribute("style", "");
|
|
})
|
|
}
|
|
})
|
|
})
|
|
fetch("/questions").then((response)=>{
|
|
if(response.status<400){
|
|
response.json().then((json)=>{
|
|
const exclude = [];
|
|
json.forEach((data)=>{
|
|
data.tags.forEach((tag)=>{
|
|
if(tag==="rquestions"||tag==="stat"){
|
|
exclude.push(data.qid);
|
|
}
|
|
if(questions[tag]){
|
|
questions[tag][data.qid]=new question(data);
|
|
}else{
|
|
const item = {};
|
|
item[data.qid]=new question(data)
|
|
questions[tag]=item;
|
|
}
|
|
})
|
|
})
|
|
contentpage.innerHTML=`
|
|
<select id="Gruppe">
|
|
<option>Gruppe wählen</option>
|
|
</select>
|
|
<select id="Spieler">
|
|
</select>
|
|
<select id="Fragenkategorie" style="display: none">
|
|
<option>Fragenkategorie auswählen</option>
|
|
${Object.keys(questions).map((key)=>"<option>"+key+"</option>").join("\r\n")}
|
|
</select>
|
|
<select style="display:none;" id="Fragenkatalog"></select>
|
|
<div id="SpielerInfo"></div>
|
|
<div id="Frage"></div>`
|
|
const GruppeAuswahl = document.getElementById("Gruppe");
|
|
const SpielerAuswahl = document.getElementById("Spieler");
|
|
const Fragenkatalog = document.getElementById("Fragenkatalog");
|
|
const FragenKategorie = document.getElementById("Fragenkategorie");
|
|
const Frage = document.getElementById("Frage")
|
|
GruppeAuswahl.innerHTML+=Object.keys(users).map((key)=>`<option>${key}</option>`).join("\r\n");
|
|
GruppeAuswahl.addEventListener("change", (ev)=>{
|
|
if(ev.target.value==="Gruppe wählen"){
|
|
SpielerAuswahl.innerHTML="";
|
|
}else{
|
|
SpielerAuswahl.innerHTML=`<option>Spieler wählen</option>\r\n${Object.keys(users[ev.target.value]).map((uid)=>"<option>"+uid+"</option>").join("\r\n")}`
|
|
}
|
|
})
|
|
SpielerAuswahl.addEventListener("change", (ev)=>{
|
|
document.getElementById("csvdl").setAttribute("style", "display: none;")
|
|
document.getElementById("csvdl").setAttribute("href", "");
|
|
if(ev.target.value===""||ev.target.value==="Spieler wählen"){
|
|
selecteduser=undefined;
|
|
FragenKategorie.setAttribute("style", "display: none")
|
|
Frage.setAttribute("style", "display: none");
|
|
document.getElementById("csverstellen").setAttribute("style", "display: none;")
|
|
}else{
|
|
selecteduser=users[GruppeAuswahl.value][ev.target.value];
|
|
document.getElementById("SpielerInfo").innerHTML=SpielerInfo(exclude);
|
|
FragenKategorie.setAttribute("style", "")
|
|
Frage.setAttribute("style", "");
|
|
document.getElementById("csverstellen").setAttribute("style", "")
|
|
}
|
|
})
|
|
FragenKategorie.addEventListener("change", (ev)=>{
|
|
Fragenkatalog.innerHTML="<option>Frage auswählen</option>"
|
|
if(ev.target.value==="Fragenkategorie auswählen"){
|
|
Fragenkatalog.setAttribute("style", "display: none");
|
|
}else{
|
|
Fragenkatalog.setAttribute("style", "")
|
|
selectedAnswers = selecteduser.Antworten(questions[ev.target.value])
|
|
Object.keys(selectedAnswers).forEach((question)=>{
|
|
const option = document.createElement("option");
|
|
option.innerHTML=question;
|
|
Fragenkatalog.appendChild(option);
|
|
})
|
|
Fragenkatalog.addEventListener("change", (ev)=>{
|
|
if(ev.target.value==="Frage auswählen"){
|
|
selectedQuestion=undefined
|
|
}else{
|
|
selectedQuestion=ev.target.value
|
|
}
|
|
questionElement(exclude).then((jsx)=>{
|
|
Frage.innerHTML=jsx;
|
|
}, (err)=>{
|
|
Frage.innerHTML=err;
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}, ()=>{
|
|
contentpage.innerHTML+="\r\ncan't parse response";
|
|
})
|
|
}else{
|
|
contentpage.innerHTML+="\r\ncan't get questions"
|
|
}
|
|
})
|
|
}, ()=>{
|
|
contentpage.innerHTML="can't parse response";
|
|
})
|
|
}else{
|
|
contentpage.innerHTML="can't fetch user data"
|
|
}
|
|
})
|
|
const user = function({rounds, logdates, admin, xp, uid}){
|
|
this.rounds = rounds;
|
|
this.logdates = logdates;
|
|
this.admin = admin;
|
|
this.xp = xp;
|
|
this.uid = uid
|
|
this.Antworten = (Fragen)=>{
|
|
const responses = {};
|
|
Object.keys(Fragen).forEach((key)=>{
|
|
if(this.xp){
|
|
this.xp.forEach(({date, xp})=>{
|
|
xp.forEach(({qid, right, selected, timeSpan})=>{
|
|
if(parseInt(key)==qid){
|
|
const {title, answers, page} = Fragen[key];
|
|
const selectedAnswers = []
|
|
selected.forEach((index)=>{
|
|
selectedAnswers.push(index);
|
|
})
|
|
if(responses[title]){
|
|
if(responses[title][date]){
|
|
responses[title][date].push({selectedAnswers, right, timeSpan})
|
|
}else{
|
|
responses[title][date]=[{selectedAnswers, right, timeSpan}]
|
|
}
|
|
}else{
|
|
const item = {qid, textmark: Object.keys(Fragen).indexOf(`${qid}`), page:page||"52"};
|
|
item[date] = [{selectedAnswers, right, timeSpan}];
|
|
responses[title]=item;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
})
|
|
return responses;
|
|
}
|
|
this.Gesamtpunktzahl = (exclude)=>{
|
|
let total = [0, 0];
|
|
if(this.xp){
|
|
this.xp.forEach(({xp})=>{
|
|
xp.forEach(({qid, right})=>{
|
|
if(!exclude||!exclude.includes(qid)){
|
|
total[1]++;
|
|
if(right){
|
|
total[0]++;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
return total;
|
|
}
|
|
}
|
|
const question = function({title, answers, page}){
|
|
this.title=title;
|
|
this.answers=answers;
|
|
this.page=page
|
|
}
|
|
const SpielerInfo = (exclude)=>{
|
|
let totaltLogTime = 0;
|
|
selecteduser.logdates.forEach(([begin, end])=>{
|
|
if(end){
|
|
totaltLogTime+=Date.parse(end)-Date.parse(begin);
|
|
}
|
|
})
|
|
return (`
|
|
<label>Admin: ${selecteduser.admin}</label>
|
|
<label>Gesamtzeit im Spiel: ${Math.round(totaltLogTime/60000)}m ${((totaltLogTime/60000)%1*60).toFixed(1)}s </label>
|
|
<label>Gesamtpunktzahl: ${selecteduser.Gesamtpunktzahl(exclude).join("/")}</label>`)
|
|
}
|
|
const questionElement = (exclude)=>new Promise((res, rej)=>{
|
|
const tag = document.getElementById("Fragenkategorie").value;
|
|
const squestion = selectedAnswers[selectedQuestion]
|
|
fetch(`/text?id=${tag}${tag==="rquestions"?1:selectedAnswers[selectedQuestion].textmark}`).then((response)=>{
|
|
if(response.status<400){
|
|
response.json().then((json)=>{
|
|
const answermap = [];
|
|
switch(squestion.page){
|
|
case "44":
|
|
json.content.filter(({id})=>id.includes("acc")&&!id.includes("label")).forEach((item)=>{
|
|
answermap.push(`<img src="${item.content}" height="100" width="100" style="margin: 3px;"/>`)
|
|
})
|
|
break;
|
|
case "54":
|
|
for (let i = 0; i < 7; i++){
|
|
answermap.push(`<label>${i+1}</label>`);
|
|
}
|
|
break;
|
|
default:
|
|
json.content.filter(({id})=>id.includes("sel")).forEach((item)=>{
|
|
answermap.push(...item.content.split("</option>").map((answer)=>answer.replace("<option>", "")).filter((answer)=>answer.length>0).map((answer)=>`<label ${item.style.includes("display: none")||item.style.includes("display:none")?'style="display: none;"':""}>${answer}</label>`))
|
|
})
|
|
break;
|
|
}
|
|
let Versuche = 0;
|
|
Object.keys(squestion).filter((key)=>key!=="textmark"&&key!=="page"&&key!=="qid").forEach((key)=>{
|
|
Versuche+=squestion[key].length;
|
|
})
|
|
res(`<div>
|
|
<label>Versuche: ${Versuche}</label>
|
|
${Object.keys(squestion).filter((key)=>key!=="textmark"&&key!=="page"&&key!=="qid").map((key)=>`<div><label>${key}</label>${squestion[key].map((date)=>answered(date, answermap, exclude.includes(squestion.qid))).join("\r\n")}</div>`).join("\r\r\n")}
|
|
</div>`)
|
|
})
|
|
}else{
|
|
rej(response.status)
|
|
}
|
|
}, rej)
|
|
|
|
})
|
|
const answered = (date, answermap, exclude)=>{
|
|
return `<div style="display: flex; flex-direction: column;">${!exclude?"<label>"+(date.right?"richtig":"falsch")+" beantwortet</label>":""}
|
|
<label>Dauer: ${(date.timeSpan/1000).toFixed(1)}</label>
|
|
${date.selectedAnswers.map((answer)=>answermap[answer]).join("\r\n")}
|
|
</div>`
|
|
} |