modeling-exercise-update.component.html

<form name="editForm markdown-preview" role="form" novalidate #editForm="ngForm">
    <div class="d-flex align-items-center gap-2">
        @if (!modelingExercise.id) {
            <h2 id="jhi-modeling-exercise-heading-create" jhiTranslate="artemisApp.modelingExercise.home.createLabel">Create a new Modeling Exercise</h2>
        } @else if (!isImport && modelingExercise.id) {
            <h2 id="jhi-modeling-exercise-heading-edit" jhiTranslate="artemisApp.modelingExercise.home.editLabel">Edit a Modeling Exercise</h2>
        } @else if (isImport) {
            <h2 id="jhi-modeling-exercise-heading-import" jhiTranslate="artemisApp.modelingExercise.home.importLabel">Import Modeling Exercise</h2>
        }
        <jhi-documentation-button [type]="documentationType" />
    </div>
    <jhi-form-status-bar [formStatusSections]="formSectionStatus" />
    <div>
        <h3 jhiTranslate="artemisApp.exercise.sections.general" id="artemisApp.exercise.sections.general">General Information</h3>
        <jhi-exercise-title-channel-name [exercise]="modelingExercise" [course]="modelingExercise.course" [isExamMode]="isExamMode" [isImport]="isImport" />
        @if (!isExamMode) {
            <div class="form-group position-relative">
                <label class="form-control-label" jhiTranslate="artemisApp.exercise.categories">Categories</label>
                <jhi-help-icon text="artemisApp.exercise.categoriesTooltip" />
                <jhi-category-selector [categories]="exerciseCategories" [existingCategories]="existingCategories" (selectedCategories)="updateCategories($event)" />
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.mode" id="artemisApp.exercise.sections.mode">Mode</h3>
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.exercise.difficulty">Difficulty</label>
            <div>
                <jhi-difficulty-picker [exercise]="modelingExercise" id="modeling-difficulty-picker" />
            </div>
        </div>
        <jhi-team-config-form-group class="form-element" [exercise]="modelingExercise" [isImport]="isImport" />
        <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.sections.problem">Problem Statement</h3>
        <div class="form-group" name="problemStatement" id="field_problemStatement">
            <label class="form-control-label" jhiTranslate="artemisApp.exercise.problemStatement" for="field_problemStatement">Problem Statement</label>
            <jhi-markdown-editor
                class="markdown-editor background-editor-color"
                [domainCommands]="domainCommandsProblemStatement"
                [(markdown)]="modelingExercise.problemStatement"
                (markdownChange)="calculateFormSectionStatus()"
                [editorMode]="EditorMode.LATEX"
            />
        </div>
        @if (!isExamMode) {
            <div class="form-group">
                <jhi-competency-selection
                    id="competencies"
                    [labelName]="'artemisApp.competency.link.title' | artemisTranslate"
                    [labelTooltip]="'artemisApp.competency.link.exercise' | artemisTranslate"
                    [(ngModel)]="modelingExercise.competencies"
                    name="competencies"
                />
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise.sections.solution">Example Solution</h3>
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.modelingExercise.exampleSolution">Example Solution</label>
            <jhi-modeling-editor
                [diagramType]="modelingExercise.diagramType"
                [umlModel]="exampleSolution"
                (onModelChanged)="calculateFormSectionStatus()"
                [withExplanation]="false"
            />
        </div>
        @if (!isImport) {
            <div class="form-group" name="exampleSolutionExplanation" id="field_exampleSolutionExplanation">
                <label class="form-control-label" jhiTranslate="artemisApp.modelingExercise.exampleSolutionExplanation" for="field_exampleSolutionExplanation">
                    Example Solution Explanation
                </label>
                <jhi-markdown-editor
                    class="markdown-editor background-editor-color"
                    [domainCommands]="domainCommandsSampleSolution"
                    [(markdown)]="modelingExercise.exampleSolutionExplanation"
                    (markdownChange)="calculateFormSectionStatus()"
                    [editorMode]="EditorMode.LATEX"
                />
            </div>
        }
        @if (!isExamMode) {
            <div class="form-group">
                <jhi-date-time-picker
                    #solutionPublicationDate
                    class="form-element"
                    name="exampleSolutionPublicationDate"
                    labelName="{{ 'artemisApp.exercise.exampleSolutionPublicationDate' | artemisTranslate }}"
                    [(ngModel)]="modelingExercise.exampleSolutionPublicationDate"
                    [error]="modelingExercise.exampleSolutionPublicationDateError!"
                    (valueChange)="validateDate()"
                />
                @if (modelingExercise.exampleSolutionPublicationDateError) {
                    <span class="invalid-feedback">
                        {{ 'artemisApp.exercise.exampleSolutionPublicationDateError' | artemisTranslate }}
                    </span>
                }
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.sections.grading">Grading</h3>
        @if (!isExamMode) {
            <div class="d-flex">
                <div class="form-group flex-grow-1">
                    <jhi-date-time-picker
                        #releaseDate
                        class="form-element"
                        id="pick-releaseDate"
                        labelName="{{ 'artemisApp.exercise.releaseDate' | artemisTranslate }}"
                        [(ngModel)]="modelingExercise.releaseDate"
                        (valueChange)="validateDate()"
                        [error]="false"
                        name="releaseDate"
                    />
                </div>
                <div class="form-group flex-grow-1 ms-3">
                    <jhi-date-time-picker
                        #startDate
                        class="form-element"
                        id="pick-startDate"
                        name="startDate"
                        [error]="!!modelingExercise.startDateError"
                        labelName="{{ 'artemisApp.exercise.startDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="modelingExercise.startDate"
                    />
                    @if (modelingExercise.startDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.startDateError' | artemisTranslate }}</span>
                    }
                </div>
            </div>
        }
        @if (!isExamMode) {
            <div class="d-flex">
                <div class="form-group flex-grow-1">
                    <jhi-date-time-picker
                        #dueDate
                        class="form-element"
                        id="pick-dueDate"
                        name="dueDate"
                        [error]="!!modelingExercise.dueDateError"
                        labelName="{{ 'artemisApp.exercise.dueDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="modelingExercise.dueDate"
                    />
                    @if (modelingExercise.dueDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.dueDateError' | artemisTranslate }}</span>
                    }
                </div>
                <div class="form-group flex-grow-1 ms-3">
                    <jhi-date-time-picker
                        #assessmentDueDate
                        class="form-element"
                        id="pick-assessmentDueDate"
                        name="assessmentDueDate"
                        [error]="!!modelingExercise.assessmentDueDateError"
                        labelName="{{ 'artemisApp.exercise.assessmentDueDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="modelingExercise.assessmentDueDate"
                    />
                    @if (modelingExercise.assessmentDueDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.assessmentDueDateError' | artemisTranslate }}</span>
                    }
                </div>
            </div>
        }
        <div class="form-group">
            <label class="form-control-label">{{
                'artemisApp.exercise.includedInOverallScore' + (modelingExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate
            }}</label>
            <div>
                <jhi-included-in-overall-score-picker
                    [(includedInOverallScore)]="modelingExercise.includedInOverallScore"
                    (includedInOverallScoreChange)="validateDate()"
                    [allowNotIncluded]="!isExamMode"
                    id="modeling-includeInScore-picker"
                />
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="artemisApp.exercise.points" for="field_points">Points</label>
                    <input
                        type="number"
                        required
                        class="form-control"
                        [customMin]="1"
                        [customMax]="9999"
                        name="points"
                        id="field_points"
                        [(ngModel)]="modelingExercise.maxPoints"
                        #points="ngModel"
                    />
                    @if (points?.invalid && (points?.dirty || points?.touched) && points?.errors) {
                        <div class="alert alert-danger">
                            {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
                        </div>
                    }
                </div>
            </div>
            <div class="col">
                <div class="form-group" [hidden]="modelingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
                    <label class="form-control-label" jhiTranslate="artemisApp.exercise.bonusPoints" for="field_bonusPoints">Bonus Points</label>
                    <input
                        type="number"
                        [required]="modelingExercise.includedInOverallScore === IncludedInOverallScore.INCLUDED_COMPLETELY"
                        class="form-control"
                        [customMin]="0"
                        [customMax]="9999"
                        name="bonusPoints"
                        id="field_bonusPoints"
                        [(ngModel)]="modelingExercise.bonusPoints"
                        #bonusPoints="ngModel"
                    />
                    @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
                        <div class="alert alert-danger" [hidden]="modelingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
                            {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
                        </div>
                    }
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.modelingExercise.diagramType" for="field_diagramType">Diagram Type</label>
            <select
                [disabled]="isImport || !!modelingExercise.id"
                class="form-select"
                name="diagramType"
                [(ngModel)]="modelingExercise.diagramType"
                (ngModelChange)="diagramTypeChanged()"
                id="field_diagramType"
            >
                <option value="ClassDiagram">{{ 'artemisApp.DiagramType.ClassDiagram' | artemisTranslate }}</option>
                <option value="ActivityDiagram">{{ 'artemisApp.DiagramType.ActivityDiagram' | artemisTranslate }}</option>
                <option value="ObjectDiagram">{{ 'artemisApp.DiagramType.ObjectDiagram' | artemisTranslate }}</option>
                <option value="UseCaseDiagram">{{ 'artemisApp.DiagramType.UseCaseDiagram' | artemisTranslate }}</option>
                <option value="CommunicationDiagram">{{ 'artemisApp.DiagramType.CommunicationDiagram' | artemisTranslate }}</option>
                <option value="ComponentDiagram">{{ 'artemisApp.DiagramType.ComponentDiagram' | artemisTranslate }}</option>
                <option value="DeploymentDiagram">{{ 'artemisApp.DiagramType.DeploymentDiagram' | artemisTranslate }}</option>
                <option value="PetriNet">{{ 'artemisApp.DiagramType.PetriNet' | artemisTranslate }}</option>
                <option value="SyntaxTree">{{ 'artemisApp.DiagramType.SyntaxTree' | artemisTranslate }}</option>
                <option value="Flowchart">{{ 'artemisApp.DiagramType.Flowchart' | artemisTranslate }}</option>
                <option value="BPMN">{{ 'artemisApp.DiagramType.BPMN' | artemisTranslate }}</option>
            </select>
        </div>
        @if (semiAutomaticAssessmentAvailable) {
            <div class="form-group">
                <div class="form-check custom-control custom-checkbox">
                    <input
                        type="checkbox"
                        id="automatic_assessment_enabled"
                        [ngModel]="modelingExercise.assessmentType === AssessmentType.SEMI_AUTOMATIC"
                        (ngModelChange)="modelingExercise.assessmentType = $event ? AssessmentType.SEMI_AUTOMATIC : AssessmentType.MANUAL"
                        class="form-check-input custom-control-input"
                        name="automaticAssessmentEnabled"
                        [disabled]="isImport"
                    />
                    <label
                        class="form-check-label custom-control-label"
                        for="automatic_assessment_enabled"
                        jhiTranslate="artemisApp.modelingExercise.automaticAssessmentEnabled"
                    ></label>
                </div>
            </div>
        }
        @if (!isExamMode) {
            <jhi-exercise-update-plagiarism [exercise]="modelingExercise" />
        }
        <jhi-presentation-score-checkbox [exercise]="modelingExercise" />
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.exercise.assessmentInstructions" for="gradingInstructions">Assessment Instructions</label>
            <jhi-grading-instructions-details id="gradingInstructions" [exercise]="modelingExercise" />
        </div>
    </div>
    <jhi-form-footer
        [isImport]="isImport"
        [isCreation]="!modelingExercise.id"
        [isSaving]="isSaving"
        [isDisabled]="!!(editForm.form.invalid || modelingExercise.dueDateError || modelingExercise.assessmentDueDateError || modelingExercise.exampleSolutionPublicationDateError)"
        (cancel)="previousState()"
        (save)="save()"
        [(notificationText)]="notificationText"
    />
</form>