From 237c88789a4622165e36feceb7a6c65a1af5b647 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sat, 30 Apr 2022 01:18:37 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20timetable=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/definitions.js          |  1 +
 src/store.js                | 16 +++++++++
 src/views/TimetableView.vue | 71 +++++++++++++++++++++++++++++++++++--
 3 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 src/definitions.js
 create mode 100644 src/store.js

diff --git a/src/definitions.js b/src/definitions.js
new file mode 100644
index 0000000..e15e644
--- /dev/null
+++ b/src/definitions.js
@@ -0,0 +1 @@
+export const dayNames = ["Monday", "Tuesday", "Wednesday", "Thursay", "Friday"];
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..4fe6abe
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,16 @@
+import { computed } from "@vue/reactivity";
+import { ref } from "vue";
+
+export const timetable = ref([]);
+
+export const parsedTimetable = computed(() => {
+  return timetable.value.map((day) => {
+    const newDay = [];
+    for (const lesson of day) {
+      const lessonLength = lesson.length || 1;
+      delete lesson.length;
+      for (var i = 0; i < lessonLength; i++) newDay.push(lesson);
+    }
+    return newDay;
+  });
+});
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index 0e9e50c..dda9e8e 100644
--- a/src/views/TimetableView.vue
+++ b/src/views/TimetableView.vue
@@ -1,5 +1,70 @@
+<script setup>
+import { parsedTimetable } from "../store";
+import { dayNames } from "../definitions";
+import { ref } from "vue";
+
+const timetableDay = ref(0);
+</script>
 <template>
-  <main>
-    <h1>Hello World!</h1>
-  </main>
+  <div class="timetable">
+    <div class="title">
+      <span class="day">{{ dayNames[timetableDay] }}</span>
+    </div>
+
+    <template
+      v-for="(lesson, index) in parsedTimetable[timetableDay]"
+      :key="index"
+    >
+      <div class="lesson">
+        <span class="hour">{{ index + 1 }}</span>
+        <div class="infos">
+          <span class="subject">{{ lesson.subject }}</span>
+          <span class="info">{{ lesson.teacher }}, {{ lesson.room }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
+
+<style scoped>
+.timetable {
+  padding: 65px 10px 80px 10px;
+}
+
+.title {
+  font-size: 18px;
+}
+
+.lesson {
+  display: grid;
+  background-color: #26272a;
+  height: 60px;
+  border-radius: 11px;
+  margin: 10px 0px;
+  padding: 10px;
+  grid-template-columns: max-content max-content;
+  gap: 10px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.infos .subject {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.infos .info {
+  font-weight: 200;
+  font-size: 14px;
+}
+</style>