apio/bff-challenge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add test creation form

Browse Source
This commit is contained in:
apio 2023-01-25 19:45:04 +01:00
parent 6dc460b478
commit 43f33286bf
Signed by: apio
GPG Key ID: B8A7D06E42258954
3 changed files with 82 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/main.rs
View File

@ -1,12 +1,31 @@
#![feature(decl_macro)]
use rocket::*;
use rocket::{*, response::Redirect, form::Form};
use rocket_dyn_templates::{Template, context};
#[get("/create")]
fn create() -> Template
fn begin_create() -> Template
{
Template::render("create", context!{})
Template::render("begin_create", context!{})
}
#[get("/create/<name>")]
fn create(name: &str) -> Template
{
Template::render("create", context!{
username: name
})
}
#[derive(FromForm)]
struct UserNameData<'r> {
pub username: &'r str,
}
#[post("/create", data = "<name>")]
fn create_post(name: Form<UserNameData<'_>>) -> Redirect
{
Redirect::to(uri!(create(name.username)))
}
#[get("/about")]
@ -19,11 +38,11 @@ fn about() -> Template
fn index() -> Template
{
Template::render("index", context! {
create_uri: uri!(create())
create_uri: uri!(begin_create())
})
}
#[launch]
fn rocket() -> _ {
rocket::build().mount("/", routes![create, index, about]).attach(Template::fairing())
rocket::build().mount("/", routes![begin_create, create, create_post, index, about]).attach(Template::fairing())
}

44
templates/begin_create.html.tera Normal file
View File

@ -0,0 +1,44 @@
{% extends "base" %}
{% block title %}{% endblock %}
{% block body %}
<div class="hero h-fit">
<div class="hero-content flex-col text-center mt-48">
<h1 class="text-5xl font-bold">Crea tu propio test</h1>
<form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200 mt-6" id="create-form"
action="/create" method="post">
<div class="card-body">
<div class="form-control">
<label class="label">
<span class="label-text">Nombre</span>
</label>
<input type="text" name="username" id="username" placeholder="Entra tu nombre..." class="input input-bordered" />
</div>
<div class="form-control mt-6">
<input type="submit" class="btn btn-primary btn-disabled" id="continue-btn" value="Empezar"
disabled>
</div>
</div>
</form>
</div>
</div>
<script>
function debounce(callback, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(function () { callback.apply(this, args); }, wait);
};
}
document.querySelector("#username").onkeyup = debounce(() => {
if(document.querySelector("#username").value.length != 0)
{
document.querySelector("#continue-btn").classList.remove("btn-disabled");
document.querySelector("#continue-btn").removeAttribute("disabled");
} else {
document.querySelector("#continue-btn").classList.add("btn-disabled");
document.querySelector("#continue-btn").disabled = true;
}
}, 100);
</script>
{% endblock %}

25
templates/create.html.tera
View File

@ -3,19 +3,22 @@
{% block body %}
<div class="hero h-fit">
<div class="hero-content flex-col text-center mt-48">
<h1 class="text-5xl font-bold">Crea tu propio test</h1>
<form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200 mt-6" id="signup-form"
action="/auth/register" method="post">
<h1 class="text-5xl font-bold">¿Cuál es tu estación favorita?</h1>
<form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200" id="test-form"
action="/finish" method="post">
<div class="card-body">
<div class="form-control">
<label class="label">
<span class="label-text">Nombre</span>
</label>
<input type="text" name="username" id="username" placeholder="Entra tu nombre..." class="input input-bordered" />
<input type="hidden" name="username" id="username" value="{{ username }}" />
<div class="form-control mt-2">
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-0">Verano</button>
</div>
<div class="form-control mt-6">
<input type="submit" class="btn btn-primary btn-disabled" id="continue-btn" value="Empezar"
disabled>
<div class="form-control mt-2">
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-1">Primavera</button>
</div>
<div class="form-control mt-2">
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-2">Otoño</button>
</div>
<div class="form-control mt-2">
<button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-3">Invierno</button>
</div>
</div>
</form>