tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: tiradoe:6b4617cf3d2fbbf04ade0c5ad070c2eb581bca17
Branches Tags
tiradoe:main
tiradoe:usefetch-to-fetch
tiradoe:showings-updates
..
compare: tiradoe:a8784d2b9bf2292e43a7b4e104a69d39a37b65aa
Branches Tags
tiradoe:main
tiradoe:usefetch-to-fetch
tiradoe:showings-updates

No commits in common. "6b4617cf3d2fbbf04ade0c5ad070c2eb581bca17" and "a8784d2b9bf2292e43a7b4e104a69d39a37b65aa" have entirely different histories.
6b4617cf3d ... a8784d2b9b

7 changed files with 183 additions and 256 deletions
Show stats Expand all files Collapse all files

56
.idea/workspace.xml generated
View file

@ -6,12 +6,7 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment=""> <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.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/components/Modal.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Modal.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/components/admin/search.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/search.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/modal-content/AddMovie.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/admin/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/admin/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/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -60,31 +55,31 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent">{ <component name="PropertiesComponent"><![CDATA[{
&quot;keyToString&quot;: { "keyToString": {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;, "RunOnceActivity.OpenProjectViewOnStart": "true",
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, "RunOnceActivity.ShowReadmeOnStart": "true",
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;, "RunOnceActivity.git.unshallow": "true",
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;, "WebServerToolWindowFactoryState": "false",
&quot;code.cleanup.on.save&quot;: &quot;true&quot;, "code.cleanup.on.save": "true",
&quot;git-widget-placeholder&quot;: &quot;movie-search&quot;, "git-widget-placeholder": "schedule-page-updates",
&quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/types&quot;, "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
&quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;, "list.type.of.created.stylesheet": "CSS",
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;, "node.js.detected.package.eslint": "true",
&quot;node.js.detected.package.standard&quot;: &quot;true&quot;, "node.js.detected.package.standard": "true",
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, "node.js.detected.package.tslint": "true",
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.eslint": "(autodetect)",
&quot;node.js.selected.package.standard&quot;: &quot;&quot;, "node.js.selected.package.standard": "",
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.tslint": "(autodetect)",
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;, "nodejs_package_manager_path": "npm",
&quot;npm.dev.executor&quot;: &quot;Run&quot;, "npm.dev.executor": "Run",
&quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier&quot;, "prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
&quot;rearrange.code.on.save&quot;: &quot;true&quot;, "rearrange.code.on.save": "true",
&quot;settings.editor.selected.configurable&quot;: &quot;settings.vue&quot;, "settings.editor.selected.configurable": "settings.vue",
&quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib&quot;, "ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot; "vue.rearranger.settings.migration": "true"
} }
}</component> }]]></component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/types" /> <recent name="$PROJECT_DIR$/src/types" />
@ -136,7 +131,6 @@
<workItem from="1673547794038" duration="2346000" /> <workItem from="1673547794038" duration="2346000" />
<workItem from="1743904898331" duration="20256000" /> <workItem from="1743904898331" duration="20256000" />
<workItem from="1743998844137" duration="23268000" /> <workItem from="1743998844137" duration="23268000" />
<workItem from="1744430699183" duration="32152000" />
</task> </task>
<servers /> <servers />
</component> </component>

28
src/components/Modal.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5"> <div id="movie-modal" class="movie-modal movie-card hidden p-5">
<span <span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
@click="toggleModal()"
>
X X
</span> </span>
<slot class=""></slot> <slot class=""></slot>
</div> </div>
</template> </template>
<script lang="ts" setup> <script>
const visible = ref(false); export default {
name: "Modal",
const toggleModal = () => { methods: {
visible.value = !visible.value; closeModal: function () {
}; document.getElementById("movie-modal").classList.add("hidden")
},
defineExpose({ toggleModal }); },
}
</script> </script>
<style scoped></style> <style scoped>
</style>

71
src/components/admin/search.vue
View file

