chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/WaitingScreen.vue

<script setup lang="ts">
import { WaitingScreenState } from "ChillMainAssets/types";

interface Props {
    state: WaitingScreenState;
}

const props = defineProps<Props>();
</script>

<template>
    <div id="waiting-screen">
        <div
            v-if="props.state === 'pending' && !!$slots.pending"
            class="alert alert-danger text-center"
        >
            <div>
                <slot name="pending"></slot>
            </div>

            <div>
                <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
                <span class="sr-only">Loading...</span>
            </div>
        </div>

        <div
            v-if="props.state === 'stopped' && !!$slots.stopped"
            class="alert alert-info"
        >
            <div>
                <slot name="stopped"></slot>
            </div>
        </div>

        <div
            v-if="props.state === 'failure' && !!$slots.failure"
            class="alert alert-danger text-center"
        >
            <div>
                <slot name="failure"></slot>
            </div>
        </div>

        <div
            v-if="props.state === 'ready' && !!$slots.ready"
            class="alert alert-success text-center"
        >
            <div>
                <slot name="ready"></slot>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
#waiting-screen {
    > .alert {
        min-height: 350px;
    }
}
</style>