From f338b1b72d5c11a1ac8d80f93766e90f6e27af00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Sat, 8 Jul 2023 08:25:42 +0200 Subject: [PATCH] feat: Classroom Meta information A logo and a course description can be added within the classroom settings. The logo and the description are presented on the index-vue as well, to get a faster overview. --- client/components/Settings.vue | 50 ++++++++++++++++++++++++---------- client/pages/class/_id.vue | 4 +++ client/pages/index.vue | 9 ++++++ server/data.ts | 3 ++ server/data_web.ts | 3 ++ 5 files changed, 55 insertions(+), 14 deletions(-) diff --git a/client/components/Settings.vue b/client/components/Settings.vue index 9259750..23fae9e 100644 --- a/client/components/Settings.vue +++ b/client/components/Settings.vue @@ -63,6 +63,20 @@ outlined required > + + + + @@ -125,7 +139,7 @@ {{ scrapedModules[i].name }} - + {{scrapedModules[i].showInCustom}} @@ -135,7 +149,7 @@ style="white-space: break-spaces" > - + @@ -248,7 +262,7 @@ > - + Station Settings @@ -273,7 +287,7 @@ > - + Show in @@ -289,7 +303,7 @@ > - + @@ -556,7 +570,7 @@ import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles import draggable from "vuedraggable"; function parseClassroom(config) { - let classroom + let classroom; try { classroom = JSON.parse(config); @@ -571,7 +585,7 @@ function parseClassroom(config) { if (classroom) { // guarantees that older modules without a custom show can be loaded for (let module of classroom.modules) { - module.showInCustom = module.showInCustom || module.showIn || "" + module.showInCustom = module.showInCustom || module.showIn || ""; } } @@ -589,6 +603,8 @@ export default { memberTeacher: "", memberStudent: "", className: "", + logo: "", + description: "", saveError: false, modules: [], pageLoading: true, @@ -614,6 +630,10 @@ export default { return { ...this.$store.state.class_, name: this.className, + meta: { + logo: this.logo, + description: this.description, + }, members: { teacher: this.strToList(this.memberTeacher), student: this.strToList(this.memberStudent), @@ -624,7 +644,7 @@ export default { studentConfig: m.studentConfig, teacherConfig: m.teacherConfig, stationConfig: m.stationConfig, - showInCustom: m.showInCustom + showInCustom: m.showInCustom, })), }; }, @@ -643,9 +663,9 @@ export default { async modules() { const scrapedModules = []; for (const m of this.modules) { - let scraped = await this.scrapeModule(m) + let scraped = await this.scrapeModule(m); if (!m.showInCustom) { - m.showInCustom = scraped.shownIn.join(", ") + m.showInCustom = scraped.shownIn.join(", "); } scrapedModules.push(scraped); @@ -705,8 +725,8 @@ export default { const newClass = parseClassroom(res.target.result); if (newClass) { - this.updateState(newClass); - this.restoreSuccess = this.updateState(newClass); + this.updateState(newClass); + this.restoreSuccess = this.updateState(newClass); } else { this.restoreSuccess = false; this.saveError = true; @@ -750,18 +770,20 @@ export default { try { class_ = class_ || this.$store.state.class_; this.className = class_.name; + this.logo = class_?.meta?.logo || ""; + this.description = class_?.meta?.description || ""; this.memberTeacher = class_.members?.teacher.join("\n") || ""; this.memberStudent = class_.members?.student?.join("\n") || ""; this.modules = [ - ...class_?.modules.map((m) => { + ...class_?.modules.map((m) => { return { ...m, config: yaml.dump(m.config), studentConfig: yaml.dump(m.studentConfig), teacherConfig: yaml.dump(m.teacherConfig), stationConfig: yaml.dump(m.stationConfig), - showInCustom : m.showInCustom + showInCustom: m.showInCustom, }; }), ] || []; diff --git a/client/pages/class/_id.vue b/client/pages/class/_id.vue index a911887..a494155 100644 --- a/client/pages/class/_id.vue +++ b/client/pages/class/_id.vue @@ -102,6 +102,10 @@ export default { instance: this.$store.state.instance, class_id: this.$route.params.id, class_name: this.$store.state.class_.name, + meta: this.$store.state.class_?.meta || { + logo: "", + description: "", + }, role: this.role, }, ...this.$store.state.user.memberships.filter( diff --git a/client/pages/index.vue b/client/pages/index.vue index e442b3a..6b8c994 100644 --- a/client/pages/index.vue +++ b/client/pages/index.vue @@ -32,11 +32,20 @@ v-for="m in this.$store.state.user.memberships" :key="m.class_id" > + {{ m.class_name }} You're a student here You teach this class + + + + + diff --git a/server/data.ts b/server/data.ts index 3423593..9d7b4ac 100644 --- a/server/data.ts +++ b/server/data.ts @@ -143,6 +143,7 @@ export type Membership = { instance: Hostname class_id: ClassId class_name: ClassName + class_meta: ClassMeta | undefined role: RoleName } @@ -171,11 +172,13 @@ export enum ReservedRoomNames { export type ClassId = string export type ClassName = string +export type ClassMeta = { logo: string; description: string } export type Class = { id: ClassId dateCreated: number createdBy: Email name: ClassName + meta: ClassMeta | undefined members: Record> modules: Array } diff --git a/server/data_web.ts b/server/data_web.ts index 29f4f5b..2213e4f 100644 --- a/server/data_web.ts +++ b/server/data_web.ts @@ -70,6 +70,7 @@ export const router = new oak.Router() dateCreated: class_.dateCreated, createdBy: class_.createdBy, name: class_.name, + meta: class_.meta || { logo: '', description: '' }, modules: class_.modules.map((m) => ({ url: m.url, config: m.config, @@ -104,6 +105,7 @@ export const router = new oak.Router() createdBy: ctx.state.user, dateCreated: new Date().getTime(), name: 'My New Class', + meta: { logo: '', description: '' }, members: { teacher: [ctx.state.user], student: [], @@ -157,6 +159,7 @@ export const router = new oak.Router() ctx.response.status = 404 } else if (role == data.RoleName.Teacher) { const class_ = { ...class_old, ...class_new } + await data.write('classes', class_id, class_) /* Remove any users that no longer belong */