diff --git a/components/FormDateRange.tsx b/components/FormDateRange.tsx
new file mode 100644
index 0000000..0093d2a
--- /dev/null
+++ b/components/FormDateRange.tsx
@@ -0,0 +1,28 @@
+import { ReactNode } from "react"
+
+type FormDateRangeProps = {
+ icon: ReactNode,
+ start: ReactNode,
+ connector: ReactNode,
+ end: ReactNode,
+}
+
+
+export function FormDateRange(props: FormDateRangeProps) {
+ return (
+
+
+ {props.icon}
+
+
+ {props.start}
+
+
+ {props.connector}
+
+
+ {props.end}
+
+
{props.description}
+
)
}
\ No newline at end of file
diff --git a/pages/api/events/[slug].ts b/pages/api/events/[slug].ts
index 597c29f..8cbed7a 100644
--- a/pages/api/events/[slug].ts
+++ b/pages/api/events/[slug].ts
@@ -23,6 +23,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
const update = {
name: req.body.name,
postcard: req.body.postcard ?? null,
+ description: req.body.description,
+ startingAt: req.body.startingAt,
+ endingAt: req.body.endingAt,
}
await restInPeace(req, res, {
diff --git a/pages/api/events/index.ts b/pages/api/events/index.ts
index 959127e..86093d0 100644
--- a/pages/api/events/index.ts
+++ b/pages/api/events/index.ts
@@ -21,6 +21,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
creatorId: user.id,
name: req.body.name,
postcard: req.body.postcard ?? null,
+ description: req.body.description,
+ startingAt: req.body.startingAt,
+ endingAt: req.body.endingAt,
}
await restInPeace(req, res, {
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index 3c22303..6e61a02 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -14,6 +14,8 @@ import { Postcard } from "../../components/postcard/Postcard";
import { ViewContent } from "../../components/view/ViewContent";
import { EditablePostcard } from "../../components/editable/EditablePostcard";
import { ViewEvent } from "../../components/view/ViewEvent";
+import { EditableDateTime } from "../../components/editable/EditableDateTime";
+import { FormDateRange } from "../../components/FormDateRange";
export async function getServerSideProps(context: NextPageContext) {
@@ -50,6 +52,8 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
const [title, setTitle] = useState(event.name)
const [description, setDescription] = useState(event.description)
const [postcard, setPostcard] = useState(event.postcard)
+ const [startingAt, setStartingAt] = useState(event.startingAt?.toISOString() ?? null)
+ const [endingAt, setEndingAt] = useState(event.endingAt?.toISOString() ?? null)
const setPostcardBlob = useCallback(
(e: ChangeEvent) => {
@@ -97,6 +101,18 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
placeholder={t("eventDetailsDescriptionPlaceholder")}
/>
}
+ datetime={
+ ) => setStartingAt(e.target.value),
+ }}
+ endProps={{
+ value: endingAt ?? undefined,
+ onChange: (e: ChangeEvent) => setEndingAt(e.target.value),
+ }}
+ />
+ }
/>
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 4340b20..bc74fec 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -76,15 +76,19 @@ model Token {
/// The core of the project, a single instance of people gathering in a certain place at a certain time.
model Event {
/// An unique url-safe string identifying the event, and allowing it to be accessed at `/events/SLUG`.
- slug String @id
+ slug String @id
/// The id of the {@link User} who created the event.
- creatorId String @db.Uuid
+ creatorId String @db.Uuid
/// The {@link User} who created the event.
- creator User @relation(fields: [creatorId], references: [id])
+ creator User @relation(fields: [creatorId], references: [id])
/// The name of the event.
name String
/// The URL to the postcard of the event.
postcard String?
/// The description of the event. It will be parsed in Markdown!
- description String @default("")
+ description String @default("")
+ /// The time when the event will start at.
+ startingAt DateTime?
+ /// The time when the even will end at.
+ endingAt DateTime?
}
diff --git a/styles/components/form-daterange.css b/styles/components/form-daterange.css
new file mode 100644
index 0000000..9431cbf
--- /dev/null
+++ b/styles/components/form-daterange.css
@@ -0,0 +1,15 @@
+.form-daterange {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+ gap: 4px;
+}
+
+.form-daterange-start, .form-daterange-end {
+ flex-grow: 1;
+}
+
+.form-daterange-icon, .form-daterange-connector {
+ flex-grow: 0;
+}
diff --git a/styles/components/views/event.css b/styles/components/views/event.css
index 032a9d1..c03ff91 100644
--- a/styles/components/views/event.css
+++ b/styles/components/views/event.css
@@ -4,9 +4,10 @@
"x1 ti ti ti x4"
"x1 x2 po x3 x4"
"x1 x2 de x3 x4"
+ "x1 x2 dr x3 x4"
;
grid-template-columns: 3fr 1fr 800px 1fr 3fr;
- grid-template-rows: auto auto 1fr;
+ grid-template-rows: auto auto 1fr auto;
row-gap: 4px;
@@ -25,3 +26,7 @@
.view-event-description {
grid-area: de;
}
+
+.view-event-daterange {
+ grid-area: dr;
+}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 2f6c47f..7a1d4d1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,6 +15,7 @@
@import "components/toolbar.css";
@import "components/form-monorow.css";
@import "components/error.css";
+@import "components/form-daterange.css";
* {
@@ -27,7 +28,7 @@
text-shadow: none;
}
-*[disabled] {
+*[disabled], .disabled {
opacity: 0.2;
cursor: not-allowed;
}