113 lines
4.9 KiB
JavaScript
113 lines
4.9 KiB
JavaScript
document.getElementById("main").addEventListener("submit", (ev)=>{
|
|
ev.preventDefault();
|
|
});
|
|
document.getElementById("homebtn").addEventListener("click", (ev)=>{
|
|
ev.preventDefault();
|
|
window.location=`/3${3+JSON.parse(localStorage.getItem("userData")).group}.html`
|
|
})
|
|
document.getElementById("rmad").addEventListener("click", (ev)=>{
|
|
document.getElementById("apan").setAttribute("style", "animation: fadeout 1s linear")
|
|
setTimeout(()=>{
|
|
document.getElementById("apan").setAttribute("style", "display: none;")
|
|
document.getElementById("contentPanel").setAttribute("style", "animation: fadein 1s linear");
|
|
},950)
|
|
})
|
|
for (let i = 33; i < 37; i++){
|
|
const el = document.getElementById(`${i}html`);
|
|
if(el&&JSON.parse(localStorage.getItem("userData")).admin){
|
|
el.setAttribute("style", "");
|
|
}
|
|
}
|
|
document.getElementById("logoutbtn").addEventListener("click", (ev)=>{
|
|
ev.preventDefault();
|
|
fetch("/users/logout", {
|
|
method:"POST",
|
|
headers:{
|
|
"Authorization":`Bearer ${localStorage.getItem("token")}`
|
|
}
|
|
}).then(()=>{
|
|
window.location="/login.html"
|
|
})
|
|
})
|
|
const container = document.getElementById("container");
|
|
const {xp} = JSON.parse(localStorage.getItem("userData"));
|
|
let total = 0;
|
|
const today = [0, undefined];
|
|
const yesterday = [0, undefined];
|
|
const twdag = [0, undefined];
|
|
const trdag = [0, undefined];
|
|
const fdag=[0, undefined];
|
|
let sock = 0;
|
|
(xp||[]).forEach((day) => {
|
|
tday = 0;
|
|
day.xp.forEach(({right})=>{
|
|
if(right){
|
|
tday++;
|
|
}
|
|
})
|
|
total+=tday;
|
|
switch(Math.floor((Date.now()-Date.parse(day.date))/(24*60*60*1000))){
|
|
case 0: today[0] = tday; break;
|
|
case 1: yesterday[0] = tday; break;
|
|
case 2: twdag[0] = tday; break;
|
|
case 3: trdag[0] = tday; break;
|
|
case 4: fdag[0]=tday; break;
|
|
default: sock+=tday; break;
|
|
}
|
|
});
|
|
if(sock==total){
|
|
sock=0;
|
|
}
|
|
today[1]=new Date().getDay();
|
|
yesterday[1]=(today[1]-1)<0?(today[1]+6):today[1]-1;
|
|
twdag[1]=(today[1]-2)<0?(today[1]-1+6):(today[1]-2);
|
|
trdag[1]=(today[1]-3)<0?(today[1]-2+6):(today[1]-3);
|
|
fdag[1]=(today[1]-4)<0?(today[1]-3+6):(today[1]-4);
|
|
const numtoday = (num)=>{
|
|
switch(num){
|
|
case 0: return "SO";
|
|
case 1: return "MO";
|
|
case 2: return "DI";
|
|
case 3: return "MI";
|
|
case 4: return "DO";
|
|
case 5: return "FR";
|
|
case 6: return "SA";
|
|
}
|
|
}
|
|
const width = window.innerWidth>500?200:window.innerWidth*0.4;
|
|
const range = (total - sock)*1.2;
|
|
const height = (day)=>{
|
|
const h = width-25;
|
|
return h*(1 - day[0]/(range>0?range:1));
|
|
}
|
|
let content = `
|
|
<label style="margin-bottom:5px">Insgesamt: ${total} Heute:${today[0]}</label>
|
|
<svg width="${width}" height ="${width}">
|
|
<line x1="${5*width/40}" x2="${5*width/40}" y1="${width-25}" y2="${0}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
<line x1="${5*width/40}" x2="${width}" y1="${width-25}" y2="${width-25}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
<text x="${width/50}" y="${3*width/50}" style="fill:black;font-size: ${width/15}px; font-weight: bold" >XP</text>
|
|
<text x="${width/50}" y="${(width-25)/4}" style="fill:black;font-size: ${width/15}px;" >${Math.round(range/4*3+sock)}</text>
|
|
<text x="${width/50}" y="${(width-25)/2}" style="fill:black;font-size: ${width/15}px;" >${Math.round(range/2+sock)}</text>
|
|
<text x="${width/50}" y="${3*(width-25)/4}" style="fill:black;font-size: ${width/15}px;" >${Math.round(range/4+sock)}</text>
|
|
<text x="${width/50}" y="${width-25}" style="fill:black;font-size: ${width/15}px;" >${sock}</text>
|
|
<text y="${0.97*width}" x="${(width-25)/4}" style="fill:black;font-size: ${width/15}px;" >${numtoday(trdag[1])}</text>
|
|
<text y="${0.97*width}" x="${(width-25)/2}" style="fill:black;font-size: ${width/15}px;" >${numtoday(twdag[1])}</text>
|
|
<text y="${0.97*width}" x="${3*(width-25)/4}" style="fill:black;font-size: ${width/15}px;" >${numtoday(yesterday[1])}</text>
|
|
<text y="${0.97*width}" x="${width-25}" style="fill:black;font-size: ${width/15}px;" >${numtoday(today[1])}</text>
|
|
<line x1="${5*width/40}" x2="${(width-25)/4}" y1="${height(fdag)}" y2="${height(trdag)}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
<line x1="${(width-25)/4}" x2="${(width-25)/2}" y1="${height(trdag)}" y2="${height(twdag)}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
<line x1="${(width-25)/2}" x2="${3*(width-25)/4}" y1="${height(twdag)}" y2="${height(yesterday)}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
<line x1="${3*(width-25)/4}" x2="${width-25}" y1="${height(yesterday)}" y2="${height(today)}" style="stroke:rgb(0,0,0);stroke-width:1;"/>
|
|
</svg>`
|
|
container.innerHTML=content;
|
|
if(admin){
|
|
const editAdmin = document.getElementById("edit_admin");
|
|
editAdmin.setAttribute("style", "");
|
|
editAdmin.addEventListener("click", (ev)=>{
|
|
ev.preventDefault();
|
|
gatherData("Umgebung");
|
|
}
|
|
)
|
|
}
|
|
getData("Umgebung");
|