@vue-skuilder/platform-ui 0.1.1

package/src/components/Classrooms/ClassroomCtrlPanel.vue

@@ -0,0 +1,206 @@
+<template>
+  <div v-if="!updatePending">
+    <h1><router-link to="/classrooms">My Classrooms</router-link> / {{ classroomCfg!.name }}</h1>
+
+    <h3>
+      Join code: {{ classroomCfg!.joinCode }}
+      <router-link :to="`/classrooms/${classroomId}/code`">
+        <v-btn size="x-small" icon="mdi-fullscreen" color="accent" alt="Make Fullscreen"> </v-btn>
+      </router-link>
+    </h3>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-checkbox v-model="classroomCfg!.peerAssist" label="Allow peer instruction"></v-checkbox>
+      </v-col>
+      <v-col v-if="classroomDB" cols="12">
+        <h2>Assigned Content:</h2>
+        <h3>Quilts:</h3>
+        <ul></ul>
+        <ul>
+          <li v-for="c in _assignedCourses" :key="c.courseID">
+            {{ c.courseID }} <a @click="removeContent(c)">Remove</a>
+          </li>
+        </ul>
+        <h3>Tags:</h3>
+        <ul>
+          <li v-for="(c, i) in _assignedTags" :key="i">
+            {{ c.courseID }} - {{ c.tagID }} <a @click="removeContent(c)">Remove</a>
+          </li>
+        </ul>
+        <v-fade-transition>
+          <v-btn v-if="!addingContent" color="primary" @click="addingContent = true">
+            Assign New Content
+            <v-icon end>mdi-plus</v-icon>
+          </v-btn>
+        </v-fade-transition>
+        <v-card v-if="addingContent">
+          <v-toolbar>
+            <v-toolbar-title>Add Content</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn icon="mdi-close" color="error" @click="addingContent = false"> </v-btn>
+          </v-toolbar>
+          <v-card-text>
+            <v-select
+              v-model="selectedCourse"
+              label="Select Quilt"
+              :items="availableCourses"
+              item-title="name"
+              item-value="_id"
+              title="Select Quilt"
+            ></v-select>
+
+            <v-select
+              v-model="selectedTags"
+              label="Select Tags"
+              :items="availableTags"
+              item-title="name"
+              item-value="name"
+              multiple
+              chips
+              hint=""
+              persistent-hint
+            ></v-select>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-btn v-if="selectedCourse !== ''" color="primary" @click="assignContent">
+              {{ selectedTags.length == 0 ? 'Add Entire Quilt' : 'Add Tags' }}
+              <v-icon end>mdi-plus</v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import moment from 'moment';
+import { TeacherClassroomDBInterface, AssignedContent, AssignedTag, Tag, getDataLayer } from '@vue-skuilder/db';
+import { ClassroomConfig, CourseConfig } from '@vue-skuilder/common';
+import { defineComponent } from 'vue';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+
+export default defineComponent({
+  name: 'ClassroomCtrlPanel',
+
+  props: {
+    classroomId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      classroomCfg: null as ClassroomConfig | null,
+      classroomDB: null as TeacherClassroomDBInterface | null,
+      assignedContent: [] as AssignedContent[],
+      nameRules: [
+        (value: string): string | boolean => {
+          const max = 30;
+          return value.length > max ? `Course name must be ${max} characters or less` : true;
+        },
+      ],
+      updatePending: true,
+      addingContent: false,
+      availableCourses: [] as CourseConfig[],
+      selectedCourse: '',
+      availableTags: [] as Tag[],
+      selectedTags: [] as string[],
+    };
+  },
+
+  computed: {
+    _assignedCourses(): AssignedContent[] {
+      return this.assignedContent.filter((c) => c.type === 'course');
+    },
+    _assignedTags(): AssignedTag[] {
+      return this.assignedContent.filter((c) => c.type === 'tag') as AssignedTag[];
+    },
+  },
+
+  watch: {
+    async selectedCourse() {
+      if (this.selectedCourse) {
+        // Get course DB from data layer
+        const courseDB = getDataLayer().getCourseDB(this.selectedCourse);
+        // Get tags from course DB
+        const tagResponse = await courseDB.getCourseTagStubs();
+        this.availableTags = tagResponse.rows.map((row) => row.doc!);
+      } else {
+        this.availableTags = [];
+      }
+    },
+  },
+
+  async created() {
+    try {
+      // Get classroom DB from data layer
+      this.classroomDB = (await getDataLayer().getClassroomDB(
+        this.classroomId,
+        'teacher'
+      )) as TeacherClassroomDBInterface;
+      this.assignedContent = await this.classroomDB.getAssignedContent();
+      this.classroomCfg = this.classroomDB.getConfig();
+
+      console.log(`[ClassroomCtrlPanel] Route loaded w/ (prop) _id: ${this.classroomId}`);
+      console.log(`[ClassroomCtrlPanel] Config: ${JSON.stringify(this.classroomCfg)}`);
+
+      // Get course list from data layer
+      this.availableCourses = await getDataLayer().getCoursesDB().getCourseList();
+
+      this.updatePending = false;
+    } catch (error) {
+      console.error('[ClassroomCtrlPanel] Error initializing:', error);
+    }
+  },
+
+  methods: {
+    async assignContent() {
+      if (!this.classroomDB) return;
+      const u = await getCurrentUser();
+
+      if (this.selectedTags.length === 0) {
+        await this.classroomDB.assignContent?.({
+          assignedOn: moment(),
+          activeOn: moment(),
+          type: 'course',
+          courseID: this.selectedCourse,
+          assignedBy: u.getUsername(),
+        });
+      } else {
+        await Promise.all(
+          this.selectedTags.map((tag) =>
+            this.classroomDB!.assignContent?.({
+              assignedOn: moment(),
+              activeOn: moment(),
+              type: 'tag',
+              courseID: this.selectedCourse,
+              tagID: tag,
+              assignedBy: u.getUsername(),
+            })
+          )
+        );
+      }
+
+      this.assignedContent = await this.classroomDB.getAssignedContent();
+      this.addingContent = false;
+      this.selectedCourse = '';
+      this.selectedTags = [];
+      this.availableTags = [];
+    },
+
+    async removeContent(c: AssignedContent) {
+      if (this.classroomDB && this.classroomDB.removeContent) {
+        await this.classroomDB.removeContent(c);
+        this.assignedContent = await this.classroomDB.getAssignedContent();
+      }
+    },
+
+    async submit() {
+      this.updatePending = true;
+    },
+  },
+});
+</script>

