From 3b2691ede67c6b7b9314508ec8f4e19453021c70 Mon Sep 17 00:00:00 2001
From: Phil Wing <philwing100@gmail>
Date: Tue, 21 Jan 2025 14:47:42 -0600
Subject: [PATCH] Fixed calendar bug, updated some data entry ui

---
 src/api.js                                    | 16 +++++++++++-----
 .../CalendarComponents/DailyCalendar.vue      | 17 ++++++-----------
 .../DashboardComponents/MultiplayerToggle.vue |  7 +++----
 src/components/ListItems/DateInput.vue        |  6 +++---
 src/components/ListItems/ListElement.vue      | 19 ++++++++++++++++---
 src/components/ListItems/MinuteInput.vue      |  4 ++--
 src/components/ListItems/TimeInput.vue        |  6 +++---
 src/components/SidebarComponents/SideBar.vue  |  2 +-
 src/date.js                                   | 12 ++++++++++++
 src/router/dashboardRoutes.js                 |  6 ++++++
 src/store.js                                  |  3 +--
 src/views/Dashboard.vue                       | 13 ++++++-------
 src/views/cssViews/Dashboard.css              |  2 ++
 13 files changed, 72 insertions(+), 41 deletions(-)
 create mode 100644 src/date.js

diff --git a/src/api.js b/src/api.js
index 26fda65..830445d 100644
--- a/src/api.js
+++ b/src/api.js
@@ -2,22 +2,28 @@
 import { instance as axios } from './axios'; // Import your configured Axios axios
 import store from './store'; // Import the Vuex store to access sessionId and other state
 
