112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import m from "https://esm.sh/mithril@2.3.8";
|
|
|
|
const API = "/api/v1/flashcards";
|
|
|
|
const Card = {
|
|
view: function (v) {
|
|
return m("li", v.attrs.card.id);
|
|
},
|
|
};
|
|
|
|
const List = {
|
|
oninit: async function (v) {
|
|
v.state.cards = [];
|
|
v.state.loading = true;
|
|
const res = await fetch(API);
|
|
const data = await res.json();
|
|
v.state.cards = data.flashcards || [];
|
|
v.state.loading = false;
|
|
m.redraw();
|
|
},
|
|
view: function (v) {
|
|
if (v.state.loading) {
|
|
return m("h1", "loading");
|
|
}
|
|
const cards = m(
|
|
".cards-list",
|
|
v.state.cards.map((c) => m(Card, { card: c })),
|
|
);
|
|
return m("ol", cards);
|
|
},
|
|
};
|
|
|
|
const Detail = {
|
|
oninit: async function (v) {
|
|
v.state.flashcard = null;
|
|
v.state.loading = true;
|
|
v.state.flashcard = await findFlashCardByID(v.attrs.id);
|
|
v.state.loading = false;
|
|
m.redraw();
|
|
},
|
|
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,
|
|
});
|