Merge pull request 'add-loading-icon' (#6) from add-loading-icon into main
Reviewed-on: #6
This commit is contained in:
commit
a044d80c62
10 changed files with 65 additions and 9 deletions
3
.idea/dictionaries/project.xml
generated
Normal file
3
.idea/dictionaries/project.xml
generated
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<component name="ProjectDictionaryState">
|
||||
<dictionary name="project" />
|
||||
</component>
|
||||
7
.idea/jsLibraryMappings.xml
generated
Normal file
7
.idea/jsLibraryMappings.xml
generated
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<file url="file://$PROJECT_DIR$/src" libraries="{web/src/node_modules}" />
|
||||
<file url="PROJECT" libraries="{@types/tailwindcss, web/src/node_modules}" />
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/tailwindcss.xml
generated
Normal file
6
.idea/tailwindcss.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="TailwindSettings">
|
||||
<option name="lspConfiguration" value="{ "includeLanguages": { "ftl": "html", "jinja": "html", "jinja2": "html", "smarty": "html", "tmpl": "gohtml", "cshtml": "html", "vbhtml": "html", "razor": "html", "scss": "scss", "html": "html", "javascript": "javascript", "typescript": "typescript", "css": "css", "vue": "vue", "sass": "sass", "twig": "twig" }, "files": { "exclude": [ "**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**" ] }, "emmetCompletions": false, "classAttributes": ["class", "className", "ngClass"], "colorDecorators": true, "showPixelEquivalents": true, "rootFontSize": 16, "hovers": true, "suggestions": true, "codeActions": true, "validate": true, "lint": { "invalidScreen": "error", "invalidVariant": "error", "invalidTailwindDirective": "error", "invalidApply": "error", "invalidConfigPath": "error", "cssConflict": "warning", "recommendedVariantOrder": "warning" }, "experimental": { "configFile": null, "classRegex": [] } }" />
|
||||
</component>
|
||||
</project>
|
||||
1
.idea/web.iml
generated
1
.idea/web.iml
generated
|
|
@ -4,5 +4,6 @@
|
|||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<orderEntry type="library" name="@types/tailwindcss" level="application" />
|
||||
</component>
|
||||
</module>
|
||||
17
.idea/workspace.xml
generated
17
.idea/workspace.xml
generated
|
|
@ -5,8 +5,10 @@
|
|||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/web.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/web.iml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ComposerSettings">
|
||||
<component name="ComposerSettings" synchronizationState="SYNCHRONIZE">
|
||||
<execution />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
<option value="CSS File" />
|
||||
<option value="Vue Single File Component" />
|
||||
<option value="TypeScript File" />
|
||||
<option value="Vue Composition API Component" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -76,9 +79,14 @@
|
|||
"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",
|
||||
"settings.editor.selected.configurable": "configurable.group.editor",
|
||||
"ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
},
|
||||
"keyToStringList": {
|
||||
"vue.recent.templates": [
|
||||
"Vue Composition API Component"
|
||||
]
|
||||
}
|
||||
}]]></component>
|
||||
<component name="RecentsManager">
|
||||
|
|
@ -133,7 +141,10 @@
|
|||
<workItem from="1743904898331" duration="20256000" />
|
||||
<workItem from="1743998844137" duration="23268000" />
|
||||
<workItem from="1744430699183" duration="32152000" />
|
||||
<workItem from="1745179755243" duration="37963000" />
|
||||
<workItem from="1745179755243" duration="40533000" />
|
||||
<workItem from="1745366380362" duration="223000" />
|
||||
<workItem from="1745366610986" duration="319000" />
|
||||
<workItem from="1745366940811" duration="1222000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
|
|||
BIN
src/assets/img/movie-loader.webm
Normal file
BIN
src/assets/img/movie-loader.webm
Normal file
Binary file not shown.
15
src/components/LoadingIcon.vue
Normal file
15
src/components/LoadingIcon.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<video
|
||||
alt="Loading"
|
||||
autoplay
|
||||
class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
loop
|
||||
muted
|
||||
src="/assets/img/movie-loader.webm"
|
||||
type="video/webm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<LoadingIcon v-if="loading" />
|
||||
<div v-if="list_id !== 0" class="p-5 sm:p-0">
|
||||
<Modal ref="movie_modal">
|
||||
<ShowMovie
|
||||
|
|
@ -73,6 +74,7 @@ import { useCookie } from "#app";
|
|||
|
||||
const list_id = ref(0);
|
||||
const list = defineModel<MovieList>("movie_list", { default: [] });
|
||||
const loading = ref(true);
|
||||
const modal_movie: Ref<Movie | null> = ref(null);
|
||||
const movies = defineModel<Movie[] | []>("movies", {
|
||||
default: [],
|
||||
|
|
@ -83,6 +85,7 @@ const logged_in = ref(false);
|
|||
const hide_scheduled = ref(false);
|
||||
|
||||
const getList = async function (list_id: number) {
|
||||
loading.value = true;
|
||||
let config = useRuntimeConfig();
|
||||
let headers: any = {
|
||||
"Content-type": "application/json",
|
||||
|
|
@ -100,6 +103,7 @@ const getList = async function (list_id: number) {
|
|||
list.value = data;
|
||||
movies.value = data?.movies || [];
|
||||
filtered_movies.value = movies.value;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.statusCode === 401) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<div class="p-5 sm:p-0">
|
||||
<div v-if="lists.length < 1">
|
||||
<div v-if="lists.length < 1 && !loading">
|
||||
<p>No lists found</p>
|
||||
</div>
|
||||
<LoadingIcon v-if="loading" />
|
||||
|
||||
<ul class="grid grid-cols-2 gap-3 mt-5">
|
||||
<li v-for="list in lists" class="movie-card neon-border p-5 rounded">
|
||||
<div class="grid grid-rows-2 gap-3">
|
||||
|
|
@ -21,7 +23,10 @@ import type { MovieList } from "~/types/movielist";
|
|||
import { useCookie } from "#app";
|
||||
|
||||
const lists = defineModel<MovieList[]>("movie_list", { default: [] });
|
||||
const loading = ref(true);
|
||||
|
||||
const updateLists = async function () {
|
||||
loading.value = true;
|
||||
let config = useRuntimeConfig();
|
||||
let headers: any = {
|
||||
"Content-type": "application/json",
|
||||
|
|
@ -37,6 +42,7 @@ const updateLists = async function () {
|
|||
})
|
||||
.then((data) => {
|
||||
lists.value = data || [];
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.statusCode === 401) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<div class="p-5 sm:p-0">
|
||||
<div v-if="schedule && schedule?.showings.length < 1" class="p-5">
|
||||
<div
|
||||
v-if="schedule && schedule?.showings.length < 1 && !loading"
|
||||
class="p-5"
|
||||
>
|
||||
<span>No Showings Found</span>
|
||||
</div>
|
||||
<LoadingIcon v-if="loading" />
|
||||
<ul class="flex flex-col gap-5">
|
||||
<li
|
||||
v-for="showing in schedule?.showings"
|
||||
|
|
@ -36,7 +40,6 @@
|
|||
>
|
||||
Previous Showings
|
||||
</span>
|
||||
<span id="loader" class="hidden">Loading...</span>
|
||||
<ul class="flex flex-col gap-5">
|
||||
<li v-for="showing in past_showings" class="p-5 movie-card neon-border">
|
||||
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
||||
|
|
@ -68,6 +71,7 @@ const schedule = defineModel<Schedule>("schedule");
|
|||
const past_showings = defineModel<Showing[]>("past_showings", {
|
||||
default: [],
|
||||
});
|
||||
const loading = ref(true);
|
||||
const got_previous = ref(false);
|
||||
const months = [
|
||||
"January",
|
||||
|
|
@ -92,13 +96,12 @@ const formatDate = function (date_string: string) {
|
|||
};
|
||||
|
||||
const getSchedule = async function (previous = false) {
|
||||
loading.value = true;
|
||||
let config = useRuntimeConfig();
|
||||
if (got_previous.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
document.getElementById("loader")?.classList.toggle("hidden");
|
||||
|
||||
let params = "";
|
||||
if (previous) params = "?past_showings=true";
|
||||
|
||||
|
|
@ -120,7 +123,7 @@ const getSchedule = async function (previous = false) {
|
|||
} else {
|
||||
schedule.value = data;
|
||||
}
|
||||
document.getElementById("loader")?.classList.toggle("hidden");
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
switch (err.statusCode) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue