lecturer-create-omp-view.component.html

<app-lecturer-navbar></app-lecturer-navbar>
<div class="container">
  <div id="title-row" class="row">
    <div *ngIf="!isTemplate">
      <h4>Create a new one-minute paper</h4>
    </div>
    <div *ngIf="isTemplate">
      <h4>Create a new template</h4>
    </div>
  </div>

  <div id="details-row" class="row">

    <div class="col-md">
      <form #infoForm="ngForm">
        <div id="name-details">
          <label class="form-row" for="name">Enter a name for this one-minute paper:</label>
          <input class="form-row" type="text" id="name" required [(ngModel)]="name" name="nameBox" #nameBox="ngModel" placeholder="Enter a name...">
          <div [hidden]="(nameBox.valid || nameBox.pristine) && !isSubmitted" class="is-invalid">
            <p style="color: red">*Name required</p>
          </div>
        </div>
        <div id="topic-details">
          <label class="form-row" for="topic">Enter a topic for this one-minute paper:</label>
          <input class="form-row" id="topic" required [(ngModel)]="topic" name="topicBox" #topicBox="ngModel" placeholder="Enter a topic...">
          <div [hidden]="(topicBox.valid || topicBox.pristine) && !isSubmitted" class="is-invalid">
            <p style="color: red">*Topic required</p>
          </div>
        </div>
        <div id="anonymous-details">
          <form #anonymousForm="ngForm">
            <label for="anonymous-box">Would you like responses to be anonymised?:  </label>
            <input class="" id="anonymous-box" type="checkbox" [(ngModel)]="isAnonymous" name="templateCheckbox" (click)="flipIsAnonymous()">
          </form>
        </div>
      </form>
    </div>

    <div class="col-md">
      <form *ngIf="!isTemplate" #templateForm="ngForm">
        <div id="class-details">
          <label class="form-row" for="class-select">Choose a class:</label>
          <select class="form-row" id="class-select" [(ngModel)]="currentClass" name="classes">
            <option *ngFor="let ompclass of classes" [ngValue]="ompclass">{{ompclass.classCode}}</option>
          </select>
        </div>
        <div id="template-details">
          <label class="form-row" for="template-select">Load a template:</label>
          <select class="form-row" id="template-select" [(ngModel)]="currentTemplate" (change)="setTemplate()" name="templates">
            <option *ngFor="let template of templates" [ngValue]="template">{{template.paper.name}}</option>
          </select>
        </div>
      </form>
    </div>

    <div id="button-row" class="col-md">
      <div id="paper-button" class="row" *ngIf="!isTemplate">
        <button class="btn btn-primary" type="submit" (click)="createPaper()">Create One-minute Paper</button>
      </div>
      <div id="template-button" class="row" *ngIf="isTemplate">
        <button class="btn btn-primary" type="submit" (click)="createTemplate()">Create Template</button>
      </div>
      <div id="cancel-button" class="row">
        <button class="btn btn-danger" (click)="cancel()">Cancel</button>
      </div>
    </div>

  </div>

  <div id="add-row" class="row">
    <button class="btn btn-primary row" (click)="addQuestion()">Add Question</button>
  </div>

  <div id="q-error-row" class="row">
    <div *ngIf="isSubmitted" class="is-invalid">
      <p *ngIf="noQuestions" style="color: red">*A one-minute paper requires questions</p>
      <p *ngIf="invalidQuestions" style="color: red">*Text is required for all questions</p>
    </div>
  </div>
  <div id="question-row" class="pre-scrollable row">
    <form #questionForm="ngForm">
      <div *ngFor="let question of questions; let i = index;" [attr.data-index]="i">
        <div class="row">
          <div class="col-lg">
            <label for="{{i}}">Question {{i+1}}</label>
            <textarea id="{{i}}" type="text" rows="3" cols="80" [(ngModel)]="question.questionText" name="{{i+1}}" placeholder="Enter your text..."></textarea>
          </div>
          <div id="remove-button" class="col-lg">
           <button class="btn btn-danger" (click)="removeQuestion(i)">Remove Question</button>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>