diff --git a/src/components/MovieListView.astro b/src/components/MovieListView.astro index 5a6133b..eea73ff 100644 --- a/src/components/MovieListView.astro +++ b/src/components/MovieListView.astro @@ -1,5 +1,45 @@ --- -import { movieCatalog, timePatterns, hallRotation, weekdayShort } from "../scripts/bigConstants"; +import { + timePatterns, + hallRotation, + weekdayShort, + type MovieInterface, + type ITMDBResponse, +} from "../scripts/bigConstants"; + +async function getTopMovies(): Promise { + const API_KEY = import.meta.env.TMDB_API_KEY; + console.log("Fetching with Key:", API_KEY ? "Key found" : "KEY MISSING!"); + + const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500"; + + // 1. Corrected "discover" spelling + const response = await fetch( + `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&language=de-DE&sort_by=popularity.desc`, + ); + console.log("Response Status:", response.status); + + const data: ITMDBResponse = await response.json(); + console.log("Results found:", data.results?.length); + + if (!data.results) return []; + + return data.results?.map((movie) => ({ + id: movie.id, + title: movie.title || "Unknown Title", + poster: movie.poster_path + ? `${IMAGE_BASE_URL}${movie.poster_path}` + : "/placeholder.jpg", + rating: movie.vote_average || 0, + // Add optional chaining (?.) and a fallback + year: movie.release_date?.split("-")[0] || "N/A", + genre: "Movie", // Discover doesn't provide the name, only an ID + duration: 120, // Discover doesn't provide duration + fsk: "12", + description: movie.overview || "No description available.", + backdrop: movie.backdrop_path, + })); +} const formatDateShort = (dateObj: Date) => { const day = String(dateObj.getDate()).padStart(2, "0"); @@ -15,78 +55,142 @@ const buildDayMeta = (offset: number) => { const weekday = weekdayShort[date.getDay()]; const formattedDate = formatDateShort(date); - if (offset === 0) return { offset, date, short: "Heute", long: `Heute, ${formattedDate}` }; - if (offset === 1) return { offset, date, short: "Morgen", long: `Morgen, ${formattedDate}` }; - return { offset, date, short: weekday, long: `${weekday}, ${formattedDate}` }; + if (offset === 0) + return { + offset, + date, + short: "Heute", + long: `Heute, ${formattedDate}`, + }; + if (offset === 1) + return { + offset, + date, + short: "Morgen", + long: `Morgen, ${formattedDate}`, + }; + return { + offset, + date, + short: weekday, + long: `${weekday}, ${formattedDate}`, + }; }; const buildScheduleForMovie = (movieIndex: number) => { return Array.from({ length: 7 }, (_, dayOffset) => { const dayMeta = buildDayMeta(dayOffset); - const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length]; + const pattern = + timePatterns[(movieIndex + dayOffset) % timePatterns.length]; const desiredCount = 4 + ((movieIndex + dayOffset) % 2); const showCount = Math.min(pattern.length, desiredCount); - const showings = pattern.slice(0, showCount).map((time: string, slotIndex: number) => { - const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length]; - return { time, hall }; - }); + const showings = pattern + .slice(0, showCount) + .map((time: string, slotIndex: number) => { + const hall = + hallRotation[ + (movieIndex + dayOffset + slotIndex) % + hallRotation.length + ]; + return { time, hall }; + }); return { ...dayMeta, showings }; }); }; -const movieProgram = movieCatalog.map((movie, movieIndex) => ({ +let movieCatalog = await getTopMovies(); +const movieProgram = movieCatalog?.map((movie, movieIndex) => ({ ...movie, - schedule: buildScheduleForMovie(movieIndex) + schedule: buildScheduleForMovie(movieIndex), })); ---

Aktuelle Filme & Spielzeiten

-

Alle Filme mit 7 Tagen Spielplan. Erste Vorstellung täglich ab 13:00 Uhr.

+

+ Alle Filme mit 7 Tagen Spielplan. Erste Vorstellung täglich ab 13:00 + Uhr. +

- {movieProgram.map((movie, programIndex) => ( -
-
- {movie.title} - {movie.fsk} -
-
-
-

{movie.title}

- {movie.duration} Min. | {movie.genre} | FSK: {movie.fsk} + { + movieProgram?.map((movie, programIndex) => ( +
+
+ {movie.title} + + {movie.fsk} +
-

{movie.description}

- -
- {movie.schedule.map((day, dayIndex) => ( - - ))} -
- -
-
- TagKinosaalUhrzeit +
+
+

{movie.title}

+ + {movie.duration} Min. | {movie.genre} | FSK:{" "} + {movie.fsk} +
-
- {movie.schedule[0].showings.map((showing) => ( - ))}
+ +
+
+ Tag + Kinosaal + Uhrzeit +
+
+ {movie.schedule[0].showings.map( + (showing) => ( + + ), + )} +
+
-
-
- ))} +
+ )) + }
@@ -97,19 +201,27 @@ const movieProgram = movieCatalog.map((movie, movieIndex) => ({ movieProgramList?.addEventListener("click", (event: any) => { const dayButton = event.target.closest(".program-day-tab"); if (dayButton) { - const tabs = dayButton.closest(".program-day-tabs"); - tabs?.querySelectorAll(".program-day-tab").forEach((t: any) => t.classList.remove("active")); - dayButton.classList.add("active"); - } + const programIndex = dayButton.getAttribute("data-program-index"); + const dayIndex = parseInt(dayButton.getAttribute("data-day-index")); + const card = dayButton.closest(".detailed-card"); + const scheduleData = JSON.parse(card.getAttribute("data-schedule")); + const selectedDay = scheduleData[dayIndex]; - const chip = event.target.closest(".time-chip"); - if (chip) { - const movie = chip.getAttribute("data-movie"); - const hall = chip.getAttribute("data-hall"); - const time = chip.getAttribute("data-time"); - if (movie && hall && time && (window as any).openBooking) { - (window as any).openBooking(movie, hall, time); - } + // Update the schedule body HTML + const body:any = document.getElementById( + `schedule-body-${programIndex}`, + ); + body.innerHTML = selectedDay.showings + .map( + (showing:any) => ` + + `, + ) + .join(""); } }); @@ -117,7 +229,9 @@ const movieProgram = movieCatalog.map((movie, movieIndex) => ({ const params = new URLSearchParams(window.location.search); const focusIndex = params.get("focus"); if (focusIndex !== null) { - const target = document.querySelector(`[data-program-index="${focusIndex}"]`); + const target = document.querySelector( + `[data-program-index="${focusIndex}"]`, + ); if (target) { target.scrollIntoView({ behavior: "smooth", block: "start" }); target.classList.add("flash-focus"); diff --git a/src/components/react/topbar.tsx b/src/components/react/topbar.tsx deleted file mode 100644 index 438f02e..0000000 --- a/src/components/react/topbar.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function topbar() { - return ( -
-
Hallo
-
-
- ) -} \ No newline at end of file diff --git a/src/scripts/bigConstants.ts b/src/scripts/bigConstants.ts index 06e2c16..26ecd18 100644 --- a/src/scripts/bigConstants.ts +++ b/src/scripts/bigConstants.ts @@ -74,7 +74,7 @@ export interface User { paymentMethods: any[]; } -export interface MovieCatalog { +export interface MovieInterface { id: number; title: string; genre: string;