feat: complete implementation of classroom reservation (#574)

* refactor(minor): changed date and time format in formData

* feat: reservation record to database

* feat: managing reservations

* feat: full features of reservation

Author: q1zhen

.npmrc

@@ -0,0 +1,85 @@
+const enums = {
+  days: {
+    values: [
+      'SUNDAY',
+      'MONDAY',
+      'TUESDAY',
+      'WEDNESDAY',
+      'THURSDAY',
+      'FRIDAY',
+      'SATURDAY',
+    ],
+    map: {
+      SUNDAY: '周日',
+      MONDAY: '周一',
+      TUESDAY: '周二',
+      WEDNESDAY: '周三',
+      THURSDAY: '周四',
+      FRIDAY: '周五',
+      SATURDAY: '周六',
+    },
+  },
+  periods: {
+    values: [
+      'MORNING',
+      'ONE',
+      'TWO',
+      'THREE',
+      'FOUR',
+      'NOON',
+      'FIVE',
+      'SIX',
+      'SEVEN',
+      'EIGHT',
+      'NINE',
+      'AFTERCLASS',
+    ],
+    map: {
+      MORNING: '早读',
+      ONE: '第 1 节课',
+      TWO: '第 2 节课',
+      THREE: '第 3 节课',
+      FOUR: '第 4 节课',
+      NOON: '午休',
+      FIVE: '第 5 节课',
+      SIX: '第 6 节课',
+      SEVEN: '第 7 节课',
+      EIGHT: '第 8 节课',
+      NINE: '第 9 节课',
+      AFTERCLASS: '放学后',
+    },
+  },
+}
+
+function time2period(hhmm: number, day: string) {
+  const timePeriods = [
+    { name: 'ONE', start: 815, end: 855 },
+    { name: 'TWO', start: 855, end: 945 },
+    { name: 'THREE', start: 945, end: 1035 },
+    { name: 'FOUR', start: 1035, end: 1125 },
+    { name: 'NOON', start: 1125, end: 1230 },
+    { name: 'FIVE', start: 1230, end: 1310 },
+    { name: 'SIX', start: 1310, end: 1400 },
+    { name: 'SEVEN', start: 1400, end: 1450 },
+    { name: 'EIGHT', start: 1450, end: 1540 },
+    { name: 'NINE', start: 1540, end: 1630 },
+  ]
+  if (hhmm < timePeriods[0].start) {
+    return 'MORNING'
+  }
+  else if (day === 'FRIDAY' && hhmm >= timePeriods[8].end) {
+    return 'AFTERCLASS'
+  }
+  else if (hhmm >= timePeriods[9].end) {
+    return 'AFTERCLASS'
+  }
+  else {
+    for (const period of timePeriods) {
+      if (period.start <= hhmm && hhmm < period.end) {
+        return period.name
+      }
+    }
+  }
+}
+
+export { enums, time2period }

components/custom/enum2str.ts

@@ -46,6 +46,18 @@ import { Button } from '@/components/ui/button'
               预约教室
             </Button>
           </NuxtLink>
+          <NuxtLink to="/manage/manage">
+            <Button :variant="$route.name === 'manage-manage' ? 'secondary' : 'ghost'" class="w-full justify-start">
+              <Icon class="mr-2 h-4 w-4" name="material-symbols:calendar-today-outline" />
+              管理预约
+            </Button>
+          </NuxtLink>
+          <NuxtLink to="/manage/statuses">
+            <Button :variant="$route.name === 'manage-statuses' ? 'secondary' : 'ghost'" class="w-full justify-start">
+              <Icon class="mr-2 h-4 w-4" name="material-symbols:calendar-today-outline" />
+              教室状态
+            </Button>
+          </NuxtLink>
           <NuxtLink to="/manage/record">
             <Button :variant="$route.name === 'manage-record' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="charm:tick-double" />

components/custom/sidebar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

components/ui/alert/Alert.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

components/ui/alert/AlertTitle.vue

@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

components/ui/alert/index.ts

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>

components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  HoverCardContent,
+  type HoverCardContentProps,
+  HoverCardPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>