Select Git revision
test-block.js
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
test-block.js 10.78 KiB
const CoursewareTestBlock = {
template:
`<div class="cw-block cw-block-test">
<component
:is="coursewarePluginComponents.CoursewareDefaultBlock"
:block="block"
:canEdit="canEdit"
:isTeacher="isTeacher"
:defaultGrade="false"
@storeEdit="storeBlock"
@closeEdit="initCurrentData"
>
<template #content>
<div class="cw-block-title cw-exercise-header" v-if="assignment">
<template v-if="exercises.length > 1">
<button @click="prevExercise" :title="$gettext('Zurück')">
<studip-icon shape="arr_1left" size="20"/>
</button>
<span v-translate="{num: exercise_pos + 1}">
%{assignment.title}, Aufgabe %{num} von %{exercises.length}
</span>
<button @click="nextExercise" :title="$gettext('Weiter')">
<studip-icon shape="arr_1right" size="20"/>
</button>
</template>
<span v-else>
{{assignment.title}}
</span>
</div>
<template v-for="(exercise, index) in exercises">
<div v-show="index === exercise_pos" :key="exercise.id">
<form class="default" autocomplete="off" :exercise="exercise.id">
<fieldset class="cw-exercise-fieldset" v-html="exercise.template" ref="content">
</fieldset>
<footer v-show="exercise.item_count && (assignment.reset_allowed || !exercise.show_solution)">
<button
v-show="!exercise.show_solution"
class="button accept"
@click.prevent="submitSolution"
>
<translate>Speichern</translate>
</button>
<button
v-show="exercise.show_solution && assignment.reset_allowed"
class="button reset"
@click.prevent="resetDialogHandler"
>
<translate>Lösung dieser Aufgabe löschen</translate>
</button>
<a
v-if="canEdit && $store.getters.viewMode === 'edit'"
class="button"
:href="vips_url('sheets/edit_assignment', { assignment_id: assignment.id })"
>
<translate>Aufgabenblatt bearbeiten</translate>
</a>
</footer>
</form>
</div>
</template>
<component
:is="coursewarePluginComponents.CoursewareCompanionBox"
:msgCompanion="errorMessage" mood="sad"
v-if="errorMessage !== null"
/>
</template>
<template v-if="canEdit" #edit>
<form class="default" @submit.prevent="">
<label>
<translate>Aufgabenblatt</translate>
<studip-select
:options="assignments"
label="title"
:reduce="assignment => assignment.id"
:clearable="false"
v-model="assignment_id"
class="cw-vs-select"
>
<template #open-indicator="selectAttributes">
<studip-icon shape="arr_1down" size="10"/>
</template>
<template #no-options="{}">
<translate>Es steht keine Auswahl zur Verfügung</translate>
</template>
<template #selected-option="{title, icon, start, end}">
<studip-icon :shape="icon" role="info"/>
{{title}} ({{start}} - {{end}})
</template>
<template #option="{title, icon, start, end, block}">
<studip-icon :shape="icon" role="info"/>
{{ block ? block + ' / ' + title : title }}<br>
<small>{{start}} - {{end}}</small>
</template>
</studip-select>
</label>
</form>
</template>
</component>
<studip-dialog
v-if="exerciseResetId"
:title="$gettext('Bitte bestätigen Sie die Aktion')"
:question="$gettext('Wollen Sie die Lösung dieser Aufgabe wirklich löschen?')"
height="180"
@confirm="resetSolution"
@close="exerciseResetId = null"
></studip-dialog>
</div>`,
name: 'courseware-test-block',
props: {
block: Object,
canEdit: Boolean,
isTeacher: Boolean
},
data() {
return {
assignments: [],
assignment_id: '',
assignment: null,
errorMessage: null,
exercises: [],
exercise_pos: 0,
exerciseResetId: null
}
},
methods: {
storeBlock() {
const attributes = { payload: { assignment: this.assignment_id } };
const container = this.$store.getters['courseware-containers/related']({
parent: this.block,
relationship: 'container',
});
return this.$store.dispatch('updateBlockInContainer', {
attributes,
blockId: this.block.id,
containerId: container.id,
});
},
initCurrentData() {
this.assignment_id = this.block.attributes.payload.assignment;
this.loadSelectedAssignment();
},
prevExercise() {
if (this.exercise_pos === 0) {
this.exercise_pos = this.exercises.length - 1;
} else {
this.exercise_pos = this.exercise_pos - 1;
}
},
nextExercise() {
if (this.exercise_pos === this.exercises.length - 1) {
this.exercise_pos = 0;
} else {
this.exercise_pos = this.exercise_pos + 1;
}
},
loadAssignments() {
// axios is this.$store.getters.httpClient
$.get(vips_url('api/assignments/' + this.$store.getters.context.id))
.done(response => {
this.assignments = response;
});
},
loadSelectedAssignment() {
if (this.assignment_id === '') {
this.errorMessage = this.$gettext('Es wurde noch kein Aufgabenblatt ausgewählt.');
return;
}
this.assignment = null;
this.errorMessage = null;
this.exercises = [];
$.get(vips_url('api/assignment/' + this.assignment_id))
.done(response => {
this.assignment = response;
this.exercises = response.exercises;
this.$nextTick(() => {
this.loadMathjax();
vips_post_render(this.$refs.content);
});
})
.fail(xhr => {
this.errorMessage = xhr.responseJSON ? xhr.responseJSON.message : xhr.statusText;
});
},
reloadExercise(exercise_id) {
$.get(vips_url('api/exercise/' + this.assignment.id + '/' + exercise_id))
.done(response => {
this.$set(this.exercises, this.exercise_pos, response);
this.$nextTick(() => {
this.loadMathjax();
vips_post_render(this.$refs.content);
});
});
},
loadMathjax() {
STUDIP.loadChunk('mathjax').then(({ Hub }) => {
Hub.Queue(['Typeset', Hub, this.$refs.content]);
});
},
submitSolution(event) {
let exercise_id = event.currentTarget.form.getAttribute('exercise');
let data = new FormData(event.currentTarget.form);
data.set('block_id', this.block.id);
$.ajax({
type: 'POST',
url: vips_url('api/solution/' + this.assignment.id + '/' + exercise_id),
data: data,
enctype: 'multipart/form-data',
processData: false,
contentType: false
})
.fail(xhr => {
let info = xhr.responseJSON ? xhr.responseJSON.message : xhr.statusText;
if (xhr.status === 422) {
info = this.$gettext('Ihre Lösung ist leer und wurde nicht gespeichert.');
}
this.$store.dispatch('companionError', { info: info });
})
.done(() => {
this.$store.dispatch('companionSuccess', {
info: this.$gettext('Ihre Lösung zur Aufgabe wurde gespeichert.'),
});
this.reloadExercise(exercise_id);
});
},
resetDialogHandler(event) {
this.exerciseResetId = event.currentTarget.form.getAttribute('exercise');
},
resetSolution() {
$.ajax({
type: 'DELETE',
url: vips_url('api/solution/' + this.assignment.id + '/' + this.exerciseResetId, { block_id: this.block.id })
})
.fail(xhr => {
let info = xhr.responseJSON ? xhr.responseJSON.message : xhr.statusText;
this.$store.dispatch('companionError', { info: info });
this.exerciseResetId = null;
})
.done(() => {
this.reloadExercise(this.exerciseResetId);
this.exerciseResetId = null;
});
}
},
mounted() {
this.initCurrentData();
if (this.canEdit) {
this.loadAssignments();
}
},
inject: ['coursewarePluginComponents']
};
STUDIP.eventBus.on('courseware:init-plugin-manager', (pluginManager) => {
pluginManager.addBlock('courseware-test-block', CoursewareTestBlock);
});