Skip to content

Commit

Permalink
Merge branch 'homepage-front' of https://github.com/cse110-sp24-group…
Browse files Browse the repository at this point in the history 
…25/cse110-sp24-group25 into homepage-front
  • Loading branch information
@sahananar
sahananar committed Jun 5, 2024
2 parents 085055e + 554b3b4 commit b901cd1
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 100 deletions.
8 changes: 4 additions & 4 deletions jest-puppeteer.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
launch: {
headless: false, /* Change to false if you want to see the tests run on a browser */
slowMo: 10,
defaultViewport: null
launch: { // On launch
headless: false, // Change to false if you want to see the tests run on a browser
slowMo: 10, // Controls how quickly tests are run
defaultViewport: null // Allows us to modify viewport in tests
}
}
10 changes: 6 additions & 4 deletions source/calendar/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@

<body>
<main>

<!-- Task list sidebar -->
<div class="task-list">
<!-- HEader with title and add task button -->
<div class="task-header">
<h3>Tasks</h3>
<!-- Add Task Button -->
<button class="add-task-btn" id="addbutton">
<img src="../icons/add-task-icon.png" alt="Add">
</button>

</div>
<!-- Container for tasks in sidebar -->
<div class="task-wrapper">
Expand All @@ -36,10 +38,12 @@ <h3>Tasks</h3>

<!-- Calendar -->
<div class="full-calendar">

<!--Contain header bar-->
<section class="top-bar">
<div class="date-header-wrap">
<div class="date-header">
<!-- Buttons to change the date -->
<div class="date-header-buttons">
<button class="prev-date-btn"></button>
<button class="next-date-btn"></button>
Expand All @@ -59,8 +63,8 @@ <h3>Tasks</h3>

</div>

<!-- Navigation buttons betwixt pages -->
<div class="nav-buttons">

<!-- Button to go to Home Page-->
<a href="../homepage/homepage.html">
<button class="nav-homepage-btn">
Expand All @@ -82,8 +86,6 @@ <h3>Tasks</h3>

</div>
</div>


</section>

<!-- Calendar Table -->
Expand Down
63 changes: 45 additions & 18 deletions source/calendar/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ var currDate = new Date();
var month = currDate.getMonth();
var year = currDate.getFullYear();

// Update the global date variables
/**
* Updates the global date variables to the current date.
*/
function updateDateGlobals() {
month = currDate.getMonth();
year = currDate.getFullYear();
}

