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

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

@@ -56,9 +56,11 @@ const getters = {
   },
   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);
         }

frontend/src/views/Help.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="help-page">
     <header>
-      <h2>Deine Räume</h2>
+      <h2>Hilfe</h2>
     </header>
   </div>
 </template>

frontend/src/views/Room.vue

@@ -79,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;

frontend/src/views/Rooms.vue

@@ -1,5 +1,82 @@
 <template>
   <div class="rooms">
-    <h2>Deine Räume</h2>
+    <header>
+      <div class="title-container">
+        <h2>Deine Räume</h2>
+      </div>
+    </header>
+
+    <section>
+      <template v-for="room of rooms">
+        <router-link
+          v-bind:key="room.id"
+          :to="{
+            name: 'room',
+            params: {
+              routeName: room.ID + '-' + getRouterString(room.Name)
+            }
+          }"
+        >
+          <RoomCard v-bind:key="room.ID" :room="room"></RoomCard>
+        </router-link>
+      </template>
+    </section>
   </div>
 </template>
+
+<script>
+import { mapGetters } from "@/store";
+import RoomCard from "../components/RoomCard";
+export default {
+  components: {
+    RoomCard
+  },
+  asyncComputed: {
+    ...mapGetters(["rooms"])
+  },
+  methods: {
+    getRouterString(item) {
+      console.log(item);
+      return item
+        .toString()
+        .toLowerCase()
+        .trim()
+        .replace(/&/g, "-and-") // Replace & with 'and'
+        .replace(/[\s\W-]+/g, "-")
+        .replace(/-$/, ""); // Remove last floating dash if exists
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+header {
+  background: url("../assets/rooms.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 320px;
+  position: relative;
+  .title-container {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 80px;
+    background: rgba(37, 37, 37, 0.5);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    h2 {
+      font-size: 2.4rem;
+      font-weight: 200;
+      margin: 10px;
+    }
+  }
+}
+
+section {
+  padding: 12px;
+}
+</style>