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 "channel_message":

98) 			{

99) 				{
100) 					let dom_time: HTMLDivElement = document.createElement("div");
101) 					dom_time.classList.add("event_time");
102) 					dom_time.textContent = timestring;
103) 					dom_event.appendChild(dom_time);
104) 				}
105) 				{
106) 					let dom_sender: HTMLDivElement = document.createElement("div");
107) 					dom_sender.classList.add("event_sender");
108) 					dom_sender.style.color = get_usercolor(event["data"]["from"] ?? "");
109) 					dom_sender.textContent = event["data"]["from"];
110) 					dom_event.appendChild(dom_sender);
111) 				}
112) 				{
113) 					let dom_message: HTMLDivElement = document.createElement("div");
114) 					dom_message.classList.add("event_message");
115) 					dom_message.textContent = event["data"]["message"];
116) 					dom_event.appendChild(dom_message);
117) 				}
118) 				break;

119) 			}

120) 		}

121) 		dom_events.appendChild(dom_event);

122) 	}

123) 	dom_events.scrollTo(0, dom_events["scrollTopMax"]);

124) }
125) 

126) 

127) function update_users(users: Array<{name: string; role: string;}>): void
128) {
129) 	let dom_users: HTMLUListElement = document.querySelector("#users");
130) 	dom_users.textContent = "";

131) 	const users_sorted: Array<{name: string; role: string;}> = users.sort
132) 	(
133) 		(x, y) =>
134) 		(

135) 			(x.role >= y.role)
136) 			? -1
137) 			: (
138) 				(x.role === y.role)
139) 				? ((x.name < y.name) ? -1 : +1)
140) 				: +1
141) 			)
142) 		)
143) 	);

144) 	for (const user of users_sorted)
145) 	{

146) 		let dom_user: HTMLLIElement = document.createElement("li");
147) 		dom_user.classList.add("user");
148) 		{
149) 			let dom_role: HTMLSpanElement = document.createElement("span");
150) 			dom_role.textContent = user.role;
151) 			dom_user.appendChild(dom_role);
152) 		}
153) 		{
154) 			let dom_name: HTMLSpanElement = document.createElement("span");
155) 			dom_name.textContent = user.name;
156) 			dom_name.style.color = get_usercolor(user.name);
157) 			dom_user.appendChild(dom_name);
158) 		}
159) 		dom_users.appendChild(dom_user);
160) 	}
161) }
162) 

163) 

164) function set_state(state: enum_state): void

165) {

166) 	_model.state = state;

167) 	update_state();
168) }
169) 

170) 

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

175) 	setInterval
176) 	(
177) 		async () =>
178) 		{
179) 			switch (_model.state)
180) 			{
181) 				default:
182) 				{
183) 					throw (new Error("invalid state: " + _model.state));
184) 					break;
185) 				}
186) 				case enum_state.offline:
187) 				{

188) 					// do nothing
189) 					break;

190) 				}
191) 				case enum_state.connecting:
192) 				{

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

194) 					if (ready)
195) 					{
196) 						set_state(enum_state.online);
197) 					}
198) 					else
199) 					{
200) 						// do nothing

201) 					}
202) 					break;

203) 				}
204) 				case enum_state.online:
205) 				{

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

207) 					update_events(stuff["events"]);
208) 					const usershash: string = btoa(JSON.stringify(stuff["users"]));
209) 					if (_model.usershash !== usershash)
210) 					{
211) 						_model.usershash = usershash;

212) 						update_users(stuff["users"]);
213) 					}

214) 					else
215) 					{
216) 						// do nothing
217) 					}

218) 					break;

219) 				}

220) 			}
221) 		},
222) 		_conf["settings"]["poll_interval_in_milliseconds"]
223) 	);

224) 	set_state(enum_state.offline);

225) }
226) 

227) 

228) function setup_control(): void
229) {

230) 	document.querySelector("#connect > form").addEventListener
231) 	(

232) 		"submit",

233) 		async (event) =>
234) 		{

235) 			event.preventDefault();

236) 			let dom_nickname: HTMLInputElement = document.querySelector<HTMLInputElement>("#nickname");
237) 			let dom_channel: HTMLInputElement = document.querySelector<HTMLInputElement>("#channel");
238) 			const nickname: string = dom_nickname.value;
239) 			const channel: string = dom_channel.value;

240) 			const connection_id: string = await backend_call
241) 			(

242) 				"connect",
243) 				{
244) 					"server": _conf["irc"]["server"],
245) 					"channels": [channel],
246) 					"nickname": nickname,
247) 				}
248) 			);

249) 			_model.connection_id = connection_id;
250) 			_model.channel = channel;
251) 			_model.nickname = nickname;
252) 			set_state(enum_state.connecting);

253) 		}
254) 	);

255) 	document.querySelector("#disconnect").addEventListener
256) 	(

257) 		"click",

258) 		async (event) =>
259) 		{
260) 			await backend_call
261) 			(

262) 				"disconnect",
263) 				null
264) 			);

265) 			set_state(enum_state.offline);
266) 			_model.connection_id = null;

267) 		}
268) 	);

269) 	document.querySelector("#main > form").addEventListener
270) 	(

271) 		"submit",

272) 		async (event) =>
273) 		{

274) 			event.preventDefault();
275) 			let dom_message: HTMLInputElement = document.querySelector<HTMLInputElement>("#message");
276) 			const message: string = dom_message.value;
277) 			dom_message.value = "";
278) 			dom_message.focus();

279) 			const event_: any =
280) 			{

281) 				"timestamp": get_timestamp(),
282) 				"kind": "channel_message",
283) 				"data": {

284) 					"from": _model.nickname,
285) 					"to": _model.channel,

286) 					"message": message,
287) 				}
288) 			};

289) 			update_events([event_]);
290) 			await backend_call
291) 			(
292) 				"send",

293) 				{

294) 					"channel": _model.channel,

295) 					"message": message,
296) 				}
297) 			);
298) 		}
299) 	);
300) }
301) 

302) 

303) async function main(): Promise<void>
304) {
305) 	_conf = await fetch("conf.json").then(x => x.json());
306) 	setup_view();
307) 	setup_control();
308) }
309) 

310) 

311) function init(): void
312) {

313) 	document.addEventListener
314) 	(

315) 		"DOMContentLoaded",

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