Fixed calendar bug, updated some data entry ui

Author: Phil Wing

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) {

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

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

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%;

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
 
     },

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%;

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%;

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' },
     ];

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
+  }
+
+  
+  

src/router/dashboardRoutes.js

@@ -1,9 +1,15 @@
 import DashboardWorld from '../views/Dashboard.vue';
+import AboutMe from '@/views/AboutMe.vue';
 
 export default [
   {
     path: '/',
     name: 'dashboard',
     component: DashboardWorld,
   },
+    {
+      path: '/about-me',
+      name: 'AboutMe',
+      component: AboutMe
+    },
 ];