77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
/**
|
|
* rCal applet definitions — Next Event, Timeline View.
|
|
*/
|
|
|
|
import type { AppletDefinition, AppletLiveData } from "../../shared/applet-types";
|
|
import { projectSpace } from "../../shared/markwhen";
|
|
|
|
const nextEvent: AppletDefinition = {
|
|
id: "next-event",
|
|
label: "Next Event",
|
|
icon: "📅",
|
|
accentColor: "#2563eb",
|
|
ports: [
|
|
{ name: "events-in", type: "json", direction: "input" },
|
|
{ name: "event-out", type: "json", direction: "output" },
|
|
],
|
|
renderCompact(data: AppletLiveData): string {
|
|
const { snapshot } = data;
|
|
const title = (snapshot.title as string) || "No upcoming events";
|
|
const time = (snapshot.time as string) || "";
|
|
const location = (snapshot.location as string) || "";
|
|
|
|
return `
|
|
<div>
|
|
<div style="font-size:13px;font-weight:600;margin-bottom:4px">${title}</div>
|
|
${time ? `<div style="font-size:11px;color:#60a5fa;margin-bottom:2px">🕐 ${time}</div>` : ""}
|
|
${location ? `<div style="font-size:11px;color:#94a3b8">📍 ${location}</div>` : ""}
|
|
${!time && !location ? `<div style="font-size:11px;color:#94a3b8;font-style:italic;margin-top:8px;text-align:center">Connect a calendar feed</div>` : ""}
|
|
</div>
|
|
`;
|
|
},
|
|
onInputReceived(portName, value, ctx) {
|
|
if (portName === "events-in" && Array.isArray(value) && value.length > 0) {
|
|
ctx.emitOutput("event-out", value[0]);
|
|
}
|
|
},
|
|
};
|
|
|
|
const timelineView: AppletDefinition = {
|
|
id: "timeline-view",
|
|
label: "Timeline",
|
|
icon: "🕒",
|
|
accentColor: "#2563eb",
|
|
ports: [
|
|
{ name: "range-in", type: "json", direction: "input" },
|
|
{ name: "mw-out", type: "json", direction: "output" },
|
|
],
|
|
renderCompact(data: AppletLiveData): string {
|
|
const count = Number(data.snapshot.count ?? 0);
|
|
const preview = (data.snapshot.preview as string) || "";
|
|
return `
|
|
<div>
|
|
<div style="font-size:13px;font-weight:600;margin-bottom:4px">${count} event(s)</div>
|
|
<div style="font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${preview || "Open to render timeline"}</div>
|
|
</div>
|
|
`;
|
|
},
|
|
async fetchLiveData(space: string) {
|
|
const projection = await projectSpace(space, { modules: ["rcal"] });
|
|
const first = projection.events[0];
|
|
return {
|
|
count: projection.count,
|
|
preview: first ? first.title : "",
|
|
mw: projection.text,
|
|
};
|
|
},
|
|
onInputReceived(portName, value, ctx) {
|
|
if (portName === "range-in" && value && typeof value === "object") {
|
|
const range = value as { from?: number; to?: number };
|
|
projectSpace(ctx.space, { modules: ["rcal"], from: range.from, to: range.to })
|
|
.then(p => ctx.emitOutput("mw-out", p.text));
|
|
}
|
|
},
|
|
};
|
|
|
|
export const calApplets: AppletDefinition[] = [nextEvent, timelineView];
|