Initial commit
This commit is contained in:
commit
50c4133930
35 changed files with 12673 additions and 0 deletions
23
src/components/Modal.vue
Normal file
23
src/components/Modal.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div id="movie-modal" class="movie-modal movie-card hidden p-5">
|
||||
<span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
|
||||
X
|
||||
</span>
|
||||
<slot class=""></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modal",
|
||||
methods: {
|
||||
closeModal: function () {
|
||||
document.getElementById("movie-modal").classList.add("hidden")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
92
src/components/admin/lists.vue
Normal file
92
src/components/admin/lists.vue
Normal file
|
|
@ -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>
|
||||
51
src/components/admin/search.vue
Normal file
51
src/components/admin/search.vue
Normal file
|
|
@ -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>
|
||||
86
src/components/admin/showings.vue
Normal file
86
src/components/admin/showings.vue
Normal file
|
|
@ -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>
|
||||
58
src/components/forms/ScheduleMovie.vue
Normal file
58
src/components/forms/ScheduleMovie.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<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
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScheduleMovie",
|
||||
methods: {
|
||||
schedule: function (e) {
|
||||
const config = useRuntimeConfig();
|
||||
e.preventDefault();
|
||||
|
||||
let showtime_input = document.getElementById("schedule-input").value;
|
||||
if (!showtime_input) {
|
||||
alert("Please set showtime.");
|
||||
return false;
|
||||
}
|
||||
let showtime = showtime_input + " " + "00:00:00";
|
||||
|
||||
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"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
75
src/components/modal-content/AddMovie.vue
Normal file
75
src/components/modal-content/AddMovie.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
||||
<div>
|
||||
<h2 id="modal-title" class="row pb-3">
|
||||
{{ movie.Title }} ({{ movie.Year }})
|
||||
</h2>
|
||||
|
||||
<div class="grid sm:grid-cols-2">
|
||||
<!-- MODAL POSTER -->
|
||||
<div class="text-end">
|
||||
<img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
|
||||
</div>
|
||||
|
||||
<div class="pt-5">
|
||||
<label class="" for="list-picker">Add To List</label><br/>
|
||||
<select id="list-picker" v-model="list_id" class="p-1 text-black">
|
||||
<option v-for="list in lists" :value="list.id">{{ list.name }}</option>
|
||||
</select>
|
||||
<button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddMovie",
|
||||
data: () => ({
|
||||
list_id: 0,
|
||||
lists: {}
|
||||
}),
|
||||
methods: {
|
||||
addMovie: function (imdb_id) {
|
||||
let config = useRuntimeConfig()
|
||||
let list = parseInt(this.list_id)
|
||||
|
||||
return fetch(`${config.public.apiURL}/lists/movie`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
|
||||
headers: {
|
||||
"Content-type": "application/json",
|
||||
"token": useCookie("token").value,
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(_json => {
|
||||
this.$parent.closeModal()
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
},
|
||||
getLists: function () {
|
||||
let 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();
|
||||
},
|
||||
props: ['movie']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
40
src/components/modal-content/ShowMovie.vue
Normal file
40
src/components/modal-content/ShowMovie.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="sm:m-5 p-10 movie-card neon-border">
|
||||
<div>
|
||||
<h2 class="text-xl pb-3 text-center sm:text-left">
|
||||
{{ 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"/>
|
||||
<div class="pt-5 sm:pt-0">
|
||||
<p>{{ movie.plot }}</p>
|
||||
<ScheduleMovie v-if="logged_in" :movie="movie" class="mt-5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
26
src/components/navbar.vue
Normal file
26
src/components/navbar.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="grid grid-rows-2 text-center sm:text-left sm:grid-rows-none sm:grid-cols-2 my-5 navbar w-full">
|
||||
<NuxtLink class="block" to="/admin">
|
||||
<h1 class="block site-title bloodseeker">Cinema Corona</h1>
|
||||
</NuxtLink>
|
||||
|
||||
<ul class="mt-3 sm:mt-0 justify-self-center sm:justify-self-end inline-flex space-x-5 bloodseeker leading-10">
|
||||
<li>
|
||||
<NuxtLink class="text-xl header-link" to="/lists">Lists</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink class="text-xl header-link" to="/schedule">Schedule</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "navbar",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue