@vonaffenfels/contentful-teasermanager 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.0.28",
+    "version": "1.0.30",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -96,10 +96,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.28",
+        "@vonaffenfels/slate-editor": "^1.0.30",
         "webpack": "5.88.2"
     },
-    "gitHead": "fe5a1e14e437b67a1aa58fa6781b9ae134914750",
+    "gitHead": "fe88a0b3ce82331fa3d7193a4cd62b8e2c8ecfb9",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Contentful/EntryEditor.js

@@ -54,12 +54,69 @@ const Entry = ({sdk}) => {
         });
     };
 
+    const removeSlotData = async (slotId, currentDate) => {
+        console.log(`Removing slot data for page ${sdk.entry.getSys().id} with portal ${portal} for slot ${slotId} and date ${currentDate}`);
+
+        try {
+            const apiRoot = sdk.parameters.instance.apiRoot;
+            const response = await fetch(`${apiRoot}/api/saveStateForSlot`, {
+                method: "POST",
+                body: JSON.stringify({
+                    "project": portal,
+                    "slot": slotId,
+                    "page": sdk.entry.getSys().id,
+                    "entry": "RESET",
+                    "date": currentDate,
+                }),
+            });
+            setReloadTrigger((current) => current + 1);
+        } catch (e) {
+            console.error(e);
+            alert("Fehler beim speichern!");
+        }
+    }
+
+    const loadSlotStateForPage = async (date) => {
+        try {
+            const apiRoot = sdk.parameters.instance.apiRoot;
+            const teasermanagerUrl = `${apiRoot}/api/findStateForPage?project=${portal}&page=${sdk.entry.getSys().id}&date=${date}`;
+            const response = await fetch(teasermanagerUrl).then(res => res.json());
+
+            if (response?.message) {
+                console.error(response.message);
+            }
+
+            return response?.data || {};
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    const loadTimelineStateForPage = async (fromDate, toDate) => {
+        try {
+            const apiRoot = sdk.parameters.instance.apiRoot;
+            const teasermanagerUrl = `${apiRoot}/api/getTimelineStateForPage?project=${portal}&page=${sdk.entry.getSys().id}&fromDate=${fromDate}&toDate=${toDate}`;
+            const response = await fetch(teasermanagerUrl).then(res => res.json());
+
+            if (response?.message) {
+                console.error(response.message);
+            }
+
+            return response?.data || {};
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     return <Teasermanager
         entryId={sdk.entry.getSys().id}
         locale={locale}
         contentFieldName={contentField}
+        loadSlotStateForPage={loadSlotStateForPage}
+        removeSlotData={removeSlotData}
+        loadTimelineStateForPage={loadTimelineStateForPage}
         onSlotClick={onSlotClick}
         reloadTrigger={reloadTrigger}/>;
 };
 
-export default Entry;
+export default Entry;

package/src/components/Teasermanager/Timeline.js

@@ -9,15 +9,20 @@ 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(() => {
-        const currentDate = new Date();
-        currentDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+        if (!currentDate) {
+            const defaultCurrentDate = new Date();
+            defaultCurrentDate.setMinutes((Math.round(defaultCurrentDate.getMinutes() / 15) * 15) % 60);
 
-        setCurrentDate(currentDate);
-    }, []);
+            setCurrentDate(defaultCurrentDate);
+        }
+    }, [currentDate]);
 
     const leftDate = currentDate && subtract(currentDate, {minutes: stepsInRange / 2 * 15});
     if (leftDate) {
@@ -31,6 +36,10 @@ export const Timeline = ({
 
         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);
@@ -45,9 +54,17 @@ export const Timeline = ({
 
         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;
         }
@@ -55,30 +72,57 @@ export const Timeline = ({
         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} />
+                        <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?.[format(dotDate, "dd.MM.yyyy HH:mm")] || 0;
 
                     return <div
                         key={index}
-                        className={classNames(styles.timelineDot, {[styles.timelineDotActive]: dotDate.getTime() === currentDate.getTime()})}
+                        className={classNames(styles.timelineDot, {
+                            [styles.timelineDotActive]: dotDate.getTime() === currentDate.getTime(),
+                            [styles.timelineDotChanged]: timelineState?.[format(dotDate, "dd.MM.yyyy HH:mm")],
+                        })}
                         onClick={e => {
                             e.preventDefault();
                             setCurrentDate(dotDate);
                             return false;
-                        }}>
-                        <div className={classNames(styles.timelineDotLabel, {[styles.timelineDotLabelPermanent]: dotDate.getHours() % 6 === 0 && dotDate.getMinutes() === 0})}>
+                        }}
+                    >
+                        <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>;
                 })}
