Skip to content
Snippets Groups Projects
Commit 22a255be authored by oetrb's avatar oetrb
Browse files

.

parent 370c6993
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Teachers.vue
+ 168
− 68
View file @ 22a255be
<template> <template>
<div class="content col-md-12"> <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"> <div class="entry_box-inner">
<a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a> <a id="editbutton" class="button" href="./editcourse" style="visibility: hidden">Eintrag bearbeiten</a>
<a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</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="./deletecourse">ausgewählte Einträge löschen</a>
<a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</a> <a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a>
</div> </div>
<div class="search_box-inner"> <div class="search_box-inner">
<i><img src="../assets/search.svg"></i> <i><img src="../assets/search.svg"></i>
...@@ -16,16 +16,17 @@ ...@@ -16,16 +16,17 @@
<tr> <tr>
<th scope="row"> <th scope="row">
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox_headerline"> <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
<label class="form-check-label" for="checkbox_headerline"></label> <label class="form-check-label" for="checkbox_headerline"></label>
</div> </div>
</th> </th>
<th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th> <th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
</tr> <th v-on:click="sortTable('notiz')"><img id="imgsortnotiz" :src="require('../assets/'+sortImg)">Notiz</th>
<tr v-for="row in filteredRows" :key="row.angebotsnummer"> </tr>
<tr v-for="row in filteredRows" :key="row.id">
<td scope="row"> <td scope="row">
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox_tablerow"> <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id">
<label class="form-check-label" for="checkbox_tablerow"></label> <label class="form-check-label" for="checkbox_tablerow"></label>
</div> </div>
</td> </td>
...@@ -36,57 +37,56 @@ ...@@ -36,57 +37,56 @@
</template> </template>
<script> <script>
/*export default { export default {
name: "Teachers", name: "Teachers",
data(){ data: function() {
return{ return {
data: "Placeholder", rows: [],
message: "not Expired", checkedBoxes: [],
service: 0, filter:'',
currentSort:'id',
currentSortDir:'asc',
sortImg: 'sort_def.svg',
} }
}, },
created() { created() {
this.getData(); localStorage.setItem('checkedBoxID', 0);
this.loadData();
}, },
methods:{ methods: {
getData () {
this.$store.dispatch('user/getHello').then( checkAllBoxes(){
(response) => { var headercheckbox = document.getElementById('checkbox_headerline');
console.log(response.status) var headercheckboxvalue = headercheckbox.checked;
this.data = this.$store.state.user.response;
let checkboxes = document.getElementsByName('checkbox_tablerow');
for(var i=0, n=checkboxes.length;i<n;i++) {
if (headercheckboxvalue){
this.checkedBoxes.push(this.rows[i].id);
} else {
this.checkedBoxes.pop(this.rows[i].id);
}
checkboxes[i].checked = headercheckboxvalue;
}
},
/*loadData(){
this.$store.dispatch('course/getAll').then(
(data) => {
let x;
for(x = 0; x < data.length; x++){
this.rows.push({id: data[x].id, angebotsnummer: data[x].courseNumber, angebot: data[x].courseOffer, kursname: data[x].name, veranstaltungsart: data[x].eventType, kursdatum: data[x].courseDate, thema: data[x].topic, kursort: data[x].location, begleitendeLehrkraft: data[x].accompanyingTeacher, betreuendeStudenten: data[x].supervisingStudents, anzahlderAnwesenden: data[x].presentStudents, anzahlderAngemeldeten: data[x].registeredStudents, kursleiter: data[x].instructor, notiz: data[x].noteField});
}
}, },
(error) => { error => {
this.message = error; this.message = (error.response && error.response.data) || error.message || error.toString();
console.log(error) this.successful = false;
} }
); );
}, },*/
}
}*/
</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) { "sortTable": function sortTable(col) {
this.currentSort = col; this.currentSort = col;
if (this.currentSortDir === 'asc') { if (this.currentSortDir === 'asc') {
...@@ -524,36 +524,136 @@ export default { ...@@ -524,36 +524,136 @@ export default {
} }
} }
}, },
watch: {
checkedBoxes(){
if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){
document.getElementById("editbutton").style.visibility = "hidden";
// EXPORT & DELETE
} else {
document.getElementById("editbutton").style.visibility = "visible";
}
localStorage.setItem('checkedBoxID', this.checkedBoxes[0]);
}
},
computed: { computed: {
"columns": function columns() { "columns": function columns() {
if (this.rows.length == 0) { if (this.rows.length === 0) {
return []; return [];
} }
return Object.keys(this.rows[0]) return Object.keys(this.rows[0])
}, },
filteredRows() { //filteredRows() {
return this.rows.filter(row => { //return this.rows.filter(row => {
const angebotsnummer = row.angebotsnummer.toString().toLowerCase(); //const angebotsnummer = row.angebotsnummer.toString().toLowerCase();
const angebot = row.angebot.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); //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> </script>
<style scoped> <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> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment