1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00

Make some progress on the event creation form

This commit is contained in:
Steffo 2022-06-01 16:57:19 +02:00
parent 28e85381b2
commit 2d10d48068
Signed by: steffo
GPG key ID: 6965406171929D01
5 changed files with 54 additions and 56 deletions

View file

@ -14,48 +14,58 @@ export function FormEventList(props: HTMLProps<HTMLFormElement>) {
"negative": error, "negative": error,
}) })
let message: JSX.Element
let contents: JSX.Element let contents: JSX.Element
if(error) { if(error) {
message = t("formEventListError") contents = <>
contents = ( <p>
<div> {t("eventListError")}
<code> </p>
{JSON.stringify(error)} <code>
</code> {JSON.stringify(error)}
</div> </code>
) </>
} }
else if(!data) { else if(!data) {
message = <Loading/> contents = <Loading/>
contents = <></>
} }
else { else {
console.debug(data)
if(data.length === 0) { if(data.length === 0) {
message = t("formEventListFirst") contents = <>
contents = ( <p>
<div>zzz</div> {t("eventListCreateFirst")}
) </p>
</>
} }
else { else {
message = t("formEventListAnother") contents = <>
contents = ( <p>
{t("eventListDescription")}
</p>
<div> <div>
{data.map((event: Event) => <div><a href={`/events/slug`}>{event.name}</a></div>)} {data.map((event: Event) => <div><a href={`/events/${event.slug}`}>{event.name}</a></div>)}
</div> </div>
) <p>
{t("eventListCreateAnother")}
</p>
<form className="form-monorow">
<input
type="text"
placeholder={t("eventListCreatePlaceholder")}
/>
<input
type="submit"
className="positive square-40"
value="→"
/>
</form>
</>
} }
} }
return ( return (
<form className={newClassName}> <div className={newClassName}>
<p>
{message}
</p>
{contents} {contents}
</form> </div>
) )
} }

View file

@ -8,6 +8,7 @@ import { FestaLoginData, TelegramLoginData } from "../types/user"
import { useDefinedContext } from "../utils/definedContext" import { useDefinedContext } from "../utils/definedContext"
import { TelegramLoginButton } from "./TelegramLoginButton" import { TelegramLoginButton } from "./TelegramLoginButton"
export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormElement>) { export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormElement>) {
const { t } = useTranslation("common") const { t } = useTranslation("common")
const [_, setLogin] = useDefinedContext(LoginContext) const [_, setLogin] = useDefinedContext(LoginContext)
@ -69,11 +70,11 @@ export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormEleme
} }
return ( return (
<form className={newClassName}> <div className={newClassName}>
<p> <p>
{message} {message}
</p> </p>
{contents} {contents}
</form> </div>
) )
} }

View file

@ -12,7 +12,9 @@
"eventsInputNamePlaceholder": "Festa a Festà", "eventsInputNamePlaceholder": "Festa a Festà",
"eventsInputSubmitLabel": "Crea evento", "eventsInputSubmitLabel": "Crea evento",
"genericLoading": "Caricamento...", "genericLoading": "Caricamento...",
"formEventListFirst": "Inserisci il nome del tuo primo evento qui sotto!", "eventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:",
"formEventListAnother": "Questi sono gli eventi che hai creato:", "eventListDescription": "Questi sono gli eventi che hai creato:",
"formEventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:" "eventListCreateAnother": "Se vuoi crearne un altro, inserisci il suo nome qui sotto:",
"eventListCreateFirst": "Inserisci il nome del tuo primo evento qui sotto!",
"eventListCreatePlaceholder": "Nome evento"
} }

View file

@ -122,3 +122,12 @@ input.negative, button.negative {
.icon.fa-pulse { .icon.fa-pulse {
filter: drop-shadow(1px 1px 1px var(--background)); filter: drop-shadow(1px 1px 1px var(--background));
} }
.form-monorow {
display: flex;
flex-direction: row;
gap: 4px;
justify-content: center;
align-items: center;
}

View file

@ -1,7 +1,7 @@
#page-index { #page-index {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: 1fr 1fr; grid-template-rows: 2fr 3fr;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -34,27 +34,3 @@
align-self: start; align-self: start;
grid-row: 2; grid-row: 2;
} }
.form-event-create {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
gap: 8px;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.form-event-create #input-name {
flex-grow: 1;
width: 100%;
}
.form-event-create #input-submit {
flex-shrink: 0;
}