diff --git a/package-lock.json b/package-lock.json index 1a7d67fda2f84dc157eea8e8f9347b6969b6ca40..432df46a0631d5c555393736d6061a77dcff38bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7058,12 +7058,22 @@ "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "dev": true }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.transform": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz", "integrity": "sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=", "dev": true }, + "lodash.trim": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/lodash.trim/-/lodash.trim-4.5.1.tgz", + "integrity": "sha1-NkJefukL5KpeJ7zruFt9EepHqlc=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -11273,6 +11283,14 @@ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz", "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==" }, + "vue-scrollbar-simple": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/vue-scrollbar-simple/-/vue-scrollbar-simple-0.0.6.tgz", + "integrity": "sha512-XtCb0He/v/QCws1TgklKUjbvpxhvo6uc4lnJRP1L2hZJs1VBtze1mOyaqXOsADs2bCG1XaDGnA/pb5aMHMkMPA==", + "requires": { + "lodash.throttle": "^4.1.1" + } + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", diff --git a/package.json b/package.json index 901deca1328d23d51868b045cb54d1cc693075ba..2d1014cc8459e8778e6cfa00863bc2958f3b61a7 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,13 @@ "bootstrap-vue": "^2.17.3", "core-js": "^3.6.5", "jquery": "^3.5.1", + "lodash.trim": "^4.5.1", "popper.js": "^1.16.1", "vee-validate": "^2.2.15", "vue": "^2.6.11", "vue-axios-cors": "^1.0.1", "vue-router": "^3.4.3", + "vue-scrollbar-simple": "0.0.6", "vuex": "^3.5.1", "vuex-persistedstate": "^3.1.0" }, diff --git a/src/assets/sort_asc.svg b/src/assets/sort_asc.svg new file mode 100644 index 0000000000000000000000000000000000000000..f18f5ff752385c30ad800453eae927a5a8ecae3f --- /dev/null +++ b/src/assets/sort_asc.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generated by IcoMoon.io --> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 16 16"> +<path fill="#505050" d="M11 7h-6l3-4z"></path> +<path fill="#000000" d="M5 9h6l-3 4z"></path> +</svg> \ No newline at end of file diff --git a/src/assets/sort_def.svg b/src/assets/sort_def.svg new file mode 100644 index 0000000000000000000000000000000000000000..7638c7a069e41949ff8e470e834403cada49bc50 --- /dev/null +++ b/src/assets/sort_def.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generated by IcoMoon.io --> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 16 16"> +<path fill="#505050" d="M11 7h-6l3-4z"></path> +<path fill="#505050" d="M5 9h6l-3 4z"></path> +</svg> \ No newline at end of file diff --git a/src/assets/sort_desc.svg b/src/assets/sort_desc.svg new file mode 100644 index 0000000000000000000000000000000000000000..5d7e4094e568f189991caf79b7c6880163a11b65 --- /dev/null +++ b/src/assets/sort_desc.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generated by IcoMoon.io --> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 16 16"> +<path fill="#000000" d="M11 7h-6l3-4z"></path> +<path fill="#505050" d="M5 9h6l-3 4z"></path> +</svg> diff --git a/src/components/Courses.vue b/src/components/Courses.vue index ab6bf668002522b87c75385358d824edbc7ebe2f..069fdeaf60d50f32cfd3b949778dbfa22786d7b8 100644 --- a/src/components/Courses.vue +++ b/src/components/Courses.vue @@ -1,58 +1,7 @@ <template> - <div class="row col-md-14"> - <div class="buttons"> - <div id="dropdown_style" class="dropdown"> - <button type="button" id="button_style_export" class="btn dropdown-toggle"> - Ansicht exportieren - </button> - <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <a class="dropdown-item" href="#">Excel</a> - <a class="dropdown-item" href="#">PDF</a> - </div> - </div> - <button type="button" id="button_style_newentry" class="btn">neuen Eintrag hinzufügen</button> - </div> - <div id="content" class="content table-responsive"> - <table class="table"> - <tr> - <th scope="row"> - <div class="form-check"> - <input type="checkbox" class="form-check-input" id="checkbox_headerline"> - <label class="form-check-label" for="checkbox_headerline"></label> - </div> - </th> - <th>Angebotsnummer</th> - <th style="padding-right:200px;">Angebot</th> - <th style="padding-right:200px;">Kursname</th> - <th>Veranstaltungsart</th> - <th>Kursdatum</th> - <th style="padding-right:200px;">Kursort</th> - <th>begleitende Lehrkraft</th> - <th>betreuende Studenten</th> - <th>Anzahl der Anwesenden</th> - <th>Kursleiter</th> - <th style="padding-right:300px;">Notiz</th> - </tr> - <th scope="row"> - <div class="form-check"> - <input type="checkbox" class="form-check-input" id="checkbox_row"> - <label class="form-check-label" for="checkbox_row"></label> - </div> - </th> - <td>Larry</td> - <td>the Bird</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - <td>@twitter</td> - </table> - </div> - </div> + <div class="content col-md-12"> + Courses + </div> </template> <script> diff --git a/src/components/DynamicTable.vue b/src/components/DynamicTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..79a06a5eacbf3c4eb6f8097686c7a5174afdb304 --- /dev/null +++ b/src/components/DynamicTable.vue @@ -0,0 +1,148 @@ +<template> + <div class="content col-md-12"> + <table id="Table"> + <tr> + <th scope="row"> + <div class="form-check"> + <input type="checkbox" class="form-check-input" id="checkbox_headerline"> + <label class="form-check-label" for="checkbox_headerline"></label> + </div> + </th> + <th v-on:click="sortTable('angebotsnummer')">Angebotsnummer</th> + <th v-on:click="sortTable('angebot')">Angebot</th> + <th v-on:click="sortTable('kursname')">Kursname</th> + <th v-on:click="sortTable('veranstaltungsart')">Veranstaltungsart</th> + <th v-on:click="sortTable('kursdatum')">Kursdatum</th> + <th v-on:click="sortTable('kursort')">Kursort</th> + <th v-on:click="sortTable('begleitendeLehrkraft')">begleitende Lehrkraft</th> + <th v-on:click="sortTable('betreuendeStudenten')">betreuende Studenten</th> + <th v-on:click="sortTable('anzahlderAnwesenden')">Anzahl der Anwesenden</th> + <th v-on:click="sortTable('kursleiter')">Kursleiter</th> + <th v-on:click="sortTable('notiz')">Notiz</th> + </tr> + <tr v-for="row in rows" :key="row.angebotsnummer"> + <td scope="row"> + <div class="form-check"> + <input type="checkbox" class="form-check-input" id="checkbox_tablerow"> + <label class="form-check-label" for="checkbox_tablerow"></label> + </div> + </td> + <td>{{row.angebotsnummer}}</td> + <td style="padding-right:200px;">{{row.angebot}}</td> + <td style="padding-right:200px;">{{row.kursname}}</td> + <td>{{row.veranstaltungsart}}</td> + <td>{{row.kursdatum}}</td> + <td style="padding-right:200px;">{{row.kursort}}</td> + <td>{{row.begleitendeLehrkraft}}</td> + <td>{{row.betreuendeStudenten}}</td> + <td>{{row.anzahlderAnwesenden}}</td> + <td>{{row.kursleiter}}</td> + <td style="padding-right:300px;">{{row.notiz}}</td> + </tr> + </table> + </div> +</template> + +<script> +export default { + name: "DynamicTable", + data: function() { + return { + rows: [ + {angebotsnummer: 232, angebot: "Biologie", kursname: 'Neurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 23342, angebot: "ABiologie", kursname: 'bNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 22, angebot: "Ciologie", kursname: 'ANeurobkiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 1342, angebot: "Diologie", kursname: 'cNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''}, + {angebotsnummer: 132, angebot: "Bdologie", kursname: 'eNeurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''}, + ], + + currentSort:'angebotsnummer', + currentSortDir:'asc', + } + }, + methods: { + "sortTable": function sortTable(col) { + this.currentSort = col; + if (this.currentSortDir === 'asc') { + this.currentSortDir = 'desc'; + + 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'; + 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]) + } + } +} +</script> + +<style scoped> +.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/components/Home.vue b/src/components/Home.vue index a066f001709c11027db71c9613491095bcde65e8..36871bc9d7936d0bb9d50e8e9149aa7941739307 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -1,17 +1,17 @@ <template> <div id="content" class="content col-md-12"> - <Courses></Courses> + <DynamicTable></DynamicTable> </div> </template> <script> -import Courses from '../components/Courses.vue' +import DynamicTable from '../components/DynamicTable.vue' export default { name: "Home", components: { - Courses + DynamicTable }, methods:{ @@ -26,5 +26,11 @@ export default { </script> <style scoped> - +.content{ + background-color: whitesmoke; + width: 100%; + height: 100vh; + overflow: auto; + white-space: nowrap; +} </style> \ No newline at end of file diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue index 08f43f75f7fda6a8b04359079b40b86507d786ed..7f58c4ea2ea0b9b0704ccac3bd8707987d4937ec 100644 --- a/src/components/SideMenu.vue +++ b/src/components/SideMenu.vue @@ -1,22 +1,10 @@ <template> - <!--div class="sidebar col-md-2"> - <br> - <a href="/home">Home</a> - <a href="./courses">Kursübersicht</a> - <a class="active" href="./teachers">Lehrbeauftragtenübersicht</a> - <a href="./layouts">Vorlagen</a> - <a href="./calendar">Kalender</a> - <a href="./signin">neuen Nutzer anlegen</a> - <div class="sidebar-bottom"> - <a href="/logout">Abmelden</a> - </div> - </div--> <div class="sidebar col-md-2"> <br> <img class="natlab-logo col-md-12" id="natlab-logo" src="../assets/natlab-logo.png" alt="NatLab Logo"> <br> <div> - <div style="margin-top: 30px" class="navButton"> + <div style="margin-top: 30px;" class="navButton"> <router-link to="/home"><a class="active navA">Home</a></router-link><br> </div> <router-link to="/courses"><a class="navA">Kursübersicht</a></router-link><br>