Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix sort menu #111

Merged
merged 11 commits into from
May 24, 2022
Merged

Fix sort menu #111

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
25ec5a9
comment service worker
May 24, 2022
b3466a1
move sortUI() to global scope
May 24, 2022
8d6344e
Move display outside if for countdown creation
May 24, 2022
788ff27
fix sort menu not opening, use correct function
May 24, 2022
8ce6c41
progress in context menu fix
May 24, 2022
0b9f976
fix context menu duplication
May 24, 2022
ce5a510
add description for function
May 24, 2022
b866ea1
Merge branch 'master' into fixSortMenu
May 24, 2022
7c692bc
move sort arrow functions to named global scope, prevent listener fro…
May 24, 2022
13a6282
remove unused logs
May 24, 2022
059b966
Activate service worker, cache names
May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ addWhatappEventHandler();
}

// service worker

/*
if('serviceWorker' in navigator){
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
Expand All @@ -307,5 +307,4 @@ if('serviceWorker' in navigator){
.catch((err)=> console.log('Service worker not registered', err));
});

}

}*/
204 changes: 112 additions & 92 deletions js/displayCountdowns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,32 +40,33 @@ async function displayCountdowns() {
setInnerHtmlForNotNull(countdownList, listItems)
setInnerHtmlForNotNull(countdownTextDisplay, '')

const sortUI = async () => {
if (!document.querySelector(".list-settings")) {
const listContainer = document.querySelector(".list-container");
let sortHtml = `
<section class="list-settings">
<div class="sort">
<div class="sort-options">
<div class="sort-opt modified">Date modified</div>
<div class="sort-opt due">Due date</div>
</div>
<div class="sort-title"><i class="fas fas fa-sort-amount-up"></i> Sort By </div>
</div>
</section>`;
listContainer.insertAdjacentHTML("afterbegin", sortHtml);
}
// addSortEventListeners();
}


sortUI();

} else {
setInnerHtmlForNotNull(countdownList, 'Found no countdowns to display');
setInnerHtmlForNotNull(countdownTextDisplay, '')
}
}
/**
* Adds sort menu to the page
*/
const sortUI = async () => {
if (!document.querySelector(".list-settings")) {
const listContainer = document.querySelector(".list-container");
let sortHtml = `
<section class="list-settings">
<div class="sort">
<div class="sort-options">
<div class="sort-opt modified">Date modified</div>
<div class="sort-opt due">Due date</div>
</div>
<div class="sort-title"><i class="fas fas fa-sort-amount-up"></i> Sort By </div>
</div>
</section>`;
listContainer.insertAdjacentHTML("afterbegin", sortHtml);
}
// addSortEventListeners();
}
/**
* Returns html string with a list of countdowns
* @param {Array.<{text: String, date: String, dateModified: String}>} arrayOfCountdowns | contains array of countdown objects
Expand Down Expand Up @@ -284,69 +285,77 @@ function hideContextMenus(event) {


}
function addListEventListener() {
document.querySelector('.countdown-list').addEventListener('click', event => {
const targetElement = event.target;

// if event is fired on text or date
if (targetElement.className == 'countdown-list-text' || targetElement.className == 'countdown-list-date') {
// hideContextMenus()
// todo: find a better way of accessing element in countdown array
updateClockAndText(arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].date, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].text)

if ([null, "", undefined].includes(document.querySelector(".clock-row").style.display)) {
document.querySelector(".clock-row").style.display = "flex";
document.querySelector(".clock-row").style.animationPlayState = "running";
}

/**
* List Click event listener for the countdowns, context menu and items
* @param {Event} event
*/
const listEventListener = event => {
const targetElement = event.target;

// if event is fired on text or date
if (targetElement.className == 'countdown-list-text' || targetElement.className == 'countdown-list-date') {
// hideContextMenus()
// todo: find a better way of accessing element in countdown array
updateClockAndText(arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].date, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].text)

