50ohm/templates/html/homework.html

<div id="homework-generator" class="homework-generator mx-auto mb-5" v-cloak>
  <div v-if="loading" class="d-flex align-items-center justify-content-center gap-3 py-5" role="status">
    <div class="spinner-border text-primary" aria-hidden="true"></div>
    <span>Kursdata laddas …</span>
  </div>

  <div v-else-if="loadError" class="alert alert-danger" role="alert">
    <h1 class="h4">Övningsverktyget kunde inte laddas</h1>
    <p class="mb-0" v-text="loadError"></p>
  </div>

  <template v-else>
    <h1>Skapa en övning</h1>
    <p class="lead">Sätt ihop en övning av de kapitel och avsnitt som har gåtts igenom.</p>

    <ol class="homework-steps list-unstyled d-flex flex-wrap gap-2 mb-4" aria-label="Steg">
      <li v-for="item in stepLabels" :key="item.number"
          class="badge rounded-pill"
          :class="step === item.number ? 'text-bg-primary' : (step > item.number ? 'text-bg-secondary' : 'bg-light text-dark border')"
          v-text="item.number + '. ' + item.label"></li>
    </ol>

    <section v-if="step === 1" aria-labelledby="homework-course-heading">
      <h2 id="homework-course-heading" class="h4">Välj kurs</h2>
      <p>Vilken kurs håller du?</p>
      <div class="row row-cols-1 row-cols-md-3 g-2">
        <div v-for="course in courseChoices" :key="course.edition" class="col">
          <button type="button" class="btn w-100 h-100 py-3 text-white"
                  :style="{ backgroundColor: course.color, borderColor: course.color }"
                  @click="selectCourse(course)">
            <span class="d-block" v-text="course.label"></span>
            <small class="d-block" v-text="course.detail"></small>
          </button>
        </div>
      </div>
    </section>

    <section v-else-if="step === 2" aria-labelledby="homework-chapter-heading">
      <h2 id="homework-chapter-heading" class="h4">Välj kapitel</h2>
      <p><strong v-text="selectedCourse.label"></strong>: Välj ett eller flera kapitel som har gåtts igenom.</p>
      <div class="list-group mb-3">
        <label v-for="chapter in toc.chapters" :key="chapter.ident"
               class="list-group-item d-flex align-items-start gap-2"
               :class="{ 'text-secondary bg-light': chapterQuestionCount(chapter) === 0 }">
          <input class="form-check-input flex-shrink-0 mt-1" type="checkbox" :value="chapter.ident"
                 v-model="selectedChapterIds" :disabled="chapterQuestionCount(chapter) === 0">
          <span class="flex-grow-1">
            <span class="d-block" v-text="chapter.title"></span>
            <small v-if="chapterQuestionCount(chapter) > 0" class="text-secondary"
                   v-text="chapterQuestionCount(chapter) + ' provfrågor'"></small>
            <small v-else>Inga provfrågor finns</small>
          </span>
        </label>
      </div>
      <div class="d-flex justify-content-between gap-2">
        <button type="button" class="btn btn-outline-secondary" @click="goToStep(1)">Tillbaka</button>
        <button type="button" class="btn btn-primary" :disabled="selectedChapterIds.length === 0"
                @click="openSectionSelection">Vidare till avsnitten</button>
      </div>
    </section>

    <section v-else-if="step === 3" aria-labelledby="homework-section-heading">
      <h2 id="homework-section-heading" class="h4">Välj avsnitt</h2>
      <p>Välj de avsnitt som redan har gåtts igenom.</p>
      <div v-for="chapter in selectedChapters" :key="chapter.ident" class="mb-4">
        <h3 class="h5" v-text="chapter.title"></h3>
        <div class="list-group">
          <label v-for="section in chapter.sections" :key="section.ident"
                 class="list-group-item d-flex align-items-start gap-2"
                 :class="{ 'text-secondary bg-light': sectionQuestionIds(section).length === 0 }">
            <input class="form-check-input flex-shrink-0 mt-1" type="checkbox" :value="section.ident"
                   v-model="selectedSectionIds" :disabled="sectionQuestionIds(section).length === 0">
            <span class="flex-grow-1">
              <span class="d-block" v-text="section.title"></span>
              <small v-if="sectionQuestionIds(section).length > 0" class="text-secondary"
                     v-text="sectionQuestionIds(section).length + ' provfrågor'"></small>
              <small v-else>Inga provfrågor finns</small>
            </span>
          </label>
        </div>
      </div>
      <div class="d-flex justify-content-between gap-2">
        <button type="button" class="btn btn-outline-secondary" @click="goToStep(2)">Tillbaka</button>
        <button type="button" class="btn btn-primary" :disabled="selectedSectionIds.length === 0"
                @click="openQuestionSelection">Vidare till frågorna</button>
      </div>
    </section>

    <section v-else-if="step === 4" aria-labelledby="homework-question-heading">
      <h2 id="homework-question-heading" class="h4">Välj frågor</h2>
      <p>Alla frågor i de valda avsnitten är förvalda. Frågor du inte behöver kan du välja bort.</p>
      <div class="d-flex flex-wrap gap-2 mb-3">
        <button type="button" class="btn btn-outline-secondary btn-sm" @click="setAllQuestions(true)">Markera alla</button>
        <button type="button" class="btn btn-outline-secondary btn-sm" @click="setAllQuestions(false)">Avmarkera alla</button>
        <span class="ms-auto"><strong v-text="selectedQuestionIds.length"></strong> av <span v-text="orderedQuestions.length"></span> valda</span>
      </div>

      <div class="course">
        <div v-for="group in selectedSectionGroups" :key="group.section.ident" class="mb-4">
          <h3 class="h5" v-text="group.chapter.title + ' – ' + group.section.title"></h3>
          <label v-for="questionId in group.questionIds" :key="questionId"
                 class="homework-question d-flex align-items-start gap-2 border p-2 mb-2">
            <input class="form-check-input flex-shrink-0 mt-1" type="checkbox" v-model="questionSelection[questionId]">
            <span>
              <strong v-text="questionId + ': '"></strong><span v-html="catalog[questionId].question"></span>
            </span>
          </label>
        </div>
      </div>

      <div class="d-flex justify-content-between gap-2">
        <button type="button" class="btn btn-outline-secondary" @click="goToStep(3)">Tillbaka</button>
        <button type="button" class="btn btn-primary" :disabled="selectedQuestionIds.length === 0"
                @click="generateLink">Skapa övningslänk</button>
      </div>
    </section>

    <section v-else aria-labelledby="homework-link-heading">
      <h2 id="homework-link-heading" class="h4">Övningen är klar</h2>
      <p>Länken innehåller <strong v-text="selectedQuestionIds.length"></strong> frågor i kursens ordning.</p>
      <label for="homework-link" class="form-label">Övningslänk</label>
      <div class="input-group mb-3">
        <input id="homework-link" class="form-control" type="text" readonly :value="generatedUrl" @focus="$event.target.select()">
        <button type="button" class="btn btn-outline-secondary" @click="copyLink">Kopiera länk</button>
      </div>
      <div v-if="copyMessage" class="alert alert-success py-2" role="status" v-text="copyMessage"></div>
      <div class="d-flex flex-wrap justify-content-between gap-2">
        <button type="button" class="btn btn-outline-secondary" @click="goToStep(4)">Ändra frågor</button>
        <a class="btn btn-primary" :href="generatedUrl" target="_blank" rel="noopener">Öppna övningen</a>
      </div>
    </section>
  </template>
</div>