Resolve "Frontend for Models"

Closes #1 (closed)

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

+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "LessonCard",
+  extends: "v-card",
+  props: {
+    lesson: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+    subject() {
+      return this.lesson.subject || this.lesson.course.subject || {name: ""};
+    },
+    teachers() {
+      return this.lesson.teachers || this.lesson.course.teachers || [];
+    },
+    groups() {
+      return this.lesson.groups || this.lesson.course.groups || [];
+    },
+    color() {
+      return this.subject.colourFg;
+    },
+    background() {
+      return this.subject.colourBg;
+    }
+  },
+})
+</script>
+
+<template>
+  <v-card class="color h-100 fill-height" :color="background" v-bind="$attrs">
+    <v-card-text>
+      <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