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

edu/js/tutorials.js

@@ -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); });
+    }
+};