From 42197bcf05a0572a17d2eaad8cb3c6f7102757ea Mon Sep 17 00:00:00 2001
From: philwing100 <philwing100@gmail.com>
Date: Fri, 6 Dec 2024 14:40:33 -0600
Subject: [PATCH] Calendar now responsive to todo list items

---
 .../CalendarComponents/DailyCalendar.vue      | 151 ++++++++++--------
 src/components/ListItems/ListElement.vue      |  82 +++++++---
 src/components/ListItems/MinuteInput.vue      |   2 +-
 src/views/Dashboard.vue                       |  44 +++--
 4 files changed, 173 insertions(+), 106 deletions(-)

diff --git a/src/components/CalendarComponents/DailyCalendar.vue b/src/components/CalendarComponents/DailyCalendar.vue
index 153db73..e1cd532 100644
--- a/src/components/CalendarComponents/DailyCalendar.vue
+++ b/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,82 +21,112 @@
 
 <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
@@ -114,15 +134,17 @@ export default {
 
       // 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,10 +185,11 @@ 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;
@@ -174,11 +197,7 @@ export default {
   text-overflow: ellipsis;
 }
 
-.event:hover {  
-  background-color: #388e3c;
-}
-
-.completed {
-  text-decoration: line-through;
+.event:hover {
+  background-color: blue;
 }
 </style>
diff --git a/src/components/ListItems/ListElement.vue b/src/components/ListItems/ListElement.vue
index 1928402..9eaf646 100644
--- a/src/components/ListItems/ListElement.vue
+++ b/src/components/ListItems/ListElement.vue
@@ -1,12 +1,11 @@
 <template>
-  <!-- Include Font Awesome CDN in your HTML -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
   <div class="template-container">
     <div class="input-grid">
       <div class='title' :contenteditable="parentPage !== 'dashboard'" ref="titleInput" @keydown.enter.prevent=""
         spellcheck="false">
-        {{ title }}
+        {{ listName }}
       </div>
 
       <div>
@@ -23,7 +22,7 @@
         <MinuteInput v-if="itemsArray[selectedItemIndex].scheduledCheckbox"
           v-model="itemsArray[selectedItemIndex].taskTimeEstimate" />
       </div>
-      <BooleanSlider v-model="itemsArray[selectedItemIndex].recurringTask" label="Recurring Task" />
+      <!--<BooleanSlider v-model="itemsArray[selectedItemIndex].recurringTask" label="Recurring Task" />-->
       <div v-if="itemsArray[selectedItemIndex].recurringTask">Recurring task frequency (days of the week popup)</div>
       <div v-if="itemsArray[selectedItemIndex].recurringTask">Recurring task end date</div>
       <!--<div v-if="pageIsNotDashboard">List type display</div>-->
@@ -75,6 +74,11 @@ import './ListElement.css';
 export default {
   name: 'ListElement',
   props: {
+    modelValue: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
     listName: {
       type: String,
       required: false
@@ -84,6 +88,8 @@ export default {
     return {
       //All of these need defaults or some kind of computed properties as defaults maybe
       title: "Title", //this.listName,
+      itemsArray: [], // Initialize from parent data
+      selectedItemIndex: 0,
       listType: null,
       listDescription: "",
       parentPage: 'dashboard',
@@ -106,8 +112,25 @@ export default {
       dueDate: 0,
     };
   },
+  watch: {
+    modelValue(newValue) {
+      this.itemsArray = [...newValue];
+    },
+    // Emit changes to itemsArray back to the parent
+    /*  itemsArray: {
+        handler(newItems) {
+          this.$emit('update:modelValue', newItems);
+        },
+        immediate: true,
+        deep: true, // Watch deeply for changes in array content
+      },*/
+  },
   created() {
     this.loadInitialData();
+
+  },
+  mounted() {
+
   },
   components: {
     DateInput,
@@ -121,25 +144,19 @@ export default {
   },
   methods: {
     saveEditableText(index, event) {
-      /*let newText = event.target.innerText;
+      // Get the text content from the contenteditable element
+      let newText = event.target.innerText.trim();
 
-
-      //Limit text length to 500 chars as validation
+      // Optional: Limit the text length to 500 characters
       if (newText.length > 500) {
         newText = newText.substring(0, 500);
-        console.log("over 2 chars");
       }
-      event.target.innerText = newText;
-      this.itemsArray[index].textString = newText;
 
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.setStart(event.target.childNodes[0], this.itemsArray[index].textString.length);
-      range.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(range);
+      // Update the text in the itemsArray
+      this.itemsArray[index].textString = newText;
 
-      this.saveList();*/
+      // Call saveList to emit the updated itemsArray
+      this.saveList();
     },
     completeItem(index) {
       if (this.itemsArray[index].textString != null && this.itemsArray[index].textString != '') {
@@ -148,7 +165,9 @@ export default {
       this.removeItemByIndex(index);
     },
     saveList() {
-      //Need to add some debounce time 750 ms to only call the api once every 3/4s second and not spam the backend.
+      //LATER Need to add some debounce time maybe 750 ms to only call the api once every 3/4s second and not spam the backend.
+      //LATER Should also do the async call to save to the backend
+      this.$emit("update:modelValue", this.itemsArray);
     },
     newList() {
       const listData = {
@@ -179,8 +198,12 @@ export default {
       if (!this.itemsArray || this.itemsArray.length === 0) {
         this.itemsArray.push(this.createNewItem(''));
       }
+      this.itemsArray.push(this.createTestItem("Bruh"));
+      this.itemsArray.push(this.createTestItem("Bruh1"));
+      this.itemsArray.push(this.createTestItem("Bruh2"));
 
-      this.newList();
+      this.saveList();
+      //this.newList();
       //Call api get and load initial list
 
     },
@@ -188,19 +211,32 @@ export default {
       //future makes api call to get this user's default values 
 
     },
+    createTestItem(text) {
+      return {
+        textString: text || '',
+        scheduledCheckbox: true,
+        scheduledDate: '2024-12-06',
+        scheduledTime: "9:00 PM",
+        taskTimeEstimate: "30",
+        recurringTask: false,
+        recurringTaskEndDate: null,
+        dueDateCheckbox: false,
+        dueDate: null,
+        complete: false,
+      };
+    },
     createNewItem(text) {
       return {
-        textString: "",
+        textString: text || '',
         scheduledCheckbox: false,
         scheduledDate: null,
         scheduledTime: null,
         taskTimeEstimate: 0,
         recurringTask: false,
         recurringTaskEndDate: null,
-        addToCalendarCheckbox: false,
         dueDateCheckbox: false,
         dueDate: null,
-        completed: false,
+        complete: false,
       };
     },
     createItemWithExistingValues(text) {
@@ -216,7 +252,7 @@ export default {
         addToCalendarCheckbox: this.addToCalendarCheckbox,
         dueDateCheckbox: this.dueDateCheckbox,
         dueDate: this.dueDate,
-        completed: false,
+        complete: false,
       }
     },
     dragStart(index) {
@@ -260,6 +296,8 @@ export default {
           }
         }
       });
+      const focusedItem = this.itemsArray[index];
+      this.saveList();
     },
     handleEnter(index, event) {
       const text = event.target.innerText;
diff --git a/src/components/ListItems/MinuteInput.vue b/src/components/ListItems/MinuteInput.vue
index 6fb41b2..ce939a6 100644
--- a/src/components/ListItems/MinuteInput.vue
+++ b/src/components/ListItems/MinuteInput.vue
@@ -30,7 +30,7 @@ export default {
   methods: {
     validateInput(event) {
       const num = Number(event.target.value);
-      this.minutes = (num > 0 ? num : '');
+      this.minutes = (1440>num > 0 ? num : '');
 
       // Emit update:modelValue to enable two-way binding
       this.$emit('update:modelValue', String(this.minutes));
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8e990a3..8cb983e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -3,7 +3,8 @@
     <!-- Top row: Hero text and navigation buttons -->
     <div class="top-row" :style="{ 'background-color': colors.sideBar }">
       <div class="button-container">
-        <div class="bigButton" id="previousDay" @click="decrementDay" :style="{ 'background-color': colors.background }">Previous Day</div>
+        <div class="bigButton" id="previousDay" @click="decrementDay"
+          :style="{ 'background-color': colors.background }">Previous Day</div>
         <!--<DateInput  @date-selected="handleDueDateChange" :initialDate="currentDate"/>-->
         <div class="bigButton" id="nextDay" :style="{ 'background-color': colors.background }">Next Day</div>
       </div>
@@ -11,11 +12,17 @@
 
     <div class="page-container" :style="{ 'background-color': colors.background }">
       <div class="lists-container">
-        <ListElement listName="Backburner"/>
-        <ListElement listName="Daily List"/>
+        <ListElement
+          listName="Backburner"
+          v-model="backburner"
+        />
+        <ListElement
+          listName="Daily List"
+          v-model="dailyList"
+        />
+        <DailyCalendar v-model:list1="backburner" v-model:list2="dailyList" />
       </div>
     </div>
-    
   </div>
 </template>
 
@@ -38,30 +45,33 @@ export default {
   data() {
     return {
       colors: colors,
-      completedAllTasks: [],   // Completed tasks from All Tasks
-      pendingAllTasks: [],     // Pending tasks from All Tasks
-      completedDailyList: [],  // Completed tasks from Daily List
-      pendingDailyList: [],    // Pending tasks from Daily List
+      dailyList: [],
+      backburner: [],
       currentDate: 0,
     };
   },
+  watch: {
+  backburner(newVal) {
+    //console.log('Backburner list updated:', newVal);
+  },
+  dailyList(newVal) {
+    //console.log('Daily list updated:', newVal);
+  }
+},
   methods: {
-    handleTaskUpdates(updatedTasks, listName) {
-
-    },
-    handleTaskClicked(taskData) {
-
-    },
     handleDateChange(date) {
-      this.scheduledDate = date; // Update the parent component's selectedDate
+      this.scheduledDate = date; 
       this.itemsArray[this.selectedItemIndex].scheduledDate = date;
     },
-    decrementDay(){
+    decrementDay() {
       console.log("0");
     },
-    incrementDay(){
+    incrementDay() {
 
     },
+    onEventClicked({ event, listType, index }) {
+      console.log(`Event clicked:`, event);
+    },
   }
 };
 </script>