Merge pull request #37 from GoGaucho/feature/courseinfoscreen

Feature/courseinfoscreen

Author: jaytan3966

src/components/Course.vue

@@ -3,12 +3,19 @@ import { watch } from 'vue'
 import { CheckIcon } from '@heroicons/vue/24/outline'
 import { get } from '../firebase.js'
 import state from '../model.js'
-const props = defineProps(['modelValue'])
-const emits = defineEmits(['update:modelValue'])
 import Wrapper from './Wrapper.vue'
 import Instructor from './Instructor.vue'
 import LabelSwitch from './LabelSwitch.vue'
 
+const props = defineProps({
+  modelValue: String,
+  quarter: {
+    type: String,
+    default: () => state.course.quarter,
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+
 // control UI
 const levels = { U: 'Undergraduate', G: 'Graduate', L: 'Lower Division', S: 'Upper Division' }
 const gradings = { null: 'optional', L: 'Letter', P: 'P/NP' }
@@ -21,18 +28,32 @@ function leaveInstructor () {
   if (!state.screen.md) instructorName = ''
 }
 
-watch(() => props.modelValue, async v => {
-  if (!v) return
-  course = {}
-  course = await get('course/' + state.course.quarter + v)
-  for (const s in course.sections) {
-    if (course.sections[s].session) {
-      isSummer = true
-      break
+watch(
+  () => [props.modelValue, props.quarter],
+  async ([v, q]) => {
+    if (!v) {
+      course = {}
+      isSummer = false
+      return
     }
-  }
-  setTimeout(() => { course.show = 1 })
-})
+
+    course = {}
+    isSummer = false
+    const quarter = q || state.course.quarter
+
+    course = await get('course/' + quarter + v)
+
+    for (const s in course.sections) {
+      if (course.sections[s].session) {
+        isSummer = true
+        break
+      }
+    }
+    setTimeout(() => { course.show = 1 })
+  },
+  { immediate: true }
+)
+
 
 function toggleFocus () {
   const k = props.modelValue

src/components/Schedule.vue

@@ -3,12 +3,12 @@ import { watch } from 'vue'
 import LabelSwitch from './LabelSwitch.vue'
 import Toggle from './Toggle.vue'
 import state from '../model.js'
-import { MapPinIcon } from '@heroicons/vue/24/outline'
+import { MapPinIcon, BookOpenIcon } from '@heroicons/vue/24/outline'
 import { useRouter } from 'vue-router'
 import { classrooms } from '../utils/locations.js'
 
 const router = useRouter()
-const props = defineProps(['pieces', 'whole'])
+const props = defineProps(['pieces', 'whole', 'quarter'])
 const ds = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
 const colors = [
@@ -86,6 +86,17 @@ const locate = location => {
   if (classrooms[location]) router.push('/map?q=' + location)
 }
 
+// Class to courseInfo redirect
+const courseInfo = (courseId, quarter) => {
+  if (courseId) 
+  router.push({
+    path: '/course',
+    query: {
+      courseId,
+      quarter
+    }})
+}
+
 setInterval(() => { date = new Date() }, 60e3)
 document.onvisibilitychange = () => { date = new Date() }
 </script>
@@ -115,14 +126,49 @@ document.onvisibilitychange = () => { date = new Date() }
         <div class="grid grid-cols-7 gap-px relative w-full overflow-y-hidden all-transition" :style="{ width: state.screen.md || !props.whole ? '140%' : '100%', height: showTime ? '976px' : '736px' }"><!-- body -->
           <div v-for="j in 112" class="all-transition bg-gray-100 hover:bg-gray-50 rounded" />
           <template v-for="p in props.pieces">
-            <div v-if="!isHide(p)" :style="pStyle(p)" class="all-transition absolute p-1 text-xs rounded-r-sm overflow-hidden"
-            @click="locate(p.location)" :class="classrooms[p.location] && 'cursor-pointer group'">
-              <MapPinIcon :class="colorMap[p.key][1]" class="w-5 h-5 absolute opacity-0 top-1 right-1 group-hover:opacity-100 transition-opacity" />
+            <div v-if="!isHide(p)" :style="pStyle(p)"
+                class="all-transition absolute p-1 text-xs rounded-r-sm overflow-hidden z-20"
+                :class="classrooms[p.location] ? 'group' : 'group'">
+
+              <div
+                class="
+                  absolute
+                  right-1
+                  top-auto bottom-1
+                  xl:top-1 xl:bottom-auto
+                  flex flex-col gap-1
+                  xl:flex-row xl:items-center
+                "
+              >
+                <BookOpenIcon
+                  @click.stop="courseInfo(p.key, props.quarter)"
+                  :class="colorMap[p.key][1]"
+                  class="
+                    w-[clamp(14px,4vw,20px)]
+                    h-[clamp(14px,4vw,20px)]
+                    opacity-0 group-hover:opacity-100
+                    hover:opacity-70
+                    z-30 transition-opacity cursor-pointer
+                  "
+                />
+                <MapPinIcon
+                  v-if="classrooms[p.location]"
+                  @click.stop="locate(p.location)"
+                  :class="colorMap[p.key][1]"
+                  class="
+                    w-[clamp(14px,4vw,20px)]
+                    h-[clamp(14px,4vw,20px)]
+                    opacity-0 group-hover:opacity-100
+                    hover:opacity-70
+                    z-30 transition-opacity cursor-pointer
+                  "
+                />
+              </div>
               <div class="font-semibold text-shadow text-[0.7rem] sm:text-xs" :class="colorMap[p.key][1]">{{ p.title || p.key }}</div>
               <div class="text-[0.6rem] sm:text-xs opacity-90" :class="colorMap[p.key][1]" v-if="showTime">{{ twelveHour ? twelvify(p.time) : p.time }}</div>
               <div class="text-[0.625rem] sm:text-xs opacity-90" :class="colorMap[p.key][1]">{{ p.location }}</div>
               <div class="all-transition absolute bottom-0 top-0 left-0 w-0.5" :class="colorMap[p.key][0]" />
-              <div class="absolute bottom-0 top-0 left-0 right-0" :class="colorMap[p.key][0]" style="opacity: 15%;"/>
+              <div class="absolute bottom-0 top-0 left-0 right-0 pointer-events-none" :class="colorMap[p.key][0]" style="opacity: 15%;"/>
             </div>
           </template>
           <div class="flex items-center absolute" :style="cStyle">

src/views/Class.vue

@@ -171,7 +171,7 @@ function removeCustom (i) {
     </div>
     <div class="w-full flex flex-wrap justify-center items-start" v-if="data" :key="q">
       <div class="flex-grow bg-white sm:p-2 sm:pb-4 lg:px-6 pb-4 rounded shadow m-0 sm:m-4 lg:mr-0" v-if="data.schedule"><!-- schedule -->
-        <Schedule :pieces="pieces" whole="1" />
+        <Schedule :pieces="pieces" :quarter='q' whole="1" />
       </div>
       <div class="m-2 w-full lg:w-72 xl:w-80"><!-- side -->
         <div :show="1" v-if="data.schedule" class="p-2">

src/views/Course.vue

@@ -10,8 +10,9 @@ import Course from '../components/Course.vue'
 import Wrapper from '../components/Wrapper.vue'
 import PanelWrapper from '../components/PanelWrapper.vue'
 import LabelSwitch from '../components/LabelSwitch.vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
+const route = useRoute()
 log('web/course')
 
 let loading = $ref(true), list = $ref(null), hideList = $ref({}), showSub = $ref({}), subjects = $ref([])
@@ -60,11 +61,24 @@ get('cache/quarter').then(data => {
   else state.course.quarter = quarters[0]
 })
 
-watch(() => state.course.quarter, v => {
-  focus = false
-  state.course.focus = cache.get('course' + v) || {}
-  fetchList()
-})
+watch(
+  () => route.query.courseId,
+  v => {
+    focus = v || ''
+  },
+  { immediate: true }
+)
+
+watch(
+  () => state.course.quarter,
+  (v, old) => {
+    if (!route.query.quarter || v !== route.query.quarter) {
+      focus = ''
+    }
+    state.course.focus = cache.get('course' + v) || {}
+    fetchList()
+  }
+)
 
 watch(() => state.course.focus, v => {
   const res = {}
@@ -73,6 +87,15 @@ watch(() => state.course.focus, v => {
   }
   cache.set('course' + state.course.quarter, res)
 }, { deep: true })
+
+watch(() => route.query.quarter, v => {
+  if (typeof v === 'string' && v !== state.course.quarter){
+    state.course.quarter=v
+  }
+},
+{immediate: true}
+)
+
 </script>
 
 <template>
@@ -119,7 +142,8 @@ watch(() => state.course.focus, v => {
           </PanelWrapper>
         </template>
       </div>
-      <Course v-model="focus" />
+      <Course v-model="focus"
+      :quarter="state.course.quarter"/>
     </div>
   </div>
 </template>