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

Compare commits

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

No commits in common. "main" and "showings-updates" have entirely different histories.
main ... showings-u

7 changed files with 192 additions and 185 deletions
Show stats Expand all files Collapse all files

55
.idea/workspace.xml generated
View file

@ -6,12 +6,9 @@
<component name="ChangeListManager">
<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$/src/components/admin/lists.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/lists.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/admin/showings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/showings.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" />
<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/showing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/showing.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -60,31 +57,31 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true",
"WebServerToolWindowFactoryState": "false",
"code.cleanup.on.save": "true",
"git-widget-placeholder": "usefetch-to-fetch",
"last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
"list.type.of.created.stylesheet": "CSS",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.standard": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.standard": "",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"npm.dev.executor": "Run",
"prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
"rearrange.code.on.save": "true",
"settings.editor.selected.configurable": "settings.vue",
"ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true"
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
&quot;code.cleanup.on.save&quot;: &quot;true&quot;,
&quot;git-widget-placeholder&quot;: &quot;showings-updates&quot;,
&quot;last_opened_file_path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/types&quot;,
&quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.standard&quot;: &quot;&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;npm.dev.executor&quot;: &quot;Run&quot;,
&quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier&quot;,
&quot;rearrange.code.on.save&quot;: &quot;true&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;settings.vue&quot;,
&quot;ts.external.directory.path&quot;: &quot;/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}]]></component>
}</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/types" />

146
src/components/admin/lists.vue
View file

@ -3,98 +3,90 @@
<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"
/>
<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>
<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 lang="ts" setup>
import type { MovieList } from "~/types/movielist";
<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))
const lists = defineModel<MovieList[]>("lists", { default: [] });
const addList = async function () {
let config = useRuntimeConfig();
let list_name = (document.getElementById("add-list") as HTMLInputElement)
.value;
if (!list_name) {
alert("Please add list name.");
return;
}
await $fetch<MovieList>(`${config.public.apiURL}/lists/`, {
method: "POST",
body: JSON.stringify({
name: list_name,
public: false,
}),
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
list_json.list.movie_count = 0;
this.lists.push(list_json.list);
},
})
.then((data) => {
lists.value = [...lists.value, data];
(document.getElementById("add-list") as HTMLInputElement).value = "";
})
.catch((err) => console.log(err));
};
const deleteList = function (list_id: number) {
const config = useRuntimeConfig();
let confirmed = confirm("Delete list?");
deleteList: function (list_id) {
const config = useRuntimeConfig();
let confirmed = confirm("Delete list?");
if (!confirmed) {
return false;
}
if (!confirmed) {
return false;
}
$fetch(`${config.public.apiURL}/lists/${list_id}/`, {
method: "DELETE",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
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();
});
},
})
.then(() => {
lists.value = lists.value.filter((list) => {
return list.id !== list_id;
});
})
.catch((err) => console.log(err));
};
const getLists = function () {
const config = useRuntimeConfig();
$fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
method: "GET",
headers: { "Content-type": "application/json" },
})
.then((data) => (lists.value = data))
.catch((err) => console.log(err));
};
onMounted(() => {
getLists();
});
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>
<style scoped>
</style>

39
src/components/admin/showings.vue
View file

