Skip to content

Commit

Permalink
Students can now change their rooms manually
Browse files Browse the repository at this point in the history
  • Loading branch information
@andre-dietrich
andre-dietrich committed Jul 8, 2023
1 parent 68b3501 commit 9c33a9d
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 19 deletions.
179 changes: 178 additions & 1 deletion client/components/Student.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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>

Expand Down
26 changes: 8 additions & 18 deletions server/data_web.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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))
)
Expand Down

1 comment on commit 9c33a9d

@deno-deploy
Copy link

@deno-deploy deno-deploy bot commented on 9c33a9d Jul 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Failed to deploy:

Module not found "file:///src/dist/app.js".

Please sign in to comment.