Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/timetable_management/LessonCard.vue

@@ -3,6 +3,7 @@ import {defineComponent} from 'vue'
 
 export default defineComponent({
   name: "LessonCard",
+  extends: "v-card",
   props: {
     lesson: {
       type: Object,
@@ -19,22 +20,39 @@ export default defineComponent({
     groups() {
       return this.lesson.groups || this.lesson.course.groups || [];
     },
+    color() {
+      return this.subject.colourFg;
+    },
+    background() {
+      return this.subject.colourBg;
+    }
   },
 })
 </script>
 
 <template>
-  <v-card>
+  <v-card class="color h-100 fill-height" :color="background" v-bind="$attrs">
     <v-card-text>
-      <v-card-title>{{ subject.name }}</v-card-title>
-      <v-card-subtitle>
-        <span v-for="teacher in teachers">{{ teacher.shortName }}</span>
-        <span v-for="room in lesson.rooms">{{ room.shortName }}</span>
+      <v-card-title class="color">
+        {{ subject.name }}
+      </v-card-title>
+      <v-card-subtitle class="color">
+        <span v-for="(teacher, index) in teachers">
+          <span v-if="index !== 0">, </span>
+          <span>{{ teacher.shortName }}</span>
+        </span>
+        <span v-for="(room, index) in lesson.rooms">
+          <span v-if="index !== 0">, </span>
+          <span>{{ room.shortName }}</span>
+        </span>
       </v-card-subtitle>
+      <slot/>
     </v-card-text>
   </v-card>
 </template>
 
 <style scoped>
-
+.color {
+  color: v-bind(color);
+}
 </style>
\ No newline at end of file