Skip to content

Commit

Permalink
Merge pull request #111 from RDjarbeng/fixSortMenu
Browse files Browse the repository at this point in the history 
Fix sort menu
  • Loading branch information
@RDjarbeng
RDjarbeng authored May 24, 2022
2 parents 0a80757 + 059b966 commit 3afba35
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 123 deletions.
1 change: 0 additions & 1 deletion app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,4 +308,3 @@ if('serviceWorker' in navigator){
});

}

204 changes: 112 additions & 92 deletions js/displayCountdowns.js
View file
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
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
4 changes: 2 additions & 2 deletions sw.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// #5

const staticCacheName = 'site-static-v52';
const dynamicCache = 'site-dynamic-v52';
const staticCacheName = 'site-static-v53';
const dynamicCache = 'site-dynamic-v53';

const dynamicCacheSize = 30;

Expand Down

0 comments on commit 3afba35

Please sign in to comment.