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 3f3d1945cd
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
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.Success
import concurrent.ExecutionContext.Implicits.global
object JoinRoomComponent {
@ -41,18 +40,18 @@ object JoinRoomComponent {
)
)
val roomNameVar = Var("testroom")
val roomPassVar = Var("password")
val nicknameVar = Var("me")
val nicknamePass = Var("nickpass")
val roomNameVar = Var("")
val roomPassVar = Var("")
val nicknameVar = Var("")
val nicknamePass = Var("")
val (responsesStream, responseReceived) = EventStream.withCallback[FetchResponse[String]]
def render(loggedIn: Observer[Boolean]): Element = {
val submitButton = button(
"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
.mapTo {
(roomNameVar.now(), roomPassVar.now(), nicknameVar.now(), nicknamePass.now())
@ -68,7 +67,8 @@ object JoinRoomComponent {
nicknamePass
)
)
.text.map { response =>
.text
.map { response =>
if (response.ok) {
loggedIn.onNext(true)
response
@ -77,6 +77,7 @@ object JoinRoomComponent {
} --> responseReceived
)
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",
onClick
.mapTo {
@ -93,7 +94,8 @@ object JoinRoomComponent {
nicknamePass
)
)
.text.map { response =>
.text
.map { response =>
if (response.ok) {
loggedIn.onNext(true)
response
@ -102,25 +104,25 @@ object JoinRoomComponent {
} --> responseReceived
)
div(
className := "flex flex-col h-full justify-center",
"Logging in:",
nameInput(roomNameVar, "Enter room name:"),
passInput(roomPassVar, "room password"),
nameInput(nicknameVar, "Enter your nickname:"),
passInput(nicknamePass, "nickname pass:"),
submitButton,
newRoomButton,
className := "bg-green-50 w-full h-full flex justify-center",
div(
className := "w-60 flex flex-col 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(
code("received:")
),
div(
cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
children.command <-- responsesStream.recoverToTry.map {
case Success(response) =>
{
div(
code("error log:")
),
div(
cls := "flex flex-col space-y-4 p-4 max-h-96 overflow-auto bg-gray-900",
children.command <-- responsesStream.recoverToTry.map {
case Success(response) => {
CollectionCommand.Append(
div(
div(
@ -135,17 +137,18 @@ object JoinRoomComponent {
)
)
}
case Failure(exception) =>
CollectionCommand.Append(
div(
case Failure(exception) =>
CollectionCommand.Append(
div(
cls := "flex space-x-2 items-center",
code(cls := "text-red-500", "Error: "),
code(cls := "text-red-300", exception.getMessage)
div(
cls := "flex space-x-2 items-center",
code(cls := "text-red-500", "Error: "),
code(cls := "text-red-300", exception.getMessage)
)
)
)
)
}
}
)
)
)
)