@ -1,70 +1,51 @@
<template> <template>
<form class="py-3 p-sm-0 align-items-center" @submit="findMovies"> <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
<label class="px-0" for="search-field">Search</label> <label class="px-0 " for="search-field">Search</label>
<div class="px-0 mx-0"> <div class="px-0 mx-0">
<input id="search-field" class="p-1" name="search-field" type="text" /> <input id="search-field" class="p-1" name="search-field" type="text"/>
<button class="btn p-1" type="button" @click="findMovies">Submit</button> <button class="btn p-1" type="button" @click="findMovies">Submit</button>
</div> </div>
</form> </form>
<ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4"> <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"> <li v-for="movie in movies" class="p-1 movie-card">
<img <img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
:src="movie.poster"
alt="movie poster"
class="neon-border hover-pointer"
@click="showModal(movie)"
/>
<div class="p-2"> <div class="p-2">
<h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5> <h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
</div> </div>
</li> </li>
</ul> </ul>
</template> </template>
<script lang="ts" setup> <script>
import type { Movie } from "~/types/movie"; export default {
name: "search",
const emit = defineEmits<{ data: () => ({
(e: "show-modal", movie: Movie): void; movies: [],
}>(); }),
const movies = defineModel<Movie[]>("movie_list", { default: [] }); methods: {
findMovies: function (e) {
const showModal = (movie: Movie) => {
emit("show-modal", movie);
};
const findMovies = async function (e: Event) {
let config = useRuntimeConfig(); let config = useRuntimeConfig();
e.preventDefault(); e.preventDefault();
let searchTerm = (document.getElementById("search-field") as HTMLInputElement) let searchTerm = document.getElementById('search-field').value
?.value;
if (!searchTerm) { return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
return;
}
const { data, error } = await useFetch<Movie[]>(
`${config.public.apiURL}/movies/search?q=${searchTerm}`,
{
method: "GET", method: "GET",
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`, "token": useCookie("token").value,
}, },
})
.then(response => response.json())
.then(json => {
this.movies = json;
})
.catch(err => console.log(err))
}, },
);
if (error.value) {
if (error.value.statusCode === 401) {
alert("Unauthorized");
} }
} else { }
if (!data.value) {
alert("No movies found.");
} else {
movies.value = data.value || [];
}
}
};
</script> </script>
<style scoped></style> <style scoped>
</style>

102
src/components/modal-content/AddMovie.vue
View file

@ -1,87 +1,75 @@
<template> <template>
<div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border"> <div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
<div> <div>
<h2 id="modal-title" class="row pb-3"> <h2 id="modal-title" class="row pb-3">
{{ movie.title }} ({{ movie.year }}) {{ movie.Title }} ({{ movie.Year }})
</h2> </h2>
<div class="grid sm:grid-cols-2"> <div class="grid sm:grid-cols-2">
<!-- MODAL POSTER --> <!-- MODAL POSTER -->
<div class="text-end"> <div class="text-end">
<img <img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
id="modal-poster"
:src="movie.poster"
alt="poster"
class="pt-5"
/>
</div> </div>
<div class="pt-5"> <div class="pt-5">
<label class="" for="list-picker">Add To List</label><br /> <label class="" for="list-picker">Add To List</label><br/>
<select id="list-picker" v-model="list_id" class="p-1 text-black"> <select id="list-picker" v-model="list_id" class="p-1 text-black">
<option v-for="list in lists" :value="list.id"> <option v-for="list in lists" :value="list.id">{{ list.name }}</option>
{{ list.name }}
</option>
</select> </select>
<button <button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
class="modal-poster btn p-1"
type="button"
@click="addMovie(movie.imdb_id)"
>
Submit Submit
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script>
import type { MovieList } from "~/types/movielist"; export default {
name: "AddMovie",
data: () => ({
list_id: 0,
lists: {}
}),
methods: {
addMovie: function (imdb_id) {
let config = useRuntimeConfig()
let list = parseInt(this.list_id)
const props = defineProps(["movie"]); return fetch(`${config.public.apiURL}/lists/movie`, {
const list_id = ref(0); method: "POST",
const lists = defineModel<MovieList[]>("lists", { default: [] }); body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
const emit = defineEmits<{
(e: "close-modal"): void;
}>();
const addMovie = function (imdb_id: string) {
if (typeof imdb_id === "undefined") {
console.log("No imdb id");
}
let config = useRuntimeConfig();
return fetch(
`${config.public.apiURL}/lists/${list_id.value}/movie/${imdb_id}/`,
{
method: "PUT",
body: `{ imdb_id: ${imdb_id}, list_id: ${list_id}}`,
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`, "token": useCookie("token").value,
}, }
},
)
.then((response) => response.json())
.then((_json) => {
emit("close-modal");
}) })
.catch((err) => console.log(err)); .then(response => response.json())
}; .then(_json => {
const getLists = function () { this.$parent.closeModal()
let config = useRuntimeConfig(); })
.catch(err => console.log(err))
},
getLists: function () {
let config = useRuntimeConfig()
fetch(`${config.public.apiURL}/lists`, { fetch(`${config.public.apiURL}/lists`, {
method: "GET", method: "GET",
headers: { "Content-type": "application/json" }, headers: {"Content-type": "application/json",}
}) })
.then((response) => response.json()) .then(response => response.json())
.then((json) => (lists.value = json)) .then(json => this.lists = json)
.catch((err) => console.log(err)); .catch(err => console.log(err))
}; },
onMounted(() => { },
getLists(); mounted() {
}); this.getLists();
},
props: ['movie']
}
</script> </script>
<style scoped></style> <style scoped>
</style>

