From 22a255bece8a636999b9cd724c68d84469359304 Mon Sep 17 00:00:00 2001
From: oetrb <oetrb@github.com>
Date: Wed, 7 Oct 2020 22:49:08 +0200
Subject: [PATCH] .
---
src/components/Teachers.vue | 236 +++++++++++++++++++++++++-----------
1 file changed, 168 insertions(+), 68 deletions(-)
diff --git a/src/components/Teachers.vue b/src/components/Teachers.vue
index 0169dc4..0a75a2e 100644
--- a/src/components/Teachers.vue
+++ b/src/components/Teachers.vue
@@ -1,11 +1,11 @@
<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
--
GitLab