efim
/
planning-poker-gwargh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small prettification of join room component

This commit is contained in:
efim 2023-04-29 23:52:44 +04:00
parent b06baf8c63
commit 914791aa5e
1 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/main/scala/industries/sunshine/planningpoker/JoinRoomComponent.scala
View File

@ -9,7 +9,6 @@ import io.laminext.fetch.circe._
import scala.util.Failure import scala.util.Failure
import scala.util.Success import scala.util.Success
import concurrent.ExecutionContext.Implicits.global import concurrent.ExecutionContext.Implicits.global
object JoinRoomComponent { object JoinRoomComponent {
@ -41,18 +40,18 @@ object JoinRoomComponent {
) )
) )
val roomNameVar = Var("testroom") val roomNameVar = Var("")
val roomPassVar = Var("password") val roomPassVar = Var("")
val nicknameVar = Var("me") val nicknameVar = Var("")
val nicknamePass = Var("nickpass") val nicknamePass = Var("")
val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]] val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]
def render(loggedIn: Observer[Boolean]): Element = { def render(loggedIn: Observer[Boolean]): Element = {
val submitButton = button( val submitButton = button(
"Join room", "Join room",
className := "m-1 border-2 rounded-full border-green-400 bg-green-200 shadow-inner shadow-green-400 active:shadow-yellow-400 duration-100 ease-linear",
onClick onClick
.mapTo { .mapTo {
(roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now()) (roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now())
@ -68,7 +67,8 @@ object JoinRoomComponent {
nicknamePass nicknamePass
) )
) )
.text.map { response => .text
.map { response =>
if (response.ok) { if (response.ok) {
loggedIn.onNext(true) loggedIn.onNext(true)
response response
@ -77,6 +77,7 @@ object JoinRoomComponent {
} --> responseReceived } --> responseReceived
) )
val newRoomButton = button( val newRoomButton = button(
className := "m-1 border-2 rounded-full border-yellow-400 bg-yellow-200 shadow-inner shadow-yellow-400 active:shadow-red-400 duration-100 ease-linear",
"Create new room", "Create new room",
onClick onClick
.mapTo { .mapTo {
@ -93,7 +94,8 @@ object JoinRoomComponent {
nicknamePass nicknamePass
) )
) )
.text.map { response => .text
.map { response =>
if (response.ok) { if (response.ok) {
loggedIn.onNext(true) loggedIn.onNext(true)
response response
@ -102,25 +104,26 @@ object JoinRoomComponent {
} --> responseReceived } --> responseReceived
) )
div( div(
className := "flex flex-col h-full justify-center", className := "bg-green-50 w-full h-full flex justify-center",
"Logging in:",
nameInput(roomNameVar, "Enter room name:"),
passInput(roomPassVar, "room password"),
nameInput(nicknameVar, "Enter your nickname:"),
passInput(nicknamePass, "nickname pass:"),
submitButton,
newRoomButton,
div( div(
className := "w-60 flex flex-col justify-center",
"Logging in:",
nameInput(roomNameVar, "Enter room name:"),
passInput(roomPassVar, "room password"),
label("Alert: no https, please don't use good passwords"),
nameInput(nicknameVar, "Enter your nickname:"),
passInput(nicknamePass, "nickname pass:"),
submitButton,
newRoomButton,
div( div(
code("received:") div(
), code("error log:")
div( ),
cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900", div(
children.command <-- responsesStream.recoverToTry.map { cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
case Success(response) => children.command <-- responsesStream.recoverToTry.map {
{ case Success(response) => {
CollectionCommand.Append( CollectionCommand.Append(
div( div(
div( div(
@ -135,17 +138,18 @@ object JoinRoomComponent {
) )
) )
} }
case Failure(exception) => case Failure(exception) =>
CollectionCommand.Append( CollectionCommand.Append(
div(
div( div(
cls := "flex space-x-2 items-center", div(
code(cls := "text-red-500", "Error: "), cls := "flex space-x-2 items-center",
code(cls := "text-red-300", exception.getMessage) code(cls := "text-red-500", "Error: "),
code(cls := "text-red-300", exception.getMessage)
)
) )
) )
) }
} )
) )
) )
) )