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.
edrys-org · Jul 8, 2023 · f338b1b · f338b1b · deno-deploy · Jul 8, 2023
1 parent 68b3501
commit f338b1b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 14 deletions.
diff --git a/client/components/Settings.vue b/client/components/Settings.vue
@@ -63,6 +63,20 @@
               outlined
               required
             ></v-text-field>
+
+            <v-text-field
+              v-model="logo"
+              label="Logo URL"
+              outlined
+              required
+            ></v-text-field>
+
+            <v-textarea
+              v-model="description"
+              filled
+              label="Description"
+              auto-grow
+            ></v-textarea>
           </v-form>
         </v-tab-item>
         <v-tab-item>
@@ -125,7 +139,7 @@
                     <v-list-item-title>{{
                       scrapedModules[i].name
                       }}
-                       <span style="display: inline-block; padding: 4px 8px; background-color: #424242; color: white; font-size: 12px; font-weight: bold; border-radius: 16px;">
+                      <span style="display: inline-block; padding: 4px 8px; background-color: #424242; color: white; font-size: 12px; font-weight: bold; border-radius: 16px;">
                         {{scrapedModules[i].showInCustom}}
                       </span>
                     </v-list-item-title>
@@ -135,7 +149,7 @@
                       style="white-space: break-spaces"
                     >
                     </v-list-item-subtitle>
-                  
+
                   </v-list-item-content>
 
                   <v-list-item-action>
@@ -248,7 +262,7 @@
                             ></v-textarea-->
                           </v-expansion-panel-content>
                         </v-expansion-panel>
-                        
+
                         <v-expansion-panel>
                           <v-expansion-panel-header>
                             Station Settings
@@ -273,7 +287,7 @@
                             ></v-textarea-->
                           </v-expansion-panel-content>
                         </v-expansion-panel>
-                      
+
                         <v-expansion-panel>
                           <v-expansion-panel-header disable-icon-rotate>
                             Show in
@@ -289,7 +303,7 @@
                             ></v-text-field>
                           </v-expansion-panel-content>
                         </v-expansion-panel>
-                      
+
                       </v-expansion-panels>
                     </v-menu>
                   </v-list-item-action>
@@ -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
@@ -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
@@ -32,11 +32,20 @@
               v-for="m in this.$store.state.user.memberships"
               :key="m.class_id"
             >
+              <v-img
+                :src="m.meta && m.meta.logo ? m.meta.logo : 'https://repository-images.githubusercontent.com/453979926/ab6bf9d7-a4bc-4a47-97b7-c8bc8bb4654d'"
+                height="200px"
+              ></v-img>
               <v-card-title>{{ m.class_name }}</v-card-title>
               <v-card-subtitle>
                 <span v-if="m.role == 'student'">You're a student here</span>
                 <span v-else-if="m.role == 'teacher'">You teach this class</span>
               </v-card-subtitle>
+
+              <v-card-text v-html="m.meta && m.meta.description ? m.meta.description : 'No description'">
+
+              </v-card-text>
+
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn icon>

diff --git 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<RoleName, Array<Email>>
   modules: Array<Module>
 }

diff --git 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 */