ui-element-toolbox.component.html

<div class="fx-column-start-stretch fill wrapper">
  <mat-tab-group class="fx-flex" mat-stretch-tabs>
    <mat-tab *ngIf="unitService.expertMode">
      <ng-template mat-tab-label>
        <mat-icon [matTooltip]="'Elemente'">bookmark</mat-icon>
      </ng-template>
    <div class="fx-flex element-list">
      <mat-accordion multi>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Medium
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('text')"
                  draggable="true" (dragstart)="startDrag($event, 'text')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextElement.icon}}</mat-icon>
            {{TextElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('image')"
                  draggable="true" (dragstart)="startDrag($event, 'image')"
                  (dragend)="endDrag()">
            <mat-icon>{{ImageElement.icon}}</mat-icon>
            {{ImageElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('audio')"
                  draggable="true" (dragstart)="startDrag($event, 'audio')"
                  (dragend)="endDrag()">
            <mat-icon>{{AudioElement.icon}}</mat-icon>
            {{AudioElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('video')"
                  draggable="true" (dragstart)="startDrag($event, 'video')"
                  (dragend)="endDrag()">
            <mat-icon>{{VideoElement.icon}}</mat-icon>
            {{VideoElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Eingabe
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('text-field')"
                  draggable="true" (dragstart)="startDrag($event, 'text-field')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextFieldElement.icon}}</mat-icon>
            {{TextFieldElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('text-area')"
                  draggable="true" (dragstart)="startDrag($event, 'text-area')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextAreaElement.icon}}</mat-icon>
            {{TextAreaElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('spell-correct')"
                  draggable="true" (dragstart)="startDrag($event,'spell-correct')"
                  (dragend)="endDrag()">
            <mat-icon>{{SpellCorrectElement.icon}}</mat-icon>
            {{SpellCorrectElement.title}}
          </button>
          <div class="fx-row-start-stretch" (mouseover)="hoverFormulaButton = true" (mouseleave)="hoverFormulaButton = false">
            <button *ngIf="!hoverFormulaButton" mat-stroked-button>
              <mat-icon>calculate</mat-icon>
              {{'toolbox.formula' | translate }}
            </button>
            <button *ngIf="hoverFormulaButton" mat-raised-button (click)="addUIElement('math-field')"
                    draggable="true" (dragstart)="startDrag($event,'math-field')"
                    (dragend)="endDrag()">
              {{'toolbox.field' | translate }}
            </button>
            <button *ngIf="hoverFormulaButton" mat-raised-button (click)="addUIElement('text-area-math')"
                    draggable="true" (dragstart)="startDrag($event,'text-area-math')"
                    (dragend)="endDrag()">
              {{'toolbox.area' | translate }}
            </button>
          </div>
          <button mat-stroked-button (click)="addUIElement('math-table')"
                  draggable="true" (dragstart)="startDrag($event,'math-table');"
                  (dragend)="endDrag()">
            <mat-icon>{{MathTableElement.icon}}</mat-icon>
            {{MathTableElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Auswahl
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="fx-row-start-stretch" (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false">
            <button *ngIf="!hoverRadioButton" mat-stroked-button>
              <mat-icon>radio_button_checked</mat-icon>
              {{'toolbox.radio' | translate }}
            </button>
            <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio')"
                    draggable="true" (dragstart)="startDrag($event,'radio')">
              {{'toolbox.simple' | translate }}
            </button>
            <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')"
                    draggable="true" (dragstart)="startDrag($event,'radio-group-images')">
              {{'toolbox.complex' | translate }}
            </button>
          </div>
          <button mat-stroked-button (click)="addUIElement('likert')"
                  draggable="true" (dragstart)="startDrag($event,'likert')"
                  (dragend)="endDrag()">
            <mat-icon>{{LikertElement.icon}}</mat-icon>
            {{LikertElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('dropdown')"
                  draggable="true" (dragstart)="startDrag($event,'dropdown')"
                  (dragend)="endDrag()">
            <mat-icon>{{DropdownElement.icon}}</mat-icon>
            {{DropdownElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('checkbox')"
                  draggable="true" (dragstart)="startDrag($event,'checkbox')"
                  (dragend)="endDrag()">
            <mat-icon>{{CheckboxElement.icon}}</mat-icon>
            {{CheckboxElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('slider')"
                  draggable="true" (dragstart)="startDrag($event,'slider')"
                  (dragend)="endDrag()">
            <mat-icon>{{SliderElement.icon}}</mat-icon>
            {{SliderElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('hotspot-image')"
                  draggable="true" (dragstart)="startDrag($event,'hotspot-image')"
                  (dragend)="endDrag()">
            <mat-icon>{{HotspotImageElement.icon}}</mat-icon>
            {{HotspotImageElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              (Zu)Ordnung
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('drop-list')"
                  draggable="true" (dragstart)="startDrag($event,'drop-list')"
                  (dragend)="endDrag()">
            <mat-icon>{{DropListElement.icon}}</mat-icon>
            {{DropListElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Verbund
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('cloze')"
                  draggable="true" (dragstart)="startDrag($event,'cloze')"
                  (dragend)="endDrag()">
            <mat-icon>{{ClozeElement.icon}}</mat-icon>
            {{ClozeElement.title}}
          </button>

          <button mat-stroked-button (click)="addUIElement('table')"
                  draggable="true" (dragstart)="startDrag($event,'table')"
                  (dragend)="endDrag()">
            <mat-icon>{{TableElement.icon}}</mat-icon>
            {{TableElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Sonstige
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('button')"
                  draggable="true" (dragstart)="startDrag($event,'button')"
                  (dragend)="endDrag()">
            <mat-icon>{{ButtonElement.icon}}</mat-icon>
            {{ButtonElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('frame')"
                  draggable="true" (dragstart)="startDrag($event,'frame')"
                  (dragend)="endDrag()">
            <mat-icon>{{FrameElement.icon}}</mat-icon>
            {{FrameElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('geometry')"
                  draggable="true" (dragstart)="startDrag($event,'geometry');"
                  (dragend)="endDrag()">
            <mat-icon>{{GeometryElement.icon}}</mat-icon>
            {{GeometryElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('marking-panel')"
                  draggable="true" (dragstart)="startDrag($event,'marking-panel')"
                  (dragend)="endDrag()">
            <mat-icon>{{MarkingPanelElement.icon}}</mat-icon>
            {{MarkingPanelElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('trigger')"
                  draggable="true" (dragstart)="startDrag($event,'trigger')"
                  (dragend)="endDrag()">
            <mat-icon>{{TriggerElement.icon}}</mat-icon>
            {{TriggerElement.title}}
          </button>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon [matTooltip]="'Assistenten'">bookmarks</mat-icon>
      </ng-template>

      <mat-accordion multi>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Assistenten
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="applyTemplate('text')">
            Stimulus: Text
          </button>
          <button mat-stroked-button (click)="applyTemplate('audio')">
            Stimulus: Audio
          </button>
          <button mat-stroked-button (click)="applyTemplate('radio')">
            MC mit Text
          </button>
          <button mat-stroked-button (click)="applyTemplate('radio_images')">
            MC mit Bild
          </button>
          <button mat-stroked-button (click)="applyTemplate('likert')">
            CMC
          </button>
          <button mat-stroked-button (click)="applyTemplate('input')">
            Antwortfeld(er)
          </button>
          <button mat-stroked-button (click)="applyTemplate('droplist')">
            Drag & Drop einseitig
          </button>
          <button mat-stroked-button (click)="applyTemplate('text2')">
            Markieren
          </button>
          <button mat-stroked-button (click)="applyTemplate('mathtable')">
            Rechenkästchen
          </button>
          <button mat-stroked-button (click)="applyTemplate('geometry')">
            GeoGebra
          </button>
        </mat-expansion-panel>

        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Medium
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('text')"
                  draggable="true" (dragstart)="startDrag($event, 'text')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextElement.icon}}</mat-icon>
            {{TextElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('image')"
                  draggable="true" (dragstart)="startDrag($event, 'image')"
                  (dragend)="endDrag()">
            <mat-icon>{{ImageElement.icon}}</mat-icon>
            {{ImageElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('audio')"
                  draggable="true" (dragstart)="startDrag($event, 'audio')"
                  (dragend)="endDrag()">
            <mat-icon>{{AudioElement.icon}}</mat-icon>
            {{AudioElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('video')"
                  draggable="true" (dragstart)="startDrag($event, 'video')"
                  (dragend)="endDrag()">
            <mat-icon>{{VideoElement.icon}}</mat-icon>
            {{VideoElement.title}}
          </button>
        </mat-expansion-panel>

        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Verbund
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('cloze')"
                  draggable="true" (dragstart)="startDrag($event,'cloze')"
                  (dragend)="endDrag()">
            <mat-icon>{{ClozeElement.icon}}</mat-icon>
            {{ClozeElement.title}}
          </button>

          <button mat-stroked-button (click)="addUIElement('table')"
                  draggable="true" (dragstart)="startDrag($event,'table')"
                  (dragend)="endDrag()">
            <mat-icon>{{TableElement.icon}}</mat-icon>
            {{TableElement.title}}
          </button>
        </mat-expansion-panel>

      </mat-accordion>
    </mat-tab>
  </mat-tab-group>
  <aspect-show-state-variables-button *ngIf="unitService.expertMode" class="button-group"
                                      [stateVariablesCount]="unitService.unit.stateVariables.length">
  </aspect-show-state-variables-button>
</div>