ui recent close #15

ismism.ts/ui/index/bind.ts

@@ -175,11 +175,30 @@ function erec(
 	efund(d[2], fund)
 }
 
+function erecent(
+	el: HTMLElement,
+	rec: Rec
+) {
+	const [t, [
+		bwork, bworker, bfund, dwork, dworker, dfund,
+	]] = template("recent", [
+		"tab.work", "tab.worker", "tab.fund", "rec.work", "rec.worker", "rec.fund",
+	])
+
+	erec([bwork, bworker, bfund], [dwork, dworker, dfund], rec)
+
+	el.appendChild(t)
+}
+
 function eagenda(
 	el: HTMLElement,
-	agenda: Agenda[]
+	agenda: Agenda[],
+	recent?: Rec,
 ) {
 	el.innerHTML = ""
+
+	if (recent) erecent(el, recent)
+
 	for (const {
 		_id, name, tag, utc, dat, fund, budget, expense, detail, goal
 	} of agenda) {
@@ -317,14 +336,11 @@ window.addEventListener("hashchange", () => {
 	etag(document.querySelector(".title div.tag")!, tags_all, tags_count)
 	const main = document.getElementById("main")!
 	switch (hash[0]) {
+		case undefined: eagenda(main, agenda, recent); break
 		case "u": json(hash).then(u => euser(main, parseInt(hash.substring(1)), u)); break
 		case "s": json(hash).then(s => esoc(main, parseInt(hash.substring(1)), s)); break
-		case "a": eagenda(main, agenda.filter(a =>
+		case "a": eagenda(main, agenda.filter(a => a._id === parseInt(hash.substring(1)))); break
-			a._id === parseInt(hash.substring(1))
+		default: eagenda(main, agenda.filter(a => a.tag.includes(hash as Tag))); break
-		)); break
-		default: eagenda(main, agenda.filter(a =>
-			hash === "" || a.tag.includes(hash as Tag)
-		)); break
 	}
 })
 

ismism.ts/ui/index/index.html

@@ -400,6 +400,10 @@
 		margin-top: 10px;
 	}
 
+	div.rec-tab.recent {
+		margin-top: 0;
+	}
+
 	div.rec-tab>button {
 		padding: 8px;
 		color: var(--black);
@@ -472,6 +476,12 @@
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 	}
 
+	section.recent {
+		padding: 8px 16px;
+		margin: auto;
+		max-width: 640px;
+	}
+
 	article {
 		margin: 16px;
 		padding: 8px 16px;
@@ -546,6 +556,18 @@
 	</div>
 </template>
 <template id="video"><a href="" target="_blank" rel="noopener" class="video">title</a></template>
+<template id="recent">
+	<section class="recent">
+		<div class="rec-tab recent">
+			<button class="tab work"><span>123</span> 条工作日志 ❯</button>
+			<button class="tab worker"><span>123</span> 次活动参与 ❯</button>
+			<button class="tab fund"><span>123</span> 次活动支持 ❯</button>
+		</div>
+		<div class="rec work"></div>
+		<div class="rec worker"></div>
+		<div class="rec fund"></div>
+	</section>
+</template>
 <template id="agenda">
 	<article>
 		<section>