[mod] added view for info entries (d561abc) - wirc-frontend.git

[mod] added view for info entries

Christian Fraß commited on 2021-11-20 16:01:55
Zeige 4 geänderte Dateien mit 100 Einfügungen und 13 Löschungen.

source/logic/model.ts 4ac6ed3..628667e
source/logic/types.ts 643b5ac..74b869c
source/logic/view.ts 4758837..0689725
source/style.less dabd95e..59301e8

@@ -104,7 +104,15 @@ namespace ns_model
 				case "user_joined":
 				{
 					model.channels[event.data["channel"]].users.push({"name": event.data["user_name"], "role": ""});
+					model.channels[event.data["channel"]].entries.push
+					({
+						"timestamp": event.timestamp,
+						"kind": enum_entrykind.info,
+						"sender": null,
+						"content": `${event.data["user_name"]} joined`,
+					});
 					shall_update_users = true;
+					shall_update_entries = true;
 					break;
 				}
 				case "user_parted":
@@ -113,7 +121,15 @@ namespace ns_model
 					(
 						(user) => (user.name != event.data["user_name"])
 					);
+					model.channels[event.data["channel"]].entries.push
+					({
+						"timestamp": event.timestamp,
+						"kind": enum_entrykind.info,
+						"sender": null,
+						"content": `${event.data["user_name"]} left`,
+					});
 					shall_update_users = true;
+					shall_update_entries = true;
 					break;
 				}
 				case "user_kicked":
@@ -122,7 +138,15 @@ namespace ns_model
 					(
 						(user) => (user.name != event.data["user_name"])
 					);
+					model.channels[event.data["channel"]].entries.push
+					({
+						"timestamp": event.timestamp,
+						"kind": enum_entrykind.info,
+						"sender": null,
+						"content": `${event.data["user_name"]} was kicked by ${event.data["op_name"]}: ${event.data["reason"]}`,
+					});
 					shall_update_users = true;
+					shall_update_entries = true;
 					break;
 				}
 				case "user_quit":
@@ -136,8 +160,15 @@ namespace ns_model
 								(user) => (user.name != event.data["user_name"])
 							);
 						}
+						model.channels[channel_name].entries.push
+						({
+							"timestamp": event.timestamp,
+							"kind": enum_entrykind.info,
+							"sender": null,
+							"content": `${event.data["user_name"]} quit`,
+						});
 					}
-					shall_update_spots = true;
+					shall_update_entries = true;
 					shall_update_users = true;
 					break;
 				}
@@ -146,6 +177,7 @@ namespace ns_model
 					model.channels[event.data["channel"]].entries.push
 					({
 						"timestamp": event.timestamp,
+						"kind": enum_entrykind.message,
 						"sender": event.data["sender"],
 						"content": event.data["content"],
 					});
@@ -166,6 +198,7 @@ namespace ns_model
 					model.queries[event.data["user_name"]].entries.push
 					({
 						"timestamp": event.timestamp,
+						"kind": enum_entrykind.message,
 						"sender": event.data["sender"],
 						"content": event.data["content"],
 					});

source/logic/types.ts

Zeige Datei @ d561abc

@@ -34,6 +34,13 @@ enum enum_state
 }
 
 
