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(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({"action": action, "id": _model.connection_id, "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_model =
57) {
58) 	state: enum_state;
59) 	channel: (null | string);
60) 	nickname: (null | string);
61) 	connection_id: (null | string);
62) 	usershash: (null | string);
63) };
64) 
65) 
66) var _model: type_model =
67) {
68) 	"state": enum_state.offline,
69) 	"channel": null,
70) 	"nickname": null,
71) 	"connection_id": null,
72) 	"usershash": null,
73) };
74) 

75) 

76) function update_state(): void
77) {

78) 	document.querySelector("body").setAttribute("class", _model.state);

79) }
80) 

81) 

82) function update_events(events): void

83) {

84) 	let dom_events: HTMLUListElement = document.querySelector("#events");
85) 	for (const event of events)
86) 	{

87) 		const timestring: string = (new Date(event["timestamp"]*1000)).toISOString().slice(11, 19);
88) 		let dom_event: HTMLLIElement = document.createElement("li");
89) 		dom_event.classList.add("event");

90) 		switch (event["kind"])
91) 		{

92) 			default:

93) 			{

94) 				dom_event.textContent = ("-- unhandled event: " + JSON.stringify(event));
95) 				break;

96) 			}

97) 			case "private_message":
98) 			{
99) 				{
100) 					let dom_time: HTMLSpanElement = document.createElement("span");
101) 					dom_time.classList.add("event_time");
102) 					dom_time.textContent = timestring;
103) 					dom_event.appendChild(dom_time);
104) 				}
105) 				{
106) 					let dom_type: HTMLSpanElement = document.createElement("span");
107) 					dom_type.classList.add("event_type");
108) 					dom_type.textContent = 'private';
109) 					dom_event.appendChild(dom_type);
110) 				}
111) 				{
112) 					let dom_sender: HTMLSpanElement = document.createElement("span");
113) 					dom_sender.classList.add("event_sender");
114) 					dom_sender.style.color = get_usercolor(event["data"]["from"] ?? "");
115) 					dom_sender.textContent = event["data"]["from"];
116) 					dom_event.appendChild(dom_sender);
117) 				}
118) 				{
119) 					let dom_message: HTMLSpanElement = document.createElement("span");
120) 					dom_message.classList.add("event_message");
121) 					dom_message.textContent = event["data"]["message"];
122) 					dom_event.appendChild(dom_message);
123) 				}
124) 				break;
125) 			}

126) 			case "channel_message":

127) 			{

128) 				{

129) 					let dom_time: HTMLSpanElement = document.createElement("span");

130) 					dom_time.classList.add("event_time");
131) 					dom_time.textContent = timestring;
132) 					dom_event.appendChild(dom_time);
133) 				}
134) 				{

135) 					let dom_sender: HTMLSpanElement = document.createElement("span");

136) 					dom_sender.classList.add("event_sender");
137) 					dom_sender.style.color = get_usercolor(event["data"]["from"] ?? "");
138) 					dom_sender.textContent = event["data"]["from"];
139) 					dom_event.appendChild(dom_sender);
140) 				}
141) 				{

142) 					let dom_message: HTMLSpanElement = document.createElement("span");

143) 					dom_message.classList.add("event_message");
144) 					dom_message.textContent = event["data"]["message"];
145) 					dom_event.appendChild(dom_message);
146) 				}
147) 				break;

148) 			}

149) 		}

150) 		dom_events.appendChild(dom_event);

151) 	}

152) 	if (events.length > 0)
153) 	{
154) 		dom_events.scrollTo(0, dom_events["scrollTopMax"]);
155) 	}
156) 	else
157) 	{
158) 		// do nothing
159) 	}

160) }
161) 

162) 

163) function update_users(users: Array<{name: string; role: string;}>): void
164) {
165) 	let dom_users: HTMLUListElement = document.querySelector("#users");
166) 	dom_users.textContent = "";

167) 	const users_sorted: Array<{name: string; role: string;}> = users.sort
168) 	(
169) 		(x, y) =>
170) 		(

171) 			(x.role >= y.role)
172) 			? -1
173) 			: (
174) 				(x.role === y.role)
175) 				? ((x.name < y.name) ? -1 : +1)
176) 				: +1
177) 			)
178) 		)
179) 	);

180) 	for (const user of users_sorted)
181) 	{

182) 		let dom_user: HTMLLIElement = document.createElement("li");
183) 		dom_user.classList.add("user");
184) 		{
185) 			let dom_role: HTMLSpanElement = document.createElement("span");
186) 			dom_role.textContent = user.role;
187) 			dom_user.appendChild(dom_role);
188) 		}
189) 		{
190) 			let dom_name: HTMLSpanElement = document.createElement("span");
191) 			dom_name.textContent = user.name;
192) 			dom_name.style.color = get_usercolor(user.name);
193) 			dom_user.appendChild(dom_name);
194) 		}
195) 		dom_users.appendChild(dom_user);
196) 	}
197) }
198) 

