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_spot =
65) {
66) 	kind: string;
67) 	name: string;
68) };
69) 
70) 

71) type type_entry =
72) {
73) 	timestamp: int;
74) 	sender: string;
75) 	content: string;

76) };
77) 
78) 

79) type type_user =

80) {

81) 	name: string;
82) 	role: string;

83) };
84) 

85) 

86) type type_channel =

87) {

88) 	users: Array<type_user>;
89) 	entries: Array<type_entry>;
90) };
91) 
92) 
93) type type_query =
94) {
95) 	entries: Array<type_entry>;
96) };
97) 
98) 
99) type type_model =
100) {
101) 	state: enum_state;
102) 	connection_id: (null | string);
103) 	nickname: (null | string);
104) 	channels: Record<string, type_channel>;
105) 	queries: Record<string, type_query>;

106) 	active: (null | type_spot);

107) };
108) 
109) 
110) 
111) function model_set_state(model: type_model, state: enum_state): void
112) {
113) 	model.state = state;
114) 	view_update_state(model);

115) }
116) 

117) 

118) function model_set_active(model: type_model, spot: type_spot): void

119) {

120) 	model.active = spot;
121) 	view_update_spots(model);
122) 	view_update_entries(model);
123) 	view_update_users(model);
124) }
125) 
126) 
127) function model_process_events(model: type_model, events: Array<type_event>): void
128) {
129) 	let shall_update_spots: boolean = false;
130) 	let shall_update_entries: boolean = false;
131) 	let shall_update_users: boolean = false;
132) 	for (const event of events)

133) 	{

134) 		switch (event.kind)

135) 		{

136) 			default:

137) 			{

138) 				console.warn("unhandled event kind: " + event.kind);
139) 				break;

140) 			}

141) 			case "userlist":

142) 			{

143) 				model.channels[event.data["channel"]].users = event.data["users"];
144) 				shall_update_users = true;
145) 				break;
146) 			}
147) 			case "message_channel":
148) 			{
149) 				model.channels[event.data["channel"]].entries.push
150) 				({
151) 					"timestamp": event.timestamp,
152) 					"sender": event.data["sender"],
153) 					"content": event.data["content"],
154) 				});
155) 				shall_update_entries = true;
156) 				break;
157) 			}
158) 			case "message_query":
159) 			{
160) 				if (! model.queries.hasOwnProperty(event.data["user_name"]))
161) 				{
162) 					model.queries[event.data["user_name"]] = {"entries": []};
163) 					shall_update_spots = true;
164) 				}
165) 				else
166) 				{
167) 					// do nothing
168) 				}
169) 				model.queries[event.data["user_name"]].entries.push
170) 				({
171) 					"timestamp": event.timestamp,
172) 					"sender": event.data["sender"],
173) 					"content": event.data["content"],
174) 				});
175) 				shall_update_entries = true;
176) 				break;

177) 			}

178) 		}
179) 	}

180) 	
181) 	// update view
182) 	{
183) 		if (shall_update_spots) view_update_spots(model);
184) 		if (shall_update_entries) view_update_entries(model);
185) 		if (shall_update_users) view_update_users(model);
186) 	}

187) }
188) 
189) 

190) 

191) function view_update_state(model: type_model): void
192) {
193) 	document.querySelector("body").setAttribute("class", model.state);
194) }
195) 
196) 
197) function view_update_spots(model: type_model): void
198) {
199) 	let dom_spots: HTMLUListElement = document.querySelector("#spots");

200) 	const spots: Array<type_spot> = (

201) 		[]
202) 		.concat(Object.keys(model.channels).map((name) => ({"kind": "channel", "name": name})))

203) 		.concat(Object.keys(model.queries).map((name) => ({"kind": "query", "name": name})))

204) 	);
205) 	dom_spots.textContent = "";
206) 	for (const spot of spots)
207) 	{
208) 		let dom_spot: HTMLLIElement = document.createElement("li");
209) 		dom_spot.classList.add("spot");

210) 		{
211) 			let dom_kind: HTMLSpanElement = document.createElement("span");
212) 			dom_kind.classList.add("spot_kind");
213) 			dom_kind.textContent = spot.kind;
214) 			dom_spot.appendChild(dom_kind);
215) 		}

216) 		{
217) 			let dom_name: HTMLSpanElement = document.createElement("span");
218) 			dom_name.classList.add("spot_sender");
219) 			dom_name.textContent = spot.name;
220) 			dom_spot.appendChild(dom_name);