+enum enum_entrykind
+{
+	message = "message",
+	info = "info",
+}
+
+
 type type_event =
 {
 	timestamp: int;
@@ -52,7 +59,8 @@ type type_spot =
 type type_entry =
 {
 	timestamp: int;
-	sender: string;
+	kind: string;
+	sender: (null | string);
 	content: string;
 };
 

source/logic/view.ts

Zeige Datei @ d561abc

...	...	@@ -79,9 +79,39 @@ namespace ns_view
79	79	}
80	80	dom_entries.textContent = "";
81	81	for (const entry of entries)
	82	+ {
	83	+ switch (entry.kind)
	84	+ {
	85	+ default:
	86	+ {
	87	+ console.warn(`unhandled entry kind '${entry.kind}'`);
	88	+ break;
	89	+ }
	90	+ case enum_entrykind.info:
	91	+ {
	92	+ let dom_entry: HTMLLIElement = document.createElement("li");
	93	+ dom_entry.classList.add("entry");
	94	+ dom_entry.classList.add("entry_info");
	95	+ {
	96	+ let dom_time: HTMLSpanElement = document.createElement("span");
	97	+ dom_time.classList.add("entry_time");
	98	+ dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
	99	+ dom_entry.appendChild(dom_time);
	100	+ }
	101	+ {
	102	+ let dom_content: HTMLSpanElement = document.createElement("span");
	103	+ dom_content.classList.add("entry_content");
	104	+ dom_content.textContent = `-- ${entry.content}`;
	105	+ dom_entry.appendChild(dom_content);
	106	+ }
	107	+ dom_entries.appendChild(dom_entry);
	108	+ break;
	109	+ }
	110	+ case enum_entrykind.message:
82	111	{
83	112	let dom_entry: HTMLLIElement = document.createElement("li");
84	113	dom_entry.classList.add("entry");
	114	+ dom_entry.classList.add("entry_message");
85	115	{
86	116	let dom_time: HTMLSpanElement = document.createElement("span");
87	117	dom_time.classList.add("entry_time");
...	...	@@ -102,6 +132,9 @@ namespace ns_view
102	132	dom_entry.appendChild(dom_content);
103	133	}
104	134	dom_entries.appendChild(dom_entry);
	135	+ break;
	136	+ }
	137	+ }
105	138	}
106	139	dom_entries.scrollTo(0, dom_entries["scrollTopMax"]);
107	140	}

source/style.less

Zeige Datei @ d561abc

@@ -43,31 +43,44 @@ label
 	margin: 16px 0;
 }
 
-.entry > *
+.entry
+{
+	& > *
 	{
 		display: inline-block;
+		margin: 0 4px;
 	}
 	
-.entry_time
+	& .entry_time
 	{
-	margin: 0 4px;
-	
 		color: hsl(@hue, 0%, 75%);
 		
 		&:before {content: "<";}
 		&:after {content: ">";}
 	}
 	
-.entry_sender
+	& .entry_sender
 	{
-	margin: 0 4px;
-	
-	// font-weight: bold;
-	
 		&:before {content: "[";}
 		&:after {content: "]";}
 	}
 	
+	&.entry_message
+	{
+		& .entry_content
+		{
+		}
+	}
+	
+	&.entry_info
+	{
+		& .entry_content
+		{
+			color: hsl(@hue, 0%, 50%);
+		}
+	}
+}
+
 .spot
 {
 	cursor: pointer;
@@ -78,9 +91,8 @@ label
 	{
 		font-weight: bold;
 	}
-}
 	
-.spot_kind
+	& .spot_kind
 	{
 		display: none;
 		
@@ -89,6 +101,7 @@ label
 		&:before {content: "[";}
 		&:after {content: "]";}
 	}
+}
 
 .user
 {


...	...	@@ -104,7 +104,15 @@ namespace ns_model
104	104	case "user_joined":
105	105	{
106	106	model.channels[event.data["channel"]].users.push({"name": event.data["user_name"], "role": ""});
	107	+ model.channels[event.data["channel"]].entries.push
	108	+ ({
	109	+ "timestamp": event.timestamp,
	110	+ "kind": enum_entrykind.info,
	111	+ "sender": null,
	112	+ "content": `${event.data["user_name"]} joined`,
	113	+ });
107	114	shall_update_users = true;
	115	+ shall_update_entries = true;
108	116	break;
109	117	}
110	118	case "user_parted":
...	...	@@ -113,7 +121,15 @@ namespace ns_model
113	121	(
114	122	(user) => (user.name != event.data["user_name"])
115	123	);
	124	+ model.channels[event.data["channel"]].entries.push
	125	+ ({
	126	+ "timestamp": event.timestamp,
	127	+ "kind": enum_entrykind.info,
	128	+ "sender": null,
	129	+ "content": `${event.data["user_name"]} left`,
	130	+ });
116	131	shall_update_users = true;
	132	+ shall_update_entries = true;
117	133	break;
118	134	}
119	135	case "user_kicked":
...	...	@@ -122,7 +138,15 @@ namespace ns_model
122	138	(
123	139	(user) => (user.name != event.data["user_name"])
124	140	);
	141	+ model.channels[event.data["channel"]].entries.push
	142	+ ({
	143	+ "timestamp": event.timestamp,
	144	+ "kind": enum_entrykind.info,
	145	+ "sender": null,
	146	+ "content": `${event.data["user_name"]} was kicked by ${event.data["op_name"]}: ${event.data["reason"]}`,
	147	+ });
