Skip to content

Commit

Permalink
Merge pull request #69 from chingu-voyages/revert-68-feature/populate…
Browse files Browse the repository at this point in the history 
…-top-row

Revert "comment test for Florin"
  • Loading branch information
@Diaaana03
Diaaana03 authored Feb 11, 2024
2 parents d59afdd + bd4bfe2 commit bd38625
Showing 1 changed file with 129 additions and 170 deletions.
299 changes: 129 additions & 170 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
// test comment from Florin

//import { calendar } from "./data.js";
import {
loadCalendarData,
sendChkBxStateToLocalStorage,
saveCalendarData,
} from "./local-storage.js";
import { loadCalendarData, sendChkBxStateToLocalStorage, saveCalendarData } from "./local-storage.js";

let text = ``;

// load calendar data from local storage
// if doesn't exist, load from hardcoded JSON file
var calendar = loadCalendarData();
Expand All @@ -15,33 +12,28 @@ var calendar = loadCalendarData();
let SelectedMonth = new Date();
let now = new Date();

//Event listener for 'changing months' and expading tasks
document.addEventListener("click", (e) => {
if (e.target.id === "previous-month") {
SelectedMonth.setMonth(SelectedMonth.getMonth() - 1);
renderSelectedMonth();
} else if (e.target.id === "next-month") {
SelectedMonth.setMonth(SelectedMonth.getMonth() + 1);
renderSelectedMonth();
} else if (e.target.dataset.type === "task") {
//Hiding description if task has no description
let hide = "";
if (!e.target.dataset.desc) {
hide = "hide";
//Event listener for 'changing months' and expading tasks
document.addEventListener('click', (e) => {
if (e.target.id === 'previous-month') {
SelectedMonth.setMonth(SelectedMonth.getMonth() - 1);
renderSelectedMonth()
}
else if (e.target.id === 'next-month') {
SelectedMonth.setMonth(SelectedMonth.getMonth() + 1);
renderSelectedMonth()
}
//Expanding on click
document
.getElementById(`expanded-task-extra-space-${e.target.id}`)
.classList.toggle("hide");
document.getElementById(
`expanded-task-extra-space-${e.target.id}`
).innerHTML = `
else if (e.target.dataset.type === "task") {
//Hiding description if task has no description
let hide = ''
if (!e.target.dataset.desc) {
hide = 'hide'
}
//Expanding on click
document.getElementById(`expanded-task-extra-space-${e.target.id}`).classList.toggle('hide')
document.getElementById(`expanded-task-extra-space-${e.target.id}`).innerHTML = `
<div class="expand-grid">
<div
id="expanded-${e.target.dataset.name
.split(" ")
.join("-")
.toLowerCase()}"
id="expanded-${e.target.dataset.name.split(" ").join('-').toLowerCase()}"
class="expand-task">
<p class="expand-task-title">Task</p>
<p class="expand-task-info">${e.target.dataset.name}</p>
Expand All @@ -62,107 +54,93 @@ document.addEventListener("click", (e) => {
<p class="expand-task-title">Description</p>
<p class="expand-task-info">${e.target.dataset.desc}</p>
</div>
</div>`;
</div>`

document.getElementById(e.target.id).classList.toggle("transparent");
document
.getElementById(`days-${e.target.id}`)
.classList.toggle("transparent");
}
});
document.getElementById(e.target.id).classList.toggle('transparent')
document.getElementById(`days-${e.target.id}`).classList.toggle('transparent')
}
})

function renderSelectedMonth() {
const monthEl = document.getElementById("month");
const month = SelectedMonth.toLocaleString("default", {month: "long"});
const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);

monthEl.textContent = `
const monthEl = document.getElementById('month')
const month = SelectedMonth.toLocaleString('default', { month: 'long' })
const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
monthEl.textContent = `
${capitalizedMonth}
${SelectedMonth.getFullYear()}`;
text = ``;

renderCalendar();
renderTasks();
adaptCheckboxClass();
//Need to figure out why page is not rendering from local storage when changing months
sendChkBxStateToLocalStorage();
loadCalendarData();
saveCalendarData(calendar);
${SelectedMonth.getFullYear()}`
text = ``;

renderCalendar()
renderTasks()
adaptCheckboxClass()
//Need to figure out why page is not rendering from local storage when changing months
sendChkBxStateToLocalStorage()
loadCalendarData();
saveCalendarData(calendar)
}

function renderCalendar() {
let datesHtml = "";
let daysHtml = "";
const daysEl = document.getElementById("weekdays");
const datesEl = document.getElementById("month-dates");
const daysInMonth = new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth() + 1,
0
).getDate();
let datesHtml = "";
let daysHtml = "";
const daysEl = document.getElementById("weekdays");
const datesEl = document.getElementById("month-dates");
const daysInMonth = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth() + 1, 0).getDate();

for (let i = 1; i <= daysInMonth; i++) {
let currentDate = new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth(),
i
);
for (let i = 1; i <= daysInMonth; i++) {
let currentDate = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i);

let currentDayOfWeek = new Intl.DateTimeFormat(undefined, {
weekday: "short",
})
.format(currentDate)[0]
.toUpperCase();
let currentDayOfWeek = new Intl.DateTimeFormat(undefined, {
weekday: "short",
}).format(currentDate)[0].toUpperCase();

