Buttons on MovieViewList now change between active and not active if their clicked

src/components/MovieListView.astro

@@ -199,10 +199,22 @@ const movieProgram = movieCatalog?.map((movie, movieIndex) => ({
 </section>
 
 <script>
+import { length } from "astro:schema";
+
     const movieProgramList = document.getElementById("movie-program-list");
 
     movieProgramList?.addEventListener("click", (event: any) => {
         const dayButton = event.target.closest(".program-day-tab");
+        let dayButtonsAll = document.getElementsByClassName("program-day-tab");
+        let dayButtons: any[] = [];
+        //only select the daybuttons for this movie
+
+        for (let i = 0; i < dayButtonsAll.length; i++) {
+            if (dayButtonsAll[i].getAttribute("data-program-index") == dayButton.getAttribute("data-program-index")) {
+                dayButtons.push(dayButtonsAll[i])
+            }
+        }
+
         if (dayButton) {
             const programIndex = dayButton.getAttribute("data-program-index");
             const dayIndex = parseInt(dayButton.getAttribute("data-day-index"));
@@ -225,6 +237,14 @@ const movieProgram = movieCatalog?.map((movie, movieIndex) => ({
         `,
                 )
                 .join("");
+                dayButton.setAttribute("class", dayButton.getAttribute("class") + " active")
+                for (let i = 0; i < dayButtons.length; i++) {
+                    // check if current button is the one needed
+                    if (dayButtons[i].getAttribute("data-day-index") != dayIndex.toString()) {
+                        dayButtons[i].setAttribute("class", "program-day-tab");
+                    }
+                }
+
         }
     });
 

src/scripts/bigConstants.ts

@@ -80,6 +80,7 @@ export interface BaseCartItem {
 export interface MovieCartItem extends BaseCartItem {
     category: "movie";
     seatId: string;
+    poster?: string;
 }
 
 export interface SnackCartItem extends BaseCartItem {