78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
import m from 'https://unpkg.com/mithril@2/mithril.esm.js';
|
|
|
|
const API = '/api/v1/flashcards';
|
|
|
|
const List = {
|
|
oninit: async function (v) {
|
|
v.state.ids = [];
|
|
v.state.loading = true;
|
|
try {
|
|
const res = await fetch(API);
|
|
const data = await res.json();
|
|
v.state.ids = (data.flashcards || []).map(u => u.split('/').pop());
|
|
} catch { /* ignore */ }
|
|
v.state.loading = false;
|
|
},
|
|
view: function (v) {
|
|
if (v.state.loading) return m('.loading', m('i.nes-icon.nes-logo.is-small'));
|
|
return [
|
|
m('.header', [
|
|
m('h1', 'St\u2011Pierre Flashcards'),
|
|
m('span.nes-badge', m('span', String(v.state.ids.length))),
|
|
]),
|
|
v.state.ids.length === 0 && m('p', 'No flashcards yet.'),
|
|
v.state.ids.map(id => m('.card-preview.nes-container.is-rounded.with-title', {
|
|
onclick: () => m.route.set('/flashcard/' + id),
|
|
}, [
|
|
m('p.title', '#' + id),
|
|
m('p', 'Click to view details \u2192'),
|
|
])),
|
|
];
|
|
},
|
|
};
|
|
|
|
const Detail = {
|
|
oninit: async function (v) {
|
|
v.state.entry = null;
|
|
v.state.loading = true;
|
|
try {
|
|
const res = await fetch(API + '/' + v.attrs.id);
|
|
if (res.ok) v.state.entry = await res.json();
|
|
} catch { /* ignore */ }
|
|
v.state.loading = false;
|
|
},
|
|
view: function (v) {
|
|
if (v.state.loading) return m('.loading', m('i.nes-icon.nes-logo.is-small'));
|
|
const e = v.state.entry;
|
|
if (!e) return [
|
|
m('.back', m('button.nes-btn', { onclick: () => m.route.set('/') }, '\u2B05 Back')),
|
|
m('p', 'Flashcard not found.'),
|
|
];
|
|
return [
|
|
m('.back', m('button.nes-btn.is-warning', { onclick: () => m.route.set('/') }, '\u2B05 Back')),
|
|
m('.detail-card.nes-container.is-rounded.with-title', [
|
|
m('p.title', '#' + e.public_id + ' v' + e.version),
|
|
m('.field', [ m('.field-label', 'Note'), m('p', e.note) ]),
|
|
e.host ? m('.field', [ m('.field-label', 'Host'), m('p', e.host) ]) : null,
|
|
e.user ? m('.field', [ m('.field-label', 'User'), m('p', e.user) ]) : null,
|
|
e.context ? m('.field', [ m('.field-label', 'Context'), m('p', e.context) ]) : null,
|
|
e.repos?.length ? m('.field', [
|
|
m('.field-label', 'Repos'),
|
|
m('div', e.repos.map(r => m('span.nes-badge', m('span', r)))),
|
|
]) : null,
|
|
e.tags?.length ? m('.field', [
|
|
m('.field-label', 'Tags'),
|
|
m('div', e.tags.map(t => m('span.nes-badge', m('span', t)))),
|
|
]) : null,
|
|
m('.field', [ m('.field-label', 'Created'), m('p', e.created) ]),
|
|
e.delete_timestamp ? m('.field', [ m('.field-label', 'Deleted'), m('p', e.delete_timestamp) ]) : null,
|
|
]),
|
|
];
|
|
},
|
|
};
|
|
|
|
m.route(document.getElementById('app'), '/', {
|
|
'/': List,
|
|
'/flashcard/:id': Detail,
|
|
});
|