package/src/components/Classrooms/CreateClassroom.vue

@@ -0,0 +1,159 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary">
+      <v-card-title class="text-h6 font-weight-regular">Start a New Class</v-card-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="clearFormAndDismiss">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-form>
+      <v-container>
+        <v-row>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field
+              v-model="name"
+              counter="30"
+              :rules="nameRules"
+              label="Class Name"
+              required
+              hint="Eg: Smith, Chemistry, Period 3"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-checkbox v-model="peerAssist" label="Allow peer instruction"></v-checkbox>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-select
+              v-model="birthYear"
+              :items="birthYears"
+              label="Approximate Birth Year of Students"
+              item-title="text"
+              item-value="value"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-btn :loading="updatePending" color="primary" @click="submit">Create This Class</v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+  </v-card>
+</template>
+
+<script lang="ts">
+import moment from 'moment';
+import Mousetrap from 'mousetrap';
+import { log } from '@vue-skuilder/common';
+import { Status, ClassroomConfig, CreateClassroom, ServerRequestType } from '@vue-skuilder/common';
+import serverRequest from '../../server';
+import { alertUser } from '@vue-skuilder/common-ui';
+import { defineComponent } from 'vue';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+
+export default defineComponent({
+  emits: ['ClassroomEditingComplete'],
+
+  data() {
+    return {
+      mousetrap: new Mousetrap(this.$el),
+      peerAssist: true,
+      name: '',
+      birthYear: undefined as number | undefined,
+      id: '',
+      nameRules: [
+        (value: string): string | boolean => {
+          const max = 30;
+          if (value.length > max) {
+            return `Course name must be ${max} characters or less`;
+          } else {
+            return true;
+          }
+        },
+      ],
+      description: '',
+      banner: undefined as Blob | undefined,
+      thumb: undefined as Blob | undefined,
+      updatePending: false,
+      birthYears: [] as Array<{
+        text: string;
+        value: number;
+      }>,
+    };
+  },
+
+  created() {
+    this.mousetrap.bind('esc', this.clearFormAndDismiss);
+
+    const year: number = moment().year();
+
+    this.birthYears.push({
+      text: `< ${year - 17} (Adult Students)`,
+      value: 0,
+    });
+
+    for (let age = 17; age >= 6; age--) {
+      this.birthYears.push({
+        text: `${year - age} (Grade ${age - 5})`,
+        value: year - age,
+      });
+    }
+
+    this.birthYears.push({
+      text: `>${year - 6} (K or younger)`,
+      value: year - 5,
+    });
+  },
+
+  methods: {
+    async submit() {
+      this.updatePending = true;
+      const u = await getCurrentUser();
+
+      const config: ClassroomConfig = {
+        name: this.name,
+        teachers: [u.getUsername()],
+        students: [],
+        birthYear: this.birthYear,
+        classMeetingSchedule: '',
+        peerAssist: this.peerAssist,
+        joinCode: '',
+      };
+
+      log(`Class Config:
+      ${JSON.stringify(config)}`);
+
+      const result = await serverRequest<CreateClassroom>({
+        data: config,
+        type: ServerRequestType.CREATE_CLASSROOM,
+        response: null,
+        user: u.getUsername(),
+      });
+
+      if (result.response && result.response.ok) {
+        alertUser({
+          text: `Class created successfully. Join code: ${result.response.joincode}`,
+          status: Status.ok,
+        });
+
+        u.registerForClassroom(result.response.uuid, 'teacher');
+      } else {
+        alertUser({
+          text: `Failed to create class. Please try again.`,
+          status: Status.error,
+        });
+      }
+
+      this.clearFormAndDismiss();
+      this.updatePending = false;
+    },
+
+    clearFormAndDismiss() {
+      this.name = '';
+      this.description = '';
+
+      this.$emit('ClassroomEditingComplete');
+    },
+  },
+});
+</script>

