Initial commit

src/components/admin/lists.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div id="add-list-container" class="my-5">
+      <label class="text-md font-bold" for="add-list">Add List</label>
+      <div class="flex">
+        <input id="add-list" class="p-1 rounded-l" placeholder="List Title" type="text" v-on:keyup.enter="addList"/>
+
+        <button class="btn p-1 rounded-r" @click="addList">Add</button>
+      </div>
+    </div>
+    <ul class="grid grid-rows gap-2">
+      <li v-for="list in lists" class="movie-card p-3 neon-border">
+        <span class="mb-2">{{ list.name }}</span> <br/>
+        <button class="btn mt-2 p-1 rounded" type="button" @click="deleteList(list.id)">Delete</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "lists",
+  data: () => ({
+    lists: [],
+  }),
+  methods: {
+    addList: async function () {
+      let config = useRuntimeConfig();
+      const list_name = document.getElementById("add-list").value;
+      if (!list_name) {
+        alert("Please add list name.");
+        return
+      }
+      let list_json = await fetch(`${config.public.apiURL}/lists`, {
+        method: "POST",
+        body: JSON.stringify({
+          name: list_name,
+          public: false
+        }),
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        }
+      })
+          .then(response => response.json())
+          .then(json => json)
+          .catch(err => console.log(err))
+
+      list_json.list.movie_count = 0;
+      this.lists.push(list_json.list);
+    },
+    deleteList: function (list_id) {
+      const config = useRuntimeConfig();
+      let confirmed = confirm("Delete list?");
+
+      if (!confirmed) {
+        return false;
+      }
+
+      return fetch(`${config.public.apiURL}/lists/${list_id}`, {
+        credentials: "include",
+        method: "DELETE",
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        }
+      })
+          .then(response => response.json())
+          .then(_json => {
+            window.location.reload();
+          });
+    },
+    getLists: function () {
+      const config = useRuntimeConfig();
+      fetch(`${config.public.apiURL}/lists`, {
+        method: "GET",
+        headers: {"Content-type": "application/json"}
+      })
+          .then(response => response.json())
+          .then(json => this.lists = json)
+          .catch(err => console.log(err))
+    },
+  },
+  mounted() {
+    this.getLists();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/admin/search.vue

@@ -0,0 +1,51 @@
+<template>
+  <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
+    <label class="px-0 " for="search-field">Search</label>
+    <div class="px-0 mx-0">
+      <input id="search-field" class="p-1" name="search-field" type="text"/>
+      <button class="btn p-1" type="button" @click="findMovies">Submit</button>
+    </div>
+  </form>
+  <ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
+    <li v-for="movie in movies" class="p-1 movie-card">
+      <img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
+      <div class="p-2">
+        <h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
+      </div>
+    </li>
+  </ul>
+
+</template>
+
+<script>
+export default {
+  name: "search",
+  data: () => ({
+    movies: [],
+  }),
+  methods: {
+    findMovies: function (e) {
+      let config = useRuntimeConfig();
+      e.preventDefault();
+      let searchTerm = document.getElementById('search-field').value
+
+      return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
+        method: "GET",
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value,
+        },
+      })
+          .then(response => response.json())
+          .then(json => {
+            this.movies = json;
+          })
+          .catch(err => console.log(err))
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/admin/showings.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="showing in showings" class="movie-card p-3 neon-border mb-2">
+        <ul>
+          <li class="pb-2">
+            <span class="mb-3">{{ showing.title }}</span>
+          </li>
+          <li class="pb-2">
+            <span class="mb-3">{{ formatDate(showing.showtime) }} </span>
+          </li>
+          <button class="btn p-1 rounded" type="button" @click="deleteShowing(showing.id)">Delete</button>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "showings",
+  data: () => ({
+    showings: [],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+  }),
+  mounted() {
+    this.getShowings()
+  },
+  methods: {
+    formatDate: function (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()}`
+    },
+    deleteShowing: function (showing_id) {
+      let config = useRuntimeConfig();
+      let confirmed = confirm("Delete showing?");
+
+      if (!confirmed) {
+        return false;
+      }
+
+      return fetch(`${config.public.apiURL}/schedules/${showing_id}`, {
+        credentials: "include",
+        method: "DELETE",
+        headers: {
+          "Content-type": "application/json",
+          "token": useCookie("token").value
+        }
+      })
+          .then(response => response.json())
+          .then(json => {
+            this.showings = this.showings.filter((showing) => {
+              return showing.id !== showing_id
+            })
+          });
+    },
+    getShowings: function (previous = false) {
+      let config = useRuntimeConfig();
+      let params = "";
+      if (previous) params = "?previous=true";
+
+      return fetch(`${config.public.apiURL}/schedules/1${params}`, {
+        method: "GET",
+        headers: {"Content-type": "application/json"}
+      })
+          .then(response => response.json())
+          .then(showings => {
+
+            if (previous) {
+              this.got_previous = true;
+              this.previous_showings = showings;
+            } else {
+              this.showings = showings
+            }
+          })
+          .catch(err => console.log(err));
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>