v0.0.3

src/components/PlannerPage.vue

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { onBeforeUnmount } from 'vue'
+
+const props = defineProps({
   dateLabel: {
     type: String,
     required: true,
@@ -28,6 +30,10 @@ defineProps({
     type: Array,
     required: true,
   },
+  timetable: {
+    type: Array,
+    required: true,
+  },
   brand: {
     type: String,
     default: 'SORI.STUDIO',
@@ -39,7 +45,52 @@ const emit = defineEmits([
   'update:task-title',
   'toggle:task',
   'update:memo',
+  'update:timetable',
 ])
+
+let dragState = null
+
+function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
+  const nextTimetable = [...baseTimetable]
+  const rangeStart = Math.min(startIndex, endIndex)
+  const rangeEnd = Math.max(startIndex, endIndex)
+
+  for (let index = rangeStart; index <= rangeEnd; index += 1) {
+    nextTimetable[index] = nextValue
+  }
+
+  return nextTimetable
+}
+
+function startTimetableDrag(index) {
+  dragState = {
+    startIndex: index,
+    baseTimetable: [...props.timetable],
+    nextValue: !props.timetable[index],
+  }
+
+  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+}
+
+function moveTimetableDrag(index) {
+  if (!dragState) {
+    return
+  }
+
+  emit(
+    'update:timetable',
+    buildTimedRange(dragState.baseTimetable, dragState.startIndex, index, dragState.nextValue),
+  )
+}
+
+function stopTimetableDrag() {
+  dragState = null
+}
+
+window.addEventListener('pointerup', stopTimetableDrag)
+onBeforeUnmount(() => {
+  window.removeEventListener('pointerup', stopTimetableDrag)
+})
 </script>
 
 <template>
@@ -101,10 +152,12 @@ const emit = defineEmits([
               <div class="flex h-full w-[42px] items-center justify-center p-[10px]">
                 <button
                   type="button"
-                  class="block h-full w-full border border-dashed transition"
-                  :class="task.checked ? 'border-ink bg-stone-100' : 'border-ink/60'"
+                  class="flex h-full w-full items-center justify-center border border-dashed transition"
+                  :class="task.checked ? 'border-ink bg-stone-100 text-ink' : 'border-ink/60 text-transparent'"
                   @click="emit('toggle:task', index)"
-                ></button>
+                >
+                  <span class="text-sm leading-none">✓</span>
+                </button>
               </div>
             </div>
           </div>
@@ -115,7 +168,7 @@ const emit = defineEmits([
           <div class="border-t border-ink">
             <div
               v-for="(memoItem, index) in memo"
-              :key="`${memoItem}-${index}`"
+              :key="`memo-${index}`"
               class="flex h-[38px] items-center border-b"
               :class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
             >
@@ -149,7 +202,10 @@ const emit = defineEmits([
             <div
               v-for="quarter in 6"
               :key="quarter"
-              class="h-full w-[30px] border-r border-dashed border-line last:border-r-0"
+              :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
+              class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1)"
+              @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>
         </div>