Displaying location info from websocket

ui/app/components/Home.js

@@ -1,11 +1,19 @@
+import "./LocationList.js"
+
 class Home extends Shadow {
     render() {
         ZStack(() => {
+            p("BLOCKCATCHER")
+                .x(2, em).y(1, em)
+                .fontSize(1.2, em)
+                .fontFamily("Arial")
 
+            LocationList()
         })
         .backgroundColor("#aebdff")
         .display("block")
         .width(100, vw).height(100, vh)
+        .color("#60759f")
     }
 }
 

ui/app/components/LocationList.js

@@ -0,0 +1,26 @@
+class LocationList extends Shadow {
+    list = []
+
+    render() {
+        VStack(() => {
+            this.list.forEach((update) => {
+                console.log(update.name)
+                HStack(() => {
+                    p(update.timestamp)
+                    p(update.name)
+                    p(update.latitude)
+                    p(update.longitude)
+                })
+                .gap(1, em)
+            })
+        })
+        .onEvent("update-location", (e) => {
+            console.log("location received: ", e.detail)
+            this.list.unshift(e.detail)
+            this.rerender()
+        })
+        .x(2, em).y(5, em)
+    }
+}
+
+window.registerShadow(LocationList)