Start building dates framework

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 (
+        <div className="form-daterange">
+            <div className="form-daterange-icon">
+                {props.icon}
+            </div>
+            <div className="form-daterange-start">
+                {props.start}
+            </div>
+            <div className="form-daterange-connector">
+                {props.connector}
+            </div>
+            <div className="form-daterange-end">
+                {props.end}
+            </div>
+        </div>
+    )
+}

components/editable/EditableDateRange.tsx

@@ -0,0 +1,25 @@
+import { faClock } from "@fortawesome/free-solid-svg-icons"
+import { FestaIcon } from "../extensions/FestaIcon"
+import { FormDateRange } from "../FormDateRange"
+
+
+export function EditableDateRange() {
+    // TODO
+
+    return (
+        <FormDateRange
+            icon={
+                <FestaIcon icon={faClock}/>
+            }
+            start={<>
+            
+            </>}
+            connector={<>
+                &nbsp;→&nbsp;
+            </>}
+            end={<>
+            
+            </>}
+        />
+    )
+}

components/view/ViewEvent.tsx

@@ -1,9 +1,11 @@
 import { ReactNode } from "react"
+import { FormDateRange } from "../FormDateRange"
 
 type ViewEventProps = {
-    title: ReactNode
+    title: ReactNode,
-    postcard: ReactNode
+    postcard: ReactNode,
-    description: ReactNode
+    description: ReactNode,
+    datetime: ReactNode,
 }
 
 
@@ -19,6 +21,9 @@ export function ViewEvent(props: ViewEventProps) {
             <div className="view-event-description">
                 {props.description}
             </div>
+            <FormDateRange 
+                className="view-event-daterange"
+            />
         </main>
     )
 }

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, {

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, {

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<string>(event.name)
     const [description, setDescription] = useState<string>(event.description)
     const [postcard, setPostcard] = useState<string | null>(event.postcard)
+    const [startingAt, setStartingAt] = useState<string | null>(event.startingAt?.toISOString() ?? null)
+    const [endingAt, setEndingAt] = useState<string | null>(event.endingAt?.toISOString() ?? null)
 
     const setPostcardBlob = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => {
@@ -97,6 +101,18 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
                         placeholder={t("eventDetailsDescriptionPlaceholder")}
                     />
                 }
+                datetime={
+                    <FormDateRange
+                        startProps={{
+                            value: startingAt ?? undefined,
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value),
+                        }}
+                        endProps={{
+                            value: endingAt ?? undefined,
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value),
+                        }}
+                    />
+                }
             />
         </EditingContext.Provider>
     </>

prisma/schema.prisma

@@ -87,4 +87,8 @@ model Event {
     postcard    String?
     /// The description of the event. It will be parsed in Markdown!
     description String    @default("")
+    /// The time when the event will start at.
+    startingAt  DateTime?
+    /// The time when the even will end at.
+    endingAt    DateTime?
 }

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;
+}

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;
+}

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;
 }