From 9c33a9dc17cfbfe83662072841c38df6d9d60594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= <andredietrich@web.de>
Date: Sat, 8 Jul 2023 07:09:06 +0200
Subject: [PATCH 1/3] Students can now change their rooms manually

---
 client/components/Student.vue | 179 +++++++++++++++++++++++++++++++++-
 server/data_web.ts            |  26 ++---
 2 files changed, 186 insertions(+), 19 deletions(-)

diff --git a/client/components/Student.vue b/client/components/Student.vue
index 8944b5e..fe302c4 100644
--- a/client/components/Student.vue
+++ b/client/components/Student.vue
@@ -1,5 +1,119 @@
 <template>
   <div>
+    <v-navigation-drawer
+      :width="310"
+      :value="$store.state.drawer"
+      @input="(v) => $store.commit('toggleDrawer', v)"
+      app
+      clipped
+    >
+      <v-list-item style="margin: 10px">
+        <v-list-item-content>
+          <v-list-item-title class="text-h6">
+            {{ $store.state.class_.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ liveStudentCount }}
+            {{ liveStudentCount == 1 ? "student" : "students" }},
+            {{ liveTeacherCount }}
+            {{ liveTeacherCount == 1 ? "teacher" : "teachers" }} online
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list dense>
+        <v-list-item-group
+          :value="currentRoomName"
+          mandatory
+        >
+          <div
+            v-for="[room_name, room] in Object.entries(
+              liveClassProxy.rooms || {}
+            )"
+            :key="room_name"
+            :value="room_name"
+          >
+            <v-divider v-if="room_name != 'Teacher\'s Lounge'"></v-divider>
+            <v-hover v-slot="{ hover }">
+              <v-list-item
+                :value="room_name"
+                v-if="room_name != 'Teacher\'s Lounge'"
+                link
+                @click="
+                  () => {
+                    setCurrentRoom(room_name);
+                  }
+                "
+              >
+                <v-list-item-icon style="margin-right: 15px">
+                  <v-icon color="grey">
+                    <template v-if="room_name == 'Lobby'">mdi-account-multiple</template>
+                    <template v-else-if="room_name == 'PA Mode'">mdi-bullhorn</template>
+                    <template v-else-if="room_name.startsWith('Station ')">mdi-router-wireless</template>
+                    <template v-else>mdi-forum</template>
+                  </v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-title>{{ room_name }} </v-list-item-title>
+
+                <v-list-item-icon>
+                  <v-icon color="grey">mdi-arrow-right</v-icon>
+                </v-list-item-icon>
+              </v-list-item>
+            </v-hover>
+
+            <v-list
+              dense
+              flat
+            >
+              <draggable
+                group="users"
+                @end="userRoomChange"
+                :id="`$ROOM:${room_name}`"
+              >
+                <v-hover
+                  v-slot="{ hover }"
+                  v-for="[email, user] in Object.entries(
+                    liveClassProxy.users
+                  ).filter(([e, u]) => u.room == room_name)"
+                  :key="email"
+                  :id="`$EMAIL:${email}`"
+                >
+                  <v-list-item
+                    :disabled="email!=username"
+                    inactive
+                    :ripple="false"
+                    :selectable="false"
+                    v-show="room.userLinked != email"
+                  >
+                    <v-list-item-icon style="margin-right: 15px; margin-left: 20px">
+                      <v-icon
+                        v-if="user.role == 'student'"
+                        color="grey"
+                      >mdi-account-circle-outline</v-icon>
+                      <v-icon
+                        v-else-if="user.role == 'teacher'"
+                        color="grey"
+                      >mdi-clipboard-account-outline</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>
+                      {{ user.displayName }}</v-list-item-title>
+
+                    <v-icon
+                      color="grey"
+                      v-show="hover"
+                      class="handle"
+                    >mdi-drag-horizontal-variant</v-icon>
+                  </v-list-item>
+                </v-hover>
+              </draggable>
+            </v-list>
+          </div>
+        </v-list-item-group>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-slide-y-transition> </v-slide-y-transition>
+
     <v-container>
       <div>
         <v-row
@@ -28,24 +142,87 @@
 </template>
 
 <script>
