.idea/workspace.xml

@@ -5,8 +5,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/php.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/php.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/prettier.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/prettier.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/movielist.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/movielist.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -62,7 +65,7 @@
     "RunOnceActivity.git.unshallow": "true",
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
-    "git-widget-placeholder": "schedule-page-updates",
+    "git-widget-placeholder": "main",
     "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
     "list.type.of.created.stylesheet": "CSS",
     "node.js.detected.package.eslint": "true",

src/pages/schedule/index.vue

@@ -1,28 +1,17 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div v-if="schedule && schedule?.showings.length < 1" class="p-5">
-      <span>No Showings Found</span>
-    </div>
     <ul class="flex flex-col gap-5">
-      <li
+      <li v-for="showing in showings" class="p-5 movie-card neon-border">
-        v-for="showing in schedule?.showings"
-        class="p-5 movie-card neon-border"
-      >
         <div class="sm:grid grid-cols-2 lg:grid-cols-3">
-          <img
+          <img :src="showing.poster"
-            :src="showing.movie.poster"
                alt="Movie Poster"
                class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
           />
 
           <div class="self-center text-left">
-            <h5 class="text-center sm:text-left mb-3 text-xl">
+            <h5 class="text-center sm:text-left mb-3 text-xl">{{ showing.title }}</h5>
-              {{ showing.movie.title }}
+            <h5 class="text-center sm:text-left mb-3">{{ formatDate(showing.showtime) }}</h5>
-            </h5>
+            <span class="">{{ showing.plot }}</span>
-            <h5 class="text-center sm:text-left mb-3">
-              {{ formatDate(showing.showtime) }}
-            </h5>
-            <span class="">{{ showing.movie.plot }}</span>
           </div>
         </div>
       </li>
@@ -30,26 +19,22 @@
 
     <!-- PREVIOUS SHOWINGS -->
     <div id="previous-showings" class="mt-5 list-group">
-      <span
+      <span class="block mb-5 hover-pointer underline" @click="getShowings(true)">
-        class="block mb-5 hover-pointer underline"
-        @click="getSchedule(true)"
-      >
         Previous Showings
       </span>
       <span id="loader" class="hidden">Loading...</span>
       <ul class="flex flex-col gap-5">
-        <li v-for="showing in past_showings" class="p-5 movie-card neon-border">
+        <li v-for="showing in previous_showings" class="p-5 movie-card neon-border">
           <div class="sm:grid grid-cols-2 lg:grid-cols-3">
-            <img
+            <img :src="showing.poster"
-              :src="showing.movie.poster"
                  alt="Movie Poster"
                  class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
             />
 
             <div class="self-center text-left">
-              <h5 class="text-xl mb-3">{{ showing.movie.title }}</h5>
+              <h5 class="text-xl mb-3">{{ showing.title }}</h5>
               <h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
-              <span class="">{{ showing.movie.plot }}</span>
+              <span class="">{{ showing.plot }}</span>
             </div>
           </div>
         </li>
@@ -58,88 +43,59 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script>
-import type { Showing } from "~/types/showing";
+export default {
-import type { Schedule } from "~/types/schedule";
+  name: "index",
-
+  data: () => ({
-const schedule = defineModel<Schedule>("schedule");
+    showings: [],
-const past_showings = defineModel<Showing[]>("past_showings", {
+    previous_showings: [],
-  default: [],
+    got_previous: false,
-});
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-const got_previous = ref(false);
+  }),
-const months = [
+  methods: {
-  "January",
+    formatDate: function (date_string) {
-  "February",
+      console.log(date_string)
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
-
-const formatDate = function (date_string: string) {
       let parsed_date = new Date(Date.parse(date_string));
-  let month = months[parsed_date.getMonth()];
+      let month = this.months[parsed_date.getMonth()];
 
-  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
+      return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
-};
+    },
-
+    getShowings: function (previous = false) {
-const getSchedule = async function (previous = false) {
+      let config = useRuntimeConfig()
-  let config = useRuntimeConfig();
+      if (this.got_previous) {
-  if (got_previous.value) {
         return false;
       }
 
-  document.getElementById("loader")?.classList.toggle("hidden");
+      document.getElementById("loader").classList.toggle("hidden")
 
       let params = "";
-  if (previous) params = "?past_showings=true";
+      if (previous) params = "?previous=true";
 
-  const { data, error } = await useFetch<Schedule>(
+      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
-    `${config.public.apiURL}/schedules/1${params}`,
-    {
         method: "GET",
-      headers: {
+        headers: {"Content-type": "application/json"}
-        Accept: "application/json",
+      })
-        "Content-type": "application/json",
+          .then(response => response.json())
-        Authorization: `Token ${useCookie("token").value}`,
+          .then(showings => {
-      },
-    },
-  );
 
-  if (error.value) {
-    if (error.value.statusCode === 401) {
-      navigateTo("/");
-    }
-    if (error.value.statusCode === 404) {
-      alert("Schedule not found");
-      navigateTo("/");
-    }
-  } else {
-    if (!data.value) {
-      alert("Schedule not found");
-      navigateTo("/");
-    } else {
             if (previous) {
-        past_showings.value = data.value.past_showings;
+              this.got_previous = true;
+              this.previous_showings = showings;
             } else {
-        schedule.value = data.value;
+              this.showings = showings
-      }
-      document.getElementById("loader")?.classList.toggle("hidden");
-    }
             }
+            document.getElementById("loader").classList.toggle("hidden")
+          })
+          .catch(err => console.log(err));
 
-  return schedule;
+    }
-};
+  },
-
+  mounted() {
-onMounted(() => {
+    this.getShowings()
-  getSchedule();
+  }
-});
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>

src/types/schedule.ts

@@ -1,10 +0,0 @@
-import type { Showing } from "~/types/showing";
-
-export type Schedule = {
-  id: number;
-  name: string;
-  public: boolean;
-  owner: number;
-  showings: Showing[];
-  past_showings: Showing[];
-};

src/types/showing.ts

@@ -1,8 +0,0 @@
-import type { Movie } from "~/types/movie";
-
-export type Showing = {
-  owner: number;
-  public: boolean;
-  movie: Movie;
-  showtime: string;
-};