wirc-frontend.git

@@ -40,8 +40,12 @@

 				<ul class="pane" id="spots"></ul>

 			</div>

 			<form action="?">

+				<div id="container_content">

 					<input type="text" id="content" placeholder="…"/>

+				</div>

+				<div id="container_send">

 					<input type="submit" id="send" value="send"/>

+				</div>

 			</form>

 		</div>

 	</body>

@@ -61,6 +61,13 @@ type type_event =

 };

+type type_spot =

+{

+	kind: string;

+	name: string;

+};

+

+

 type type_entry =

 {

 	timestamp: int;

@@ -96,7 +103,7 @@ type type_model =

 	nickname: (null | string);

 	channels: Record<string, type_channel>;

 	queries: Record<string, type_query>;

-	active: (null | {kind: string, name: string});

+	active: (null | type_spot);

 };

@@ -108,7 +115,21 @@ function model_set_state(model: type_model, state: enum_state): void

 }

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

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

+{

+	model.active = spot;

+	view_update_spots(model);

+	view_update_entries(model);

+	view_update_users(model);

+}

+

+

+function model_process_events(model: type_model, events: Array<type_event>): void

+{

+	let shall_update_spots: boolean = false;

+	let shall_update_entries: boolean = false;

+	let shall_update_users: boolean = false;

+	for (const event of events)

 	{

 		switch (event.kind)

 		{

@@ -120,6 +141,7 @@ function model_process_event(model: type_model, event: type_event): void

 			case "userlist":

 			{

 				model.channels[event.data["channel"]].users = event.data["users"];

+				shall_update_users = true;

 				break;

 			}

 			case "message_channel":

@@ -130,29 +152,41 @@ function model_process_event(model: type_model, event: type_event): void

 					"sender": event.data["sender"],

 					"content": event.data["content"],

 				});

+				shall_update_entries = true;

 				break;

 			}

 			case "message_query":

 			{

-			if (! model.queries.hasOwnProperty(event.data["sender"]))

+				if (! model.queries.hasOwnProperty(event.data["user_name"]))

 				{

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

+					model.queries[event.data["user_name"]] = {"entries": []};

+					shall_update_spots = true;

 				}

 				else

 				{

 					// do nothing

 				}

-			model.queries[event.data["sender"]].entries.push

+				model.queries[event.data["user_name"]].entries.push

 				({

 					"timestamp": event.timestamp,

 					"sender": event.data["sender"],

 					"content": event.data["content"],

 				});

+				shall_update_entries = true;

 				break;

 			}

 		}

 	}

+	// update view

+	{

+		if (shall_update_spots) view_update_spots(model);

+		if (shall_update_entries) view_update_entries(model);

+		if (shall_update_users) view_update_users(model);

+	}

+}

+

+

 function view_update_state(model: type_model): void

 {

@@ -163,22 +197,37 @@ function view_update_state(model: type_model): void

 function view_update_spots(model: type_model): void

 {

 	let dom_spots: HTMLUListElement = document.querySelector("#spots");

-	const spots: Array<{kind: string; name: string}> =  (

+	const spots: Array<type_spot> = (

 		[]

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

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

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

 	);

 	dom_spots.textContent = "";

 	for (const spot of spots)

 	{

 		let dom_spot: HTMLLIElement = document.createElement("li");

 		dom_spot.classList.add("spot");

+		{

+			let dom_kind: HTMLSpanElement = document.createElement("span");

+			dom_kind.classList.add("spot_kind");

+			dom_kind.textContent = spot.kind;

+			dom_spot.appendChild(dom_kind);

+		}

 		{

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

 			dom_name.classList.add("spot_sender");

 			dom_name.textContent = spot.name;

 			dom_spot.appendChild(dom_name);

 		}

+		dom_spot.classList.toggle("spot_active", ((spot.kind === model.active.kind) && (spot.name === model.active.name)));

+		dom_spot.addEventListener

+		(

+			"click",

+			(e) =>

+			{

+				model_set_active(model, spot);

+			}

+		);

 		dom_spots.appendChild(dom_spot);

 	}

 }

@@ -187,22 +236,22 @@ function view_update_spots(model: type_model): void

 function view_update_entries(model: type_model): void

 {

 	let dom_entries: HTMLUListElement = document.querySelector("#entries");

-	let source: Array<type_entry>;

+	let entries: Array<type_entry>;

 	switch (model.active.kind)

 	{

 		case "channel":

 		{

-			source = model.channels[model.active.name].entries;

+			entries = model.channels[model.active.name].entries;

 			break;

 		}

 		case "query":

 		{

-			source = model.queries[model.active.name].entries;

+			entries = model.queries[model.active.name].entries;

 			break;

 		}

 	}

 	dom_entries.textContent = "";

-	for (const entry of model.channels[model.active.name].entries)

+	for (const entry of entries)

 	{

 		let dom_entry: HTMLLIElement = document.createElement("li");

 		dom_entry.classList.add("entry");

@@ -235,27 +284,27 @@ function view_update_users(model: type_model): void

 {

 	let dom_users: HTMLUListElement = document.querySelector("#users");

 	dom_users.textContent = "";

-	let source: Array<type_user>;

+	let users: Array<type_user>;

 	switch (model.active.kind)

 	{

 		default:

 		{

 			console.warn("unhandled kind: " + model.active.kind);

-			source = [];

+			users = [];

 			break;

 		}

 		case "channel":

 		{

-			source = model.channels[model.active.name].users;

+			users = model.channels[model.active.name].users;

 			break;

 		}

 		case "query":

 		{

-			source = [{"name": model.nickname, "role": ""}, {"name": model.active.name, "role": ""}];

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

 			break;

 		}

 	}

-	const users_sorted: Array<type_user> = source.sort

+	const users_sorted: Array<type_user> = users.sort

 	(

 		(x, y) =>

 		(

@@ -324,13 +373,7 @@ function view_setup(model: type_model): void

 				case enum_state.online:

 				{

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

-					for (const event of events)

-					{

-						model_process_event(model, event);

-					}

-					view_update_users(model);

-					view_update_entries(model);

-					view_update_spots(model);

+					model_process_events(model, events);

 					break;

 				}

 			}

@@ -378,7 +421,7 @@ function control_setup(model: type_model): void

 				};

 			}

 			// TODO: can crash

-			model.active = {"kind": "channel", "name": channel_names[0]};

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

 		}

 	);

 	document.querySelector("#disconnect").addEventListener

@@ -422,7 +465,7 @@ function control_setup(model: type_model): void

 							"content": content,

 						}

 					};

