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:
parent
28e85381b2
commit
2d10d48068
5 changed files with 54 additions and 56 deletions
|
@ -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")}
|
||||||
|
</p>
|
||||||
<code>
|
<code>
|
||||||
{JSON.stringify(error)}
|
{JSON.stringify(error)}
|
||||||
</code>
|
</code>
|
||||||
</div>
|
</>
|
||||||
)
|
|
||||||
}
|
}
|
||||||
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>
|
||||||
|
<p>
|
||||||
|
{t("eventListCreateAnother")}
|
||||||
|
</p>
|
||||||
|
<form className="form-monorow">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={t("eventListCreatePlaceholder")}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
className="positive square-40"
|
||||||
|
value="→"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={newClassName}>
|
||||||
|
{contents}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className={newClassName}>
|
|
||||||
<p>
|
|
||||||
{message}
|
|
||||||
</p>
|
|
||||||
{contents}
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
Loading…
Reference in a new issue