Merge branch 'master' of https://github.com/ocjojo/bildungsplattform_…

…vision

frontend/src/api.js

@@ -51,7 +51,10 @@ export default {
     });
   },
   logout() {
-    return get("/users/logout");
+    return get("/users/logout").then(resp => {
+      store.set("user", null);
+      store.set("loggedIn", false);
+    });
   },
   register(user) {
     return post("/users/register", user);
@@ -61,5 +64,16 @@ export default {
   },
   track(id) {
     return get("/track/" + id);
+  },
+  rooms() {
+    return get("/rooms/");
+  },
+  room(id) {
+    return get("/rooms/" + id);
+  },
+  roomMessages(id) {
+    return get(`/rooms/${id}/messages`).then(messages => {
+      return messages.error ? [] : messages;
+    });
   }
 };

frontend/src/components/RoomCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card card-md">
+    <div class="room-img"></div>
+    <div class="room-info">
+      <h5>{{ room.Name }}</h5>
+      <p>{{ room.Description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    room: Object
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  height: 200px;
+  display: flex;
+  flex-direction: row;
+  min-height: 200px;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+  &:hover {
+    transform: scale(1.05);
+  }
+  .room-img {
+    width: 200px;
+    background: url("../assets/defaultRoom.jpg");
+    height: 200px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 15px 0 0 15px;
+  }
+  .room-info {
+    width: 300px;
+    padding-top: 0;
+    padding: 20px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    padding-top: 0;
+    text-overflow: ellipsis;
+
+    h5 {
+      font-weight: 900;
+      font-size: 1.6rem;
+    }
+  }
+}
+</style>

frontend/src/components/SideBar.vue

@@ -6,9 +6,9 @@
       :type="'kurs'"
     ></SidebarList>
     <SidebarList
-      :heading="rooms.heading"
-      :list="rooms.list"
-      :type="rooms.type"
+      :heading="'Meine Räume'"
+      :list="rooms"
+      :type="'room'"
     ></SidebarList>
     <SidebarList
       :heading="chat.heading"
@@ -27,7 +27,7 @@ export default {
     SidebarList
   },
   asyncComputed: {
-    ...mapGetters(["tracks"])
+    ...mapGetters(["tracks", "rooms"])
   },
   data() {
     return {

frontend/src/components/SidebarList.vue

@@ -9,36 +9,20 @@
         {{ heading }}
       </li>
       <div class="list-container" :class="{ collapsed: collapsed }">
-        <template v-if="type == 'kurs'">
+        <template v-if="type == 'kurs' || type == 'room'">
           <li v-for="item of list" v-bind:key="item.ID" :class="type">
             <router-link
               :to="{
                 name: type,
                 params: {
-                  routeName: item.ID + '-' + getRouterString(item.Name),
-                  trackName: item
+                  routeName: item.ID + '-' + getRouterString(item.Name)
                 }
               }"
             >
               {{ item.Name }}
             </router-link>
           </li>
         </template>
-        <template v-else-if="type == 'room'">
-          <li v-for="item of list" v-bind:key="item" :class="type">
-            <router-link
-              :to="{
-                name: type,
-                params: {
-                  routeName: getRouterString(item),
-                  trackName: item
-                }
-              }"
-            >
-              {{ item }}
-            </router-link>
-          </li>
-        </template>
         <template v-else>
           <li v-for="item of list" v-bind:key="item.ID" :class="type">
             <template>{{ item }}</template>

frontend/src/components/TrackCard.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="card card-md">
     <div class="track-img"></div>
-    <!-- <img
-      v-if="track.path !== undefined && track.path !== ''"
-      :src="track.path"
-      :alt="track.name"
-    />
-    <img v-else src="../assets/defaultTrack.jpg" :alt="track.name" /> -->
     <div class="track-info">
       <h5>{{ track.Name }}</h5>
       <p>{{ track.Description }}</p>

frontend/src/global.scss

@@ -79,6 +79,7 @@ li {
   background-size: 200%;
   background-position-x: -100%;
   color: #fff;
+  cursor: pointer;
   &:hover {
     background-position-x: -40px;
   }

frontend/src/router/index.js

@@ -70,15 +70,6 @@ const routes = [
     meta: {
       requiresAuth: true
     }
-  },
-  {
-    path: "/hilfe",
-    name: "heup",
-    component: () =>
-      import(/* webpackChunkName: "tracks" */ "@/views/Help.vue"),
-    meta: {
-      requiresAuth: true
-    }
   }
 ];
 

frontend/src/store/index.js

@@ -53,6 +53,49 @@ const getters = {
       }
       return track;
     });
+  },
+  async rooms() {
+    if (store.rooms) {
+      console.log(store.rooms);
+      return store.rooms;
+    } else {
+      return api.rooms().then(rooms => {
+        console.log(rooms);
+        if (!rooms.error) {
+          Vue.set(store, "rooms", rooms);
+        }
+        return store.rooms;
+      });
+    }
+  },
+  async room(id) {
+    if (store.rooms && store.rooms.length > 0) {
+      const room = store.rooms.find(room => room.ID == id);
+      if (room) {
+        return room;
+      }
+    }
+    return api.room(id).then(room => {
+      if (!room.error) {
+        Vue.set(store, "rooms", deepmerge([room], store.rooms));
+      }
+      return room;
+    });
+  },
+  async roomMessages(id) {
+    if (store.roomMessages && store.roomMessages[id]) {
+      return store.roomMessages[id];
+    }
+    return api.roomMessages(id).then(roomMessages => {
+      if (!roomMessages.error) {
+        Vue.set(
+          store,
+          "roomMessages",
+          deepmerge({ [id]: roomMessages }, store.roomMessages || {})
+        );
+      }
+      return store.roomMessages[id];
+    });
   }
 };
 