+import draggable from "vuedraggable";
+import Module from "./Module.vue";
+import Modules from "./Modules.vue";
+import Settings from "./Settings.vue";
+
 export default {
   name: "Student",
   props: ["liveClassProxy"],
   computed: {
+    username() {
+      return this.$store.state.user.email;
+    },
     roomName() {
       return this.liveClassProxy.users[this.$store.state.user.email].room;
     },
   },
+  watch: {
+    "$store.state.user.displayName"() {
+      if (this.$store.state.class_)
+        this.liveClassProxy.users[this.username].displayName =
+          this.$store.state.user.displayName;
+    },
+    currentRoomName() {
+      if (["md", "sm", "xs"].includes(this.$vuetify.breakpoint.name))
+        this.$store.commit("toggleDrawer", false);
+    },
+    liveClassProxy() {
+      this.updateDisplay();
+    },
+  },
+
+  methods: {
+    updateDisplay() {
+      this.liveTeacherCount = Object.values(this.liveClassProxy.users).filter(
+        (u) => u.role == "teacher"
+      ).length;
+      this.liveStudentCount = Object.values(this.liveClassProxy.users).filter(
+        (u) => u.role == "student"
+      ).length;
+
+      if (this.liveClassProxy && !this.ready) {
+        this.ready = true;
+      }
+    },
+    setCurrentRoom(room_name) {
+      this.liveClassProxy.users[this.username].room = room_name;
+    },
+    enableAutoAssign() {
+      this.liveClassProxy.autoAssign = this.username;
+    },
+    userRoomChange(e) {
+      if (e.type == "end") {
+        const room_name = e.to.id.replace("$ROOM:", "");
+        const user_email = e.item.id.replace("$EMAIL:", "");
+
+        if (user_email == this.username) {
+          this.setCurrentRoom(room_name);
+        }
+      }
+    },
+  },
+
   data() {
     return {
       liveRoomProxy: {},
       ready: false,
+      liveTeacherCount: 0,
+      liveStudentCount: 0,
+      lists: {},
+      myUrl: "",
     };
   },
   async mounted() {
     this.ready = true;
   },
-  methods: {},
+  components: {
+    Settings,
+    Module,
+    draggable,
+    Modules,
+  },
 };
 </script>
 
diff --git a/server/data_web.ts b/server/data_web.ts
index 29f4f5b..a874948 100644
--- a/server/data_web.ts
+++ b/server/data_web.ts
@@ -432,6 +432,12 @@ export const router = new oak.Router()
           JSON.stringify(['users', username, 'handRaised']),
           (v: any) => v === true || v === false,
         ],