@@ -96,7 +140,10 @@ const TimeSelect = ({
         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>);
+            options.push(<option
+                key={`hour-option-${i}`}
+                value={i}
+                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
         }
 
         return options;
@@ -106,7 +153,10 @@ const TimeSelect = ({
         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>);
+            options.push(<option
+                key={`minute-option-${i}`}
+                value={i}
+                style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
         }
 
         return options;
@@ -120,7 +170,7 @@ const TimeSelect = ({
             <select value={format(currentDate, "m")} onChange={e => onChange(e, "minute")} className="mr-1 w-auto">
                 {renderMinuteSelectOptions()}
             </select>
-            Uhr
+            <span className="dark:text-white">Uhr</span>
         </div>
     );
 };

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

@@ -7,6 +7,7 @@
 }
 
 .timeline {
+    position: relative;
     height: auto;
     padding: 30px 0 12px 0;
     width: 100%;
@@ -15,24 +16,52 @@
     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;
-    width: 10px;
-    height: 10px;
-    background-color: #004f73;
+    width: 12px;
+    height: 12px;
     border-radius: 9999px;
-    cursor: pointer;
     position: relative;
+    z-index: 1;
 }
 
-.timeline-dot:hover .timeline-dot-label {
+.timeline .timeline-dot:hover .timeline-dot-label {
     display: block;
+    opacity: 1;
     z-index: 100;
 }
 
 .timeline-dot-active {
-    outline: 2px solid red;
+    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 {
@@ -48,4 +77,10 @@
     left: -100px;
     width: 200px;
     text-align: center;
+}
+
+@media(prefers-color-scheme: dark) {
+    .timeline:after {
+        background: white;
+    }
 }

package/src/components/Teasermanager.js

@@ -11,7 +11,10 @@ import {runLoaders} from "../lib/runLoaders";
 
 export const Teasermanager = ({
     entryId,
+    loadSlotStateForPage = () => console.error("missing loadSlotStateForPage"),
+    loadTimelineStateForPage = () => console.error("missing loadTimelineStateForPage"),
     onSlotClick = () => console.error("missing onSlotClick"),
+    removeSlotData = () => console.error("missing removeSlotData"),
     contentFieldName = "content",
     locale = "de",
     reloadTrigger = 0,
@@ -19,41 +22,109 @@ export const Teasermanager = ({
     const contentfulClient = getContentfulClient();
     const [entry, setEntry] = useState(null);
     const wrapperRef = useRef(null);
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState("initial");
     const [loadedContent, setLoadedContent] = useState(null);
-    const [currentDate, setCurrentDate] = useState(null);
+    const [currentDate, _setCurrentDate] = useState(null);
+    const [currentSlotState, setCurrentSlotState] = useState(null);
 
-    const initSlot = (node) => {
-        if (node.dataset.__teasermanager_slot_initialized) {
-            return;
+    const setCurrentDate = (date) => {
+        if (date) {
+            date.setSeconds(0);
         }
 
-        node.dataset.__teasermanager_slot_initialized = true;
+        _setCurrentDate(date);
+    }
 
+    const initSlot = (node) => {
+        const existingManagementNode = node.querySelector(`.__teasermanager_management_node`);
+        if (existingManagementNode) {
+            node.removeChild(existingManagementNode);
+        }
+
+        const slotId = node.dataset.teasermanagerSlot;
         const managementNode = document.createElement("div");
         managementNode.classList.add(styles.management);
 
         const managementLabelNode = document.createElement("div");
         managementLabelNode.classList.add(styles.label);
-        managementLabelNode.innerHTML = `Klicken um den Artikel zu wechseln`;
+        if (currentSlotState?.[slotId]) {
+            managementNode.classList.add(styles.changedBorder);
+        }
+
+        if (currentSlotState?.[slotId] && currentSlotState?.[slotId] !== "RESET") {
+            managementNode.classList.add(styles.changed);
+
+            managementLabelNode.innerHTML = `Klicken um den Artikel zu wechseln`;
+            const managementRemoveButtonNode = document.createElement("div");
+            managementRemoveButtonNode.classList.add(styles.removeButton);
+            managementRemoveButtonNode.title = `Artikel entfernen`;
+            managementRemoveButtonNode.innerHTML = `
+                <svg height="800px" width="800px" version="1.1" style="width: 20px; height: 20px;" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496.158 496.158" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+\tc0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
+\th270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
+                </svg>
+            `;
+            managementRemoveButtonNode.addEventListener("click", (e) => {
+                removeSlotData(slotId, currentDate);
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            });
+            managementNode.appendChild(managementRemoveButtonNode);
+        } else {
+            if (currentSlotState?.[slotId] === "RESET") {
+                managementLabelNode.innerHTML = `Hier wurde ein bereits verslotteter Artikel wieder entfernt<br />Klicken um einen neuen Artikel festzulegen`;
+            } else {
+                managementLabelNode.innerHTML = `Klicken um den Artikel festzulegen`;
+            }
+
+        }
 
         managementNode.appendChild(managementLabelNode);
 
         managementNode.addEventListener("click", (e) => {
-            const slotId = node.dataset.teasermanagerSlot;
             onSlotClick(slotId, currentDate);
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
         });
 
+        managementNode.classList.add("__teasermanager_management_node");
         node.appendChild(managementNode);
     };
 
     const updateSlots = (mutationList) => {
-        const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
-        slots.forEach(initSlot);
+
+        if (!mutationList) {
+            // update all slots
+            const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
+            slots.forEach(initSlot);
+        } else {
+            // update only if the change was not a management node
+            const isValidUpdate = mutationList?.find(mutation => {
+                if (mutation.type === "childList") {
+                    const removedNonManagementNode = [...mutation.removedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
+                    const addedNonManagementNode = [...mutation.addedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
+
+                    if (!removedNonManagementNode && !addedNonManagementNode) {
+                        return false;
+                    }
+                }
+
+                return true;
+            })
+
+            if (isValidUpdate) {
+                updateSlots();
+            }
+        }
+
     };
 
     useEffect(() => {
-        if (!entryId && entry) {
+        if (!entryId || entry) {
             setEntry(null);
             return;
         }
@@ -61,7 +132,7 @@ export const Teasermanager = ({
         contentfulClient.getEntry(entryId).then((loadedEntry, b) => {
             setEntry(loadedEntry);
         });
-    }, []);
+    }, [entryId]);
 
     useEffect(() => {
         if (!wrapperRef.current) {
@@ -78,30 +149,62 @@ export const Teasermanager = ({
         return () => {
             observer.disconnect();
         };
-    }, [wrapperRef, currentDate]);
+    }, [wrapperRef, currentDate, currentSlotState]);
+
+    const updateSlotStateData = async () => {
+        try {
+            if (!currentDate) {
+                return;
+            }
+            setCurrentSlotState(await loadSlotStateForPage(currentDate))
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    const reloadAllData = async () => {
+        if (loading === true || !currentDate) {
+            return;
+        }
 
-    useEffect(() => {
         const contentValue = entry?.fields?.[contentFieldName]?.[locale];
         const portalValue = entry?.fields?.portal?.[locale];
 
         if (!contentValue) {
             setLoading(false);
-            return setLoadedContent(null);
+            setLoadedContent(null);
+            return;
         }
 
+        console.log(`Teasermanager :: LOADING DATA`);
         setLoading(true);
-        runLoaders(contentValue, portalValue, entry?.sys?.id).then(content => {
+        runLoaders(contentValue, portalValue, entry?.sys?.id, currentDate).then(content => {
             setLoadedContent(content);
             setLoading(false);
         });
-    }, [contentFieldName, locale, entry, reloadTrigger]);
+
+        updateSlotStateData();
+    }
+
+    useEffect(() => {
+        updateSlots();
+    }, [currentSlotState]);
+
+    useEffect(() => {
+        reloadAllData();
+    }, [contentFieldName, locale, entry, reloadTrigger, currentDate]);
 
     return <div className="flex w-full flex-col">
         <div className="w-full">
-            <Timeline currentDate={currentDate} setCurrentDate={setCurrentDate}/>
+            <Timeline
+                currentDate={currentDate}
+                setCurrentDate={setCurrentDate}
+                loadTimelineStateForPage={loadTimelineStateForPage}/>
         </div>
         <div className={styles.wrapper} ref={wrapperRef}>
-            {loading && <div>Lade Inhalte...</div>}
+            {loading &&
+                <div className="dark:text-white w-full font-base text-2xl p-8 h-full text-center align-middle">Lade
+                    Inhalte...</div>}
             {!!loadedContent && !loading &&
                 <Renderer
                     value={loadedContent}

package/src/components/Teasermanager.module.css

@@ -5,8 +5,8 @@
 .management {
     font-family: Arial, Helvetica, sans-serif;
 
-    background-color: rgba(255, 255, 255, 0.4);
-    border: 1px dashed black;
+    background-color: rgba(255, 255, 255, 0.2);
+    outline: 2px dashed black;
     color: black;
     text-align: center;
     vertical-align: middle;
@@ -23,16 +23,43 @@
     padding: 2em;
 }
 
+.remove-button {
+    display: flex;
+    padding: 0.5em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+}
+
+@media (prefers-color-scheme: dark) {
+    .management {
+        outline: 2px dashed white;
+    }
+}
+
 .management:hover  {
     background-color: rgba(255, 255, 255, 0.9);
 }
 
 .label {
     visibility: hidden;
+    width: 100%;
     font-weight: bold;
+    text-align: center;
 }
 
 .management:hover .label {
     visibility: visible;
 }
 
+.changed {
+    background-color: rgba(172, 255, 156, 0.9);
+}
+.changed:hover {
+    background-color: rgba(97, 255, 68, 0.9);
+}
+
+.changed-border {
+    outline-color: green;
+}

package/src/icons/remove.svg

@@ -0,0 +1,8 @@
+
+<svg height="0px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 496.158 496.158" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+	c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
+	h270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
+</svg>

package/src/lib/runLoaders.js

@@ -1,11 +1,11 @@
-export const runLoaders = async (value, portal, contextId) => {
+export const runLoaders = async (value, portal, contextId, currentDate) => {
     if (!Array.isArray(value)) {
         return value;
     }
 
     const newValue = await Promise.all(value.map(async (item) => {
         try {
-            return await runLoader(item, portal, contextId)
+            return await runLoader(item, portal, contextId, currentDate)
         } catch (e) {
             console.error(e);
             return item;
@@ -15,7 +15,7 @@ export const runLoaders = async (value, portal, contextId) => {
     return newValue;
 }
 
-const runLoader = async (item, portal, contextId) => {
+const runLoader = async (item, portal, contextId, currentDate = new Date()) => {
 
     if (!item?.block) {
         return item;
@@ -23,7 +23,13 @@ const runLoader = async (item, portal, contextId) => {
     try {
         const response = await fetch(`/api/loader/?portal=${portal}&block=${item.block}`, {
             method: "POST",
-            body: JSON.stringify({variables: item.attributes, context: {activeContent: {sys: {id: contextId}}}}),
+            body: JSON.stringify({
+                variables: {
+                    ...(item.attributes || {}),
+                    teasermanagerDate: currentDate,
+                },
+                context: {activeContent: {sys: {id: contextId}}},
+            }),
         }).then(res => res.json());
 
         return {