wirc-frontend.git

1) type int = number;
2) type float = number;
3) 

4) 

5) var _conf: any = null;

6) 

7) 
8) function get_timestamp(): int
9) {
10) 	return Math.floor(Date.now()/1000);
11) }
12) 

13) 

14) function hash_string_to_unit(x: string): float
15) {
16) 	return (x.split("").reduce((x, y) => ((x + y.charCodeAt(0)) % 32), 0) / 32);
17) }
18) 

19) 

20) function get_usercolor(name: string): string
21) {
22) 	const hue: float = hash_string_to_unit(name);
23) 	return `hsl(${(hue*360).toFixed(2)},50%,75%)`;
24) }
25) 

26) 

27) async function backend_call(connection_id: (null | string), action: string, data: any): Promise<any>

28) {

29) 	const response = await fetch
30) 	(

31) 		`${_conf["backend"]["scheme"]}://${_conf["backend"]["host"]}:${_conf["backend"]["port"].toFixed(0)}/${_conf["backend"]["path"]}`,

32) 		{
33) 			"method": "POST",

34) 			"body": JSON.stringify({"id": connection_id, "action": action, "data": data}),

35) 		}
36) 	);

37) 	if (response.ok)
38) 	{

39) 		return response.json();
40) 	}

41) 	else
42) 	{

43) 		console.error(response.text());
44) 		return Promise.reject<any>(new Error("backend call failed"));
45) 	}
46) }
47) 

48) enum enum_state
49) {
50) 	offline = "offline",
51) 	connecting = "connecting",
52) 	online = "online",
53) }
54) 
55) 

56) type type_event =

57) {

58) 	timestamp: int;
59) 	kind: string;
60) 	data: any;
61) };
62) 
63) 
64) type type_entry =
65) {
66) 	timestamp: int;
67) 	sender: string;
68) 	content: string;

69) };
70) 
71) 

72) type type_user =

73) {

74) 	name: string;
75) 	role: string;

76) };
77) 

78) 

79) type type_channel =

80) {

81) 	users: Array<type_user>;
82) 	entries: Array<type_entry>;
83) };
84) 
85) 
86) type type_query =
87) {
88) 	entries: Array<type_entry>;
89) };
90) 
91) 
92) type type_model =
93) {
94) 	state: enum_state;
95) 	connection_id: (null | string);
96) 	nickname: (null | string);
97) 	channels: Record<string, type_channel>;
98) 	queries: Record<string, type_query>;
99) 	active: (null | {kind: string, name: string});
100) };
101) 
102) 
103) 
104) function model_set_state(model: type_model, state: enum_state): void
105) {
106) 	model.state = state;
107) 	view_update_state(model);

108) }
109) 

110) 

111) function model_process_event(model: type_model, event: type_event): void

112) {

113) 	switch (event.kind)

114) 	{

115) 		default:

116) 		{

117) 			console.warn("unhandled event kind: " + event.kind);
118) 			break;
119) 		}
120) 		case "userlist":
121) 		{
122) 			model.channels[event.data["channel"]].users = event.data["users"];
123) 			break;
124) 		}
125) 		case "message_channel":
126) 		{
127) 			model.channels[event.data["channel"]].entries.push
128) 			({
129) 				"timestamp": event.timestamp,
130) 				"sender": event.data["sender"],
131) 				"content": event.data["content"],
132) 			});
133) 			break;
134) 		}
135) 		case "message_query":
136) 		{
137) 			if (! model.queries.hasOwnProperty(event.data["sender"]))

138) 			{

139) 				model.queries[event.data["sender"]] = {"entries": []};

140) 			}

141) 			else

142) 			{

143) 				// do nothing

144) 			}

145) 			model.queries[event.data["sender"]].entries.push
146) 			({
147) 				"timestamp": event.timestamp,
148) 				"sender": event.data["sender"],
149) 				"content": event.data["content"],
150) 			});
151) 			break;
152) 		}
153) 	}
154) }
155) 
156) 
157) function view_update_state(model: type_model): void
158) {
159) 	document.querySelector("body").setAttribute("class", model.state);
160) }
161) 
162) 
163) function view_update_spots(model: type_model): void
164) {
165) 	let dom_spots: HTMLUListElement = document.querySelector("#spots");
166) 	const spots: Array<{kind: string; name: string}> =  (
167) 		[]
168) 		.concat(Object.keys(model.channels).map((name) => ({"kind": "channel", "name": name})))
169) 		.concat(Object.keys(model.queries).map((name) => ({"kind": "channel", "name": name})))
170) 	);
171) 	dom_spots.textContent = "";
172) 	for (const spot of spots)
173) 	{
174) 		let dom_spot: HTMLLIElement = document.createElement("li");
175) 		dom_spot.classList.add("spot");
176) 		{
177) 			let dom_name: HTMLSpanElement = document.createElement("span");
178) 			dom_name.classList.add("spot_sender");
179) 			dom_name.textContent = spot.name;
180) 			dom_spot.appendChild(dom_name);

