Create editable date range

components/FormDateRange.tsx

@@ -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>

components/editable/EditableDateRange.tsx

@@ -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() {
+type EditableDateRangeProps = {
-    // TODO
+    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={<>
+            start={
-            
+                <input 
-            </>}
+                    type="datetime-local" 
-            connector={<>
+                    {...props.startProps}
-                &nbsp;→&nbsp;
+                />
-            </>}
+            }
-            end={<>
+            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()
+            }
         />
     )
 }

components/tools/ToolToggleEditing.tsx

@@ -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>

components/tools/ToolToggleVisible.tsx

@@ -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>

components/view/ViewEvent.tsx

@@ -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 
+            <div className="view-event-daterange">
-                className="view-event-daterange"
+                {props.daterange}
-            />
+            </div>
         </main>
     )
 }

pages/events/[slug].tsx

@@ -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={
+                daterange={
-                    <FormDateRange
+                    <EditableDateRange
                         startProps={{
-                            value: startingAt ?? undefined,
+                            value: startingAt,
-                            onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value),
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setStartingAt(e.target.value)
                         }}
                         endProps={{
-                            value: endingAt ?? undefined,
+                            value: endingAt,
-                            onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value),
+                            onChange: (e: ChangeEvent<HTMLInputElement>) => setEndingAt(e.target.value)
                         }}
                     />
                 }

styles/components/form-daterange.css

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

styles/components/postcard.css

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

styles/components/square.css

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

styles/components/toolbar.css

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

styles/components/views/event.css

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