@ -26,7 +26,6 @@
import type { Showing } from "~/types/showing";
import { useCookie } from "#app";
import type { Schedule } from "~/types/schedule";
import { $fetch } from "ofetch";
const showings = defineModel<Showing[]>("showings", { default: [] });
const previous_showings = defineModel<Showing[]>("previous_showings", {
@ -87,27 +86,33 @@ const getShowings = function (previous = false) {
let params = "";
if (previous) params = "?previous=true";
$fetch<Schedule>(`${config.public.apiURL}/schedules/1${params}`, {
method: "GET",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
const { data, error } = useFetch<Schedule>(
`${config.public.apiURL}/schedules/1${params}`,
{
method: "GET",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
},
},
})
.then((data) => {
);
if (error.value) {
if (error.value.statusCode === 401) {
alert("Unauthorized");
}
} else {
if (!data.value) {
alert("No showings found for schedule.");
} else {
if (previous) {
got_previous.value = true;
previous_showings.value = data.showings;
previous_showings.value = data.value.showings;
} else {
showings.value = data.showings;
showings.value = data.value.showings;
}
})
.catch((err) => {
if (err.statusCode === 401) {
useCookie("token").value = null;
navigateTo("/");
}
});
}
}
};
</script>

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

@ -44,7 +44,7 @@
</div>
<div id="lists" class="hidden">
<lists />
<lists></lists>
</div>
</div>
</template>
@ -54,14 +54,15 @@ import AddMovie from "~/components/modal-content/AddMovie.vue";
import Search from "~/components/admin/search.vue";
import Showings from "~/components/admin/showings.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: [] });
const modal_movie = defineModel<Movie>("#movie-modal");
const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
const current_view = ref("search");
const closeModal = function () {
movie_modal?.value?.toggleModal();
@ -71,7 +72,6 @@ const showModal = function (movie: Movie) {
movie_modal?.value?.toggleModal();
};
const toggleDisplay = function (element_id: string) {
if (element_id === current_view.value) return;
let tabs = ["search", "showings", "lists"];
tabs.forEach((value) => {
@ -80,7 +80,6 @@ const toggleDisplay = function (element_id: string) {
document
.getElementById(element_id + "-tab")
?.classList.toggle("underline");
current_view.value = element_id;
} else if (!document.getElementById(value)?.classList.contains("hidden")) {
document.getElementById(value)?.classList.toggle("hidden");
document.getElementById(value + "-tab")?.classList.toggle("underline");

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

@ -53,7 +53,7 @@
<span
v-if="logged_in"
class="text-center hover-pointer"
@click="removeMovie(movie.imdb_id)"
@click="removeMovie(movie.id)"
>
X
</span>
@ -83,27 +83,35 @@ const hide_scheduled = ref(false);
const getList = async function (list_id: number) {
let config = useRuntimeConfig();
$fetch<MovieList>(`${config.public.apiURL}/lists/${list_id}`, {
method: "GET",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
const { data, error } = await useFetch<MovieList>(
`${config.public.apiURL}/lists/${list_id}`,
{
method: "GET",
headers: {
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
},
},
})
.then((data) => {
list.value = data;
movies.value = data?.movies || [];
);
if (error.value) {
if (error.value.statusCode === 401) {
navigateTo("/");
}
if (error.value.statusCode === 404) {
alert("List not found");
navigateTo("/lists");
}
} else {
if (!data.value) {
alert("List not found");
navigateTo("/lists");
} else {
list.value = data.value;
movies.value = data.value?.movies || [];
filtered_movies.value = movies.value;
})
.catch((err) => {
if (err.statusCode === 401) {
navigateTo("/");
}
if (err.statusCode === 404) {
alert("List not found");
navigateTo("/lists");
}
});
}
}
};
const hideScheduled = function () {
@ -119,7 +127,7 @@ const hideScheduled = function () {
}
};
const removeMovie = async function (movie_id: string) {
const removeMovie = async function (movie_id: number) {
let config = useRuntimeConfig();
let confirmed = confirm("Remove movie from list?");

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

@ -31,19 +31,21 @@ const updateLists = async function () {
headers["Authorization"] = `Token ${useCookie("token").value}`;
}
await $fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
method: "GET",
headers: headers,
})
.then((data) => {
lists.value = data || [];
})
.catch((err) => {
if (err.statusCode === 401) {
useCookie("token").value = null;
navigateTo("/");
}
});
const { data, error } = await useFetch<MovieList[]>(
`${config.public.apiURL}/lists`,
{
method: "GET",
headers: headers,
},
);
if (error.value) {
if (error.value.statusCode === 401) {
navigateTo("/");
}
} else {
lists.value = data.value || [];
}
};
onMounted(() => {

52
src/pages/schedule/index.vue
View file

@ -61,8 +61,6 @@
<script lang="ts" setup>
import type { Showing } from "~/types/showing";
import type { Schedule } from "~/types/schedule";
import { $fetch } from "ofetch";
import { useCookie } from "#app";
const schedule = defineModel<Schedule>("schedule");
const past_showings = defineModel<Showing[]>("past_showings", {
@ -102,33 +100,39 @@ const getSchedule = async function (previous = false) {
let params = "";
if (previous) params = "?past_showings=true";
await $fetch(`${config.public.apiURL}/schedules/1${params}`, {
method: "GET",
headers: {
Accept: "application/json",
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
const { data, error } = await useFetch<Schedule>(
`${config.public.apiURL}/schedules/1${params}`,
{
method: "GET",
headers: {
Accept: "application/json",
"Content-type": "application/json",
Authorization: `Token ${useCookie("token").value}`,
},
},
})
.then((data) => {
);
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.past_showings;
past_showings.value = data.value.past_showings;
} else {
schedule.value = data;
schedule.value = data.value;
}
document.getElementById("loader")?.classList.toggle("hidden");
})
.catch((err) => {
switch (err.statusCode) {
case 401:
useCookie("token").value = null;
navigateTo("/");
break;
case 404:
alert("Unable to find schedule");
break;
}
});
}
}
return schedule;
};