diff --git a/src/index.css b/src/index.css
index 44d79e10cc879063da5a318ee7d04bb486ef73b3..7e67fc856d89077cba74cb211b817009966f60e7 100644
--- a/src/index.css
+++ b/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
diff --git a/src/panels/Fahrplan/FahrplanPanel.tsx b/src/panels/Fahrplan/FahrplanPanel.tsx
index 696dcb3fbcaefad2d3ff14025f3c8ac6392bdfab..c707004bdb9faa42d7f1ab3ba1c12d0f64b4d213 100644
--- a/src/panels/Fahrplan/FahrplanPanel.tsx
+++ b/src/panels/Fahrplan/FahrplanPanel.tsx
@@ -173,8 +173,6 @@ async function getStopData(stop: string): Promise<StationResponse> {
}
}))
- console.log(data);
-
return data as StationResponse;
}
diff --git a/src/panels/Gremium/GremiumPanel.tsx b/src/panels/Gremium/GremiumPanel.tsx
index 4076d0ddc6126747d6c3ad31caee088589d74b0d..26f670734cbd5bf43b4fdccce7b1505f59112e63 100644
--- a/src/panels/Gremium/GremiumPanel.tsx
+++ b/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();
diff --git a/src/panels/MensaJetzt/MensaJetztPanel.tsx b/src/panels/MensaJetzt/MensaJetztPanel.tsx
index fd6c238c0acc46df7dc537a8b258cec59decd981..f5b629c2c877ac997b3e6685ec1ec50a5ca072f7 100644
--- a/src/panels/MensaJetzt/MensaJetztPanel.tsx
+++ b/src/panels/MensaJetzt/MensaJetztPanel.tsx
@@ -1,4 +1,4 @@
-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);
+ 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 {
+ acc[curr.time] = [curr];
+ }
+ return acc;
+ }, {} as Attendance)
+ ).map(([time, attendees]) => `${time} - ${attendees.map(a => a.name).join(", ")}`)
+ .join(" | ");
- if (keys.includes(curr.time)) {
- return {
- ...accu,
- [curr.time]: [
- ...accu[curr.time],
- 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(", "));
- }
-
- 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"} />
+ <PanelTitle title={"Mensa.jetzt"}/>
<PanelContent>
- {/* @ts-ignore */}
- <div class="marquee"> {/* eslint-disable-line jsx-a11y/no-distracting-elements */}
- <p>{marqueeContent}</p>
- {/* @ts-ignore */}
- </div>
+ {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>
);
diff --git a/src/panels/Mensaplan/MensaplanPanel.tsx b/src/panels/Mensaplan/MensaplanPanel.tsx
index 9e0b05baf3d0cb688f3b3e42c4e2eb1a7355152a..e69d2a1fb62e3914477cdcd2f802df8798567ddc 100644
--- a/src/panels/Mensaplan/MensaplanPanel.tsx
+++ b/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;
diff --git a/tailwind.config.js b/tailwind.config.js
index d5ba8705b51222dd6cf52ddf431525d2e509b3d4..0187fda61111d0d1578ab260b989562b5d021afe 100644
--- a/tailwind.config.js
+++ b/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: [],