Merge pull request 'schedule-page-updates' (#1) from schedule-page-updates into main

Reviewed-on: #1

.idea/workspace.xml

@@ -5,11 +5,8 @@
   </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/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" 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/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" />
@@ -65,7 +62,7 @@
     "RunOnceActivity.git.unshallow": "true",
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
-    "git-widget-placeholder": "main",
+    "git-widget-placeholder": "schedule-page-updates",
     "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,17 +1,28 @@
 <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 v-for="showing in showings" class="p-5 movie-card neon-border">
+      <li
+        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 :src="showing.poster"
+          <img
+            :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">{{ showing.title }}</h5>
+            <h5 class="text-center sm:text-left mb-3 text-xl">
-            <h5 class="text-center sm:text-left mb-3">{{ formatDate(showing.showtime) }}</h5>
+              {{ showing.movie.title }}
-            <span class="">{{ showing.plot }}</span>
+            </h5>
+            <h5 class="text-center sm:text-left mb-3">
+              {{ formatDate(showing.showtime) }}
+            </h5>
+            <span class="">{{ showing.movie.plot }}</span>
           </div>
         </div>
       </li>
@@ -19,22 +30,26 @@
 
     <!-- PREVIOUS SHOWINGS -->
     <div id="previous-showings" class="mt-5 list-group">
-      <span class="block mb-5 hover-pointer underline" @click="getShowings(true)">
+      <span
+        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 previous_showings" class="p-5 movie-card neon-border">
+        <li v-for="showing in past_showings" class="p-5 movie-card neon-border">
           <div class="sm:grid grid-cols-2 lg:grid-cols-3">
-            <img :src="showing.poster"
+            <img
+              :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.title }}</h5>
+              <h5 class="text-xl mb-3">{{ showing.movie.title }}</h5>
               <h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
-              <span class="">{{ showing.plot }}</span>
+              <span class="">{{ showing.movie.plot }}</span>
             </div>
           </div>
         </li>
@@ -43,59 +58,88 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+import type { Showing } from "~/types/showing";
-  name: "index",
+import type { Schedule } from "~/types/schedule";
-  data: () => ({
-    showings: [],
-    previous_showings: [],
-    got_previous: false,
-    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-  }),
-  methods: {
-    formatDate: function (date_string) {
-      console.log(date_string)
-      let parsed_date = new Date(Date.parse(date_string));
-      let month = this.months[parsed_date.getMonth()];
 
-      return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
+const schedule = defineModel<Schedule>("schedule");
-    },
+const past_showings = defineModel<Showing[]>("past_showings", {
-    getShowings: function (previous = false) {
+  default: [],
-      let config = useRuntimeConfig()
+});
-      if (this.got_previous) {
+const got_previous = ref(false);
+const months = [
+  "January",
+  "February",
+  "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()];
+
+  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
+};
+
+const getSchedule = async function (previous = false) {
+  let config = useRuntimeConfig();
+  if (got_previous.value) {
     return false;
   }
 
-      document.getElementById("loader").classList.toggle("hidden")
+  document.getElementById("loader")?.classList.toggle("hidden");
 
   let params = "";
-      if (previous) params = "?previous=true";
+  if (previous) params = "?past_showings=true";
 
-      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
+  const { data, error } = await useFetch<Schedule>(
+    `${config.public.apiURL}/schedules/1${params}`,
+    {
       method: "GET",
-        headers: {"Content-type": "application/json"}
+      headers: {
-      })
+        Accept: "application/json",
-          .then(response => response.json())
+        "Content-type": "application/json",
-          .then(showings => {
+        Authorization: `Token ${useCookie("token").value}`,
-
-            if (previous) {
-              this.got_previous = true;
-              this.previous_showings = showings;
-            } else {
-              this.showings = showings
-            }
-            document.getElementById("loader").classList.toggle("hidden")
-          })
-          .catch(err => console.log(err));
-
-    }
       },
-  mounted() {
+    },
-    this.getShowings()
+  );
+
+  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;
+      } else {
+        schedule.value = data.value;
+      }
+      document.getElementById("loader")?.classList.toggle("hidden");
+    }
+  }
+
+  return schedule;
+};
+
+onMounted(() => {
+  getSchedule();
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/types/schedule.ts

@@ -0,0 +1,10 @@
+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

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