if ([null, "", undefined].includes(document.querySelector(".clock-row").style.display)) {
document.querySelector(".clock-row").style.display = "flex";
document.querySelector(".clock-row").style.animationPlayState = "running";
}
//if the area for context menu is clicked
else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') {
//get the countdown list item and pass to function, search for list class .menu
//in case of directly clicking on icon, parent element is .countdown-list-options div
triggerContextMenu(targetElement.parentElement);

} else if (targetElement.className.search('menu-opts') > -1) {
let count_modified = targetElement.parentElement.getAttribute('data-id');
if (targetElement.className.search('main') > -1) {
// set as main clicked
// find the element convert to JSON and place it as the main clock
const countdown = arrayOfCountdowns.find((countdown) => countdown.dateModified == count_modified);
const mainCount = JSON.stringify(countdown);
localStorage.setItem('mainClock', mainCount);
let date = new Date(countdown.date);
notifyUser(`Homepage clock set to ${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`);
} else if (targetElement.className.search('del') > -1) {
// delete item clicked
arrayOfCountdowns = arrayOfCountdowns.filter((countdown, index) => countdown.dateModified != count_modified);
setCountDownList(arrayOfCountdowns);
setInnerHtmlForNotNull(countdownList, populateList(arrayOfCountdowns));
// console.log('delete clicked', targetElement.parentElement, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')]);
} else if (targetElement.className.search('edit') > -1) {
let editItem = arrayOfCountdowns.find((countdown, index) => countdown.dateModified == count_modified);
// todo: custom error messages for components on fail
try {
if (editItem) {
console.log('Edit clicked', editItem);
repeat = false;
if (editItem.hasOwnProperty('repeat')) {
repeat = editItem.repeat;
}
displayFormPopUp(editItem.text, /\d+-\d+-\d+T\d+:\d+/.exec(editItem.date), count_modified, repeat);
handleUpdate();
} else {
// something went wrong with the editing
errorHandler('Unable to edit countdown');
// console.log(editItem);
}
//if the area for context menu is clicked
else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') {
//get the countdown list item and pass to function, search for list class .menu
//in case of directly clicking on icon, parent element is .countdown-list-options div
triggerContextMenu(targetElement.parentElement);

} else if (targetElement.className.search('menu-opts') > -1) {
let count_modified = targetElement.parentElement.getAttribute('data-id');
if (targetElement.className.search('main') > -1) {
// set as main clicked
// find the element convert to JSON and place it as the main clock
const countdown = arrayOfCountdowns.find((countdown) => countdown.dateModified == count_modified);
const mainCount = JSON.stringify(countdown);
localStorage.setItem('mainClock', mainCount);
let date = new Date(countdown.date);
notifyUser(`Homepage clock set to ${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`);
} else if (targetElement.className.search('del') > -1) {
// delete item clicked
arrayOfCountdowns = arrayOfCountdowns.filter((countdown, index) => countdown.dateModified != count_modified);
setCountDownList(arrayOfCountdowns);
setInnerHtmlForNotNull(countdownList, populateList(arrayOfCountdowns));
// console.log('delete clicked', targetElement.parentElement, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')]);
} else if (targetElement.className.search('edit') > -1) {
let editItem = arrayOfCountdowns.find((countdown, index) => countdown.dateModified == count_modified);
// todo: custom error messages for components on fail
try {
if (editItem) {
console.log('Edit clicked', editItem);
repeat = false;
if (editItem.hasOwnProperty('repeat')) {
repeat = editItem.repeat;
}
} catch (err) {
console.log(err, 'Error in form display');
errorHandler('Error in form display');
displayFormPopUp(editItem.text, /\d+-\d+-\d+T\d+:\d+/.exec(editItem.date), count_modified, repeat);
handleUpdate();
} else {
// something went wrong with the editing
errorHandler('Unable to edit countdown');
// console.log(editItem);
}
} catch (err) {
console.log(err, 'Error in form display');
errorHandler('Error in form display');
}


}
}
})
}
}
function addListEventListener() {
const countList =document.querySelector('.countdown-list')
countList.removeEventListener('click', listEventListener)
countList.addEventListener('click', listEventListener)
}

const closeSortMenu = () => {
Expand All @@ -356,30 +365,40 @@ const closeSortMenu = () => {
}
}

