@vonaffenfels/contentful-teasermanager 1.0.26 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.0.26",
+    "version": "1.0.27",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -99,7 +99,7 @@
         "@vonaffenfels/slate-editor": "^1.0.26",
         "webpack": "5.73.0"
     },
-    "gitHead": "7089b60e41691c2c382e25c8447f74d0bd031aaa",
+    "gitHead": "148d5745884b9e253e56a2389662fc4f7ecf4254",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Teasermanager/Timeline.js

@@ -36,16 +36,21 @@ export const Timeline = ({
         setCurrentDate(newDate);
     };
 
-    const handleTimeChange = e => {
+    const handleTimeChange = (e, type) => {
         if (!e.target.value) {
             return;
         }
 
         let newDate = new Date(currentDate);
 
-        let [hours, minutes] = e.target.value.split(":");
-
-        newDate.setHours(hours, minutes);
+        switch (type) {
+            case "hour":
+                newDate.setHours(e.target.value);
+                break;
+            case "minute":
+                newDate.setMinutes(e.target.value);
+                break;
+        }
 
         setCurrentDate(newDate);
     };
@@ -56,7 +61,7 @@ export const Timeline = ({
                 {!!currentDate && (
                     <>
                         <input type="date" value={format(currentDate, "yyyy-MM-dd")} onChange={handleDateChange} className="mr-2 w-auto" />
-                        <input type="time" value={format(currentDate, "HH:mm")} onChange={handleTimeChange} className="w-auto" />
+                        <TimeSelect className="inline w-auto" currentDate={currentDate} onChange={handleTimeChange} />
                     </>
                 )}
             </div>
@@ -80,4 +85,44 @@ export const Timeline = ({
             </div>
         </div>
     </div>;
+};
+
+const TimeSelect = ({
+    onChange,
+    currentDate,
+    ...props
+}) => {
+    const renderHourSelectOptions = () => {
+        let options = [];
+
+        for (let i = 1; i <= 24; i++) {
+            console.log(i);
+            options.push(<option 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) {
+            console.log(i);
+            options.push(<option 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>
+            Uhr
+        </div>
+    );
 };

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

@@ -8,7 +8,7 @@
 
 .timeline {
     height: auto;
-    padding: 6px 0 6px 0;
+    padding: 6px 0 12px 0;
     width: 100%;
     display: flex;
     font-weight: bold;

package/src/components/Teasermanager.js

@@ -1,11 +1,13 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {
+    useEffect, useRef, useState,
+} from "react";
 
 import {getContentfulClient} from "../lib/contentfulClient";
 import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
 import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 import {Timeline} from "./Teasermanager/Timeline";
 import styles from "./Teasermanager.module.css";
-import {runLoaders} from "../lib/runLoaders"
+import {runLoaders} from "../lib/runLoaders";
 
 export const Teasermanager = ({
     entryId,
@@ -43,12 +45,12 @@ export const Teasermanager = ({
         });
 
         node.appendChild(managementNode);
-    }
+    };
 
     const updateSlots = (mutationList) => {
         const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
         slots.forEach(initSlot);
-    }
+    };
 
     useEffect(() => {
         if (!entryId && entry) {
@@ -67,11 +69,15 @@ export const Teasermanager = ({
         }
 
         const observer = new MutationObserver(updateSlots);
-        observer.observe(wrapperRef.current, {attributes: false, childList: true, subtree: true});
+        observer.observe(wrapperRef.current, {
+            attributes: false,
+            childList: true,
+            subtree: true,
+        });
 
         return () => {
             observer.disconnect();
-        }
+        };
     }, [wrapperRef, currentDate]);
 
     useEffect(() => {
@@ -90,7 +96,7 @@ export const Teasermanager = ({
         });
     }, [contentFieldName, locale, entry, reloadTrigger]);
 
-    return <div className="w-full flex flex-col">
+    return <div className="flex w-full flex-col">
         <div className="w-full">
             <Timeline currentDate={currentDate} setCurrentDate={setCurrentDate}/>
         </div>
@@ -103,5 +109,5 @@ export const Teasermanager = ({
                 />
             }
         </div>
-    </div>
-}
+    </div>;
+};