hafroes/edu-senex
1
0
Fork 0
Code Issues Pull-Requests Projekte Releases Pakete Wiki Aktivität Actions

feat: dashboard + tutorials modules - stats tiles, tutorial list, reader, completion

Quellcode durchsuchen
Dieser Commit ist enthalten in:
hafroese 2026-04-02 23:39:09 +02:00
Ursprung 2c34aea901
Commit 03778e4bed
4 geänderte Dateien mit 197 neuen und 0 gelöschten Zeilen
Patch-Datei herunterladen Diff-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

50
edu/js/dashboard.js Normale Datei
Datei anzeigen

@ -0,0 +1,50 @@
'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 &mdash; 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">&#128218;</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 += ' &mdash; ' + d.cards_due + ' faellig';
h += '</div></div>';
h += '<div class="module-tile" data-href="#/tutorials"><div class="tile-icon">&#128214;</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">&#10067;</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">&#128196;</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; });
}
};

60
edu/js/tutorials.js Normale Datei
Datei anzeigen

@ -0,0 +1,60 @@
'use strict';
var Tutorials = {
render: function(params) {
var el = document.getElementById('content');
if (params[0]) { this.renderSingle(el, params[0]); return; }
el.textContent = 'Lade Tutorials...';
var self = this;
API.get('/tutorials').then(function(data) { self.renderList(el, data.tutorials); })
.catch(function(e) { el.textContent = e.message; });
},
renderList: function(el, tutorials) {
var done = tutorials.filter(function(t) { return t.completed; }).length;
var h = '<div class="page-header"><h1>Tutorials</h1><p>' + done + '/' + tutorials.length + ' abgeschlossen</p></div>';
h += '<div class="tutorial-list">';
tutorials.forEach(function(t, i) {
h += '<div class="tutorial-item" data-slug="' + t.slug + '">';
h += '<div class="tut-number">' + String(i + 1).padStart(2, '0') + '</div><div>';
h += '<div class="tut-title">' + Markdown.esc(t.title) + '</div>';
h += '<div class="tut-info">' + (t.duration_min ? 'ca. ' + t.duration_min + ' Min' : '');
if (t.description) h += ' &mdash; ' + Markdown.esc(t.description);
h += '</div></div>';
if (t.completed) h += '<div class="tut-check">&#10003;</div>';
h += '</div>';
});
h += '</div>';
el.innerHTML = h;
el.querySelectorAll('.tutorial-item').forEach(function(item) {
item.addEventListener('click', function() { location.hash = '#/tutorials/' + item.dataset.slug; });
});
},
renderSingle: function(el, slug) {
el.textContent = 'Lade Tutorial...';
var self = this;
API.get('/tutorials/' + slug).then(function(data) {
var t = data.tutorial;
var h = '<a href="#/tutorials" class="back-link">&larr; Zurueck zu Tutorials</a>';
h += '<div class="tutorial-content">' + Markdown.render(t.content_md) + '</div><br>';
h += '<div style="text-align:center;">';
if (t.completed) {
h += '<p style="color:var(--green)">&#10003; Abgeschlossen</p>';
} else {
h += '<button class="btn btn-green" id="complete-btn">Als abgeschlossen markieren</button>';
}
h += '</div>';
el.innerHTML = h;
var btn = document.getElementById('complete-btn');
if (btn) btn.addEventListener('click', function() { self.complete(slug); });
}).catch(function(e) { el.textContent = e.message; });
},
complete: function(slug) {
var self = this;
API.post('/tutorials/' + slug + '/complete').then(function() {
self.renderSingle(document.getElementById('content'), slug);
}).catch(function(e) { alert('Fehler: ' + e.message); });
}
};