ui hashtag #15

ismism.ts/src/typ.ts

@@ -17,7 +17,7 @@ export type Soc = {
 }
 export const sid_ofs = 10000
 
-type Tag = ""
+export type Tag = ""
 	| "进行中" | "已结束"
 	| "设施建设" | "物资配给" | "软件开发"
 	| "苏州" | "成都"

ismism.ts/ui/index/bind.ts

@@ -1,8 +1,25 @@
 // deno-lint-ignore-file no-window-prefix
-import { Agenda } from "../../../cli/json.ts"
-import { utc_medium, utc_short } from "../../src/date.ts"
+import { Agenda, Rec } from "../../../cli/json.ts"
+import { utc_medium } from "../../src/date.ts"
+import { Tag } from "../../src/typ.ts"
 
 let hash = ""
+let agenda: Agenda[]
+let recent: Rec
+const tags_all: Tag[] = [
+	"", "进行中", "已结束",
+	"设施建设", "物资配给", "软件开发",
+	"苏州", "成都",
+	"工益公益", "星星家园"
+]
+const tags_count: number[] = []
+
+async function json(
+	name: string
+) {
+	const r = await fetch(`/json/${name}.json`)
+	return JSON.parse(await r.text())
+}
 
 function template(
 	tid: string,
@@ -34,20 +51,46 @@ function etag(
 
 function eagenda(
 	el: HTMLElement,
-	{ _id, name }: Agenda
+	agenda: Agenda[]
 ) {
 	el.innerHTML = ""
-	const [t, [a, c, s, tag, date]] = template("agenda", ["idname", "id", "name", "tag", "date"])
-	c.innerText = (a as HTMLLinkElement).href = `#${_id}`
-	s.innerText = name
-	etag(tag, ["进行中", "然后", "1232"])
-	date.innerText = `公示时间: ${utc_medium(Date.now())}\n更新时间：${utc_short(Date.now())}`
-	el.appendChild(t)
+	for (const { _id, name, tag, utc } of agenda) {
+		const [t, [a, c, s, et, ed]] = template("agenda", ["idname", "id", "name", "tag", "date"]);
+		(a as HTMLLinkElement).href = `#a${_id}`
+		c.innerText = `a${_id}`
+		if (hash === c.innerText) c.classList.add("darkgray")
+		else c.classList.remove("darkgray")
+		s.innerText = name
+		etag(et, tag)
+		ed.innerText = `公示时间: ${utc_medium(utc)}\n更新时间：${utc_medium(Date.now())}`
+		el.appendChild(t)
+	}
 }
 
 window.addEventListener("hashchange", () => {
 	hash = decodeURI(window.location.hash).substring(1)
-	etag(document.querySelector(".title div.tag")!, ["", "1232", "然后"], [3, 5, 6])
-	eagenda(document.getElementById("main")!, { _id: 3, name: "标题标题" } as Agenda)
+	etag(document.querySelector(".title div.tag")!, tags_all, tags_count)
+	switch (hash[0]) {
+		case "u": break
+		case "s": break
+		case "a": eagenda(document.getElementById("main")!, agenda.filter(a =>
+			a._id === parseInt(hash.substring(1))
+		)); break
+		default: eagenda(document.getElementById("main")!, agenda.filter(a =>
+			hash === "" || a.tag.includes(hash as Tag)
+		)); break
+	}
 })
-window.dispatchEvent(new Event("hashchange"))
+
+async function load(
+) {
+	[agenda, recent] = await Promise.all([
+		json("agenda"), json("recent"),
+	])
+	console.log(`loaded ${agenda.length} agenda`)
+	tags_count.push(agenda.length, ...tags_all.slice(1).map(
+		t => agenda.filter(a => a.tag.includes(t)).length)
+	)
+	window.dispatchEvent(new Event("hashchange"))
+}
+load()

ismism.ts/ui/index/index.html

@@ -91,10 +91,9 @@
 
 	a.idname code.id {
 		padding: 0.1em 8px;
+		border: 1px solid var(--black);
 		border-radius: 4px;
-		color: var(--lightgray);
-		background: var(--darkgray);
-		text-align: center;
+		color: var(--black);
 	}
 
 	a.idname span.name {
@@ -213,46 +212,6 @@
 		<div class="tag"></div>
 	</div>
 	<div id="main"></div>
-	<div>
-		main is here
-		<p>
-			p is here
-		</p>
-		<code>code is here</code>
-		<br>
-		<a href="#test" class="video">a is here</a>
-		<br>
-		<a href="https://ismist.cn" class="video">ismist.cn is hereismist.cn is hereismist.cn is hereismist.cn is
-			hereismist.cn is
-			hereismist.cn is hereismist.cn is hereismist.cn is here</a>
-		<hr>
-		<span style="font-size: var(--small);">small is here</span>
-		<span style="font-size: var(--normal);">normal is here</span>
-		<span style="font-size: var(--large);">large is here</span>
-		<article>
-			<section>
-				section is here
-				<div class="tag"></div>
-			</section>
-			<section>
-				section is here
-			</section>
-			<hr>
-			article is here
-		</article>
-		<article>
-			<section>
-				<div class="tag"></div>
-				section is here
-			</section>
-			<section>
-				<a class="tag" href="#notag">notag</a>
-				section is here
-			</section>
-			<hr>
-			article is here
-		</article>
-	</div>
 	<footer>
 		footer is here
 	</footer>