123
src/pages/admin/index.vue
View file

@ -1,46 +1,24 @@
<template> <template>
<div class="p-5 sm:p-0"> <div class="p-5 sm:p-0">
<Modal ref="movie_modal"> <Modal>
<AddMovie <AddMovie v-if="modal_movie" :movie="modal_movie"></AddMovie>
v-if="modal_movie"
:movie="modal_movie"
@close-modal="closeModal"
></AddMovie>
</Modal> </Modal>
<div class="text-center sm:text-left"> <div class="text-center sm:text-left">
<ul class="inline-flex space-x-5 pb-3"> <ul class="inline-flex space-x-5 pb-3">
<li <li id="search-tab" class="hover-pointer me-3 underline" @click="toggleDisplay('search')">Search</li>
id="search-tab" <li id="showings-tab" class="hover-pointer me-3" @click="toggleDisplay('showings')">Showings</li>
class="hover-pointer me-3 underline" <li id="lists-tab" class="hover-pointer" @click="toggleDisplay('lists')">Lists</li>
@click="toggleDisplay('search')"
>
Search
</li>
<li
id="showings-tab"
class="hover-pointer me-3"
@click="toggleDisplay('showings')"
>
Showings
</li>
<li
id="lists-tab"
class="hover-pointer"
@click="toggleDisplay('lists')"
>
Lists
</li>
<li id="logout" class="hover-pointer" @click="logout">Logout</li> <li id="logout" class="hover-pointer" @click="logout">Logout</li>
</ul> </ul>
</div> </div>
<div id="search"> <div id="search">
<search @show-modal="showModal" /> <search/>
</div> </div>
<div id="showings" class="hidden"> <div id="showings" class="hidden">
<showings /> <showings/>
</div> </div>
<div id="lists" class="hidden"> <div id="lists" class="hidden">
@ -49,67 +27,62 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script>
import AddMovie from "~/components/modal-content/AddMovie.vue"; import AddMovie from "~/components/modal-content/AddMovie.vue";
import Search from "~/components/admin/search.vue"; import Search from "~/components/admin/search.vue";
import Showings from "~/components/admin/showings.vue"; import Showings from "~/components/admin/showings.vue";
import Lists from "~/components/admin/lists.vue"; import Lists from "~/components/admin/lists.vue";
import type { MovieList } from "~/types/movielist";
import { useCookie } from "#app";
import type { Movie } from "~/types/movie";
import Modal from "~/components/Modal.vue";
const lists = defineModel<MovieList>("movie-lists", { default: [] }); export default {
const modal_movie = defineModel<Movie>("#movie-modal"); name: "index",
components: {Lists, Showings, Search, AddMovie},
const movie_modal = ref<InstanceType<typeof Modal> | null>(null); data: () => ({
lists: [],
const closeModal = function () { modal_movie: null,
movie_modal?.value?.toggleModal(); }),
}; methods: {
const showModal = function (movie: Movie) { showModal: function (movie) {
modal_movie.value = movie; this.modal_movie = movie;
movie_modal?.value?.toggleModal(); document.getElementById("movie-modal").classList.remove("hidden");
}; },
const toggleDisplay = function (element_id: string) { toggleDisplay: function (id) {
let tabs = ["search", "showings", "lists"]; let tabs = ["search", "showings", "lists"];
tabs.forEach((value) => { tabs.forEach((value) => {
if (value === element_id) { if (value === id) {
document.getElementById(element_id)?.classList.toggle("hidden"); document.getElementById(id).classList.toggle("hidden");
document document.getElementById(id + "-tab").classList.toggle("underline");
.getElementById(element_id + "-tab") } else if (!document.getElementById(value).classList.contains("hidden")) {
?.classList.toggle("underline"); document.getElementById(value).classList.toggle("hidden");
} else if (!document.getElementById(value)?.classList.contains("hidden")) { document.getElementById(value + "-tab").classList.toggle("underline");
document.getElementById(value)?.classList.toggle("hidden");
document.getElementById(value + "-tab")?.classList.toggle("underline");
} }
});
};
const logout = () => {
let config = useRuntimeConfig();
fetch(`${config.public.apiURL}/auth/logout/`, {
method: "POST",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
},
}) })
.then((response) => response) },
.then((_json) => { logout: () => {
let config = useRuntimeConfig()
let token = useCookie("token").value;
fetch(`${config.public.apiURL}/logout`, {
method: "PUT",
headers: {"Content-type": "application/json", "token": token},
})
.then(response => response.json())
.then(_json => {
let token = useCookie("token"); let token = useCookie("token");
token.value = null; token.value = null;
navigateTo("/"); window.location = "/";
}) })
.catch((err) => console.log(err)); .catch(err => console.log(err))
}; }
},
onMounted(() => { mounted() {
const token = useCookie("token").value; const token = useCookie("token").value;
if (!token) { if (!token) {
navigateTo("/"); navigateTo("/")
} }
}); }
}
</script> </script>
<style scoped></style> <style scoped>
</style>