199) 

200) function set_state(state: enum_state): void

201) {

202) 	_model.state = state;

203) 	update_state();
204) }
205) 

206) 

207) function setup_view(): void
208) {
209) 	document.querySelector<HTMLInputElement>("#channel").value = _conf["irc"]["predefined_channel"];
210) 	document.querySelector<HTMLInputElement>("#nickname").value = (_conf["irc"]["predefined_nickname_prefix"] + (Math.random()*100).toFixed(0));

211) 	setInterval
212) 	(
213) 		async () =>
214) 		{
215) 			switch (_model.state)
216) 			{
217) 				default:
218) 				{
219) 					throw (new Error("invalid state: " + _model.state));
220) 					break;
221) 				}
222) 				case enum_state.offline:
223) 				{

224) 					// do nothing
225) 					break;

226) 				}
227) 				case enum_state.connecting:
228) 				{

229) 					const ready: boolean = await backend_call("check", null);

230) 					if (ready)
231) 					{
232) 						set_state(enum_state.online);
233) 					}
234) 					else
235) 					{
236) 						// do nothing

237) 					}
238) 					break;

239) 				}
240) 				case enum_state.online:
241) 				{

242) 					const stuff: any = await backend_call("fetch", null);

243) 					update_events(stuff["events"]);
244) 					const usershash: string = btoa(JSON.stringify(stuff["users"]));
245) 					if (_model.usershash !== usershash)
246) 					{
247) 						_model.usershash = usershash;

248) 						update_users(stuff["users"]);
249) 					}

250) 					else
251) 					{
252) 						// do nothing
253) 					}

254) 					break;

255) 				}

256) 			}
257) 		},
258) 		_conf["settings"]["poll_interval_in_milliseconds"]
259) 	);

260) 	set_state(enum_state.offline);

261) }
262) 

263) 

264) function setup_control(): void
265) {

266) 	document.querySelector("#connect > form").addEventListener
267) 	(

268) 		"submit",

269) 		async (event) =>
270) 		{

271) 			event.preventDefault();

272) 			let dom_nickname: HTMLInputElement = document.querySelector<HTMLInputElement>("#nickname");
273) 			let dom_channel: HTMLInputElement = document.querySelector<HTMLInputElement>("#channel");
274) 			const nickname: string = dom_nickname.value;
275) 			const channel: string = dom_channel.value;

276) 			const connection_id: string = await backend_call
277) 			(

278) 				"connect",
279) 				{
280) 					"server": _conf["irc"]["server"],
281) 					"channels": [channel],
282) 					"nickname": nickname,
283) 				}
284) 			);

285) 			_model.connection_id = connection_id;
286) 			_model.channel = channel;
287) 			_model.nickname = nickname;
288) 			set_state(enum_state.connecting);

289) 		}
290) 	);

291) 	document.querySelector("#disconnect").addEventListener
292) 	(

293) 		"click",

294) 		async (event) =>
295) 		{
296) 			await backend_call
297) 			(

298) 				"disconnect",
299) 				null
300) 			);

301) 			set_state(enum_state.offline);
302) 			_model.connection_id = null;

303) 		}
304) 	);

305) 	document.querySelector("#main > form").addEventListener
306) 	(

307) 		"submit",

308) 		async (event) =>
309) 		{

310) 			event.preventDefault();
311) 			let dom_message: HTMLInputElement = document.querySelector<HTMLInputElement>("#message");
312) 			const message: string = dom_message.value;
313) 			dom_message.value = "";
314) 			dom_message.focus();

315) 			const event_: any =
316) 			{

317) 				"timestamp": get_timestamp(),
318) 				"kind": "channel_message",
319) 				"data": {

320) 					"from": _model.nickname,
321) 					"to": _model.channel,

322) 					"message": message,
323) 				}
324) 			};

325) 			update_events([event_]);
326) 			await backend_call
327) 			(
328) 				"send",

329) 				{

330) 					"channel": _model.channel,

331) 					"message": message,
332) 				}
333) 			);
334) 		}
335) 	);
336) }
337) 

338) 

339) async function main(): Promise<void>
340) {
341) 	_conf = await fetch("conf.json").then(x => x.json());
342) 	setup_view();
343) 	setup_control();
344) }
345) 

346) 

347) function init(): void
348) {

349) 	document.addEventListener
350) 	(

351) 		"DOMContentLoaded",

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