Paillasse/portail/resources/views/seances/attente-eleve.blade.php

@extends('layouts.vitrine')

@section('titre', "Salle d'attente")

@section('contenu')
    @if ($labSession->etat === \App\Models\LabSession::EN_ATTENTE)
        <meta http-equiv="refresh" content="5">
    @endif
    <div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold">{{ $seance->lab->titre }}</p>
        @if ($labSession->etat === \App\Models\LabSession::EN_ATTENTE)
            <div class="py-20 text-center">
                <h1 class="text-4xl font-extrabold tracking-tight">En attente que le prof t'admette…</h1>
                <p class="mt-4 font-semibold">Cette page se rafraîchit toute seule.</p>
            </div>
        @elseif ($labSession->stack_id)
            <h1 class="mt-2 text-3xl font-extrabold tracking-tight">Ta console</h1>
            <div id="terminal" class="mt-4 h-[480px] overflow-hidden rounded-2xl border border-[#e3e5e8]" style="background:#13233A"></div>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
            <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
            <script src="{{ asset('js/console-reelle.js') }}"></script>
            <script>
                fetch('{{ route('console.eleve', $labSession) }}', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '{{ csrf_token() }}' },
                }).then(function (r) { return r.json(); }).then(function (d) {
                    window.SyllabusConsoleReelle.mount(document.getElementById('terminal'), { jeton: d.jeton, lectureSeule: false });
                });
            </script>
        @else
            <div class="py-20 text-center">
                <h1 class="text-4xl font-extrabold tracking-tight">Tu es admis·e !</h1>
                <p class="mt-4 font-semibold">Le lancement de ta VM arrive dans une prochaine étape du déploiement.</p>
            </div>
        @endif
    </div>
@endsection