package/src/components/Classrooms/JoinCode.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-container fluid class="fill-height pa-0">
+    <!-- Close button in top-right corner -->
+    <v-btn icon="mdi-close" color="red" variant="elevated" class="close-btn" @click="close"> </v-btn>
+
+    <!-- Main content -->
+    <v-row align="center" justify="center" class="fill-height">
+      <v-col cols="12" class="text-center">
+        <div v-if="!updatePending" class="join-code">
+          {{ classroomCfg?.joinCode }}
+        </div>
+        <v-progress-circular v-else indeterminate size="64"></v-progress-circular>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { log } from '@vue-skuilder/common';
+import { TeacherClassroomDBInterface, getDataLayer } from '@vue-skuilder/db';
+import { ClassroomConfig } from '@vue-skuilder/common';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'JoinCode',
+
+  props: {
+    classroomId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      classroomCfg: null as ClassroomConfig | null,
+      classroomDB: null as TeacherClassroomDBInterface | null,
+      updatePending: true,
+    };
+  },
+
+  async created() {
+    const dl = getDataLayer();
+
+    this.classroomDB = await dl.getClassroomDB(this.classroomId, 'teacher');
+    this.classroomCfg = this.classroomDB.getConfig();
+    await Promise.all([]);
+    log(`Route loaded w/ (prop) _id: ${this.classroomId}`);
+    log(`Config:
+    ${JSON.stringify(this.classroomCfg)}`);
+    this.updatePending = false;
+  },
+
+  methods: {
+    close() {
+      this.$router.back();
+    },
+  },
+});
+</script>
+
+<style>
+.close-btn {
+  position: fixed;
+  top: 80px;
+  right: 16px;
+  z-index: 100;
+}
+
+.join-code {
+  font-size: 8rem;
+  font-weight: bold;
+  line-height: 1.2;
+  letter-spacing: 0.1em;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .join-code {
+    font-size: 4rem;
+  }
+}
+</style>