improve log style

golang-cz · Dec 8, 2023 · 9d4aa13 · 9d4aa13
1 parent b12bf03
commit 9d4aa13
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/_examples/golang-sse/webapp/src/main.ts b/_examples/golang-sse/webapp/src/main.ts
@@ -5,10 +5,11 @@ import "./style.css";
 //Create client
 const api = new Chat("http://localhost:4848", fetch);
 
-//Create signal for messages
+//Create signal for messages and log
 const messages = signal<Message[]>([]);
 
-const log = signal<string[]>([]);
+type Log = { type: "error" | "info" | "warn"; log: string };
+const log = signal<Log[]>([]);
 
 //Create message handlers
 const onMessage = (message: SubscribeMessagesReturn) => {
@@ -18,15 +19,17 @@ const onMessage = (message: SubscribeMessagesReturn) => {
 
 const onError = (error: WebrpcError) => {
   console.error("onError()", error);
+  log.value = [...log.value, { type: "error", log: String(error) }];
 };
 
 const onOpen = () => {
   console.log("onOpen()");
-  log.value = [...log.value, "Connected"];
+  log.value = [...log.value, { type: "info", log: "Connected" }];
 };
 
 const onClose = () => {
   console.log("onClose()");
+  log.value = [...log.value, { type: "warn", log: "Disconnected" }];
 };
 
 const username = randomUserName();
@@ -94,7 +97,9 @@ const logEl = document.querySelector("#log");
 effect(() => {
   if (logEl) {
     logEl.innerHTML = `
-      ${log.value.map((log) => `<div>${log}</div>`).join("")}
+      ${log.value
+        .map((log) => `<div class=${log.type}>${log.log}</div>`)
+        .join("")}
   `;
     logEl.scrollTo(0, logEl.scrollHeight);
   }

diff --git a/_examples/golang-sse/webapp/src/style.css b/_examples/golang-sse/webapp/src/style.css
@@ -3,7 +3,6 @@
 }
 
 body {
-  height: 100vh;
   margin: 0;
   padding: 0;
   font-family: "Open Sans", sans-serif;
@@ -43,6 +42,7 @@ header {
   background: #e4eaee;
   position: relative;
 }
+
 #log {
   padding: 10px;
 }
@@ -118,3 +118,18 @@ button {
   padding: 10px;
   cursor: pointer;
 }
+
+#log > div {
+  padding-block: 7px;
+  border-bottom: 1px solid #cfdae1;
+}
+
+.error {
+  color: red;
+}
+.info {
+  color: green;
+}
+.warn {
+  color: orange;
+}