Newer
Older
<template>
<div class="cw-course-manager">
<courseware-tabs class="cw-course-manager-tabs">
<courseware-tab :name="$gettext('Diese Courseware')" :selected="true">
<courseware-manager-element
type="current"
:currentElement="currentElement"
@selectElement="setCurrentId"
/>
</courseware-tab>
<courseware-tab :name="$gettext('Export')">
<button
class="button"
@click.prevent="doExportCourseware"
:class="{
disabled: exportRunning,
}"
>
<translate>Alles exportieren</translate>
</button>
<courseware-companion-box v-show="exportRunning" :msgCompanion="$gettext('Export läuft, bitte haben sie einen Moment Geduld...')" mood="pointing"/>
<div v-if="exportRunning" class="cw-import-zip">
<header>{{exportState}}:</header>
<div class="progress-bar-wrapper">
<div class="progress-bar" role="progressbar" :style="{width: exportProgress + '%'}" :aria-valuenow="exportProgress" aria-valuemin="0" aria-valuemax="100">{{ exportProgress }}%</div>
</div>
</div>
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
</courseware-tab>
</courseware-tabs>
<courseware-tabs class="cw-course-manager-tabs">
<courseware-tab :name="$gettext('FAQ')">
<courseware-collapsible-box :open="true" :title="$gettext('Wie finde ich die gewünschte Stelle?')">
<p><translate>
Wählen Sie auf der linken Seite "Diese Courseware" aus.
Beim laden der Seite ist dies immer gewählt. Die Überschrift
gibt an welche Seite Sie grade ausgewählt haben. Darunter befinden
sich die Abschnitte der Seite und innerhalb dieser dessen Blöcke.
Möchten Sie eine Seite die unterhalb der gewählten liegt bearbeiten,
können Sie diese über die Schaltflächen im Bereich "Seiten" wählen.
Über der Überschrift wird eine Navigation eingeblendet, mit dieser können
Sie beliebig weit hoch in der Hierarchie springen.
</translate></p>
</courseware-collapsible-box>
<courseware-collapsible-box :title="$gettext('Wie sortiere ich Objekte?')">
<p><translate>
Seiten, Abschnitte und Blöcke lassen sich in ihrer Reihenfolge sortieren.
Hierzu wählen Sie auf der linken Seite unter "Diese Courseware" die Schaltfläche "Seiten sortieren",
"Abschnitte sortieren" oder "Blöcke sortieren".
An den Objekten werden Pfeile angezeigt, mit diesen können die Objekte an die gewünschte
Position gebracht werden. Um die neue Sortierung zu speichern wählen Sie "Sortieren beenden".
Sie können die Änderungen auch rückgängig machen indem Sie "Sortieren abbrechen" wählen.
</translate></p>
</courseware-collapsible-box>
<courseware-collapsible-box :title="$gettext('Wie verschiebe ich Objekte?')">
<p><translate>
Seiten, Abschnitte und Blöcke lassen sich verschieben.
Hierzu wählen Sie auf der linken Seite unter "Diese Courseware" die Schaltfläche
"Seite an diese Stelle einfügen", "Abschnitt an diese Stelle einfügen" oder
"Block an diese Stelle einfügen". Wählen Sie dann auf der rechten Seite unter
"Verschieben" das Objekt aus das Sie verschieben möchten. Verschiebbare Objekte
erkennen Sie an den zwei nach links zeigenden gelben Pfeilen.
</translate></p>
</courseware-collapsible-box>
<courseware-collapsible-box :title="$gettext('Wie kopiere ich Objekte?')">
<p><translate>
Seiten, Abschnitte und Blöcke lassen sich aus einer anderen Veranstaltung und Ihren
eigenen Inhalten kopieren.
Hierzu wählen Sie auf der linken Seite unter "Diese Courseware" die Schaltfläche
"Seite an diese Stelle einfügen", "Abschnitt an diese Stelle einfügen" oder
"Block an diese Stelle einfügen". Wählen Sie dann auf der rechten Seite unter
"Kopieren" erst die Veranstaltung aus der Sie kopieren möchten oder Ihre eigenen
Inhalte. Wählen sie dann das Objekt aus das Sie kopieren möchten. Kopierbare Objekte
erkennen Sie an den zwei nach links zeigenden gelben Pfeilen.
</translate></p>
</courseware-collapsible-box>
</courseware-tab>
<courseware-tab name="Verschieben" :selected="true">
<courseware-manager-element
type="self"
:currentElement="selfElement"
:moveSelfPossible="moveSelfPossible"
:moveSelfChildPossible="moveSelfChildPossible"
@selectElement="setSelfId"
@reloadElement="reloadElements"
/>
</courseware-tab>
<courseware-tab :name="$gettext('Kopieren')">
<courseware-manager-copy-selector @loadSelf="reloadElements"/>
</courseware-tab>
<courseware-tab :name="$gettext('Importieren')">
<courseware-companion-box v-show="!importRunning && importDone" :msgCompanion="$gettext('Import erfolgreich!')" mood="special"/>
<courseware-companion-box v-show="importRunning" :msgCompanion="$gettext('Import läuft. Bitte verlassen Sie die Seite nicht bis der Import abgeschlossen wurde.')" mood="pointing"/>
class="button"
@click.prevent="chooseFile"
>
<div v-if="importZip" class="cw-import-zip">
<header>{{ importZip.name }}</header>
<p><translate>Größe</translate>: {{ getFileSizeText(importZip.size) }}</p>
<div v-if="importRunning" class="cw-import-zip">
<header><translate>Importiere Dateien</translate>:</header>
<div class="progress-bar-wrapper">
<div class="progress-bar" role="progressbar" :style="{width: importFilesProgress + '%'}" :aria-valuenow="importFilesProgress" aria-valuemin="0" aria-valuemax="100">{{ importFilesProgress }}%</div>
</div>
{{ importFilesState }}
</div>
<div v-if="fileImportDone && importRunning" class="cw-import-zip">
<header><translate>Importiere Elemente</translate>:</header>
<div class="progress-bar-wrapper">
<div class="progress-bar" role="progressbar" :style="{width: importStructuresProgress + '%'}" :aria-valuenow="importStructuresProgress" aria-valuemin="0" aria-valuemax="100">{{ importStructuresProgress }}%</div>
</div>
{{ importStructuresState }}
class="button"
@click.prevent="doImportCourseware"
>
<translate>Alles importieren</translate>
</button>
<input ref="importFile" type="file" accept=".zip" @change="setImport" style="visibility: hidden" />
</courseware-tab>
</courseware-tabs>
</div>
</template>
<script>
import CoursewareTabs from './CoursewareTabs.vue';
import CoursewareTab from './CoursewareTab.vue';
import CoursewareCollapsibleBox from './CoursewareCollapsibleBox.vue';
import CoursewareManagerElement from './CoursewareManagerElement.vue';
import CoursewareManagerCopySelector from './CoursewareManagerCopySelector.vue';
import CoursewareCompanionBox from './CoursewareCompanionBox.vue';
import CoursewareImport from '@/vue/mixins/courseware/import.js';
import CoursewareExport from '@/vue/mixins/courseware/export.js';
import { mapActions, mapGetters } from 'vuex';
import JSZip from 'jszip';
import FileSaver from 'file-saver';
export default {
name: 'courseware-course-manager',
components: {
CoursewareTabs,
CoursewareTab,
CoursewareCollapsibleBox,
CoursewareManagerElement,
CoursewareManagerCopySelector,
},
mixins: [CoursewareImport, CoursewareExport],
data() {
return {
exportRunning: false,
importRunning: false,
importZip: null,
currentElement: {},
currentId: null,
selfElement: {},
selfId: null,
zip: null
};
},
computed: {
...mapGetters({
courseware: 'courseware',
structuralElementById: 'courseware-structural-elements/byId',
importFilesState: 'importFilesState',
importFilesProgress: 'importFilesProgress',
importStructuresState: 'importStructuresState',
importStructuresProgress: 'importStructuresProgress',
exportState: 'exportState',
exportProgress: 'exportProgress'
}),
moveSelfPossible() {
if (this.selfElement.relationships === undefined) {
return false
} else if (this.selfElement.relationships.parent.data === null) {
return false;
} else if (this.currentElement.id === this.selfElement.relationships.parent.data.id) {
return false;
} else if (this.currentId === this.selfId) {
return false;
} else {
return true;
}
},
moveSelfChildPossible() {
return this.currentId !== this.selfId;
},
fileImportDone() {
return this.importFilesProgress === 100;
},
importDone() {
return this.importFilesProgress === 100 && this.importStructuresProgress === 100;
}
},
methods: {
...mapActions({
loadCoursewareStructure: 'loadCoursewareStructure',
createStructuralElement: 'createStructuralElement',
updateStructuralElement: 'updateStructuralElement',
deleteStructuralElement: 'deleteStructuralElement',
loadStructuralElement: 'loadStructuralElement',
lockObject: 'lockObject',
unlockObject: 'unlockObject',
addBookmark: 'addBookmark',
companionInfo: 'companionInfo',
setImportFilesProgress: 'setImportFilesProgress',
setImportStructuresProgress: 'setImportStructuresProgress',
}),
async reloadElements() {
await this.setCurrentId(this.currentId);
await this.setSelfId(this.selfId);
},
async setCurrentId(target) {
this.currentId = target;
await this.loadStructuralElement(this.currentId);
this.initCurrent();
},
initCurrent() {
this.currentElement = _.cloneDeep(this.structuralElementById({ id: this.currentId }));
},
async setSelfId(target) {
this.selfId = target;
await this.loadStructuralElement(this.selfId);
this.initSelf();
},
initSelf() {
this.selfElement = _.cloneDeep(this.structuralElementById({ id: this.selfId }));
},
async doExportCourseware() {
if (this.exportRunning) {
return false;
}
this.exportRunning = true;
await this.loadCoursewareStructure();
await this.sendExportZip(
this.courseware.relationships.root.data.id,
{withChildren: true}
);
this.exportRunning = false;
},
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
this.importZip = event.target.files[0];
},
async doImportCourseware() {
if (this.importZip === null) {
return false;
}
this.importRunning = true;
let view = this;
view.zip = new JSZip();
await view.zip.loadAsync(this.importZip).then(async function () {
let data = await view.zip.file('courseware.json').async('string');
let courseware = JSON.parse(data);
let data_files = await view.zip.file('files.json').async('string');
let files = JSON.parse(data_files);
await view.loadCoursewareStructure();
let parent_id = view.courseware.relationships.root.data.id;
await view.importCourseware(courseware, parent_id, files);
});
this.importZip = null;
this.importRunning = false;
},
chooseFile() {
this.$refs.importFile.click();
this.setImportFilesProgress(0);
this.setImportStructuresProgress(0);
},
getFileSizeText(size) {
if (size / 1024 < 1000) {
return (size / 1024).toFixed(2) + ' kB';
} else {
return (size / 1048576).toFixed(2) + ' MB';
}
}
},
watch: {
courseware(newValue, oldValue) {
let currentId = newValue.relationships.root.data.id;
this.setCurrentId(currentId);
this.setSelfId(currentId);
},
},
};
</script>