const addSortEventListeners = () => {
const sortTitleEventHandler= () => {
const sortOpts = document.querySelector(".sort-options");
const sortTitle = document.querySelector(".sort-title");
sortTitle.addEventListener("click", () => {
if (sortOpts.style.display == "block") {
sortOpts.style.display = "none";
}
else {
sortOpts.style.display = "block";
}
});
// sort options menu events
sortOpts.addEventListener("click", (event) => {
console.log('clicking in sort');
if (sortOpts.style.display == "block") {
sortOpts.style.display = "none";
}
else {
sortOpts.style.display = "block";
}
}

const sortOptionsEventHandler = (event) => {
if (event.target.className.search('due') > -1) {
localStorage.setItem('sort', 'due')
} else if (event.target.className.search('modified') > -1) {
localStorage.setItem('sort', 'modified')
// console.log('modified clicked', localStorage.getItem('sort'));
// displayCountdowns();
}
// close sortOptions menu on selection and refresh list
closeSortMenu();
displayCountdowns();
})
}

const addSortEventListeners = () => {
const sortOpts = document.querySelector(".sort-options");
const sortTitle = document.querySelector(".sort-title");
if(sortTitle){
sortTitle.removeEventListener("click", sortTitleEventHandler);
sortTitle.addEventListener("click", sortTitleEventHandler);
}
// sort options menu events
if(sortOpts){
sortOpts.removeEventListener("click", sortOptionsEventHandler)
sortOpts.addEventListener("click", sortOptionsEventHandler)
}
}

function handleUpdate() {
Expand Down Expand Up @@ -499,7 +518,8 @@ function addListEventHandlers() {

async function displayAndAddListeners(){
await displayAndStartcount()
addListEventHandlers();
// sortUI();
addListEventHandlers();
}
try {
displayAndAddListeners();
Expand Down
52 changes: 24 additions & 28 deletions js/formupdate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,18 @@ function addZeros(time) {
function setDateAttributes() {
const dateInput = document.getElementById("dateInput");
const today = new Date();
let dd = today.getDate() ;//add 1 to the date so date starts from tomorrow
let dd = today.getDate();//add 1 to the date so date starts from tomorrow
let mm = today.getMonth() + 1; //January is 0 so need to add 1 to make it 1!
let yyyy = today.getFullYear();
let hr = addZeros(today.getHours());
let min = addZeros(today.getMinutes());
dd = addZeros(dd);
mm = addZeros(mm)

let todayString = yyyy + '-' + mm + '-' + dd+'T'+ hr+':'+min;
let todayString = yyyy + '-' + mm + '-' + dd + 'T' + hr + ':' + min;
console.log(todayString);
dateInput.setAttribute("min", todayString);
dateInput.value= todayString;
dateInput.value = todayString;
}

function closeFormPopUp() {
Expand All @@ -72,17 +72,17 @@ function sanitize(string) {
"/": '&#x2F;',
};
const reg = /[&<>"'/]/ig;
return string.replace(reg, (match)=>(map[match]));
}
return string.replace(reg, (match) => (map[match]));
}

function handleFormSubmission() {
const countdownForm = document.getElementById('customDateForm');
const submitbutton = document.getElementById('countdown-submit');

// const event = document.createEvent('Event');
// console.log(event);
countdownForm.addEventListener('submit', (e) => {

e.preventDefault();
// submitbutton.disabled = true;
// get text field values, with auto values
Expand All @@ -105,35 +105,31 @@ function handleFormSubmission() {
}
console.log(countItem);
let countdown = localStorage.getItem('countdown');
if(countdown !== null){ //countdowns already exist
countdown = JSON.parse(countdown);//array
countdown.push(countItem);
// console.log(countdown);
setCountDownList(countdown);
// external function
try{
displayAndStartcount();
if (countdown !== null) { //countdowns already exist
countdown = JSON.parse(countdown);//array
countdown.push(countItem);
// console.log(countdown);
setCountDownList(countdown);
// external function
} else {
// create first countdown
setCountDownList([countItem]);
// displayAndAddListeners();
}
try {
displayAndAddListeners();
console.log('we did it', countItemExists);
} catch (err) {
console.log(err, 'err in updating countdown initialisation');
errorHandler("Unable to finish update your countdowns");
}
// closeFormPopUp();

}else{
// create first countdown
setCountDownList([countItem]);
displayCountdowns();
// closeFormPopUp();
console.log(err, 'err in updating countdown initialisation');
errorHandler("Unable to finish update your countdowns");
}

// testing
closeFormPopUp();
})
}

function setCountDownList(jsArray){
localStorage.setItem('countdown', JSON.stringify(jsArray))
function setCountDownList(jsArray) {
localStorage.setItem('countdown', JSON.stringify(jsArray))
}

// DOM Elements
Expand Down