181) 		}

182) 		dom_spots.appendChild(dom_spot);

183) 	}

184) }
185) 
186) 
187) function view_update_entries(model: type_model): void
188) {
189) 	let dom_entries: HTMLUListElement = document.querySelector("#entries");
190) 	let source: Array<type_entry>;
191) 	switch (model.active.kind)

192) 	{

193) 		case "channel":
194) 		{
195) 			source = model.channels[model.active.name].entries;
196) 			break;
197) 		}
198) 		case "query":
199) 		{
200) 			source = model.queries[model.active.name].entries;
201) 			break;
202) 		}

203) 	}

204) 	dom_entries.textContent = "";
205) 	for (const entry of model.channels[model.active.name].entries)

206) 	{

207) 		let dom_entry: HTMLLIElement = document.createElement("li");
208) 		dom_entry.classList.add("entry");
209) 		{
210) 			let dom_time: HTMLSpanElement = document.createElement("span");
211) 			dom_time.classList.add("entry_time");
212) 			dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
213) 			dom_entry.appendChild(dom_time);
214) 		}
215) 		{
216) 			let dom_sender: HTMLSpanElement = document.createElement("span");
217) 			dom_sender.classList.add("entry_sender");
218) 			dom_sender.style.color = get_usercolor(entry.sender);
219) 			dom_sender.textContent = entry.sender;
220) 			dom_entry.appendChild(dom_sender);
221) 		}
222) 		{
223) 			let dom_content: HTMLSpanElement = document.createElement("span");
224) 			dom_content.classList.add("entry_content");
225) 			dom_content.textContent = entry.content;
226) 			dom_entry.appendChild(dom_content);
227) 		}
228) 		dom_entries.appendChild(dom_entry);

229) 	}

230) 	dom_entries.scrollTo(0, dom_entries["scrollTopMax"]);

231) }
232) 

233) 

234) function view_update_users(model: type_model): void

235) {
236) 	let dom_users: HTMLUListElement = document.querySelector("#users");
237) 	dom_users.textContent = "";

238) 	let source: Array<type_user>;
239) 	switch (model.active.kind)
240) 	{
241) 		default:
242) 		{
243) 			console.warn("unhandled kind: " + model.active.kind);
244) 			source = [];
245) 			break;
246) 		}
247) 		case "channel":
248) 		{
249) 			source = model.channels[model.active.name].users;
250) 			break;
251) 		}
252) 		case "query":
253) 		{
254) 			source = [{"name": model.nickname, "role": ""}, {"name": model.active.name, "role": ""}];
255) 			break;
256) 		}
257) 	}
258) 	const users_sorted: Array<type_user> = source.sort

259) 	(
260) 		(x, y) =>
261) 		(

262) 			(x.role >= y.role)
263) 			? -1
264) 			: (
265) 				(x.role === y.role)
266) 				? ((x.name < y.name) ? -1 : +1)
267) 				: +1
268) 			)
269) 		)
270) 	);

271) 	for (const user of users_sorted)
272) 	{

273) 		let dom_user: HTMLLIElement = document.createElement("li");
274) 		dom_user.classList.add("user");
275) 		{
276) 			let dom_role: HTMLSpanElement = document.createElement("span");
277) 			dom_role.textContent = user.role;
278) 			dom_user.appendChild(dom_role);
279) 		}
280) 		{
281) 			let dom_name: HTMLSpanElement = document.createElement("span");
282) 			dom_name.textContent = user.name;
283) 			dom_name.style.color = get_usercolor(user.name);
284) 			dom_user.appendChild(dom_name);
285) 		}
286) 		dom_users.appendChild(dom_user);
287) 	}
288) }
289) 

290) 

291) function view_setup(model: type_model): void

292) {
293) 	document.querySelector<HTMLInputElement>("#channel").value = _conf["irc"]["predefined_channel"];
294) 	document.querySelector<HTMLInputElement>("#nickname").value = (_conf["irc"]["predefined_nickname_prefix"] + (Math.random()*100).toFixed(0));

295) 	setInterval
296) 	(
297) 		async () =>
298) 		{

299) 			switch (model.state)

300) 			{
301) 				default:
302) 				{

303) 					throw (new Error("invalid state: " + model.state));

304) 					break;
305) 				}
306) 				case enum_state.offline:
307) 				{

308) 					// do nothing
309) 					break;

310) 				}
311) 				case enum_state.connecting:
312) 				{

313) 					const ready: boolean = await backend_call(model.connection_id, "check", null);

314) 					if (ready)
315) 					{

316) 						model_set_state(model, enum_state.online);