frontend/src/util.js

@@ -0,0 +1,22 @@
+export function slugify(name) {
+  return name
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[\s\W-]+/g, "-")
+    .replace(/-$/, ""); // Remove last floating dash if exists
+}
+
+export function formatDate(date) {
+  return new Date(Date.parse(date)).toLocaleDateString();
+}
+
+export function formatTime(time) {
+  return new Date(Date.parse(time)).toLocaleTimeString();
+}
+
+export function formatDatetime(datetime) {
+  const date = new Date(Date.parse(datetime));
+  return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+}

frontend/src/views/Dashboard.vue

@@ -8,7 +8,9 @@
         <p>Du hast bereits 83% des Kurses abgeschlossen!</p>
       </div>
       <div class="card-footer">
-        <button class="btn">Kurs fortführen</button>
+        <button class="btn" @click="goToCourse('Nachhaltiger Konsum')">
+          Kurs fortführen
+        </button>
       </div>
     </div>
     <AnalyticsCard />
@@ -99,6 +101,25 @@ export default {
   name: "Home",
   components: {
     AnalyticsCard
+  },
+  methods: {
+    goToCourse(item) {
+      this.$router
+        .push({
+          name: "kurs",
+          params: { routeName: "1-" + this.getRouterString(item) }
+        })
+        .catch(() => {});
+    },
+    getRouterString(item) {
+      return item
+        .toString()
+        .toLowerCase()
+        .trim()
+        .replace(/&/g, "-and-")
+        .replace(/[\s\W-]+/g, "-")
+        .replace(/-$/, "");
+    }
   }
 };
 </script>

frontend/src/views/Main.vue

@@ -6,7 +6,7 @@
         <router-link to="/" class="dashboard">Dashboard</router-link>
         <router-link to="/kurse" class="track">Kurse</router-link>
         <router-link to="/raeume" class="community">Räume</router-link>
-        <router-link to="/hilfe" class="help">Hilfe</router-link>
+        <!-- <router-link to="/hilfe" class="help">Hilfe</router-link> -->
       </div>
       <div class="search"><input type="search" /></div>
       <a class="profile-menu" tabindex="0">

frontend/src/views/Room.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="room">
     <header>
-      <div class="track-title">{{ $route.params.trackName }}</div>
+      <div class="track-title">{{ room.Name }}</div>
     </header>
     <section>
       <div class="feed-item">
@@ -17,15 +17,15 @@
           <button class="btn">Posten</button>
         </div>
       </div>
-      <template v-for="post of posts">
-        <div class="feed-item" v-bind:key="post.date">
+      <template v-for="message of messages">
+        <div class="feed-item" v-bind:key="message.ID">
           <div class="avatar">
             <img src="@/assets/defaultAvatar.svg" alt="avatar" />
-            <div>{{ post.user }}</div>
+            <div>{{ message.AuthorID }}</div>
           </div>
           <div class="post-container">
-            <div class="time">{{ post.date }}</div>
-            {{ post.text }}
+            <div class="time">{{ formatDatetime(message.CreatedAt) }}</div>
+            {{ message.Message }}
           </div>
         </div>
       </template>
@@ -34,27 +34,35 @@
 </template>
 
 <script>
+import { mapGetters } from "@/store";
+import { formatDatetime } from "@/util";
 export default {
   data() {
     return {
-      posts: [
-        {
-          user: "Paul",
-          text: "Weiß jemand, was wir heute auf haben?",
-          date: "20.03.2020 10:15Uhr"
-        },
-        {
-          user: "Jannik",
-          text: "Das ist doch voll easy, ich erklär dir das im Chat",
-          date: "20.03.2020 8:23Uhr"
-        },
-        {
-          user: "Stefan",
-          text: "Ich hab das irgendwie nicht verstanden",
-          date: "20.03.2020 8:22Uhr"
-        }
-      ]
+      room: {},
+      messages: []
     };
+  },
+  methods: {
+    formatDatetime,
+    getData(routeName) {
+      const getters = mapGetters(["room", "roomMessages"]);
+      const id = routeName.split("-", 2)[0];
+
+      getters.room(id).then(room => {
+        this.room = room;
+      });
+      getters.roomMessages(id).then(messages => {
+        this.messages = messages;
+      });
+    }
+  },
+  created() {
+    this.getData(this.$route.params.routeName);
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.getData(to.params.routeName);
+    next();
   }
 };
 </script>
@@ -71,7 +79,7 @@ header {
     position: absolute;
     width: 100%;
     bottom: 0;
-    height: 100px;
+    height: 80px;
     background: rgba(37, 37, 37, 0.5);
     color: #fff;
     display: flex;