+        [
+          JSON.stringify(['users', username, 'room']),
+          (v: any) => {
+            return true
+          },
+        ],
       ]
 
       if (
@@ -525,24 +531,8 @@ async function onClassUpdated(class_id: string): Promise<boolean> {
 
     /* Send whole room to student, or whole class to teacher */
     let res: data.LiveRoom | data.LiveClass | undefined = undefined
-    if (user.role == data.RoleName.Student) {
-      res = {
-        rooms: {
-          [user.room]: {
-            ...live_class.rooms[user.room],
-            teacherPrivateState: undefined,
-          },
-        },
-        users: {
-          [user_id]: {
-            ...user,
-          },
-          /* TODO: Include stubs for other users in my room */
-        },
-      } as data.LiveClass
-    } else if (user.role == data.RoleName.Teacher) {
-      res = live_class as data.LiveClass
-    }
+    res = live_class as data.LiveClass
+
     connections.forEach((c) =>
       c.target.dispatchEvent(new oak.ServerSentEvent('update', res))
     )

From f338b1b72d5c11a1ac8d80f93766e90f6e27af00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= <andredietrich@web.de>
Date: Sat, 8 Jul 2023 08:25:42 +0200
Subject: [PATCH 2/3] 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
             ></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
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"
             >
+              <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
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<RoleName, Array<Email>>
   modules: Array<Module>
 }
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 */

From 7606e5b82f1d15ec710f71dbfde55e1dc5fef741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= <andredietrich@web.de>
Date: Sat, 8 Jul 2023 12:43:59 +0200
Subject: [PATCH 3/3] improve: Add checkbox for allowing selfassignments

---
 client/components/Settings.vue | 9 +++++++++
 client/components/Student.vue  | 8 ++++++++
 client/pages/class/_id.vue     | 1 +
 server/data.ts                 | 6 +++++-
 server/data_web.ts             | 4 ++--
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/client/components/Settings.vue b/client/components/Settings.vue
index 23fae9e..c8aeda4 100644
--- a/client/components/Settings.vue
+++ b/client/components/Settings.vue
@@ -77,6 +77,12 @@
               label="Description"
               auto-grow
             ></v-textarea>
+
+            <v-checkbox
+              v-model="selfAssign"
+              label="Enable self-assignment"
+              outlined
+            ></v-checkbox>
           </v-form>
         </v-tab-item>
         <v-tab-item>
@@ -605,6 +611,7 @@ export default {
       className: "",
       logo: "",
       description: "",
+      selfAssign: true,
       saveError: false,
       modules: [],
       pageLoading: true,
@@ -633,6 +640,7 @@ export default {
         meta: {
           logo: this.logo,
           description: this.description,
+          selfAssign: this.selfAssign,
         },
         members: {
           teacher: this.strToList(this.memberTeacher),
@@ -772,6 +780,7 @@ export default {
         this.className = class_.name;
         this.logo = class_?.meta?.logo || "";
         this.description = class_?.meta?.description || "";
+        this.selfAssign = class_?.meta?.selfAssign || false;
         this.memberTeacher = class_.members?.teacher.join("\n") || "";
         this.memberStudent = class_.members?.student?.join("\n") || "";
         this.modules =
diff --git a/client/components/Student.vue b/client/components/Student.vue
index fe302c4..01505c4 100644
--- a/client/components/Student.vue
+++ b/client/components/Student.vue
@@ -6,6 +6,7 @@
       @input="(v) => $store.commit('toggleDrawer', v)"
       app
       clipped
+      v-show="selfAssign"
     >
       <v-list-item style="margin: 10px">
         <v-list-item-content>
@@ -157,6 +158,13 @@ export default {
     roomName() {
       return this.liveClassProxy.users[this.$store.state.user.email].room;
     },
+    selfAssign() {
+      try {
+        return this.$store.state.class_.meta.selfAssign;
+      } catch (e) {}
+
+      return false;
+    },
   },
   watch: {
     "$store.state.user.displayName"() {
diff --git a/client/pages/class/_id.vue b/client/pages/class/_id.vue
index a494155..b2c052d 100644
--- a/client/pages/class/_id.vue
+++ b/client/pages/class/_id.vue
@@ -105,6 +105,7 @@ export default {
                 meta: this.$store.state.class_?.meta || {
                   logo: "",
                   description: "",
+                  selfAssign: false,
                 },
                 role: this.role,
               },
diff --git a/server/data.ts b/server/data.ts
index 9d7b4ac..80622cf 100644
--- a/server/data.ts
+++ b/server/data.ts
@@ -172,7 +172,11 @@ export enum ReservedRoomNames {
 
 export type ClassId = string
 export type ClassName = string
-export type ClassMeta = { logo: string; description: string }
+export type ClassMeta = {
+  logo: string
+  description: string
+  selfAssign: boolean
+}
 export type Class = {
   id: ClassId
   dateCreated: number
diff --git a/server/data_web.ts b/server/data_web.ts
index dfa48ef..15b1057 100644
--- a/server/data_web.ts
+++ b/server/data_web.ts
@@ -70,7 +70,7 @@ export const router = new oak.Router()
         dateCreated: class_.dateCreated,
         createdBy: class_.createdBy,
         name: class_.name,
-        meta: class_.meta || { logo: '', description: '' },
+        meta: class_.meta || { logo: '', description: '', selfAssign: false },
         modules: class_.modules.map((m) => ({
           url: m.url,
           config: m.config,
@@ -105,7 +105,7 @@ export const router = new oak.Router()
         createdBy: ctx.state.user,
         dateCreated: new Date().getTime(),
         name: 'My New Class',
-        meta: { logo: '', description: '' },
+        meta: { logo: '', description: '', selfAssign: false },
         members: {
           teacher: [ctx.state.user],
           student: [],