317) 					}
318) 					else
319) 					{
320) 						// do nothing

321) 					}
322) 					break;

323) 				}
324) 				case enum_state.online:
325) 				{

326) 					const events: Array<type_event> = await backend_call(model.connection_id, "fetch", null);
327) 					for (const event of events)

328) 					{

329) 						model_process_event(model, event);

330) 					}

331) 					view_update_users(model);
332) 					view_update_entries(model);
333) 					view_update_spots(model);

334) 					break;

335) 				}

336) 			}
337) 		},
338) 		_conf["settings"]["poll_interval_in_milliseconds"]
339) 	);

340) 	model_set_state(model, enum_state.offline);

341) }
342) 

343) 

344) function control_setup(model: type_model): void

345) {

346) 	document.querySelector("#connect > form").addEventListener
347) 	(

348) 		"submit",

349) 		async (event) =>
350) 		{

351) 			event.preventDefault();

352) 			
353) 			model_set_state(model, enum_state.connecting);
354) 			

355) 			let dom_nickname: HTMLInputElement = document.querySelector<HTMLInputElement>("#nickname");
356) 			let dom_channel: HTMLInputElement = document.querySelector<HTMLInputElement>("#channel");
357) 			const nickname: string = dom_nickname.value;

358) 			const channel_names: Array<string> = dom_channel.value.split(",");
359) 			

360) 			const connection_id: string = await backend_call
361) 			(

362) 				model.connection_id,

363) 				"connect",
364) 				{
365) 					"server": _conf["irc"]["server"],

366) 					"channels": channel_names,

367) 					"nickname": nickname,
368) 				}
369) 			);

370) 			model.connection_id = connection_id;
371) 			model.nickname = nickname;
372) 			for (const channel_name of channel_names)
373) 			{
374) 				model.channels[channel_name] =
375) 				{
376) 					"users": [],
377) 					"entries": [],
378) 				};
379) 			}
380) 			// TODO: can crash
381) 			model.active = {"kind": "channel", "name": channel_names[0]};

382) 		}
383) 	);

384) 	document.querySelector("#disconnect").addEventListener
385) 	(

386) 		"click",

387) 		async (event) =>
388) 		{
389) 			await backend_call
390) 			(

391) 				model.connection_id,

392) 				"disconnect",
393) 				null
394) 			);

395) 			model_set_state(model, enum_state.offline);
396) 			model.connection_id = null;

397) 		}
398) 	);

399) 	document.querySelector("#main > form").addEventListener
400) 	(

401) 		"submit",

402) 		async (e) =>

403) 		{

404) 			event.preventDefault();

405) 			
406) 			let dom_content: HTMLInputElement = document.querySelector<HTMLInputElement>("#content");
407) 			const content: string = dom_content.value;
408) 			dom_content.value = "";
409) 			dom_content.focus();
410) 			switch (model.active.kind)

411) 			{

412) 				case "channel":
413) 				{
414) 					const event: type_event =
415) 					{
416) 						"timestamp": get_timestamp(),
417) 						"kind": "message_channel",
418) 						"data":
419) 						{
420) 							"channel": model.active.name,
421) 							"sender": model.nickname,
422) 							"content": content,
423) 						}
424) 					};
425) 					model_process_event(model, event);
426) 					view_update_entries(model);
427) 					backend_call
428) 					(
429) 						model.connection_id,
430) 						"send_channel",
431) 						{
432) 							"channel": model.active.name,
433) 							"content": content,
434) 						}
435) 					);
436) 					break;

437) 				}

438) 				case "query":

439) 				{

440) 					/*
441) 					const event: type_event =
442) 					{
443) 						"timestamp": get_timestamp(),
444) 						"kind": "message_query",
445) 						"data":
446) 						{
447) 							"sender": model.nickname,
448) 							"message": message,
449) 						}
450) 					};
451) 					model_process_event(model, event);
452) 					 */
453) 					backend_call
454) 					(
455) 						model.connection_id,
456) 						"send_query",
457) 						{
458) 							"receiver": model.active.name,
459) 							"content": content,
460) 						}
461) 					);
462) 					break;

463) 				}

464) 			}

465) 		}
466) 	);
467) }
468) 

469) 

470) async function main(): Promise<void>
471) {
472) 	_conf = await fetch("conf.json").then(x => x.json());

473) 	const model: type_model =
474) 	{
475) 		"state": enum_state.offline,
476) 		"connection_id": null,
477) 		"nickname": null,
478) 		"channels": {},
479) 		"queries": {},
480) 		"active": null,
481) 	};
482) 	view_setup(model);
483) 	control_setup(model);

484) }
485) 

486) 

487) function init(): void
488) {

489) 	document.addEventListener
490) 	(

491) 		"DOMContentLoaded",

492) 		(event) => {main();}