Merge branch 'master' of github.com:ocjojo/bildungsplattform_vision

frontend/src/api.js

@@ -64,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/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/store/index.js

@@ -53,6 +53,47 @@ const getters = {
       }
       return track;
     });
+  },
+  async rooms() {
+    if (store.rooms) {
+      return store.rooms;
+    } else {
+      return api.rooms().then(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/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">{{ message.CreatedAt }}</div>
+            {{ message.Message }}
           </div>
         </div>
       </template>
@@ -34,27 +34,33 @@
 </template>
 
 <script>
+import { mapGetters } from "@/store";
 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: {
+    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>