125	148	shall_update_users = true;
	149	+ shall_update_entries = true;
126	150	break;
127	151	}
128	152	case "user_quit":
...	...	@@ -136,8 +160,15 @@ namespace ns_model
136	160	(user) => (user.name != event.data["user_name"])
137	161	);
138	162	}
	163	+ model.channels[channel_name].entries.push
	164	+ ({
	165	+ "timestamp": event.timestamp,
	166	+ "kind": enum_entrykind.info,
	167	+ "sender": null,
	168	+ "content": `${event.data["user_name"]} quit`,
	169	+ });
139	170	}
140		- shall_update_spots = true;
	171	+ shall_update_entries = true;
141	172	shall_update_users = true;
142	173	break;
143	174	}
...	...	@@ -146,6 +177,7 @@ namespace ns_model
146	177	model.channels[event.data["channel"]].entries.push
147	178	({
148	179	"timestamp": event.timestamp,
	180	+ "kind": enum_entrykind.message,
149	181	"sender": event.data["sender"],
150	182	"content": event.data["content"],
151	183	});
...	...	@@ -166,6 +198,7 @@ namespace ns_model
166	198	model.queries[event.data["user_name"]].entries.push
167	199	({
168	200	"timestamp": event.timestamp,
	201	+ "kind": enum_entrykind.message,
169	202	"sender": event.data["sender"],
170	203	"content": event.data["content"],
171	204	});

...	...	@@ -34,6 +34,13 @@ enum enum_state
34	34	}
35	35
36	36
	37	+enum enum_entrykind
	38	+{
	39	+ message = "message",
	40	+ info = "info",
	41	+}
	42	+
	43	+
37	44	type type_event =
38	45	{
39	46	timestamp: int;
...	...	@@ -52,7 +59,8 @@ type type_spot =
52	59	type type_entry =
53	60	{
54	61	timestamp: int;
55		- sender: string;
	62	+ kind: string;
	63	+ sender: (null \| string);
56	64	content: string;
57	65	};
58	66

...	...	@@ -43,31 +43,44 @@ label
43	43	margin: 16px 0;
44	44	}
45	45
46		-.entry > *
	46	+.entry
	47	+{
	48	+ & > *
47	49	{
48	50	display: inline-block;
	51	+ margin: 0 4px;
49	52	}
50	53
51		-.entry_time
	54	+ & .entry_time
52	55	{
53		- margin: 0 4px;
54		-
55	56	color: hsl(@hue, 0%, 75%);
56	57
57	58	&:before {content: "<";}
58	59	&:after {content: ">";}
59	60	}
60	61
61		-.entry_sender
	62	+ & .entry_sender
62	63	{
63		- margin: 0 4px;
64		-
65		- // font-weight: bold;
66		-
67	64	&:before {content: "[";}
68	65	&:after {content: "]";}
69	66	}
70	67
	68	+ &.entry_message
	69	+ {
	70	+ & .entry_content
	71	+ {
	72	+ }
	73	+ }
	74	+
	75	+ &.entry_info
	76	+ {
	77	+ & .entry_content
	78	+ {
	79	+ color: hsl(@hue, 0%, 50%);
	80	+ }
	81	+ }
	82	+}
	83	+
71	84	.spot
72	85	{
73	86	cursor: pointer;
...	...	@@ -78,9 +91,8 @@ label
78	91	{
79	92	font-weight: bold;
80	93	}
81		-}
82	94
83		-.spot_kind
	95	+ & .spot_kind
84	96	{
85	97	display: none;
86	98
...	...	@@ -89,6 +101,7 @@ label
89	101	&:before {content: "[";}
90	102	&:after {content: "]";}
91	103	}
	104	+}
92	105
93	106	.user
94	107	{
95	108