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

.

parent 370c6993
Branches
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>
<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="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="editbutton" class="button" href="./editcourse">Eintrag bearbeiten</a>
<a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</a>
<a id="deletebutton" class="button" href="./deletecourse">ausgewählte Einträge löschen</a>
<a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a>
</div>
<div class="search_box-inner">
<i><img src="../assets/search.svg"></i>
......@@ -16,16 +16,17 @@
<tr>
<th scope="row">
<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>
</div>
</th>
<th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
</tr>
<tr v-for="row in filteredRows" :key="row.angebotsnummer">
<th v-on:click="sortTable('notiz')"><img id="imgsortnotiz" :src="require('../assets/'+sortImg)">Notiz</th>
</tr>
<tr v-for="row in filteredRows" :key="row.id">
<td scope="row">
<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>
</div>
</td>
......@@ -36,57 +37,56 @@
</template>
<script>
/*export default {
export default {
name: "Teachers",
data(){
return{
data: "Placeholder",
message: "not Expired",
service: 0,
data: function() {
return {
rows: [],
checkedBoxes: [],
filter:'',
currentSort:'id',
currentSortDir:'asc',
sortImg: 'sort_def.svg',
}
},
created() {
this.getData();
localStorage.setItem('checkedBoxID', 0);
this.loadData();
},
methods:{
getData () {
this.$store.dispatch('user/getHello').then(
(response) => {
console.log(response.status)
this.data = this.$store.state.user.response;
methods: {
checkAllBoxes(){
var headercheckbox = document.getElementById('checkbox_headerline');
var headercheckboxvalue = headercheckbox.checked;
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) => {
this.message = error;
console.log(error)
error => {
this.message = (error.response && error.response.data) || error.message || error.toString();
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) {
this.currentSort = col;
if (this.currentSortDir === 'asc') {
......@@ -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: {
"columns": function columns() {
if (this.rows.length == 0) {
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();
//filteredRows() {
//return this.rows.filter(row => {
//const angebotsnummer = row.angebotsnummer.toString().toLowerCase();
//const angebot = row.angebot.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>
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment