Add live preview for posts

src/jsMain/kotlin/de/kif/frontend/main.kt

@@ -4,6 +4,7 @@ import de.kif.frontend.views.calendar.initCalendar
 import de.kif.frontend.views.table.initTableLayout
 import de.kif.frontend.views.initWorkGroupConstraints
 import de.kif.frontend.views.overview.initOverviewMain
+import de.kif.frontend.views.overview.initPostEdit
 import de.kif.frontend.views.overview.initPosts
 import de.westermann.kwebview.components.init
 import kotlin.browser.document
@@ -26,4 +27,7 @@ fun main() = init {
     if (document.getElementsByClassName("post").length > 0) {
         initPosts()
     }
+    if (document.getElementsByClassName("post-edit-right").length > 0) {
+        initPostEdit()
+    }
 }

src/jsMain/kotlin/de/kif/frontend/repository/PostRepository.kt

@@ -45,6 +45,10 @@ object PostRepository : Repository<Post> {
         return repositoryRawGet("/api/p/$url")
     }
 
+    suspend fun render(data: String): String {
+        return repositoryPost("/api/render", data)
+    }
+
     val handler = object : MessageHandler(RepositoryType.POST) {
 
         override fun onCreate(id: Long) = onCreate.emit(id)

src/jsMain/kotlin/de/kif/frontend/views/overview/OverviewMain.kt

@@ -1,8 +1,11 @@
 package de.kif.frontend.views.overview
 
 import de.kif.frontend.iterator
+import de.kif.frontend.launch
 import de.kif.frontend.repository.PostRepository
 import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLTextAreaElement
+import org.w3c.dom.events.EventListener
 import org.w3c.dom.get
 import kotlin.browser.document
 
@@ -38,4 +41,24 @@ fun initPosts() {
     for (post in postList) {
         PostView(post)
     }
+}
+
+fun initPostEdit() {
+    val textArea = document.getElementById("content") as HTMLTextAreaElement
+    val preview = document.getElementsByClassName("post-edit-right")[0] as HTMLElement
+
+    textArea.addEventListener("change", EventListener {
+        launch {
+            preview.innerHTML = PostRepository.render(textArea.value)
+        }
+    })
+    textArea.addEventListener("keyup", EventListener {
+        launch {
+            preview.innerHTML = PostRepository.render(textArea.value)
+        }
+    })
+
+    launch {
+        preview.innerHTML = PostRepository.render(textArea.value)
+    }
 }

src/jsMain/resources/style/style.scss

@@ -1001,6 +1001,7 @@ form {
     color: $text-primary-color;
   }
 }
+
 .post-edit {
   position: absolute;
   top: 0;
@@ -1013,26 +1014,68 @@ form {
     margin: 0.7rem 0;
     padding: 0;
   }
+
   h1 {
     font-size: 1rem;
   }
+
   h2 {
     font-size: 1rem;
   }
+
   h3 {
     font-size: 1rem;
   }
+
   h4 {
     font-size: 1rem;
   }
+
   h5 {
     font-size: 1rem;
   }
+
   h6 {
     font-size: 1rem;
   }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td {
+    border-top: solid 1px rgba($text-primary-color, 0.1);
+  }
+
+  th {
+    background-color: rgba($text-primary-color, 0.06);
+  }
+
+  td, th {
+    padding: 0.4rem;
+  }
 }
 
+.post-edit-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.post-edit-right {
+  margin-left: 0;
+}
+
+@media (min-width: 768px) {
+  .post-edit-container {
+    flex-direction: row;
+  }
+  .post-edit-right {
+    margin-left: 2rem;
+  }
+}
+
+/*
 .overview-post {
   max-height: 20rem;
   overflow: hidden;
@@ -1047,4 +1090,5 @@ form {
     width: 100%;
     background: linear-gradient(0deg, $background-primary-color, transparent);
   }
-}
+}
+ */