61 Zeilen
2,8 KiB
JavaScript
61 Zeilen
2,8 KiB
JavaScript
|
'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 += ' — ' + Markdown.esc(t.description);
|
||
|
|
h += '</div></div>';
|
||
|
|
if (t.completed) h += '<div class="tut-check">✓</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">← 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)">✓ 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); });
|
||
|
|
}
|
||
|
|
};
|