@vonaffenfels/contentful-teasermanager 1.2.17 → 1.2.19

package/src/components/Teasermanager/Timeline.js

@@ -1,180 +1,180 @@
-import {
-    useEffect, useState,
-} from "react";
-import styles from "./Timeline.module.css";
-import format from "date-fns/format";
-import subtract from "date-fns/sub";
-import classNames from "classnames";
-
-export const Timeline = ({
-    currentDate,
-    setCurrentDate,
-    loadTimelineStateForPage,
-}) => {
-    const [timelineState, setTimelineState] = useState(null);
-    const stepsInRange = (24 * 60) / 15 + 1; // must be uneven so we have a center ;)
-
-    useEffect(() => {
-        if (!currentDate) {
-            const defaultCurrentDate = new Date();
-            defaultCurrentDate.setMinutes((Math.round(defaultCurrentDate.getMinutes() / 15) * 15) % 60);
-
-            setCurrentDate(defaultCurrentDate);
-        }
-    }, [currentDate]);
-
-    const leftDate = currentDate && subtract(currentDate, {minutes: stepsInRange / 2 * 15});
-    if (leftDate) {
-        leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
-        leftDate.setSeconds(0);
-        leftDate.setMilliseconds(0);
-    }
-
-    const handleDateChange = (e) => {
-        if (!e.target.value) {
-            return;
-        }
-
-        let newDate = new Date(e.target.value);
-
-        if (format(currentDate, "yyyy-MM-dd") === format(newDate, "yyyy-MM-dd")) {
-            return; // nothing changed
-        }
-
-        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-
-        setCurrentDate(newDate);
-    };
-
-    const handleTimeChange = (e, type) => {
-        if (!e.target.value) {
-            return;
-        }
-
-        let newDate = new Date(currentDate);
-
-        switch (type) {
-            case "hour":
-                if (newDate.getHours() === e.target.value) {
-                    return; // nothing changed
-                }
-
-                newDate.setHours(e.target.value);
-                break;
-            case "minute":
-                if (newDate.getMinutes() === e.target.value) {
-                    return; // nothing changed
-                }
-
-                newDate.setMinutes(e.target.value);
-                break;
-        }
-
-        setCurrentDate(newDate);
-    };
-
-
-    useEffect(() => {
-        if (!currentDate) {
-            return;
-        }
-
-        const leftDate = subtract(currentDate, {minutes: stepsInRange / 2 * 15});
-        leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
-        leftDate.setSeconds(0);
-
-        const rightDate = new Date();
-        rightDate.setTime(leftDate.getTime() + (15 * 60 * 1000 * stepsInRange));
-
-        loadTimelineStateForPage(leftDate, rightDate).then(setTimelineState);
-    }, [currentDate])
-
-    return <div className="flex w-full">
-        <div className={styles.wrapper}>
-            <div className="w-full h-auto text-center py-2">
-                {!!currentDate && (
-                    <>
-                        <input
-                            type="date"
-                            value={format(currentDate, "yyyy-MM-dd")}
-                            onChange={handleDateChange}
-                            className="mr-2 w-auto"/>
-                        <TimeSelect className="inline w-auto" currentDate={currentDate} onChange={handleTimeChange}/>
-                    </>
-                )}
-            </div>
-            <div className={styles.timeline}>
-                {!!leftDate && Array(stepsInRange).fill(0).map((_, index) => {
-                    const dotDate = new Date(leftDate.getTime() + (15 * 60 * 1000 * (index + 1)));
-                    const stateChanged = timelineState?.[dotDate.toISOString()] || 0;
-                    const currentDateCopy = new Date(currentDate);
-                    currentDateCopy.setMilliseconds(0);
-                    currentDateCopy.setSeconds(0);
-
-                    return <div
-                        key={index}
-                        className={classNames(styles.timelineDot, {
-                            [styles.timelineDotActive]: dotDate.getTime() === currentDateCopy.getTime(),
-                            [styles.timelineDotChanged]: !!stateChanged,
-                        })}
-                        onClick={e => {
-                            e.preventDefault();
-                            setCurrentDate(dotDate);
-                            return false;
-                        }}
-                    >
-                        <div
-                            className={classNames(styles.timelineDotLabel, {[styles.timelineDotLabelPermanent]: dotDate.getHours() % 6 === 0 && dotDate.getMinutes() === 0})}>
-                            {leftDate && format(dotDate, "dd.MM.yyyy HH:mm")}
-                            {!!stateChanged && ` (${stateChanged})`}
-                        </div>
-                    </div>;
-                })}
-            </div>
-        </div>
-    </div>;
-};
-
-const TimeSelect = ({
-    onChange,
-    currentDate,
-    ...props
-}) => {
-    const renderHourSelectOptions = () => {
-        let options = [];
-
-        for (let i = 1; i <= 24; i++) {
-            options.push(<option
-                key={`hour-option-${i}`}
-                value={i}
-                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
-        }
-
-        return options;
-    };
-
-    const renderMinuteSelectOptions = () => {
-        let options = [];
-
-        for (let i = 0; i <= 60; i += 15) {
-            options.push(<option
-                key={`minute-option-${i}`}
-                value={i}
-                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
-        }
-
-        return options;
-    };
-
-    return (
-        <div {...props}>
-            <select value={format(currentDate, "H")} onChange={e => onChange(e, "hour")} className="w-auto">
-                {renderHourSelectOptions()}
-            </select>
-            <select value={format(currentDate, "m")} onChange={e => onChange(e, "minute")} className="mr-1 w-auto">
-                {renderMinuteSelectOptions()}
-            </select>
-            <span className="dark:text-white">Uhr</span>
-        </div>
-    );
+import {
+    useEffect, useState,
+} from "react";
+import styles from "./Timeline.module.css";
+import format from "date-fns/format";
+import subtract from "date-fns/sub";
+import classNames from "classnames";
+
+export const Timeline = ({
+    currentDate,
+    setCurrentDate,
+    loadTimelineStateForPage,
+}) => {
+    const [timelineState, setTimelineState] = useState(null);
+    const stepsInRange = (24 * 60) / 15 + 1; // must be uneven so we have a center ;)
+
+    useEffect(() => {
+        if (!currentDate) {
+            const defaultCurrentDate = new Date();
+            defaultCurrentDate.setMinutes((Math.round(defaultCurrentDate.getMinutes() / 15) * 15) % 60);
+
+            setCurrentDate(defaultCurrentDate);
+        }
+    }, [currentDate]);
+
+    const leftDate = currentDate && subtract(currentDate, {minutes: stepsInRange / 2 * 15});
+    if (leftDate) {
+        leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+        leftDate.setSeconds(0);
+        leftDate.setMilliseconds(0);
+    }
+
+    const handleDateChange = (e) => {
+        if (!e.target.value) {
+            return;
+        }
+
+        let newDate = new Date(e.target.value);
+
+        if (format(currentDate, "yyyy-MM-dd") === format(newDate, "yyyy-MM-dd")) {
+            return; // nothing changed
+        }
+
+        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+
+        setCurrentDate(newDate);
+    };
+
+    const handleTimeChange = (e, type) => {
+        if (!e.target.value) {
+            return;
+        }
+
+        let newDate = new Date(currentDate);
+
+        switch (type) {
+            case "hour":
+                if (newDate.getHours() === e.target.value) {
+                    return; // nothing changed
+                }
+
+                newDate.setHours(e.target.value);
+                break;
+            case "minute":
+                if (newDate.getMinutes() === e.target.value) {
+                    return; // nothing changed
+                }
+
+                newDate.setMinutes(e.target.value);
+                break;
+        }
+
+        setCurrentDate(newDate);
+    };
+
+
+    useEffect(() => {
+        if (!currentDate) {
+            return;
+        }
+
+        const leftDate = subtract(currentDate, {minutes: stepsInRange / 2 * 15});
+        leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+        leftDate.setSeconds(0);
+
+        const rightDate = new Date();
+        rightDate.setTime(leftDate.getTime() + (15 * 60 * 1000 * stepsInRange));
+
+        loadTimelineStateForPage(leftDate, rightDate).then(setTimelineState);
+    }, [currentDate])
+
+    return <div className="flex w-full">
+        <div className={styles.wrapper}>
+            <div className="w-full h-auto text-center py-2">
+                {!!currentDate && (
+                    <>
+                        <input
+                            type="date"
+                            value={format(currentDate, "yyyy-MM-dd")}
+                            onChange={handleDateChange}
+                            className="mr-2 w-auto"/>
+                        <TimeSelect className="inline w-auto" currentDate={currentDate} onChange={handleTimeChange}/>
+                    </>
+                )}
+            </div>
+            <div className={styles.timeline}>
+                {!!leftDate && Array(stepsInRange).fill(0).map((_, index) => {
+                    const dotDate = new Date(leftDate.getTime() + (15 * 60 * 1000 * (index + 1)));
+                    const stateChanged = timelineState?.[dotDate.toISOString()] || 0;
+                    const currentDateCopy = new Date(currentDate);
+                    currentDateCopy.setMilliseconds(0);
+                    currentDateCopy.setSeconds(0);
+
+                    return <div
+                        key={index}
+                        className={classNames(styles.timelineDot, {
+                            [styles.timelineDotActive]: dotDate.getTime() === currentDateCopy.getTime(),
+                            [styles.timelineDotChanged]: !!stateChanged,
+                        })}
+                        onClick={e => {
+                            e.preventDefault();
+                            setCurrentDate(dotDate);
+                            return false;
+                        }}
+                    >
+                        <div
+                            className={classNames(styles.timelineDotLabel, {[styles.timelineDotLabelPermanent]: dotDate.getHours() % 6 === 0 && dotDate.getMinutes() === 0})}>
+                            {leftDate && format(dotDate, "dd.MM.yyyy HH:mm")}
+                            {!!stateChanged && ` (${stateChanged})`}
+                        </div>
+                    </div>;
+                })}
+            </div>
+        </div>
+    </div>;
+};
+
+const TimeSelect = ({
+    onChange,
+    currentDate,
+    ...props
+}) => {
+    const renderHourSelectOptions = () => {
+        let options = [];
+
+        for (let i = 1; i <= 24; i++) {
+            options.push(<option
+                key={`hour-option-${i}`}
+                value={i}
+                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
+        }
+
+        return options;
+    };
+
+    const renderMinuteSelectOptions = () => {
+        let options = [];
+
+        for (let i = 0; i <= 60; i += 15) {
+            options.push(<option
+                key={`minute-option-${i}`}
+                value={i}
+                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
+        }
+
+        return options;
+    };
+
+    return (
+        <div {...props}>
+            <select value={format(currentDate, "H")} onChange={e => onChange(e, "hour")} className="w-auto">
+                {renderHourSelectOptions()}
+            </select>
+            <select value={format(currentDate, "m")} onChange={e => onChange(e, "minute")} className="mr-1 w-auto">
+                {renderMinuteSelectOptions()}
+            </select>
+            <span className="dark:text-white">Uhr</span>
+        </div>
+    );
 };

package/src/components/Teasermanager/Timeline.module.css

@@ -1,90 +1,90 @@
-.wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-}
-
-.timeline {
-    position: relative;
-    height: auto;
-    padding: 30px 0 12px 0;
-    width: 100%;
-    display: flex;
-    font-size: 1em;
-    justify-content: space-between;
-}
-.timeline:after {
-    content: "";
-    display: block;
-    background: black;
-    width: 100%;
-    height: 2px;
-    position: absolute;
-    z-index: 0;
-    bottom: 16px;
-    left: 0px;
-}
-
-.timeline:hover .timeline-dot-label {
-    opacity: 0.2;
-}
-
-.timeline-dot {
-    display: block;
-    object-fit: contain;
-    width: 100%;
-    max-width: 16px;
-    aspect-ratio: 1;
-    border-radius: 9999px;
-    position: relative;
-    z-index: 1;
-}
-
-.timeline .timeline-dot:hover .timeline-dot-label {
-    display: block;
-    opacity: 1;
-    z-index: 100;
-}
-
-.timeline-dot-active {
-    outline: 2px solid green;
-    cursor: pointer;
-    background-color: green;
-}
-
-.timeline-dot-changed {
-    outline: 2px solid blue;
-    cursor: pointer;
-    background-color: #004f73;
-}
-
-.timeline-dot-active.timeline-dot-changed {
-    outline: 2px solid green;
-    background-color: #004f73;
-}
-
-.timeline-dot-label.timeline-dot-label-permanent {
-    display: block;
-    z-index: 10;
-}
-
-.timeline-dot-label {
-    display: none;
-    background: white;
-    position: absolute;
-    top: -30px;
-    left: -90px;
-    width: 180px;
-    text-align: center;
-}
-
-@media(prefers-color-scheme: dark) {
-    .timeline:after {
-        background: white;
-    }
-    .timeline-dot-changed {
-        background-color: #ffffff;
-    }
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.timeline {
+    position: relative;
+    height: auto;
+    padding: 30px 0 12px 0;
+    width: 100%;
+    display: flex;
+    font-size: 1em;
+    justify-content: space-between;
+}
+.timeline:after {
+    content: "";
+    display: block;
+    background: black;
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    z-index: 0;
+    bottom: 16px;
+    left: 0px;
+}
+
+.timeline:hover .timeline-dot-label {
+    opacity: 0.2;
+}
+
+.timeline-dot {
+    display: block;
+    object-fit: contain;
+    width: 100%;
+    max-width: 16px;
+    aspect-ratio: 1;
+    border-radius: 9999px;
+    position: relative;
+    z-index: 1;
+}
+
+.timeline .timeline-dot:hover .timeline-dot-label {
+    display: block;
+    opacity: 1;
+    z-index: 100;
+}
+
+.timeline-dot-active {
+    outline: 2px solid green;
+    cursor: pointer;
+    background-color: green;
+}
+
+.timeline-dot-changed {
+    outline: 2px solid blue;
+    cursor: pointer;
+    background-color: #004f73;
+}
+
+.timeline-dot-active.timeline-dot-changed {
+    outline: 2px solid green;
+    background-color: #004f73;
+}
+
+.timeline-dot-label.timeline-dot-label-permanent {
+    display: block;
+    z-index: 10;
+}
+
+.timeline-dot-label {
+    display: none;
+    background: white;
+    position: absolute;
+    top: -30px;
+    left: -90px;
+    width: 180px;
+    text-align: center;
+}
+
+@media(prefers-color-scheme: dark) {
+    .timeline:after {
+        background: white;
+    }
+    .timeline-dot-changed {
+        background-color: #ffffff;
+    }
 }