+function verify(){
+  
+}
+
 // API call to create a new list
 export async function createList(listData) {
   const { sessionId } = store.state;
-
-  console.log(axios);
-
+  console.log("sessionId: "+sessionId);
+  //console.log(axios);
 
   if (!sessionId) {
     throw new Error('No session ID found. User may not be authenticated.');
   }
 
+
+
   try {
     const response = await axios.post(
       '/lists/',
-      listData,
-      { headers: { 'Authorization': `Bearer ${sessionId}` } }
+      { headers: { 'Authorization': `Bearer ${sessionId}` },
+      body: JSON.stringify(listData),
+     },
     );
     return response.data;
   } catch (error) {
diff --git a/src/components/CalendarComponents/DailyCalendar.vue b/src/components/CalendarComponents/DailyCalendar.vue
index e1cd532..bfe0f66 100644
--- a/src/components/CalendarComponents/DailyCalendar.vue
+++ b/src/components/CalendarComponents/DailyCalendar.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import {getTodayDate} from '../../date.js';
 export default {
   name: "DailyCalendar",
   props: {
@@ -38,14 +39,12 @@ export default {
 
   computed: {
     combinedEvents() {
-      const today = this.getTodayDate();
+      const today = getTodayDate();
       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);
     },
   },
@@ -70,6 +69,8 @@ export default {
     },
 
     getEventStyle(event) {
+      console.log(event);
+      console.log(event.scheduledTime);
       const startHour = this.parseTime(event.scheduledTime);
       let endHour = startHour + event.taskTimeEstimate / 60;
 
@@ -98,16 +99,10 @@ export default {
       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");
-      return `${year}-${month}-${day}`; // Format: YYYY-MM-DD
-    },
-
     // Updated parseTime method to handle various formats like '2:00pm', '09:59am', '9:59am'
     parseTime(time) {
+      if(time==null)
+        time=Date.now().toString();
       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
diff --git a/src/components/DashboardComponents/MultiplayerToggle.vue b/src/components/DashboardComponents/MultiplayerToggle.vue
index 658ff23..b7b6753 100644
--- a/src/components/DashboardComponents/MultiplayerToggle.vue
+++ b/src/components/DashboardComponents/MultiplayerToggle.vue
@@ -8,7 +8,7 @@
     <label class="slider-label">{{ label }}</label>
     <div class="slider" @click="toggleSlider" :aria-checked="isChecked" role="switch">
       <!--Needs to switch between an icon of one person and multiple -->
-      <div class="slider-tab" :class="{ 'slider-checked': isChecked }">{{ isChecked ? 'Yes' : 'No' }}</div>
+      <div class="slider-tab" :class="{ 'slider-checked': isChecked }">{{ isChecked ? Yes : No }}</div>
     </div>
   </div>
 </template>
@@ -18,7 +18,7 @@ export default {
   props: {
     label: {
       type: String,
-      default: 'Yes/No',
+      default: '',
     },
     modelValue: {
       type: Boolean,
@@ -38,8 +38,7 @@ export default {
   methods: {
     emitSliderChange() {
       this.$emit('update:modelValue', this.isChecked); // Emit for v-model binding
-      console.log("toggling");
-    },
+    },  
     toggleSlider() {
       this.isChecked = !this.isChecked;
       this.emitSliderChange(); // Emit the change
diff --git a/src/components/ListItems/DateInput.vue b/src/components/ListItems/DateInput.vue
index 75dbbcb..7efec01 100644
--- a/src/components/ListItems/DateInput.vue
+++ b/src/components/ListItems/DateInput.vue
@@ -155,9 +155,9 @@ export default {
 }
 
 .date-input {
-  background-color: #1e1e1e;
-  color: #cfcfcf;
-  border: 1px solid #4a4a4a;
+  background-color: #343541;
+  color: white;
+  border: 1px solid white;
   border-radius: 4px;
   padding: 8px;
   width: 90%;
diff --git a/src/components/ListItems/ListElement.vue b/src/components/ListItems/ListElement.vue
index 52752bf..262c6c1 100644
--- a/src/components/ListItems/ListElement.vue
+++ b/src/components/ListItems/ListElement.vue
@@ -2,7 +2,7 @@
   <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 v-if="!multiplayer" class="input-grid">
       <div class='title' :contenteditable="parentPage !== 'dashboard'" ref="titleInput" @keydown.enter.prevent=""
         spellcheck="false">
         {{ listName }}
@@ -79,6 +79,10 @@ export default {
     listName: {
       type: String,
       required: false
+    },
+    multiplayer: {
+      type: Boolean,
+      required: false 
     }
   },
   data() {
@@ -128,6 +132,10 @@ export default {
   },
   mounted() {
 
+  },
+  unmounted(){
+    this.itemsArray.length = 0;
+    this.emitList();
   },
   components: {
     DateInput,
@@ -176,6 +184,11 @@ export default {
     saveList() {
       //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.emitList();
+    },
+    emitList(){
       this.$emit("update:modelValue", this.itemsArray);
     },
     newList() {
@@ -184,7 +197,7 @@ export default {
         list_description: this.listDescription,
         list_items: JSON.stringify([
           {
-            item_description: "Example item",
+            item_description: "Exampleee item",
             item_duration: 30,
             recurring_item: false,
           },
@@ -212,7 +225,7 @@ export default {
       this.itemsArray.push(this.createTestItem("Bruh2"));
 
       this.saveList();
-      //this.newList();
+      this.newList();
       //Call api get and load initial list
 
     },
diff --git a/src/components/ListItems/MinuteInput.vue b/src/components/ListItems/MinuteInput.vue
index ce939a6..c659019 100644
--- a/src/components/ListItems/MinuteInput.vue
+++ b/src/components/ListItems/MinuteInput.vue
@@ -68,9 +68,9 @@ export default {
 }
 
 .minute-input-field {
-  background-color: #1e1e1e;
+  background-color: #343541;
   color: #cfcfcf;
-  border: 1px solid #4a4a4a;
+  border: 1px solid white;
   border-radius: 4px;
   padding: 8px;
   width: 90%;
diff --git a/src/components/ListItems/TimeInput.vue b/src/components/ListItems/TimeInput.vue
index 167ad75..e69107a 100644
--- a/src/components/ListItems/TimeInput.vue
+++ b/src/components/ListItems/TimeInput.vue
@@ -153,9 +153,9 @@ export default {
 }
 
 .time-input {
-  background-color: #1e1e1e;
-  color: #cfcfcf;
-  border: 1px solid #4a4a4a;
+  background-color: #343541;
+  color: white;
+  border: 1px solid white;
   border-radius: 4px;
   padding: 8px;
   width: 80%;
diff --git a/src/components/SidebarComponents/SideBar.vue b/src/components/SidebarComponents/SideBar.vue
index 1f7debe..916548b 100644
--- a/src/components/SidebarComponents/SideBar.vue
+++ b/src/components/SidebarComponents/SideBar.vue
@@ -29,7 +29,7 @@ export default {
      // { path: '/Lists', label: 'Lists' },
      // { path: '/Learn', label: 'Learn' },
      // { path: '/Type', label: 'Type' },
-     // { path: '/About-me', label: 'About Me' },
+      { path: '/About-me', label: 'About Me' },
     //  { path: '/Settings', label: 'Settings' },
       { path: '/Login', label: 'Login' },
     ];
diff --git a/src/date.js b/src/date.js
new file mode 100644
index 0000000..e2de85e
--- /dev/null
+++ b/src/date.js
@@ -0,0 +1,12 @@
+
+
+export function 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");
+    return `${year}-${month}-${day}`; // Format: YYYY-MM-DD
+  }
+
+  
+  
\ No newline at end of file
diff --git a/src/router/dashboardRoutes.js b/src/router/dashboardRoutes.js
index 13c14ba..b8dec14 100644
--- a/src/router/dashboardRoutes.js
+++ b/src/router/dashboardRoutes.js
@@ -1,4 +1,5 @@
 import DashboardWorld from '../views/Dashboard.vue';
+import AboutMe from '@/views/AboutMe.vue';
 
 export default [
   {
@@ -6,4 +7,9 @@ export default [
     name: 'dashboard',
     component: DashboardWorld,
   },
+    {
+      path: '/about-me',
+      name: 'AboutMe',
+      component: AboutMe
+    },
 ];
diff --git a/src/store.js b/src/store.js
index 7e30131..78686f8 100644
--- a/src/store.js
+++ b/src/store.js
@@ -10,12 +10,11 @@ const store = createStore({
   },
   mutations: {
     SET_USER(state, user) {
-      console.log('User authenticated:', user);
       state.user = user;
       state.isAuthenticated = !!user;
     },
     LOGOUT(state) {
-      console.log('User logged out');
+      //console.log('User logged out');
       state.user = null;
       state.isAuthenticated = false;
       state.sessionId = null;
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e358290..8d84961 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -3,21 +3,19 @@
     <!-- Top row: Hero text and navigation buttons -->
     <div class="top-row" :style="{ 'background-color': colors.sideBar }">
       <div class="button-container">
-        <MultiplayerToggle />
+       <!-- <MultiplayerToggle v-model="isChecked" label="Multiplayer"/>-->
         <!--Need to put these in a v-if is bound to the emits of multiplayer toggle-->
-        <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>
+            :style="{ 'background-color': colors.background }">&lt;&lt;</div>
+          <DateInput :style="{margin:'0px' }" @date-selected="handleDueDateChange" :initialDate="currentDate"/>
+          <div class="bigButton" id="nextDay" :style="{ 'background-color': colors.background }">>></div>
       </div>
     </div>
 
     <div class="page-container" :style="{ 'background-color': colors.background }">
       <div class="lists-container">
         <ListElement listName="Backburner" v-model="backburner" />
-        <ListElement listName="Daily List" v-model="dailyList" />
+        <ListElement listName="Daily List" v-model="dailyList" :multiplayer="isChecked"/>
         <DailyCalendar v-model:list1="backburner" v-model:list2="dailyList" />
       </div>
     </div>
@@ -48,6 +46,7 @@ export default {
       dailyList: [],
       backburner: [],
       currentDate: 0,
+      isChecked: false,
     };
   },
   watch: {
diff --git a/src/views/cssViews/Dashboard.css b/src/views/cssViews/Dashboard.css
index 05d1317..528f5cb 100644
--- a/src/views/cssViews/Dashboard.css
+++ b/src/views/cssViews/Dashboard.css
@@ -23,6 +23,7 @@ html, body {
 
 .button-container {
   display: flex;
+  flex-direction:row;
   gap: 20px;
 }
 
@@ -34,6 +35,7 @@ html, body {
   cursor: pointer;
   transition: background-color 0.3s;
   user-select: none;
+  display:flex;
 }
 
 .bigButton:hover {