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] 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))
     )