added sortfunction, still needed: sort image

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",

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"
   },

src/assets/sort_asc.svg

+<?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

src/assets/sort_def.svg

+<?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

src/assets/sort_desc.svg

+<?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>

src/components/Courses.vue

 <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 class="content col-md-12">
+    Courses
   </div>
 </template>
 

src/components/DynamicTable.vue

+<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

src/components/Home.vue

 <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

src/components/SideMenu.vue

 <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>