221) 		}

222) 		dom_spot.classList.toggle("spot_active", ((spot.kind === model.active.kind) && (spot.name === model.active.name)));
223) 		dom_spot.addEventListener
224) 		(
225) 			"click",
226) 			(e) =>
227) 			{
228) 				model_set_active(model, spot);
229) 			}
230) 		);

231) 		dom_spots.appendChild(dom_spot);

232) 	}

233) }
234) 
235) 
236) function view_update_entries(model: type_model): void
237) {
238) 	let dom_entries: HTMLUListElement = document.querySelector("#entries");

239) 	let entries: Array<type_entry>;

240) 	switch (model.active.kind)

241) 	{

242) 		case "channel":
243) 		{

244) 			entries = model.channels[model.active.name].entries;

245) 			break;
246) 		}
247) 		case "query":
248) 		{

249) 			entries = model.queries[model.active.name].entries;

250) 			break;
251) 		}

252) 	}

253) 	dom_entries.textContent = "";

254) 	for (const entry of entries)

255) 	{

256) 		let dom_entry: HTMLLIElement = document.createElement("li");
257) 		dom_entry.classList.add("entry");
258) 		{
259) 			let dom_time: HTMLSpanElement = document.createElement("span");
260) 			dom_time.classList.add("entry_time");
261) 			dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
262) 			dom_entry.appendChild(dom_time);
263) 		}
264) 		{
265) 			let dom_sender: HTMLSpanElement = document.createElement("span");
266) 			dom_sender.classList.add("entry_sender");
267) 			dom_sender.style.color = get_usercolor(entry.sender);
268) 			dom_sender.textContent = entry.sender;
269) 			dom_entry.appendChild(dom_sender);
270) 		}
271) 		{
272) 			let dom_content: HTMLSpanElement = document.createElement("span");
273) 			dom_content.classList.add("entry_content");
274) 			dom_content.textContent = entry.content;
275) 			dom_entry.appendChild(dom_content);
276) 		}
277) 		dom_entries.appendChild(dom_entry);

278) 	}

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

280) }
281) 

282) 

283) function view_update_users(model: type_model): void

284) {
285) 	let dom_users: HTMLUListElement = document.querySelector("#users");
286) 	dom_users.textContent = "";

287) 	let users: Array<type_user>;

288) 	switch (model.active.kind)
289) 	{
290) 		default:
291) 		{
292) 			console.warn("unhandled kind: " + model.active.kind);

293) 			users = [];

294) 			break;
295) 		}
296) 		case "channel":
297) 		{

298) 			users = model.channels[model.active.name].users;

299) 			break;
300) 		}
301) 		case "query":
302) 		{

303) 			users = [{"name": model.nickname, "role": ""}, {"name": model.active.name, "role": ""}];

304) 			break;
305) 		}
306) 	}

307) 	const users_sorted: Array<type_user> = users.sort

308) 	(
309) 		(x, y) =>
310) 		(

311) 			(x.role >= y.role)
312) 			? -1
313) 			: (
314) 				(x.role === y.role)
315) 				? ((x.name < y.name) ? -1 : +1)
316) 				: +1
317) 			)
318) 		)
319) 	);

320) 	for (const user of users_sorted)
321) 	{

322) 		let dom_user: HTMLLIElement = document.createElement("li");
323) 		dom_user.classList.add("user");
324) 		{
325) 			let dom_role: HTMLSpanElement = document.createElement("span");
326) 			dom_role.textContent = user.role;
327) 			dom_user.appendChild(dom_role);
328) 		}
329) 		{
330) 			let dom_name: HTMLSpanElement = document.createElement("span");
331) 			dom_name.textContent = user.name;
332) 			dom_name.style.color = get_usercolor(user.name);
333) 			dom_user.appendChild(dom_name);
334) 		}
335) 		dom_users.appendChild(dom_user);
336) 	}
337) }
338) 

339) 

340) function view_setup(model: type_model): void

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

344) 	setInterval
345) 	(
346) 		async () =>
347) 		{

348) 			switch (model.state)

349) 			{
350) 				default:
351) 				{

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

353) 					break;
354) 				}
355) 				case enum_state.offline:
356) 				{

357) 					// do nothing
358) 					break;

359) 				}
360) 				case enum_state.connecting:
361) 				{

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

363) 					if (ready)
364) 					{

365) 						model_set_state(model, enum_state.online);

366) 					}
367) 					else
368) 					{
369) 						// do nothing

370) 					}
371) 					break;

