S12 - Async feedback for scheduling

agiledancers-fe/src/app/schools/school-page.html

@@ -344,7 +344,7 @@
       </div>
       <div class="show-list">
         @for (show of shows(); track show.id) {
-          <article class="show-card">
+          <article class="show-card" [id]="'show-' + show.id">
             <div class="date-tile">
               <strong>{{ firstDate(show) | date: 'dd' }}</strong
               ><span>{{ firstDate(show) | date: 'MMM yyyy' }}</span>
@@ -372,6 +372,48 @@
                     : 'Geen geldige planning. Plan de groepen opnieuw in.'
                 }}
               </p>
+              @if (schedulingStatus.run(context.school.id, show.id); as run) {
+                <div class="scheduling-progress" role="status">
+                  @if (!schedulingStatus.connected()) {
+                    <p>
+                      Verbinding verbroken. Status mogelijk verouderd; de berekening loopt door.
+                    </p>
+                  }
+                  @if (run.state === 'RUNNING') {
+                    <p>
+                      Bezig met inplannen · {{ schedulingStatus.phase(run) }} ·
+                      {{ schedulingStatus.elapsed(run) }}
+                    </p>
+                    <p>
+                      {{
+                        run.progress.feasible
+                          ? 'Geldige oplossing gevonden; optimalisatie loopt door.'
+                          : 'Nog geen geldige oplossing gevonden.'
+                      }}
+                    </p>
+                  } @else {
+                    <p>{{ run.message }}</p>
+                    <p>
+                      Afgerond: {{ run.finishedAt | date: 'dd-MM-yyyy HH:mm:ss' }} · Duur:
+                      {{ schedulingStatus.elapsed(run) }}
+                    </p>
+                    @if (run.summary; as summary) {
+                      <p>
+                        Aanwezigheid: {{ summary.attendanceExcess }} extra dagdelen boven voorkeur
+                        (showcasedansers, exclusief coaches).
+                      </p>
+                      <p>
+                        Spreiding: {{ summary.performanceSpread }} optredens verschil tussen drukste
+                        en rustigste dagdeel.
+                      </p>
+                      <p>
+                        Variatie: {{ summary.varietyPenalty }} strafpunten voor opeenvolgende
+                        groepen (lager is beter).
+                      </p>
+                    }
+                  }
+                </div>
+              }
               <button
                 type="button"
                 class="button primary"