From c3247883f5659242cdc2b40728a3940a103ff992 Mon Sep 17 00:00:00 2001
From: Edward Tirado Jr <ed@etdevelopment.net>
Date: Sun, 13 Apr 2025 22:23:09 -0500
Subject: [PATCH] updated showings to use typescript and composition api

---
 src/components/forms/ScheduleMovie.vue     | 103 ++++++++++++---------
 src/components/modal-content/ShowMovie.vue |  42 +++++----
 src/pages/lists/[id].vue                   |  13 ++-
 src/pages/schedule/index.vue               |   6 +-
 4 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/src/components/forms/ScheduleMovie.vue b/src/components/forms/ScheduleMovie.vue
index 4e28763..b2bf788 100644
--- a/src/components/forms/ScheduleMovie.vue
+++ b/src/components/forms/ScheduleMovie.vue
@@ -1,58 +1,69 @@
 <template>
   <div>
-    <form id="schedule-form" class="visually-hidden" method="post" onsubmit="return false">
+    <form
+      id="schedule-form"
+      class="visually-hidden"
+      method="post"
+      onsubmit="return false"
+    >
       <!-- SCHEDULE -->
-      <label class="pb-1 text-start font-bold" for="schedule-date">Date</label><br/>
-      <input id="schedule-input" class="rounded-l p-1" name="schedule-date"
-             type="date"/>
-      <button class="btn mt-5 sm:mt-0 p-1 rounded sm:rounded-none sm:rounded-r" type="button" @click="schedule">Schedule
+      <label class="pb-1 text-start font-bold" for="schedule-date">Date</label
+      ><br />
+      <input
+        id="schedule-input"
+        class="rounded-l p-1"
+        name="schedule-date"
+        type="date"
+      />
+      <button
+        class="btn mt-5 sm:mt-0 p-1 rounded sm:rounded-none sm:rounded-r"
+        type="button"
+        @click="schedule"
+      >
+        Schedule
       </button>
     </form>
   </div>
 </template>
 
-<script>
-export default {
-  name: "ScheduleMovie",
-  methods: {
-    schedule: function (e) {
-      const config = useRuntimeConfig();
-      e.preventDefault();
+<script lang="ts" setup>
+const props = defineProps(["movie"]);
+const emits = defineEmits(["closeModal"]);
 
-      let showtime_input = document.getElementById("schedule-input").value;
-      if (!showtime_input) {
-        alert("Please set showtime.");
-        return false;
-      }
-      let showtime = showtime_input + " " + "00:00:00";
+const schedule = function (e: Event) {
+  const config = useRuntimeConfig();
+  e.preventDefault();
 
-      fetch(`${config.public.apiURL}/schedules/movie`, {
-        credentials: "include",
-        method: "POST",
-        body: JSON.stringify({
-          "schedule_id": 1,
-          "movie_id": this.movie.id,
-          "showtime": showtime,
-          "owner": 1,
-          "public": false
-        }),
-        headers: {
-          "Content-type": "application/json",
-          "token": useCookie("token").value,
-        }
-      })
-          .then(response => response.json())
-          .then(_json => {
-                this.$parent.$parent.closeModal();
-              }
-          )
-          .catch(err => alert("Unable to schedule movie. Error:\n" + err))
-    }
-  },
-  props: ["movie"]
-}
+  let showtime_input = (
+    document.getElementById("schedule-input") as HTMLInputElement
+  ).value;
+
+  if (!showtime_input) {
+    alert("Please set showtime.");
+    return false;
+  }
+
+  const date = new Date(`${showtime_input}T00:00:00`);
+
+  fetch(`${config.public.apiURL}/showings/`, {
+    method: "POST",
+    body: JSON.stringify({
+      schedule: 1,
+      movie: props.movie.id,
+      showtime: date.toISOString(),
+      public: "False",
+    }),
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Token ${useCookie("token").value}`,
+    },
+  })
+    .then((response) => response.json())
+    .then((_json) => {
+      emits("closeModal");
+    })
+    .catch((err) => alert("Unable to schedule movie. Error:\n" + err));
+};
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/components/modal-content/ShowMovie.vue b/src/components/modal-content/ShowMovie.vue
index 57dbde5..2d5105b 100644
--- a/src/components/modal-content/ShowMovie.vue
+++ b/src/components/modal-content/ShowMovie.vue
@@ -5,36 +5,38 @@
         {{ movie.title }} ({{ movie.year }})
       </h2>
       <div class="sm:inline-flex sm:space-x-5">
-        <img :src="movie.poster" alt="movie poster" class="mx-auto sm:mx-0 neon-border"/>
+        <img
+          :src="movie.poster"
+          alt="movie poster"
+          class="mx-auto sm:mx-0 neon-border"
+        />
         <div class="pt-5 sm:pt-0">
           <p>{{ movie.plot }}</p>
-          <ScheduleMovie v-if="logged_in" :movie="movie" class="mt-5"/>
+          <ScheduleMovie
+            v-if="logged_in"
+            :movie="movie"
+            class="mt-5"
+            @close-modal="$emit('close-modal')"
+          />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
 
-export default {
-  name: "ShowMovie",
-  data: () => ({
-    logged_in: false,
-  }),
-  components: {ScheduleMovie},
-  props: ["movie"],
-  mounted() {
-    const token = useCookie("token").value;
-    if (token) {
-      this.logged_in = true;
-    }
+const props = defineProps(["movie"]);
+const emits = defineEmits(["close-modal"]);
+const logged_in = ref(false);
+
+onMounted(() => {
+  const token = useCookie("token").value;
+  if (token) {
+    logged_in.value = true;
   }
-}
+});
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/pages/lists/[id].vue b/src/pages/lists/[id].vue
index 788d2e7..f59be6e 100644
--- a/src/pages/lists/[id].vue
+++ b/src/pages/lists/[id].vue
@@ -1,7 +1,11 @@
 <template>
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
     <Modal ref="movie_modal">
-      <ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
+      <ShowMovie
+        v-if="modal_movie"
+        :movie="modal_movie"
+        @close-modal="closeModal"
+      ></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
     <div class="grid grid-cols-2 rounded movie-card neon-border p-5">
@@ -66,8 +70,6 @@ import type { MovieList } from "~/types/movielist";
 import type { Movie } from "~/types/movie";
 import Modal from "~/components/Modal.vue";
 
-const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
-
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
 const modal_movie: Ref<Movie | null> = ref(null);
@@ -182,6 +184,11 @@ const showModal = function (movie: Movie) {
   movie_modal.value?.toggleModal();
 };
 
+const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
+const closeModal = function (movie: Movie) {
+  movie_modal.value?.toggleModal();
+};
+
 onMounted(() => {
   const route = useRoute();
   if (typeof route.params.id === "string") {
diff --git a/src/pages/schedule/index.vue b/src/pages/schedule/index.vue
index 88a56de..c373596 100644
--- a/src/pages/schedule/index.vue
+++ b/src/pages/schedule/index.vue
@@ -83,10 +83,10 @@ const months = [
 ];
 
 const formatDate = function (date_string: string) {
-  let parsed_date = new Date(Date.parse(date_string));
-  let month = months[parsed_date.getMonth()];
+  let date = new Date(date_string);
+  let month = months[date.getMonth()];
 
-  return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
+  return `${month} ${date.getDate()}, ${date.getFullYear()}`;
 };
 
 const getSchedule = async function (previous = false) {