372) 				}
373) 				case enum_state.online:
374) 				{

375) 					const events: Array<type_event> = await backend_call(model.connection_id, "fetch", null);

376) 					model_process_events(model, events);

377) 					break;

378) 				}

379) 			}
380) 		},
381) 		_conf["settings"]["poll_interval_in_milliseconds"]
382) 	);

383) 	model_set_state(model, enum_state.offline);

384) }
385) 

386) 

387) function control_setup(model: type_model): void

388) {

389) 	document.querySelector("#connect > form").addEventListener
390) 	(

391) 		"submit",

392) 		async (event) =>
393) 		{

394) 			event.preventDefault();

395) 			
396) 			model_set_state(model, enum_state.connecting);
397) 			

398) 			let dom_nickname: HTMLInputElement = document.querySelector<HTMLInputElement>("#nickname");
399) 			let dom_channel: HTMLInputElement = document.querySelector<HTMLInputElement>("#channel");
400) 			const nickname: string = dom_nickname.value;

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

403) 			const connection_id: string = await backend_call
404) 			(

405) 				model.connection_id,

406) 				"connect",
407) 				{
408) 					"server": _conf["irc"]["server"],

409) 					"channels": channel_names,

410) 					"nickname": nickname,
411) 				}
412) 			);

413) 			model.connection_id = connection_id;
414) 			model.nickname = nickname;
415) 			for (const channel_name of channel_names)
416) 			{
417) 				model.channels[channel_name] =
418) 				{
419) 					"users": [],
420) 					"entries": [],
421) 				};
422) 			}
423) 			// TODO: can crash

424) 			model_set_active(model, {"kind": "channel", "name": channel_names[0]});

425) 		}
426) 	);

427) 	document.querySelector("#disconnect").addEventListener
428) 	(

429) 		"click",

430) 		async (event) =>
431) 		{
432) 			await backend_call
433) 			(

434) 				model.connection_id,

435) 				"disconnect",
436) 				null
437) 			);

438) 			model_set_state(model, enum_state.offline);
439) 			model.connection_id = null;

440) 		}
441) 	);

442) 	document.querySelector("#main > form").addEventListener
443) 	(

444) 		"submit",

445) 		async (e) =>

446) 		{

447) 			event.preventDefault();

448) 			
449) 			let dom_content: HTMLInputElement = document.querySelector<HTMLInputElement>("#content");
450) 			const content: string = dom_content.value;
451) 			dom_content.value = "";
452) 			dom_content.focus();
453) 			switch (model.active.kind)

454) 			{

455) 				case "channel":
456) 				{
457) 					const event: type_event =
458) 					{
459) 						"timestamp": get_timestamp(),
460) 						"kind": "message_channel",
461) 						"data":
462) 						{
463) 							"channel": model.active.name,
464) 							"sender": model.nickname,
465) 							"content": content,
466) 						}
467) 					};

468) 					model_process_events(model, [event]);

469) 					view_update_entries(model);
470) 					backend_call
471) 					(
472) 						model.connection_id,
473) 						"send_channel",
474) 						{
475) 							"channel": model.active.name,
476) 							"content": content,
477) 						}
478) 					);
479) 					break;

480) 				}

481) 				case "query":

482) 				{

483) 					const event: type_event =
484) 					{
485) 						"timestamp": get_timestamp(),
486) 						"kind": "message_query",
487) 						"data":
488) 						{

489) 							"user_name": model.active.name,

490) 							"sender": model.nickname,

491) 							"content": content,

492) 						}
493) 					};

494) 					model_process_events(model, [event]);

495) 					backend_call
496) 					(
497) 						model.connection_id,
498) 						"send_query",
499) 						{
500) 							"receiver": model.active.name,
501) 							"content": content,
502) 						}
503) 					);
504) 					break;

505) 				}

506) 			}

507) 		}
508) 	);
509) }
510) 

511) 

512) var _model;

513) async function main(): Promise<void>
514) {
515) 	_conf = await fetch("conf.json").then(x => x.json());

516) 	const model: type_model =
517) 	{
518) 		"state": enum_state.offline,
519) 		"connection_id": null,
520) 		"nickname": null,
521) 		"channels": {},
522) 		"queries": {},
523) 		"active": null,
524) 	};

525) _model = model;

526) 	view_setup(model);
527) 	control_setup(model);

528) }
529) 

530) 

531) function init(): void
532) {

533) 	document.addEventListener
534) 	(

535) 		"DOMContentLoaded",

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