Pretty UI with scalatags

2 files changed, 64 insertions, 1 deletions

diff --git a/server/src/Main.scala b/server/src/Main.scala
index 47afea4..fdcabb8 100644
--- a/server/src/Main.scala
+++ b/server/src/Main.scala
@@ -6,12 +6,15 @@ object Main extends cask.MainRoutes {
   messages += Message("John Smith", 0, "Hello, world!")
 
   @cask.get("/")
-  def get() = upickle.default.write(messages, indent = 2) // indent = 2 to pretty-print
+  def get() = Templates.page(messages.toList).render
 
   @cask.postJson("/")
   def post(message: Message) = {
     messages += message
   }
 
+  @cask.staticResources("/assets")
+  def statics() = "assets"
+
   initialize()
 }
diff --git a/server/src/Templates.scala b/server/src/Templates.scala
new file mode 100644
index 0000000..a512c49
--- /dev/null
+++ b/server/src/Templates.scala
@@ -0,0 +1,60 @@
+
+import scalatags.Text.all._
+
+object Templates {
+
+  def message(msg: Message): Tag = {
+    div(cls := "col-xs-12 col-sm-6 col-md-3 col-lg-2")(
+      div(cls := s"card text-white mb-3 bg-primary")(
+        div(cls := "card-header")(
+          msg.author
+        ),
+        div(`class` := "card-body")(
+          div(`class` := "card-text")(
+            msg.content
+          )
+        )
+      )
+    )
+  }
+
+  def conversation(messages: Seq[Message]): Tag =
+    div(`class` := "container-fluid")(
+      div(id := "conversation", `class` := "row")(
+        for (msg <- messages.sortBy(_.date)) yield message(msg)
+      )
+    )
+  
+  def page(messages: Seq[Message]): Tag = html(
+    head(
+      link(
+        rel := "stylesheet",
+        `type` := "text/css",
+        href := "/assets/lib/bootstrap-4.1.0/css/bootstrap-reboot.min.css"
+      ),
+      link(
+        rel := "stylesheet",
+        `type` := "text/css",
+        href := "/assets/lib/bootstrap-4.1.0/css/bootstrap-grid.min.css"
+      ),
+      link(
+        rel := "stylesheet",
+        `type` := "text/css",
+        href := "/assets/lib/bootstrap-4.1.0/css/bootstrap.min.css"
+      ),
+      link(
+        rel := "stylesheet",
+        `type` := "text/css",
+        href := "/assets/main.css"
+      ),
+      meta(
+        name := "viewport",
+        content := "width=device-width, initial-scale=1, shrink-to-fit=no"
+      )
+    ),
+    body(
+      conversation(messages) 
+    )
+  )
+
+}