7
src/pages/lists/[id].vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div v-if="list_id !== 0" class="p-5 sm:p-0"> <div v-if="list_id !== 0" class="p-5 sm:p-0">
<Modal ref="movie_modal"> <Modal>
<ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie> <ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
</Modal> </Modal>
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2> <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
@ -64,9 +64,6 @@ import ShowMovie from "~/components/modal-content/ShowMovie.vue";
import "lazysizes"; import "lazysizes";
import type { MovieList } from "~/types/movielist"; import type { MovieList } from "~/types/movielist";
import type { Movie } from "~/types/movie"; 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_id = ref(0);
const list = defineModel<MovieList>("movie_list", { default: [] }); const list = defineModel<MovieList>("movie_list", { default: [] });
@ -179,7 +176,7 @@ const filterMovies = function () {
const showModal = function (movie: Movie) { const showModal = function (movie: Movie) {
modal_movie.value = movie; modal_movie.value = movie;
movie_modal.value?.toggleModal(); document.getElementById("movie-modal")?.classList.remove("hidden");
}; };
onMounted(() => { onMounted(() => {

14
src/pages/lists/index.vue
View file

@ -18,24 +18,18 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { MovieList } from "~/types/movielist"; import type { MovieList } from "~/types/movielist";
import { useCookie } from "#app";
const lists = defineModel<MovieList[]>("movie_list", { default: [] }); const lists = defineModel<MovieList[]>("movie_list", { default: [] });
const updateLists = async function () { const updateLists = async function () {
let config = useRuntimeConfig(); let config = useRuntimeConfig();
let headers: any = {
"Content-type": "application/json",
};
if (typeof useCookie("token").value !== "undefined") {
headers["Authorization"] = `Token ${useCookie("token").value}`;
}
const { data, error } = await useFetch<MovieList[]>( const { data, error } = await useFetch<MovieList[]>(
`${config.public.apiURL}/lists`, `${config.public.apiURL}/lists`,
{ {
method: "GET", method: "GET",
headers: headers, headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
},
}, },
); );