steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-10-16 15:07:27 +00:00
Code Activity

Create editable date range

Browse source
This commit is contained in:
Steffo 2022-06-07 13:41:26 +02:00
parent bab42a9203
commit 98403da9a7
Signed by: steffo
GPG key ID: 6965406171929D01
11 changed files with 100 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/FormDateRange.tsx
View file

@ -1,6 +1,8 @@
import classNames from "classnames"
import { ReactNode } from "react"
type FormDateRangeProps = {
preview: boolean,
icon: ReactNode,
start: ReactNode,
connector: ReactNode,
@ -10,7 +12,10 @@ type FormDateRangeProps = {
export function FormDateRange(props: FormDateRangeProps) {
return (
<div className="form-daterange">
<div className={classNames({
"form-daterange": true,
"form-daterange-preview": props.preview,
})}>
<div className="form-daterange-icon">
{props.icon}
</div>

60
components/editable/EditableDateRange.tsx
View file

@ -1,25 +1,59 @@
import { faClock } from "@fortawesome/free-solid-svg-icons"
import { faChevronRight, faClock } from "@fortawesome/free-solid-svg-icons"
import { HTMLProps } from "react"
import { EditingContext } from "../../contexts/editing"
import { useDefinedContext } from "../../utils/definedContext"
import { FestaIcon } from "../extensions/FestaIcon"
import { FormDateRange } from "../FormDateRange"
export function EditableDateRange() {
// TODO
type EditableDateRangeProps = {
startProps: HTMLProps<HTMLInputElement> & {value?: string},
endProps: HTMLProps<HTMLInputElement> & {value?: string},
}
return (
export function EditableDateRange(props: EditableDateRangeProps) {
const [editing,] = useDefinedContext(EditingContext)
const startDate = props.startProps
return editing ? (
<FormDateRange
preview={false}
icon={
<FestaIcon icon={faClock}/>
}
start={<>
</>}
connector={<>
&nbsp;→&nbsp;
</>}
end={<>
</>}
start={
<input
type="datetime-local"
{...props.startProps}
/>
}
connector={
<FestaIcon icon={faChevronRight}/>
}
end={
<input
type="datetime-local"
{...props.endProps}
/>
}
/>
) : (
<FormDateRange
preview={true}
icon={
<FestaIcon icon={faClock}/>
}
start={
new Date(Date.parse(props.startProps.value!)).toLocaleString()
}
connector={
<FestaIcon icon={faChevronRight}/>
}
end={
new Date(Date.parse(props.endProps.value!)).toLocaleString()
}
/>
)
}

2
components/tools/ToolToggleEditing.tsx
View file

@ -12,7 +12,7 @@ export function ToolToggleEditing() {
<button
aria-label={editing ? t("toggleEditingView") : t("toggleEditingEdit")}
onClick={() => setEditing(!editing)}
className="square-40"
className="toolbar-tool"
>
<FestaIcon icon={editing ? faBinoculars : faPencil}/>
</button>

2
components/tools/ToolToggleVisible.tsx
View file

@ -12,7 +12,7 @@ export function ToolToggleVisible() {
<button
aria-label={visible ? t("toggleVisibleHide") : t("toggleVisibleShow")}
onClick={() => setVisible(!visible)}
className="square-40"
className="toolbar-tool"
>
<FestaIcon icon={visible ? faEyeSlash : faEye}/>
</button>

8
components/view/ViewEvent.tsx
View file

@ -5,7 +5,7 @@ type ViewEventProps = {
title: ReactNode,
postcard: ReactNode,
description: ReactNode,
datetime: ReactNode,
daterange: ReactNode,
}
@ -21,9 +21,9 @@ export function ViewEvent(props: ViewEventProps) {
<div className="view-event-description">
{props.description}
</div>
<FormDateRange
className="view-event-daterange"
/>
<div className="view-event-daterange">
{props.daterange}
</div>
</main>
)
}

13
pages/events/[slug].tsx
View file

@ -17,6 +17,7 @@ import { ViewEvent } from "../../components/view/ViewEvent";
import { EditableDateTime } from "../../components/editable/EditableDateTime";
import { FormDateRange } from "../../components/FormDateRange";
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
import { EditableDateRange } from "../../components/editable/EditableDateRange";
export async function getServerSideProps(context: NextPageContext) {
@ -103,15 +104,15 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
placeholder={t("eventDetailsDescriptionPlaceholder")}
/>
}
datetime={
<FormDateRange
daterange={
<EditableDateRange
startProps={{
value: startingAt ?? undefined,
onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value),
value: startingAt,
onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value)
}}
endProps={{
value: endingAt ?? undefined,
onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value),
value: endingAt,
onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value)
}}
/>
}

15
styles/components/form-daterange.css
View file

@ -6,6 +6,14 @@
gap: 4px;
}
.form-daterange-icon {
margin-right: 4px;
}
.form-daterange-connector {
margin-right: 2px;
}
.form-daterange-start, .form-daterange-end {
flex-grow: 1;
}
@ -13,3 +21,10 @@
.form-daterange-icon, .form-daterange-connector {
flex-grow: 0;
}
.form-daterange-preview {
}
.form-daterange-preview .form-daterange-start, .form-daterange-preview .form-daterange-end {
flex-grow: 0;
}

1
styles/components/postcard.css
View file

@ -4,6 +4,7 @@
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
z-index: -1;
position: fixed;

4
styles/components/square.css
View file

@ -1,4 +0,0 @@
.square-40 {
width: 40px !important;
height: 40px !important;
}

14
styles/components/toolbar.css
View file

@ -41,4 +41,18 @@
flex-direction: column-reverse;
}
}
.toolbar-tool {
width: 50px !important;
height: 50px !important;
font-size: large;
}
@media (pointer: fine) {
.toolbar-tool {
width: 40px !important;
height: 40px !important;
font-size: medium;
}
}

6
styles/components/views/event.css
View file

@ -5,9 +5,10 @@
"x1 x2 po x3 x4"
"x1 x2 de x3 x4"
"x1 x2 dr x3 x4"
"xx xx xx xx xx"
;
grid-template-columns: 1fr 80px 640px 80px 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-rows: auto auto auto auto 1fr;
row-gap: 4px;
@ -21,9 +22,10 @@
"po"
"de"
"dr"
"xx"
;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-rows: auto auto auto auto 1fr;
}
}