// When page loads
/**
* Initializes the page when the DOM content is fully loaded.
*/
function init() {
// Initiaze the jump buttons
displayJump(year - 6, year + 5);
Expand All @@ -33,7 +37,9 @@ function init() {


// FUNCTIONS

/**
* Initializes the buttons for adding tasks, navigating months, and other functionalities.
*/
function initButtons() {

const addTaskBtn = document.querySelector(".add-task-btn");
Expand All @@ -50,13 +56,15 @@ function initButtons() {
nextBtn.addEventListener('click', next);

// JUMP HEADER BUTTONS
// LIST OF MONTHS
let monthJumpBtn = document.querySelectorAll(".month-btn");
monthJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
let monthValue = btn.getAttribute("value");
jump(monthValue, year);
});
});
// LIST OF YEARS
let yearJumpBtn = document.querySelectorAll(".year-btn");
yearJumpBtn.forEach(btn => {
btn.addEventListener("click", () => {
Expand Down Expand Up @@ -88,7 +96,9 @@ function next(){
displayCalendar();
}

// Function to goto previous month
/**
* Updates the global currDate to the previous month and displays the previous month's calendar.
*/
function prev() {
// Decrement the month
currDate.setMonth(currDate.getMonth() - 1);
Expand All @@ -97,12 +107,16 @@ function prev() {
}

/**
* Adds task to task list upon "Add Task" button click.
* Adds a task to the task list upon "Add Task" button click.
* @param {boolean} [loadTask=false] - Indicates whether the task is being loaded from storage.
* @returns {HTMLElement} - The newly created task element.
*/
function addTask(loadTask = false) {
// add a task to an element of task container
const taskList = document.querySelector(".task-container");
const task = document.createElement("li");
task.setAttribute("class", "task");
// add it at the first row
task.insertAdjacentHTML("beforeend", `
<div class="check-input-wrap">
<button id="task1" class="task-checkbox"></button>
Expand Down Expand Up @@ -154,8 +168,8 @@ function addTask(loadTask = false) {
}

/**
* Adds button functionality to task upon creation
* @param {Task Node} task - the task to have functionality
* Adds button functionality to a task upon creation.
* @param {HTMLElement} task - The task element to add functionality to.
*/
function taskButtonsFunctionality(task) {

Expand Down Expand Up @@ -216,7 +230,8 @@ function taskButtonsFunctionality(task) {
}

/**
* Saves the completed tasks per day
* Saves the completed tasks for a specific day.
* @param {HTMLElement} completedTaskElement - The task element that was completed.
*/
function saveCompleted(completedTaskElement) {
let data = getJournal();
Expand All @@ -233,7 +248,9 @@ function saveCompleted(completedTaskElement) {
displayCalendar();
}

// Function to display the calendar
/**
* Displays the calendar for the current month.
*/
function displayCalendar() {
// Get body and clear current calendar
let tbody = document.getElementById("tbody-calendar");
Expand Down Expand Up @@ -329,6 +346,11 @@ function displayCalendar() {
document.getElementById('year-dropdown').style.left = monthWidth + 5 + 'px';
}

/**
* Loads cell data such as rating, productivity, and tasks for a specific date in the calendar.
* @param {HTMLElement} cellData - The table cell element to populate with data.
* @param {Date} currCalendarMonth - The current month being displayed in the calendar.
*/
function loadCellDataTest(cellData, currCalendarMonth) {
let journals = getJournal();
let dateText = currCalendarMonth.toLocaleDateString();
Expand Down Expand Up @@ -401,7 +423,11 @@ function loadCellDataTest(cellData, currCalendarMonth) {
cellData.appendChild(aLink);
}

// Generate dropdown year range
/**
* Generates a dropdown for year and month selection.
* @param {number} startYear - The start year for the dropdown range.
* @param {number} endYear - The end year for the dropdown range.
*/
function displayJump(startYear, endYear) {
// YEARS
let yearDropdown = document.getElementById("year-dropdown")
Expand Down Expand Up @@ -463,7 +489,9 @@ function calendarHeader(){
thead.appendChild(headerRow);
}

// Resize header if width of window decreases
/**
* Adjusts the month header text based on the window width.
*/
function windowWidth() {
if (window.innerWidth < 920) {
// Initialize list of abbreviated months
Expand Down Expand Up @@ -523,13 +551,12 @@ function saveToStorage(data, dateText, key, value) {
}

/**
* Load journal entry from local storage
*
* @param {string} data - journal entry text in parsed json format
* @param {string} dateText - date of the journal entry in locale date string format
* @param {string} key - key to get the value from
* Load journal entry from local storage.
*
* @returns {string} value of the key in the data
* @param {Object} data - Journal entry text in parsed JSON format.
* @param {string} dateText - Date of the journal entry in locale date string format.
* @param {string} key - Key to get the value from.
* @returns {string|null} - Value of the key in the data or null if not found.
*/
function loadFromStorage(data, dateText, key) {
if (!(dateText in data)) {
Expand Down Expand Up @@ -596,4 +623,4 @@ function loadTasks() {

// Save journal entry and tasks to local storage on events
tasks.addEventListener("blur", saveTasks)
tasks.addEventListener("change", saveTasks)
tasks.addEventListener("change", saveTasks)
45 changes: 26 additions & 19 deletions source/homepage/homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@

<body>
<main>

<!-- Task list sidebar -->
<div class="task-list">
<!-- Header for tasklist with add task button -->
<div class="task-header">
<h3>Tasks</h3>
<!-- Add Task Button -->
<button class="add-task-btn" id="addbutton">
<img src="../icons/add-task-icon.png" alt="Add">
</button>

</div>
<!-- Container for tasks in sidebar -->
<div class="task-wrapper">
Expand All @@ -33,59 +35,55 @@ <h3>Tasks</h3>
</ul>
</div>
</div>
<!--Everything but the task list-->

<!-- Everything but the task list -->
<div class="main-wrap">
<!--Contain header bar-->
<!-- Contain header bar -->
<section class="top-bar">
<div class="date-header-wrap">
<div class="date-header">
<!-- Buttons to change date -->
<div class="date-header-buttons">
<button class="prev-date-btn"></button>
<button class="next-date-btn"></button>
</div>

<!-- Text to display date of current home page -->
<div class="date-header-text" id="current-date"></div>
</div>

<!-- Buttons for Home and Calendar Page -->
<div class="nav-buttons">

<!-- Button to go to Home Page-->
<a href="./homepage.html">
<button class="nav-homepage-btn">
<img src="../icons/home-icon.png" alt="Home">
</button>
</a>

<!--Button to go to Calendar-->
<a href="../calendar/calendar.html">
<button class="nav-calendar-btn">
<img src="../icons/calendar-icon.webp" alt="Calendar">
</button>
</a>

<!--Button to go to Settings-->
<!-- <button class="nav-settings-btn" href="">
<img src="../icons/settings-icon.png" alt="Settings">
</button> -->

</div>
</div>


</div>
</section>

<!--Below header bar-->
<div class="journal-past-wrap">
<!--Today's Entry, includes journal, ratings, tasks completed-->
<section class="today-entry">
<!-- Holds the journal -->
<div class="journal">
<div class="journal-entry">
<h4>Journal</h4>
<!-- Actual text element of journal -->
<textarea id="textarea" placeholder="Type your journal here..."></textarea>
</div>
</div>

<!--Wraps Sentiment Rating and Tasks Completed-->
<div class="rating-completed-wrap">

<!-- Mental health widget -->
<div class="rating-widget">
<h4>How's your mental health today?</h4>
<div class="feelings">
Expand All @@ -111,26 +109,33 @@ <h4>How's your mental health today?</h4>
</button>
</div>

<!-- Productivity widget -->
<h4>How productive are you feeling today?</h4>
<div class="productiveness">
<!-- 1st Button -->
<button class="rating-select-btn" id="btn6">
<img src="../icons/1-icon.svg" alt="Productivity 1">
</button>
<!-- 2nd Button -->
<button class="rating-select-btn" id="btn7">
<img src="../icons/2-icon.svg" alt="Productivity 2">
</button>
<!-- 3rd Button -->
<button class="rating-select-btn" id="btn8">
<img src="../icons/3-icon.svg" alt="Productivity 3">
</button>
<!-- 4th Button -->
<button class="rating-select-btn" id="btn9">
<img src="../icons/4-icon.svg" alt="Productivity 4">
</button>
<!-- 5th Button -->
<button class="rating-select-btn" id="btn10">
<img src="../icons/5-icon.svg" alt="Productivity 5">
</button>
</div>

</div>

<!-- Completed tasks section -->
<div class="task-list">
<h4>Tasks Completed Today</h4>
<div class="completed-task-wrapper">
Expand All @@ -139,11 +144,13 @@ <h4>Tasks Completed Today</h4>
</ul>
</div>
</div>

</div>
</section>

<!--Holds the past week view-->
<section class="past-week-wrap">
<!-- Grid to display past week -->
<table class="table-week" id="week-calendar" data-lang="en"></table>
</section>
</div>
Expand All @@ -153,4 +160,4 @@ <h4>Tasks Completed Today</h4>
<script src="homepage.js"></script>
</body>

</html>
</html>
Loading

0 comments on commit b901cd1

Please sign in to comment.