Merge branch 'master' into 'master'

MensaJetzt marquee text now completely displaying + smaller refactorings

See merge request !12

src/index.css

@@ -98,57 +98,3 @@
     font-weight: 800;
     src: url('./../public/fonts/inter/inter-v13-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* Marquee */
-.marquee {
-    height: 50px;
-    overflow: hidden;
-    position: relative;
-    color: white;
-}
-
-.marquee p {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    line-height: 50px;
-    text-align: center;
-    -moz-transform: translateX(100%);
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    -moz-animation: scroll-left 2s linear infinite;
-    -webkit-animation: scroll-left 2s linear infinite;
-    animation: scroll-left 20s linear infinite;
-}
-
-@-moz-keyframes scroll-left {
-    0% {
-        -moz-transform: translateX(100%);
-    }
-    100% {
-        -moz-transform: translateX(-100%);
-    }
-}
-
-@-webkit-keyframes scroll-left {
-    0% {
-        -webkit-transform: translateX(100%);
-    }
-    100% {
-        -webkit-transform: translateX(-100%);
-    }
-}
-
-@keyframes scroll-left {
-    0% {
-        -moz-transform: translateX(100%);
-        -webkit-transform: translateX(100%);
-        transform: translateX(100%);
-    }
-    100% {
-        -moz-transform: translateX(-100%);
-        -webkit-transform: translateX(-100%);
-        transform: translateX(-100%);
-    }
-}
\ No newline at end of file

src/panels/Fahrplan/FahrplanPanel.tsx

@@ -173,8 +173,6 @@ async function getStopData(stop: string): Promise<StationResponse> {
     }
   }))
 
-  console.log(data);
-
   return data as StationResponse;
 }
 

src/panels/Gremium/GremiumPanel.tsx

@@ -24,8 +24,6 @@ const GremiumPanel = (props: {definition: GremiumPanelDefinition}) => {
     useEffect(() => {
         const update = async () => {
             setGremium(props.definition.gremien[cycle.current++ % props.definition.gremien.length]);
-            console.log(gremium);
-            console.log(cycle.current);
         }
 
         update();

src/panels/MensaJetzt/MensaJetztPanel.tsx

-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import PanelWrapper from "../../meta/PanelWrapper";
 import PanelTitle from "../../meta/PanelTitle";
 import PanelContent from "../../meta/PanelContent";
@@ -28,43 +28,33 @@ const MensaJetztPanel = () => {
         const request = await fetch(`https://mensa.jetzt/api/entries/`);
 
         if (request.status !== 200) {
-          setMarqueeContent("Niemand :(");
+          setMarqueeContent("API Error :(");
+          console.error("mensa.jetzt API returned error code");
           return;
         }
 
         const data = await request.json() as MensaJetztAPIResponse;
-        const attendance = data.attendance.reduce<Attendance>((accu, curr) => {
-          const keys = Object.keys(accu);
-
-          if (keys.includes(curr.time)) {
-            return {
-              ...accu,
-              [curr.time]: [
-                ...accu[curr.time],
-                curr,
-              ]
-            }
+        let marquee = Object.entries(
+          data.attendance
+            .sort((a, b) => a.time.localeCompare(b.time))
+            .reduce((acc, curr) => {
+              if (acc[curr.time]) {
+                acc[curr.time].push(curr);
               } else {
-            return {
-              ...accu,
-              [curr.time]: [curr],
-            }
-          }
-        }, {});
-
-        let marquee = "";
-        for (const time of Object.keys(attendance).sort()) {
-          marquee += " | " + time + " - " + (attendance[time].map(a => a.name).join(", "));
+                acc[curr.time] = [curr];
               }
+              return acc;
+            }, {} as Attendance)
+        ).map(([time, attendees]) => `${time} - ${attendees.map(a => a.name).join(", ")}`)
+        .join(" | ");
 
-        if (marquee !== "") {
+        if (marquee) {
           marquee += " |";
+        } else {
+          marquee = "Niemand :(";
         }
         
-        marquee = marquee.trim();
-        let marqueeContent = marquee ? marquee : 'Niemand :(';
-        setMarqueeContent(marqueeContent);
-
+        setMarqueeContent(marquee.trim());
       }
       catch (e) {
         console.warn("mensa.jetzt not showing data because", e);
@@ -73,23 +63,29 @@ const MensaJetztPanel = () => {
     }
 
     update();
-    const interval = setInterval(update, 60 * 1000);
+    const interval = setInterval(update, 5 * 60 * 1000);
 
     return () => {
       clearInterval(interval);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <PanelWrapper className={"relative"}>
       <PanelTitle title={"Mensa.jetzt"}/>
       <PanelContent>
-        {/* @ts-ignore */}
-        <div class="marquee"> {/* eslint-disable-line jsx-a11y/no-distracting-elements */}
-          <p>{marqueeContent}</p>
-          {/* @ts-ignore */}
+        {marqueeContent.includes("Uhr") ? (
+          <div className={"flex overflow-hidden whitespace-nowrap"}>
+            <div className={"animate-marquee"}>
+              {marqueeContent}
+            </div>
+            <div className={"animate-marquee ml-1"}>
+              {marqueeContent}
+            </div>
           </div>
+        ) : (
+          <div className={"text-center"}>{marqueeContent}</div>
+        )}
       </PanelContent>
     </PanelWrapper>
   );

src/panels/Mensaplan/MensaplanPanel.tsx

@@ -67,8 +67,6 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
 
         const data = await request.json() as CanteenAPIResponse;
 
-        console.log(data);
-
         const old_menus_count = menus.current.length;
         const old_specials_count = menus.current.length;
 

tailwind.config.js

@@ -17,7 +17,16 @@ module.exports = {
 				'3xl': '1.953rem',
 				'4xl': '2.441rem',
 				'5xl': '3.052rem'
+			},
+			animation: {
+				marquee: 'marquee 20s linear infinite'
+			},
+			keyframes: {
+				marquee: {
+					'0%': { transform: 'translateX(0)' },
+					'100%': { transform: 'translateX(-100%)' },
 				}
+			},
 		}
 	},
 	plugins: [],