diff --git a/src/components/Courses.vue b/src/components/Courses.vue index 02f37d7e6820a6ef6298dce5b0ea74de0dc4eaec..f3a61e3ed7eb96b2b85fe2c6c6ed32ae9278b1bd 100644 --- a/src/components/Courses.vue +++ b/src/components/Courses.vue @@ -1,10 +1,10 @@ <template> <div class="content col-md-12"> - <div class="search_box col-md-4"> + <div id="search_box" class="search_box col-md-4"> <div class="entry_box-inner"> <a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a> <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a> - <a id="editbutton" class="button" href="./editcourse">Eintrag bearbeiten</a> + <a id="editbutton" class="button" href="./editcourse">ausgewählten Eintrag bearbeiten</a> <a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</a> </div> <div class="search_box-inner"> @@ -566,8 +566,8 @@ export default { display:inline; font-size:1em; border-radius: 8em; - border:0.1em solid rgba(218,208,190,1); - box-shadow:0 0 0.3em rgba(60,60,60,0.4); + border:0.1em solid rgba(218, 208, 190, 1); + box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4); padding:0.3em; background:white; } diff --git a/src/components/CreateEditComponents/CreateCourse.vue b/src/components/CreateEditComponents/CreateCourse.vue index 9fa43533265463c93dc8845e31ffeeffc0824e80..d65d13e97d133d92f08a0059b569a06e6ee11060 100644 --- a/src/components/CreateEditComponents/CreateCourse.vue +++ b/src/components/CreateEditComponents/CreateCourse.vue @@ -3,7 +3,6 @@ <div class="row col-md-12"> <div id="content" class="content col-md-12"> <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px"> - {{message}} <div class="form-row"> <div class="col-md-11 mb-3"> <h1 class="formTitle" style="margin-top: 30px">Angebotsnummer</h1> @@ -112,7 +111,7 @@ <div class="col-md-11 mb-3"> <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag hinzufügen</button> </div> - </div> h + </div> <div class="row"> <div class="col-md-12 mb-3"> </div> diff --git a/src/components/CreateEditComponents/EditCourse.vue b/src/components/CreateEditComponents/EditCourse.vue new file mode 100644 index 0000000000000000000000000000000000000000..5cb769008ade49d38eda66406e273eb8c0d400f0 --- /dev/null +++ b/src/components/CreateEditComponents/EditCourse.vue @@ -0,0 +1,195 @@ +<template> + <div> + <div class="row col-md-12"> + <div id="content" class="content col-md-12"> + <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px"> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 30px">Angebotsnummer</h1> + <div class="input_container"> + <input v-model="course.coursenumber" type="text" class="form-control inputField" placeholder="Angebotsnummer" aria-label="angebotsnummer" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="course.courseoffer" type="text" class="form-control inputField" placeholder="Angebot" aria-label="courseoffer" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Kursname</h1> + <div class="input_container"> + <input v-model="course.coursename" type="text" class="form-control inputField" placeholder="Kursname" aria-label="coursename" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 30px">Veranstaltungsart</h1> + <div class="input_container"> + <input v-model="course.eventtype" type="text" class="form-control inputField" placeholder="Veranstaltungsart" aria-label="eventtype" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Kursdatum (yyyy-mm-dd)</h1> + <div class="input_container"> + <input name="coursedate" v-model="course.coursedate" class="form-control inputField" placeholder="Kursdatum" aria-label="coursedate" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Thema</h1> + <div class="input_container"> + <input name="topic" v-model="course.topic" class="form-control inputField" placeholder="Thema" aria-label="topic" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Kursort</h1> + <div class="input_container"> + <input name="courselocation" v-model="course.courselocation" class="form-control inputField" placeholder="Kursort" aria-label="courselocation" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Begleitende Lehrkraft</h1> + <div class="input_container"> + <input name="accompanyingteacher" v-model="course.accompanyingteacher" class="form-control inputField" placeholder="Begleitende Lehrkraft" aria-label="accompanyingteacher" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Betreuende Studenten</h1> + <div class="input_container"> + <input name="supervisingstudents" v-model="course.supervisingstudents" class="form-control inputField" placeholder="Betreuende Studenten" aria-label="supervisingstudents" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Anzahl der Anwesenden</h1> + <div class="input_container"> + <input name="presentstudents" v-model="course.presentstudents" class="form-control inputField" placeholder="Anzahl der Anwesenden" aria-label="presentstudents" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Anzahl der Angemeldeten</h1> + <div class="input_container"> + <input name="registeredstudents" v-model="course.registeredstudents" class="form-control inputField" placeholder="Anzahl der Angemeldeten" aria-label="registeredstudents" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Kursleiter</h1> + <div class="input_container"> + <input name="instructor" v-model="course.instructor" class="form-control inputField" placeholder="Kursleiter" aria-label="instructor" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 10px">Notiz</h1> + <div class="input_container"> + <input name="notefield" v-model="course.notefield" class="form-control inputField" placeholder="Notiz" aria-label="notefield" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag hinzufügen</button> + </div> + </div> + <div class="row"> + <div class="col-md-12 mb-3"> + </div> + </div> + </form> + </div> + </div> + </div> +</template> + +<script> +import Course from "@/models/course"; + +export default { + name: "EditCourse.vue", + + data(){ + return { + message: "", + course: new Course('', '', '', '', '', '', '', '', '', '', '', '', ''), + } + }, + + methods: { + validateBeforeSubmit() { + this.$validator.validate().then(isValid => { + if (isValid) { + console.log("isvalid") + this.$store.dispatch('course/insert', this.course).then( + data => { + this.message = data.message; + this.successful = true; + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + } else { + + console.log("not isvalid") + } + }); + } + } +} +</script> + +<style scoped> +div.content { + background-color: whitesmoke; + position: fixed; + padding: 1px 16px; + height: 1000px; + overflow-y: auto; +} + +.formTitle { + font-size: 14px; + font-weight: 500; + color: #6B6C6F; +} + +.inputField { + height: 44px; + margin-top: 10px; + padding-left: 70px; + padding-right: 70px; + border-color: #DFE2E6; + border-width: 2px; + border-radius: 10px; +} + +.input_container { + position:relative; +} + +.btn { + margin-bottom: 200px; +} +</style> \ No newline at end of file diff --git a/src/components/Teachers.vue b/src/components/Teachers.vue index 9d0b86202b438526f1f195a8a0f1f32da95a15b7..1a8148a6a1ebd756672fa5dac4a8d0614f264bcb 100644 --- a/src/components/Teachers.vue +++ b/src/components/Teachers.vue @@ -1,13 +1,16 @@ <template> <div class="content col-md-12"> <div class="search_box col-md-4"> + <div class="entry_box-inner"> + <a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a> + <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a> + <a id="editbutton" class="button" href="./editcourse">Eintrag bearbeiten</a> + <a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</a> + </div> <div class="search_box-inner"> <i><img src="../assets/search.svg"></i> <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." /> </div> - <div class="entry_box-inner"> - <a href="./createteacher"><button>neuen Eintrag hinzufügen</button></a> - </div> </div> <table id="Table"> <tr> @@ -33,7 +36,7 @@ </template> <script> -export default { +/*export default { name: "Teachers", data(){ return{ @@ -78,8 +81,596 @@ export default { ); } } +}*/ +</script> + +<script> +export default { + name: "Teachers", + data: function() { + return { + rows: [ + {angebotsnummer: 232, angebot: "Biologie", kursname: 'Neurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 23342, angebot: "ABiologie", kursname: 'bNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '22.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 22, angebot: "Ciologie", kursname: 'ANeurobkiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '21.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 1342, angebot: "Diologie", kursname: 'cNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.07.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 132, angebot: "Bdologie", kursname: 'eNeurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2021', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''}, + ], + filter:'', + currentSort:'angebotsnummer', + currentSortDir:'asc', + sortImg: 'sort_def.svg', + } + }, + methods: { + "sortTable": function sortTable(col) { + this.currentSort = col; + if (this.currentSortDir === 'asc') { + this.currentSortDir = 'desc'; + + switch (this.currentSort){ + case 'angebotsnummer': + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'angebot': + document.getElementById("imgsortangebot").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursname': + document.getElementById("imgsortkursname").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'veranstaltungsort': + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursdatum': + document.getElementById("imgsortkursdatum").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'thema': + document.getElementById("imgsortthema").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursort': + document.getElementById("imgsortkursort").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'begleitendeLehrkraft': + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'betreuendeStudenten': + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'anzahlderAnwesenden': + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'anzahlderAngemeldeten': + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursleiter': + document.getElementById("imgsortkursleiter").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'notiz': + document.getElementById("imgsortnotiz").src = require('../assets/sort_asc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + break; + } + + this.rows.sort(function (a, b) { + if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){ + if (a[col] < b[col]) { + return 1; + } else if (a[col] > b[col]) { + return -1; + } + } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){ + if (a[col].toLowerCase() < b[col].toLowerCase()) { + return 1; + } else if (a[col].toLowerCase() > b[col].toLowerCase()) { + return -1; + } + } + return 0; + }) + } else { + this.currentSortDir = 'asc'; + + switch (this.currentSort){ + case 'angebotsnummer': + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'angebot': + document.getElementById("imgsortangebot").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursname': + document.getElementById("imgsortkursname").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'veranstaltungsort': + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursdatum': + document.getElementById("imgsortkursdatum").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'thema': + document.getElementById("imgsortthema").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursort': + document.getElementById("imgsortkursort").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'begleitendeLehrkraft': + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'betreuendeStudenten': + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'anzahlderAnwesenden': + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'kursleiter': + document.getElementById("imgsortkursleiter").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'anzahlderAngemeldeten': + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg'); + break; + case 'notiz': + document.getElementById("imgsortnotiz").src = require('../assets/sort_desc.svg'); + document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortthema").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg'); + document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg'); + break; + } + + this.rows.sort(function (a, b) { + if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){ + if (a[col] > b[col]) { + return 1; + } else if (a[col]< b[col]) { + return -1; + } + } else if (a[col].toLowerCase() < b[col].toLowerCase()) { + if (a[col].toLowerCase() > b[col].toLowerCase()) { + return 1; + } else if (a[col].toLowerCase() < b[col].toLowerCase()) { + return -1; + } + } + return 0; + }) + } + } + }, + computed: { + "columns": function columns() { + if (this.rows.length == 0) { + return []; + } + return Object.keys(this.rows[0]) + }, + filteredRows() { + return this.rows.filter(row => { + const angebotsnummer = row.angebotsnummer.toString().toLowerCase(); + const angebot = row.angebot.toLowerCase(); + const kursname = row.kursname.toLowerCase(); + const veranstaltungsart = row.veranstaltungsart.toLowerCase(); + const kursdatum = row.kursdatum.toLowerCase(); + const thema = row.thema.toLowerCase(); + const kursort = row.kursort.toLowerCase(); + const begleitendeLehrkraft = row.begleitendeLehrkraft.toLowerCase(); + const betreuendeStudenten = row.betreuendeStudenten.toLowerCase(); + const anzahlderAnwesenden = row.anzahlderAnwesenden.toString(); + const anzahlderAngemeldeten = row.anzahlderAngemeldeten.toString(); + const kursleiter = row.kursleiter.toLowerCase(); + const notiz = row.notiz.toLowerCase(); + const searchTerm = this.filter.toLowerCase(); + + return angebotsnummer.includes(searchTerm) || angebot.includes(searchTerm) || kursname.includes(searchTerm) || veranstaltungsart.includes(searchTerm) || kursdatum.includes(searchTerm) || thema.includes(searchTerm) || kursort.includes(searchTerm) || begleitendeLehrkraft.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || anzahlderAnwesenden.includes(searchTerm) || anzahlderAngemeldeten.includes(searchTerm) || kursleiter.includes(searchTerm) || notiz.includes(searchTerm); + }); + } + } } </script> <style scoped> +.content{ + background-color: whitesmoke; + width: 100%; + height: 100vh; + overflow: auto; + white-space: nowrap; +} + +.search_box{ + width: 100%; + margin-top: 50px; + text-align:left; + position: relative; +} + +.search_box-inner { + display:inline; + font-size:1em; + border-radius: 8em; + border:0.1em solid rgba(218, 208, 190, 1); + box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4); + padding:0.3em; + background:white; +} + +.entry_box-inner { + position: relative; + display:inline; +} + +#exportbutton, #addbutton, #editbutton, #deletebutton { + margin-right: 25px; + display:inline-block; + padding:0.3em 1.2em; + border-radius:2em; + box-sizing: border-box; + text-decoration:none; + font-weight:300; + color:#FFFFFF; + background-color:#528fff; + text-align:center; + transition: all 0.2s; +} + +#exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{ + background-color:#9fc1ff; +} + +.search_box-inner i img { + width: 5%; + text-align: center; + margin: 5px; +} + +#inpt_search{ + transition:all 0.2s ease-out; + width:15px; + border-radius:0; + box-shadow:none; + outline: none; + padding:0; + margin:0; + border:0; + background-color: transparent; + opacity:0; +} +#inpt_search:focus { + width: 10em; + opacity: 1; +} + +.content table { + margin-top: 50px; + margin-right: 1275px; + display: inline-block; + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; +} + +.content table th { + text-transform: uppercase; + text-align: left; + background: #9fc1ff; + color: #000000; + padding: 8px; + min-width: 30px; +} + +.content table td { + text-align: left; + padding: 8px; + border-right: 2px solid #9fc1ff; +} +.content table td:last-child { + border-right: none; +} + +.content table tbody tr:nth-child(2n) td { + background: #D4D8F9; +} </style> \ No newline at end of file diff --git a/src/router.js b/src/router.js index 0544e0bc5fd37eaed62b2ab27d06499e588ea00c..57c8dca2415130a9883acc73ce192f63bcbdf057 100644 --- a/src/router.js +++ b/src/router.js @@ -10,6 +10,7 @@ import Calendar from "./components/Calendar"; import Layouts from "./components/Layouts"; import Teachers from "./components/Teachers"; import CreateCourse from "@/components/CreateEditComponents/CreateCourse"; +import EditCourse from "@/components/CreateEditComponents/EditCourse"; Vue.use(Router) @@ -17,12 +18,17 @@ const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ - // Button from Add Courses + // Button from Courses { path: '/createcourse', name: 'neuen Eintrag hinzufügen', component: CreateCourse }, + { + path: '/editcourse', + name: 'Eintrag bearbeiten', + component: EditCourse + }, // LOGIN / REGISTER {