You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

52 lines
1.5 KiB

<template>
<div class="h-12 text-2xl flex items-center">
<h1 class="">Active Requests</h1>
</div>
<movie-list :movies="activeRequests" @onClickMovie="displayMovie"/>
<movie-modal :tmdb-id="activeTmdb" @onClose="activeTmdb = undefined" @onCancel="removeMovieRequest"/>
</template>
<script lang="ts">
import type { IMovie, IMovieDetails } from "@autoplex-api/request";
import { Status } from "@autoplex/restful";
import { Action } from "../store";
import { defineComponent } from "vue";
import MovieList from "../components/MovieList.vue";
import MovieModal from "../components/modals/MovieModal.vue";
export default defineComponent({
components: {
MovieList,
MovieModal
},
data() {
return {
activeRequests: <IMovie[]>[],
activeTmdb: <number|undefined> undefined
}
},
methods: {
displayMovie(movie: IMovie, index: number ) {
this.activeTmdb = movie.tmdbId;
},
removeMovieRequest(movie: IMovieDetails) {
let index = this.activeRequests.findIndex(request => request.tmdbId == movie.tmdbId);
this.activeRequests.splice(index, 1);
},
async fetchRequests() {
try {
let [status, response] = await this.$store.dispatch(Action.ActiveMovieRequests, undefined);
if (status !== Status.Ok) {
throw new Error("Non-OK status returned: " + status);
}
this.activeRequests = response.result;
} catch(e) {
console.error("Failed to fetch active movie tickets", e);
};
}
},
mounted() {
this.fetchRequests();
}
});
</script>