Calendar now responsive to todo list items

Author: philwing100

src/components/CalendarComponents/DailyCalendar.vue

@@ -3,26 +3,16 @@
     <div class="calendar-container" ref="calendarContainer">
       <div class="time-slots">
         <!-- Generate time slots (24 hours) -->
-        <div
-          v-for="hour in 24"
-          :key="hour"
-          class="time-slot"
-          :style="{ top: calculateTopPosition(hour) }"
-        >
+        <div v-for="hour in 24" :key="hour" class="time-slot" :style="{ top: calculateTopPosition(hour) }">
           {{ formatHour(hour) }}
         </div>
       </div>
 
       <div class="events">
-        <!-- Render pending and completed tasks dynamically from different lists -->
-        <div
-          v-for="(task, index) in combinedEvents"
-          :key="task.id"
-          class="event"
-          :style="getEventStyle(task)"
-          @click="handleEventClick(task, index)"
-        >
-          <span :class="{ completed: task.completed }">{{ task.title }}</span>
+        <!-- Render events dynamically -->
+        <div v-for="(event, index) in combinedEvents" :key="`${event.listType}-${index}`" class="event"
+          :style="getEventStyle(event)" @click="handleEventClick(event, index)">
+          <span>{{ event.textString }}</span>
         </div>
       </div>
     </div>
@@ -31,98 +21,130 @@
 
 <script>
 export default {
-  name: 'DailyCalendar',
+  name: "DailyCalendar",
   props: {
-    completedAllTasks: {
+    list1: {
       type: Array,
-      required: true
+      required: true,
+      default: () => [],
     },
-    pendingAllTasks: {
+    list2: {
       type: Array,
-      required: true
+      required: true,
+      default: () => [],
     },
-    completedDailyList: {
-      type: Array,
-      required: true
-    },
-    pendingDailyList: {
-      type: Array,
-      required: true
-    }
   },
+  emits: ["update:list1", "update:list2", "event-clicked"],
+
   computed: {
     combinedEvents() {
-      // Combine all task arrays and filter by today's date
       const today = this.getTodayDate();
-      return [
-        ...this.pendingAllTasks.filter(task => task.scheduledDate === today),
-        ...this.completedAllTasks.filter(task => task.scheduledDate === today),
-        ...this.pendingDailyList.filter(task => task.scheduledDate === today),
-        ...this.completedDailyList.filter(task => task.scheduledDate === today)
+      const events = [
+        ...this.list1.map((event) => ({ ...event, listType: "list1" })),
+        ...this.list2.map((event) => ({ ...event, listType: "list2" })),
       ];
-    }
+
+      console.log('Computed Combined Events:', events.filter((event) => event.scheduledDate === today));
+
+      return events.filter((event) => event.scheduledDate === today);
+    },
+  },
+
+  watch: {
+    list1(newVal) {
+      //console.log('List1 (Backburner) updated:', newVal);
+    },
+    list2(newVal) {
+      //console.log('List2 (Daily List) updated:', newVal);
+    },
   },
+
   methods: {
     calculateTopPosition(hour) {
-      // Ensure this function works to calculate the top position based on the hour
       return `${hour * 60}px`;
     },
     formatHour(hour) {
-      const ampm = hour >= 12 ? 'PM' : 'AM';
+      const ampm = hour >= 12 ? "PM" : "AM";
       const formattedHour = hour % 12 || 12;
       return `${formattedHour} ${ampm}`;
     },
-    getEventStyle(task) {
-      const startHour = this.parseTime(task.startTime);
-      const endHour = this.parseTime(task.endTime);
+
+    getEventStyle(event) {
+      const startHour = this.parseTime(event.scheduledTime);
+      let endHour = startHour + event.taskTimeEstimate / 60;
+
+      // Ensure the event doesn't go beyond the last hour of the day (24 hours) and a little less so that it wraps nicely
+      if (endHour > 24.75) {
+        endHour = 24.75;
+      }
+
       const topPosition = startHour * 60; // Top position in px
-      const height = (endHour - startHour) * 60; // Event height in px
+      let height = (endHour - startHour) * 60; // Event height in px
+
+      const minHeight = 25;
+      if (height < minHeight) {
+        height = minHeight;
+      }
 
       return {
         top: `${topPosition}px`,
         height: `${height}px`,
-        backgroundColor: task.completed ? '#888888' : '#4caf50' // Gray if completed
+        backgroundColor: "#4caf50", // Default color
       };
+
     },
-    handleEventClick(task, index) {
-      // Emit the task's index and its list type to the parent (Dashboard)
-      const listType = this.getListType(task);
-      this.$emit('task-clicked', { taskIndex: index, listType });
-    },
-    getListType(task) {
-      if (this.pendingAllTasks.includes(task)) return 'pendingAllTasks';
-      if (this.completedAllTasks.includes(task)) return 'completedAllTasks';
-      if (this.pendingDailyList.includes(task)) return 'pendingDailyList';
-      if (this.completedDailyList.includes(task)) return 'completedDailyList';
-      return '';
+
+    handleEventClick(event, index) {
+      this.$emit("event-clicked", { event, listType: event.listType, index });
     },
+
     getTodayDate() {
       const today = new Date();
       const year = today.getFullYear();
-      const month = (today.getMonth() + 1).toString().padStart(2, '0');
-      const day = today.getDate().toString().padStart(2, '0');
+      const month = (today.getMonth() + 1).toString().padStart(2, "0");
+      const day = today.getDate().toString().padStart(2, "0");
       return `${year}-${month}-${day}`; // Format: YYYY-MM-DD
     },
+
+    // Updated parseTime method to handle various formats like '2:00pm', '09:59am', '9:59am'
     parseTime(time) {
-      const [hours, minutes] = time.split(':').map(Number);
+      const regex = /(\d{1,2}):(\d{2})(am|pm)/i;
+      const match = time.trim().match(regex);
+      if (!match) return 0; // Default if time format is invalid
+
+      let [_, hours, minutes, period] = match;
+      hours = parseInt(hours, 10);
+      minutes = parseInt(minutes, 10);
+
+      // Convert to 24-hour time format
+      if (period.toLowerCase() === 'pm' && hours !== 12) {
+        hours += 12;
+      } else if (period.toLowerCase() === 'am' && hours === 12) {
+        hours = 0;
+      }
+
+      // Return the time in hours (decimal format)
       return hours + minutes / 60;
     },
+
     scrollToDefaultTime() {
       const currentTime = new Date();
       const defaultScrollTime = currentTime.getHours() - 1; // 1 hour before current time
       const scrollPosition = defaultScrollTime * 60; // Scroll to this position (in px)
 
       // Scroll the container to the desired position
       this.$refs.calendarContainer.scrollTop = scrollPosition;
-    }
+    },
   },
+
   mounted() {
     this.scrollToDefaultTime();
-  }
+  },
 };
 </script>
 
 <style scoped>
+/* Styles remain the same */
 .daily-calendar {
   position: relative;
   height: 100%;
@@ -163,22 +185,19 @@ export default {
   position: absolute;
   left: 20%;
   width: 60%;
-  background-color: #4caf50;
+  background-color: blue;
   color: white;
   border-radius: 4px;
-  padding: 10px;
+  padding-left: 10px;
+  padding-top:5px;
   box-sizing: border-box;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.event:hover {  
-  background-color: #388e3c;
-}
-
-.completed {
-  text-decoration: line-through;
+.event:hover {
+  background-color: blue;
 }
 </style>