68 lines
2.4 KiB
Vue
68 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { BIcon } from "buefy";
|
|
import SelfServeDynamicImageFrame from "@/components/displays/selfServe/SelfServeDynamicImageFrame.vue";
|
|
import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
|
|
|
|
const props = defineProps<{
|
|
isLoading: boolean;
|
|
dynamicImageUrl: string | null;
|
|
activeTasks: Array<any>;
|
|
completedTasks: Record<number, boolean>;
|
|
allVisibleQuestionsAnswered: boolean;
|
|
editAnswers: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "toggle-task", taskId: number, value: boolean): void;
|
|
(e: "download-attachment", taskId: number, attachmentId: number | undefined, attachment?: any): void;
|
|
(e: "clear-dynamic-image"): void;
|
|
}>();
|
|
|
|
const emitToggleTask = (taskId: number, value: boolean) => {
|
|
emit("toggle-task", taskId, value);
|
|
};
|
|
|
|
const emitDownloadAttachment = (taskId: number, attachmentId: number | undefined, attachment?: any) => {
|
|
emit("download-attachment", taskId, attachmentId, attachment);
|
|
};
|
|
|
|
const onDynamicImageError = () => {
|
|
emit("clear-dynamic-image");
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div data-testid="self-serve-tasks-step">
|
|
<div v-if="isLoading && activeTasks.length === 0" class="has-text-centered p-6">
|
|
<b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large" />
|
|
<p>{{ $t("self_wash.loading_data") }}</p>
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
v-if="isLoading"
|
|
class="notification is-info is-light py-2 px-3 mb-4"
|
|
data-testid="self-serve-tasks-inline-loading"
|
|
>
|
|
<b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-small" />
|
|
<span class="ml-2">{{ $t("self_wash.loading_data") }}</span>
|
|
</div>
|
|
|
|
<SelfServeDynamicImageFrame
|
|
:src="dynamicImageUrl"
|
|
alt="Machine status"
|
|
@error="onDynamicImageError"
|
|
/>
|
|
<div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">
|
|
<h1 class="title has-text-centered mb-2" v-if="activeTasks.length > 0">{{ $t("self_wash.start_machine") }}</h1>
|
|
<h1 class="title has-text-centered mb-2" v-else>{{ $t("self_wash.questions_answered") }}</h1>
|
|
<SelfServeTaskList
|
|
:tasks="activeTasks"
|
|
:completedTasks="completedTasks"
|
|
@toggle-task="emitToggleTask"
|
|
@download-attachment="emitDownloadAttachment"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|