-					model_process_event(model, event);

+					model_process_events(model, [event]);

 					view_update_entries(model);

 					backend_call

 					(

@@ -437,19 +480,18 @@ function control_setup(model: type_model): void

 				}

 				case "query":

 				{

-					/*

 					const event: type_event =

 					{

 						"timestamp": get_timestamp(),

 						"kind": "message_query",

 						"data":

 						{

+							"user_name": model.active.name,

 							"sender": model.nickname,

-							"message": message,

+							"content": content,

 						}

 					};

-					model_process_event(model, event);

-					 */

+					model_process_events(model, [event]);

 					backend_call

 					(

 						model.connection_id,

@@ -467,6 +509,7 @@ function control_setup(model: type_model): void

 }

+var _model;

 async function main(): Promise<void>

 {

 	_conf = await fetch("conf.json").then(x => x.json());

@@ -479,6 +522,7 @@ async function main(): Promise<void>

 		"queries": {},

 		"active": null,

 	};

+_model = model;

 	view_setup(model);

 	control_setup(model);

 }

@@ -1,4 +1,4 @@

-@hue: 120;

+@hue: 150;

 body

 {

@@ -16,9 +16,11 @@ input,textarea,button

 button,input[type="submit"]

 {

-	background-color: hsl(@hue, 50%, 37.5%);

+	background-color: hsl(@hue, 37.5%, 37.5%);

 	color: hsl(@hue, 0%, 100%);

+	font-size: 1.00em;

+	

 	border: none;

 	border-radius: 2px;

@@ -52,49 +54,40 @@ label

 	color: hsl(@hue, 0%, 75%);

-	&:before

-	{

-		content: "<";

+	&:before {content: "<";}

+	&:after {content: ">";}

 }

-	&:after

-	{

-		content: ">";

-	}

-}

-

-.entry_type

+.entry_sender

 {

 	margin: 0 4px;

-	color: hsl(@hue, 0%, 100%);

+	// font-weight: bold;

-	&:before

-	{

-		content: "{";

+	&:before {content: "[";}

+	&:after {content: "]";}

 }

-	&:after

+.spot

 {

-		content: "}";

-	}

-}

+	cursor: pointer;

-.entry_sender

-{

 	margin: 0 4px;

-	// font-weight: bold;

-	

-	&:before

+	&.spot_active

 	{

-		content: "[";

+		font-weight: bold;

+	}

 }

-	&:after

+.spot_kind

 {

-		content: "]";

-	}

+	display: none;

+	

+	padding: 4px;

+	

+	&:before {content: "[";}

+	&:after {content: "]";}

 }

 .pane

@@ -212,7 +205,12 @@ body

 	flex-direction: row;

 	flex-wrap: wrap;

-	& > #content {flex: 7;}

-	& > #send {flex: 1;}

+	& > #container_content {flex: 7;}

+	& > #container_send {flex: 1;}

+}

+

+#content

+{

+	width: 93.75%;

 }