51 Zeilen
3,2 KiB
JavaScript
51 Zeilen
3,2 KiB
JavaScript
|
'use strict';
|
||
|
|
// NOTE: innerHTML safe - only own API data (numbers, names)
|
||
|
|
|
||
|
|
var Dashboard = {
|
||
|
|
render: function() {
|
||
|
|
var el = document.getElementById('content');
|
||
|
|
el.textContent = 'Lade Dashboard...';
|
||
|
|
|
||
|
|
API.get('/dashboard').then(function(d) {
|
||
|
|
var cardPct = d.cards_total > 0 ? Math.round((d.cards_learned / d.cards_total) * 100) : 0;
|
||
|
|
var tutPct = d.tutorials_total > 0 ? Math.round((d.tutorials_done / d.tutorials_total) * 100) : 0;
|
||
|
|
var dueText = d.cards_due > 0
|
||
|
|
? '<strong style="color:var(--orange)">' + d.cards_due + ' Karten faellig heute</strong>'
|
||
|
|
: 'Keine faelligen Karten — gut gemacht!';
|
||
|
|
|
||
|
|
var h = '<div class="page-header"><h1>Willkommen, ' + Markdown.esc(App.currentUser.display_name) + '!</h1>';
|
||
|
|
h += '<p>' + dueText + '</p></div>';
|
||
|
|
h += '<div class="module-grid">';
|
||
|
|
h += '<div class="module-tile" data-href="#/flashcards"><div class="tile-icon">📚</div>';
|
||
|
|
h += '<div class="tile-title">Flashcards</div>';
|
||
|
|
h += '<div class="tile-info">' + d.cards_total + ' Karten in ' + d.deck_count + ' Decks</div>';
|
||
|
|
h += '<div class="progress-bar"><div class="fill fill-green" style="width:' + cardPct + '%"></div></div>';
|
||
|
|
h += '<div class="tile-info" style="margin-top:4px">' + cardPct + '% gelernt';
|
||
|
|
if (d.cards_due > 0) h += ' — ' + d.cards_due + ' faellig';
|
||
|
|
h += '</div></div>';
|
||
|
|
h += '<div class="module-tile" data-href="#/tutorials"><div class="tile-icon">📖</div>';
|
||
|
|
h += '<div class="tile-title">Tutorials</div>';
|
||
|
|
h += '<div class="tile-info">' + d.tutorials_total + ' Lektionen</div>';
|
||
|
|
h += '<div class="progress-bar"><div class="fill fill-green" style="width:' + tutPct + '%"></div></div>';
|
||
|
|
h += '<div class="tile-info" style="margin-top:4px">' + d.tutorials_done + '/' + d.tutorials_total + ' abgeschlossen</div></div>';
|
||
|
|
h += '<div class="module-tile" data-href="#/quiz"><div class="tile-icon">❓</div>';
|
||
|
|
h += '<div class="tile-title">Quiz</div><div class="tile-info">Wissen testen</div>';
|
||
|
|
if (d.last_quiz_score !== null) {
|
||
|
|
h += '<div class="tile-info" style="margin-top:12px">Letzte Note: <strong>' + d.last_quiz_score + '%</strong></div>';
|
||
|
|
} else {
|
||
|
|
h += '<div class="tile-info" style="margin-top:12px;color:var(--text-muted)">Noch kein Quiz</div>';
|
||
|
|
}
|
||
|
|
h += '</div>';
|
||
|
|
h += '<div class="module-tile" data-href="#/cheatsheets"><div class="tile-icon">📄</div>';
|
||
|
|
h += '<div class="tile-title">Cheat Sheets</div>';
|
||
|
|
h += '<div class="tile-info">' + d.cheatsheet_count + ' Referenzkarten</div>';
|
||
|
|
h += '<div class="tile-info" style="margin-top:12px;color:var(--text-muted)">Schnellreferenz</div></div>';
|
||
|
|
h += '</div>';
|
||
|
|
el.innerHTML = h;
|
||
|
|
el.querySelectorAll('.module-tile').forEach(function(tile) {
|
||
|
|
tile.addEventListener('click', function() { location.hash = tile.dataset.href; });
|
||
|
|
});
|
||
|
|
}).catch(function(e) { el.textContent = e.message; });
|
||
|
|
}
|
||
|
|
};
|