ui soc #15

ismism.ts/ui/index/bind.ts

@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-window-prefix
-import { Agenda, Rec, User } from "../../../cli/json.ts"
+import { Agenda, Rec, Soc, User } from "../../../cli/json.ts"
 import { utc_medium, utc_short } from "../../src/date.ts"
 import { Goal, Tag, Rec as Id } from "../../src/typ.ts"
 
@@ -167,7 +167,6 @@ function erec(
 	const count = [work.rec.length, worker.rec.length, fund.rec.length]
 	b.forEach((btn, n) => {
 		btn.getElementsByTagName("span")[0].innerText = `${count[n]}`
-		d[n].style.display = "none"
 		btn.addEventListener("click", () => toggle(btn, d[n]))
 	})
 	const role = new Map(worker.rec.map(r => [r.uid, r.role]))
@@ -267,10 +266,45 @@ function euser(
 
 	if (soc.length === 0) csoc.innerText += "无"
 	else for (const s of soc) {
-		const [_, [a]] = template("member", ["member"]);
+		const a = csoc.appendChild(document.createElement("a"))
-		(a as HTMLAnchorElement).href = `#s${s._id}`
+		a.classList.add("member-soc")
+		a.href = `#s${s._id}`
 		a.innerText = s.name
-		csoc.appendChild(a)
+	}
+
+	erec([bwork, bworker, bfund], [dwork, dworker, dfund], rec)
+
+	el.appendChild(t)
+}
+function esoc(
+	el: HTMLElement,
+	sid: number,
+	{ name, utc, uid, uname, rec }: Soc
+) {
+	el.innerHTML = ""
+	const [t, [
+		cidname, cid, cname, cdate, cuser,
+		bwork, bworker, bfund, dwork, dworker, dfund,
+	]] = template("soc", [
+		"idname", "id", "name", "date", "user",
+		"tab.work", "tab.worker", "tab.fund", "rec.work", "rec.worker", "rec.fund",
+	]);
+
+	(cidname as HTMLAnchorElement).href = `#s${sid}`
+	cid.innerText = `s${sid}`
+	if (hash === cid.innerText) cid.classList.add("darkgray")
+	else cid.classList.remove("darkgray")
+	cname.innerText = name
+	cdate.innerText = `注册时间: ${utc_medium(utc)}`
+
+	const user = new Map(uname)
+	cuser.innerText = uid.length === 0 ? "社团成员：无" : `社团成员(${uid.length})：`
+	for (const u of uid) {
+		const a = cuser.appendChild(document.createElement("a"))
+		a.classList.add("member-user")
+		a.href = `#u${u}`
+		a.innerText = user.get(u)!
+		cuser.appendChild(a)
 	}
 
 	erec([bwork, bworker, bfund], [dwork, dworker, dfund], rec)
@@ -284,7 +318,7 @@ window.addEventListener("hashchange", () => {
 	const main = document.getElementById("main")!
 	switch (hash[0]) {
 		case "u": json(hash).then(u => euser(main, parseInt(hash.substring(1)), u)); break
-		case "s": break
+		case "s": json(hash).then(s => esoc(main, parseInt(hash.substring(1)), s)); break
 		case "a": eagenda(main, agenda.filter(a =>
 			a._id === parseInt(hash.substring(1))
 		)); break

ismism.ts/ui/index/index.html

@@ -149,12 +149,21 @@
 		background: var(--purple);
 	}
 
-	a.member {
+	a.member-soc {
 		color: var(--white);
 		background: var(--black);
+		margin: 0.5ch 0.5ch 0 0;
 		padding: 0.1em 8px;
 	}
 
+	a.member-user::after {
+		content: ", ";
+	}
+
+	a.member-user:last-child:after {
+		content: "";
+	}
+
 	button.photo-prev,
 	button.photo-next,
 	button.tab {
@@ -178,7 +187,8 @@
 		a.video:hover,
 		a.detail:hover,
 		a.initial:hover,
-		a.uname:hover {
+		a.uname:hover,
+		a.member-user:hover {
 			color: var(--amber);
 		}
 
@@ -188,7 +198,7 @@
 
 		a.tag:hover,
 		a.aname:hover,
-		a.member:hover,
+		a.member-soc:hover,
 		button.photo-prev:hover,
 		button.photo-next:hover,
 		button.tab:hover {
@@ -402,6 +412,7 @@
 	}
 
 	div.rec {
+		display: none;
 		background: var(--lightgray);
 		border-radius: 16px;
 		padding: 16px 8px;
@@ -535,7 +546,6 @@
 	</div>
 </template>
 <template id="video"><a href="" target="_blank" rel="noopener" class="video">title</a></template>
-<template id="member"><a class="member">member</a></template>
 <template id="agenda">
 	<article>
 		<section>
@@ -607,6 +617,25 @@
 		</section>
 	</article>
 </template>
+<template id="soc">
+	<article>
+		<section>
+			<a class="idname"><code class="id">id</code> <span class="name">name</span></a>
+			<div class="date">date</div>
+			<div class="user">社团成员：</div>
+		</section>
+		<section>
+			<div class="rec-tab">
+				<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>
+	</article>
+</template>
 
 <body>
 	<div class="title">