if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) {
daysHtml += `
if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) {
daysHtml += `
<div class='todays-date'>
<p>${currentDayOfWeek}</p>
</div>`;
datesHtml += `
datesHtml += `
<div class='todays-date'>
<p>${i}</p>
</div>`;
} else {
daysHtml += `
}
else {
daysHtml += `
<div>
<p>${currentDayOfWeek}</p>
</div>`;
datesHtml += `
datesHtml += `
<div>
<p>${i}</p>
</div>`;
</div>`
}
}
}
daysEl.innerHTML = daysHtml;
datesEl.innerHTML = datesHtml;
daysEl.innerHTML = daysHtml;
datesEl.innerHTML = datesHtml;
}
// Rendering Local Storage data and checkboxes
function renderTasks() {
const daysInMonth = new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth() + 1,
0
).getDate();

calendar.forEach((category) => {
text += `
const daysInMonth = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth() + 1, 0).getDate();

calendar.forEach((category) => {
text += `
<p class="categories">${category.categoryName}</p>`;

category.activityTypes.forEach((activity) => {
text += `
category.activityTypes.forEach((activity) => {
text += `
<p class="activities">${activity.activityName}</p>`;

activity.Tasks.forEach((task) => {
text += `
activity.Tasks.forEach((task) => {
text += `
<p
id="days-${task.taskName.split(" ").join("-").toLowerCase()}"
id="days-${task.taskName.split(" ").join('-').toLowerCase()}"
class="task-days task-style">${task.days}
</p>`;

text += `
text += `
<p
id="${task.taskName.split(" ").join("-").toLowerCase()}"
id="${task.taskName.split(" ").join('-').toLowerCase()}"
class="task-name task-style"
data-type="task"
data-name="${task.taskName}"
Expand All @@ -171,89 +149,70 @@ function renderTasks() {
>${task.taskName}
</p>`;

for (let i = 1; i <= daysInMonth; i++) {
// testing i to determine if i is today
let todayClass = "";

if (
i === now.getDate() &&
now.getTime() === SelectedMonth.getTime()
) {
todayClass = "todays-checkbox-container";
}
//Checkboxes initial state changed to 'checked'
//when data from Local Storage determines so
let isChecked = "";
let day = new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth(),
i
);
for (let date of task.checkedCb) {
if (date == day) {
isChecked = "checked";
}
}

//Rendering chkbx with all needed data:
//(date, assigned task and day and if it's initially checked)
text += `
for (let i = 1; i <= daysInMonth; i++) {
// testing i to determine if i is today
let todayClass = '';

if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) {
todayClass = "todays-checkbox-container"
}
//Checkboxes initial state changed to 'checked'
//when data from Local Storage determines so
let isChecked = ''
let day = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i)
for (let date of task.checkedCb){
if (date == day) {
isChecked = "checked"
}
}

//Rendering chkbx with all needed data:
//(date, assigned task and day and if it's initially checked)
text += `
<div class="checkbox-container ${todayClass}">
<input
class="checkbox"
type="checkbox"
data-task="${task.taskName}"
data-day="${new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth(),
i
)}"
data-weekday="${new Date(
SelectedMonth.getFullYear(),
SelectedMonth.getMonth(),
i
)
.toLocaleDateString("en-EN", {weekday: "long"})
.toLowerCase()}"
data-day="${new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i)}"
data-weekday="${new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i)
.toLocaleDateString('en-EN', { weekday: 'long' }).toLowerCase()}"
data-assigned-day="${task.days}"
${isChecked}>
</div>
`;
}
//hidden div for expanding tasks
text += `
`
}
//hidden div for expanding tasks
text += `
<div class="expanded-task-extra-space hide"
id="expanded-task-extra-space-${task.taskName
.split(" ")
.join("-")
.toLowerCase()}">
</div>`;
});
id="expanded-task-extra-space-${task.taskName.split(" ").join('-').toLowerCase()}">
</div>`
});
});
});
});

document.getElementById("main-grid").innerHTML = text;
document.getElementById("main-grid").innerHTML = text;
}
// Making checkboxes bold
function adaptCheckboxClass() {
for (let checkbox of document.getElementsByClassName("checkbox")) {
//For every chbx testing if it's assigned day matches current day
//For month days and week days
if (
checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday) ||
Number(checkbox.dataset.assignedDay) ===
Number(checkbox.dataset.day.slice(7, 10))
) {
//Testing to know if task is past due date
if (compareDates(checkbox.dataset.day, now)) {
checkbox.classList.add("bold-checkbox", "future");
} else {
checkbox.classList.add("bold-checkbox", "past");
}

for (let checkbox of document.getElementsByClassName('checkbox')) {

//For every chbx testing if it's assigned day matches current day
//For month days and week days
if (checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday)||
Number(checkbox.dataset.assignedDay) === Number(checkbox.dataset.day.slice(7, 10))) {
//Testing to know if task is past due date
if (compareDates(checkbox.dataset.day, now)){
checkbox.classList.add('bold-checkbox', 'future')
}
else {
checkbox.classList.add('bold-checkbox', 'past')
}
}
}
}
}

// calling functions
Expand All @@ -264,11 +223,11 @@ sendChkBxStateToLocalStorage();
loadCalendarData();
renderSelectedMonth();

function compareDates(chbx, today) {
let currentChbx = new Date(chbx).getTime();
let todaysDate = new Date(today).getTime();

if (currentChbx >= todaysDate) {
return true;
}
}
function compareDates (chbx, today) {
let currentChbx = new Date(chbx).getTime();
let todaysDate = new Date(today).getTime();
if (currentChbx >= todaysDate) {
return true
}
};

0 comments on commit bd38625

Please sign in to comment.