diff --git a/index.html b/index.html index f3447d1..96588b3 100644 --- a/index.html +++ b/index.html @@ -78,26 +78,26 @@

Dec-2019

-
+
- + : : - + -
- +
+

diff --git a/main.css b/main.css index 213be58..b6249c6 100644 --- a/main.css +++ b/main.css @@ -215,6 +215,7 @@ padding: 4px; position: relative; z-index: 1; + box-shadow: 3px 3px 5px 0 #b5bbc1; } .main__sidebar_day_object h7, .main__sidebar_day_object p { diff --git a/main.css.map b/main.css.map index 96d34cd..8942c63 100644 --- a/main.css.map +++ b/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["src/styles/header.scss","src/styles/common.scss","src/styles/main.scss","src/styles/popup.scss","src/styles/redLine.scss","src/styles/index.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;;;AAIR;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA,kBCrFc;;ADsFd;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,kBCnGE;;ADqGN;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA,kBC9GF;ED+GE;EACA;EACA;;AAGR;EAEI;;AAEJ;EAEI,OC7HI;ED8HJ;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,kBChJU;EDiJV;;;AAMR;EACI,OC5II;;AD8IR;EACI,kBC/II;EDgJJ,OC7JU;;AD+Jd;EACI,kBClJU;;;ACflB;EACI;EACA;EACA;EACA;;AACA;EACI,ODCQ;ECAR;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA,kBDZE;ECaF;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;;AAKZ;EACI;EACA,kBDjCQ;ECkCR,OD/Cc;ECgDd;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEI;EACA;;;AAIR;EACI;;;AChEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI,kBF7Fc;;;AEiGtB;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AC5JJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;ACfR;EACI;;;AAGJ;EACI,WJGY;EIFZ,kBJVc;EIWd;EACA;EACA,OJRa","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["src/styles/header.scss","src/styles/common.scss","src/styles/main.scss","src/styles/popup.scss","src/styles/redLine.scss","src/styles/index.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;;;AAIR;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA,kBCrFc;;ADsFd;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,kBCnGE;;ADqGN;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA,kBC9GF;ED+GE;EACA;EACA;;AAGR;EAEI;;AAEJ;EAEI,OC7HI;ED8HJ;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,kBChJU;EDiJV;;;AAMR;EACI,OC5II;;AD8IR;EACI,kBC/II;EDgJJ,OC7JU;;AD+Jd;EACI,kBClJU;;;ACflB;EACI;EACA;EACA;EACA;;AACA;EACI,ODCQ;ECAR;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA,kBDZE;ECaF;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;;AAKZ;EACI;EACA,kBDjCQ;ECkCR,OD/Cc;ECgDd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEI;EACA;;;AAIR;EACI;;;ACjEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI,kBF7Fc;;;AEiGtB;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AC5JJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;ACfR;EACI;;;AAGJ;EACI,WJGY;EIFZ,kBJVc;EIWd;EACA;EACA,OJRa","file":"main.css"} \ No newline at end of file diff --git a/src/scripts/create_button.js b/src/scripts/create_button.js index 47f0936..0f316a1 100644 --- a/src/scripts/create_button.js +++ b/src/scripts/create_button.js @@ -1,11 +1,11 @@ const createButton = document.querySelector('.nav__button'); const popupBlock = document.querySelector('.popup-layer'); const saveBtn = document.querySelector('.event__btn-save'); - + export const funcForTimeOptions = () => { const hours = document.querySelectorAll('.hours'); let hourArr = []; - for(let i = 0; i <= 24; i++){ + for (let i = 0; i <= 24; i++) { let temp = ` `; @@ -14,31 +14,31 @@ export const funcForTimeOptions = () => { [...hours].forEach(elem => elem.innerHTML = hourArr.join('')); const minutes = document.querySelectorAll('.minutes'); let minArr = []; - let counterMin = 0; - while(counterMin < 60){ + let counterMin = '00'; + while (counterMin < 60) { let temp = ` `; minArr.push(temp); - counterMin += 15; + counterMin = parseInt(counterMin) + 15; } [...minutes].forEach(elem => elem.innerHTML = minArr.join('')); -}; +}; export const funcForCreateButton = () => { funcForTimeOptions(); const startHour = new Date().getHours(); - const endHour = startHour+1; + const endHour = startHour + 1; const startHours = document.querySelectorAll('.event__time-start > .opt-hr'); [...startHours].forEach(elem => { - if(elem.innerHTML === startHour.toString()){ + if (elem.innerHTML === startHour.toString()) { elem.parentNode.value = startHour.toString(); } }); const endHours = document.querySelectorAll('.event__time-end > .opt-hr'); [...endHours].forEach(elem => { - if(elem.innerHTML === endHour.toString()){ + if (elem.innerHTML === endHour.toString()) { elem.parentNode.value = endHour.toString(); } }); @@ -49,4 +49,4 @@ export const funcForCreateButton = () => { const today = new Date(); [...myDate].forEach(elem => elem.value = today.toISOString().substr(0, 10)); }; -createButton.addEventListener('click', funcForCreateButton); +createButton.addEventListener('click', funcForCreateButton); \ No newline at end of file diff --git a/src/scripts/delete_event.js b/src/scripts/delete_event.js index 76b2c58..d014eef 100644 --- a/src/scripts/delete_event.js +++ b/src/scripts/delete_event.js @@ -1,5 +1,5 @@ -import { indexOfElement, addintionalIndexOfElem } from './edit_event.js'; -import { funcToMakeMarkNull } from './edit_event.js'; +import { indexOfElement, markVariable } from './edit_event.js'; +import { funcForMakeindexOfElementNull, funcForMakeMarkVariableNull } from './edit_event.js'; import { eventsArray } from './storage.js'; import { renderEventObject, clearFunc } from './generate_event_object.js'; import { renderRedLIne } from './redline.js'; @@ -9,13 +9,16 @@ const popupBlock = document.querySelector('.popup-layer'); const saveBtnForEdit = document.querySelector('.event__btn-save_after_edit'); export const funcForDeleteEvene = () => { - eventsArray.splice(indexOfElement,1); - + if(markVariable === 1){ + eventsArray.splice(indexOfElement,1); + eventsArray.splice(indexOfElement-1,1); + }else eventsArray.splice(indexOfElement,1); + funcForMakeindexOfElementNull(); clearFunc(); renderEventObject(eventsArray); + funcForMakeMarkVariableNull(); popupBlock.style.display = 'none'; saveBtnForEdit.style.display = 'none'; renderRedLIne(); - funcToMakeMarkNull(); }; deleteBasket.addEventListener('click', funcForDeleteEvene); \ No newline at end of file diff --git a/src/scripts/edit_event.js b/src/scripts/edit_event.js index 551e3e9..92b302d 100644 --- a/src/scripts/edit_event.js +++ b/src/scripts/edit_event.js @@ -1,257 +1,127 @@ -const blockOfDays = document.querySelector('.main__sidebar_days'); -const popupBlock = document.querySelector('.popup-layer'); -const iconDelete = document.querySelector('.event__btn-delete'); -const saveBtnForEdit = document.querySelector('.event__btn-save_after_edit'); -export let indexOfElement = 0; -export let addintionalIndexOfElem = 0; -export let markVariable = 0; - import { funcForTimeOptions } from './create_button.js'; import { eventsArray } from './storage.js'; import { renderEventObject, clearFunc } from './generate_event_object.js'; import { renderRedLIne } from './redline.js'; -import { firstPoint, lastPoint } from './generate_event_object.js'; - -// export const funcForEditEvent = event => { -// const blockOfEvent = event.target; -// if(!blockOfEvent.classList.contains('main__sidebar_day_object')) return; - -// popupBlock.style.display = 'block'; -// saveBtnForEdit.style.display = 'block'; -// iconDelete.style.display = 'block'; - -// funcForTimeOptions(); - -// const dataId = blockOfEvent.dataset.id; -// let currentObject; -// eventsArray.forEach((elem,index) => { -// if(elem.ident === dataId){ -// currentObject = elem; -// indexOfElement = index; -// } -// }); - -// console.log(eventsArray.filter(elem => elem.id2 !== undefined)); - -// const title = document.querySelector('.event__name'); -// currentObject.header !== undefined -// ? title.value = currentObject.header -// : title.value = ''; - -// const startDate = document.querySelector('.event__date-start'); -// startDate.value = new Date(currentObject.startTime).toISOString().substr(0, 10); - - -// const endDate = document.querySelector('.event__date-end'); -// endDate.value = new Date(currentObject.endTime).toISOString().substr(0, 10); - - -// const startHour = document.querySelector('.event__time-start'); -// startHour.value = +new Date(currentObject.startTime).getHours(); -// const startMin = document.querySelector('.event__time-min-start'); -// startMin.value = +new Date(currentObject.startTime).getMinutes(); - -// const endHour = document.querySelector('.event__time-end'); -// endHour.value = +new Date(currentObject.endTime).getHours(); -// const endMin = document.querySelector('.event__time-min-end'); -// endMin.value = +new Date(currentObject.endTime).getMinutes(); -// }; -// blockOfDays.addEventListener('click', funcForEditEvent); - - -// export const funcForSaveButtonAfterEdit = event => { -// event.preventDefault(); - -// eventsArray.splice(indexOfElement,1); - -// const tempObj = { -// header: undefined, -// startTime: undefined, -// endTime: undefined, -// description: undefined, -// ident: Math.random().toFixed(10), -// }; - - -// const titleInput = document.querySelector('.event__name'); -// tempObj.header = titleInput.value; - -// const startTimeInput = document.querySelector('.event__date-start'); -// const firstStartDate_year = new Date(startTimeInput.value).getFullYear(); -// const firstStartDate_month = new Date(startTimeInput.value).getMonth(); -// const firstStartDate_date = new Date(startTimeInput.value).getDate(); -// const firstStartDate_hours = +document.querySelector('.event__time-start').value; -// const firstStartDate_minutes = +document.querySelector('.event__time-min-start').value; -// tempObj.startTime = new Date(firstStartDate_year, firstStartDate_month, -// firstStartDate_date, firstStartDate_hours, firstStartDate_minutes); - - -// const endTimeInput = document.querySelector('.event__date-end'); -// const firstEndDate_year = new Date(endTimeInput.value).getFullYear(); -// const firstEndDate_month = new Date(endTimeInput.value).getMonth(); -// const firstEndDate_date = new Date(endTimeInput.value).getDate(); -// const firstEndDate_hours = +document.querySelector('.event__time-end').value; -// const firstEndDate_minutes = +document.querySelector('.event__time-min-end').value; -// tempObj.endTime = new Date(firstEndDate_year, firstEndDate_month, -// firstEndDate_date, firstEndDate_hours, firstEndDate_minutes); - - -// const descriptionInput = document.querySelector('.multiline__text'); -// tempObj.description = descriptionInput.value; - -// eventsArray.push(tempObj); -// clearFunc(); -// renderEventObject(eventsArray); -// popupBlock.style.display = 'none'; -// saveBtnForEdit.style.display = 'none'; -// renderRedLIne(); -// }; -// saveBtnForEdit.addEventListener('click', funcForSaveButtonAfterEdit); - - - - +import { funcForCheckIntersectionOfEvents } from './validate.js'; +const blockOfDays = document.querySelector('.main__sidebar_days'); +const popupBlock = document.querySelector('.popup-layer'); +const iconDelete = document.querySelector('.event__btn-delete'); +const saveBtnForEdit = document.querySelector('.event__btn-save_after_edit'); +let currentObject = []; +export let markVariable = 0; +export let indexOfElement = 0; -export const funcToMakeMarkNull = () => { +export const funcForMakeindexOfElementNull = () => { + indexOfElement = 0; +}; +export const funcForMakeMarkVariableNull = () => { markVariable = 0; }; +export const funcForEditEvent = event => { + const blockOfEvent = event.target; + if(!blockOfEvent.classList.contains('main__sidebar_day_object')) return; -const editEventToNextWeek = () => { popupBlock.style.display = 'block'; saveBtnForEdit.style.display = 'block'; iconDelete.style.display = 'block'; funcForTimeOptions(); - let tempArr = eventsArray.filter(elem => elem.id2 !== undefined); - + const dataId = blockOfEvent.dataset.id; + eventsArray.forEach((element,index) => { + if(element.ident === dataId) indexOfElement = index; + }) + currentObject = eventsArray.filter(elem => elem.ident === dataId); + + const title = document.querySelector('.event__name'); - tempArr[0].header !== undefined - ? title.value = tempArr[0].header + currentObject[0].header !== undefined + ? title.value = currentObject[0].header : title.value = ''; - + const startDate = document.querySelector('.event__date-start'); - startDate.value = new Date(tempArr[0].startTime).toISOString().substr(0, 10); - + startDate.value = new Date(currentObject[0].startTime).toISOString().substr(0, 10); + + const endDate = document.querySelector('.event__date-end'); - endDate.value = new Date(tempArr[0].endTime).toISOString().substr(0, 10); + currentObject.length === 1 + ? endDate.value = new Date(currentObject[0].endTime).toISOString().substr(0, 10) + : endDate.value = new Date(currentObject[1].endTime).toISOString().substr(0, 10); + const startHour = document.querySelector('.event__time-start'); - startHour.value = +new Date(tempArr[0].startTime).getHours(); - + startHour.value = +new Date(currentObject[0].startTime).getHours(); const startMin = document.querySelector('.event__time-min-start'); - startMin.value = +new Date(tempArr[0].startTime).getMinutes(); + startMin.value = +new Date(currentObject[0].startTime).getMinutes(); const endHour = document.querySelector('.event__time-end'); - endHour.value = +new Date(tempArr[0].endTime).getHours(); const endMin = document.querySelector('.event__time-min-end'); - endMin.value = +new Date(tempArr[0].endTime).getMinutes(); -}; - - -export const funcForEditEvent = event => { - const blockOfEvent = event.target; - if(!blockOfEvent.classList.contains('main__sidebar_day_object')) return; - const dataId = blockOfEvent.dataset.id; - let currentObject; - eventsArray.forEach((elem,index) => { - if(elem.ident === dataId){ - currentObject = elem; - indexOfElement = index; - } - if(elem.additionalId2 !== undefined){ - addintionalIndexOfElem = index; - } - }); - if(currentObject.endTime > lastPoint && currentObject.additionalId2 !== undefined){ + if(currentObject.length === 1){ + endHour.value = +new Date(currentObject[0].endTime).getHours(); + endMin.value = +new Date(currentObject[0].endTime).getMinutes(); + }else{ + endHour.value = +new Date(currentObject[1].endTime).getHours(); + endMin.value = +new Date(currentObject[1].endTime).getMinutes(); markVariable = 1; - editEventToNextWeek(); - } else { - popupBlock.style.display = 'block'; - saveBtnForEdit.style.display = 'block'; - iconDelete.style.display = 'block'; - - funcForTimeOptions(); - - const title = document.querySelector('.event__name'); - currentObject.header !== undefined - ? title.value = currentObject.header - : title.value = ''; - - const startDate = document.querySelector('.event__date-start'); - startDate.value = new Date(currentObject.startTime).toISOString().substr(0, 10); - - const endDate = document.querySelector('.event__date-end'); - endDate.value = new Date(currentObject.endTime).toISOString().substr(0, 10); - - const startHour = document.querySelector('.event__time-start'); - startHour.value = +new Date(currentObject.startTime).getHours(); - const startMin = document.querySelector('.event__time-min-start'); - startMin.value = +new Date(currentObject.startTime).getMinutes(); - - const endHour = document.querySelector('.event__time-end'); - endHour.value = +new Date(currentObject.endTime).getHours(); - const endMin = document.querySelector('.event__time-min-end'); - endMin.value = +new Date(currentObject.endTime).getMinutes(); } - }; blockOfDays.addEventListener('click', funcForEditEvent); - - - - export const funcForSaveButtonAfterEdit = event => { event.preventDefault(); - - eventsArray.splice(indexOfElement,1); - - const tempObj = { - header: undefined, - startTime: undefined, - endTime: undefined, - description: undefined, - ident: Math.random().toFixed(10), - }; - - - const titleInput = document.querySelector('.event__name'); - tempObj.header = titleInput.value; - - const startTimeInput = document.querySelector('.event__date-start'); - const firstStartDate_year = new Date(startTimeInput.value).getFullYear(); - const firstStartDate_month = new Date(startTimeInput.value).getMonth(); - const firstStartDate_date = new Date(startTimeInput.value).getDate(); - const firstStartDate_hours = +document.querySelector('.event__time-start').value; - const firstStartDate_minutes = +document.querySelector('.event__time-min-start').value; - tempObj.startTime = new Date(firstStartDate_year, firstStartDate_month, - firstStartDate_date, firstStartDate_hours, firstStartDate_minutes); - - - const endTimeInput = document.querySelector('.event__date-end'); - const firstEndDate_year = new Date(endTimeInput.value).getFullYear(); - const firstEndDate_month = new Date(endTimeInput.value).getMonth(); - const firstEndDate_date = new Date(endTimeInput.value).getDate(); - const firstEndDate_hours = +document.querySelector('.event__time-end').value; - const firstEndDate_minutes = +document.querySelector('.event__time-min-end').value; - tempObj.endTime = new Date(firstEndDate_year, firstEndDate_month, - firstEndDate_date, firstEndDate_hours, firstEndDate_minutes); - - - const descriptionInput = document.querySelector('.multiline__text'); - tempObj.description = descriptionInput.value; - - eventsArray.push(tempObj); - clearFunc(); - renderEventObject(eventsArray); - popupBlock.style.display = 'none'; - saveBtnForEdit.style.display = 'none'; - renderRedLIne(); + if(markVariable === 1){ + eventsArray.splice(indexOfElement,1); + eventsArray.splice(indexOfElement-1,1); + }else eventsArray.splice(indexOfElement,1); + funcForMakeindexOfElementNull(); + + const tempObj = { + header: undefined, + startTime: undefined, + endTime: undefined, + description: undefined, + ident: Math.random().toFixed(10), + }; + + + const titleInput = document.querySelector('.event__name'); + tempObj.header = titleInput.value; + + const startTimeInput = document.querySelector('.event__date-start'); + const firstStartDate_year = new Date(startTimeInput.value).getFullYear(); + const firstStartDate_month = new Date(startTimeInput.value).getMonth(); + const firstStartDate_date = new Date(startTimeInput.value).getDate(); + const firstStartDate_hours = +document.querySelector('.event__time-start').value; + const firstStartDate_minutes = +document.querySelector('.event__time-min-start').value; + tempObj.startTime = new Date(firstStartDate_year, firstStartDate_month, + firstStartDate_date, firstStartDate_hours, firstStartDate_minutes); + + + const endTimeInput = document.querySelector('.event__date-end'); + const firstEndDate_year = new Date(endTimeInput.value).getFullYear(); + const firstEndDate_month = new Date(endTimeInput.value).getMonth(); + const firstEndDate_date = new Date(endTimeInput.value).getDate(); + const firstEndDate_hours = +document.querySelector('.event__time-end').value; + const firstEndDate_minutes = +document.querySelector('.event__time-min-end').value; + tempObj.endTime = new Date(firstEndDate_year, firstEndDate_month, + firstEndDate_date, firstEndDate_hours, firstEndDate_minutes); + + + const descriptionInput = document.querySelector('.multiline__text'); + tempObj.description = descriptionInput.value; + + funcForCheckIntersectionOfEvents(tempObj); + eventsArray.push(tempObj); + clearFunc(); + renderEventObject(eventsArray); + funcForMakeMarkVariableNull(); + popupBlock.style.display = 'none'; + saveBtnForEdit.style.display = 'none'; + renderRedLIne(); }; saveBtnForEdit.addEventListener('click', funcForSaveButtonAfterEdit); \ No newline at end of file diff --git a/src/scripts/generate_event_object.js b/src/scripts/generate_event_object.js index 3557213..34a02d1 100644 --- a/src/scripts/generate_event_object.js +++ b/src/scripts/generate_event_object.js @@ -1,99 +1,47 @@ import { eventsArray } from './storage.js'; import { arrDaysOfWeek } from './current_week.js'; -import { addintionalIndexOfElem } from './edit_event.js'; -const fileOfHoures = document.querySelectorAll('.main__sidebar_days_line'); export let firstPoint, lastPoint; +const fileOfHoures = document.querySelectorAll('.main__sidebar_days_line'); export const clearFunc = () => { const arrOfHours = document.querySelectorAll('.main__sidebar_days_hours'); [...arrOfHours].forEach(elem => elem.innerHTML = ''); }; -const fillDayPlaceForLongEvent = (dayObject) => { - let certainHour = new Date(dayObject.startTime).getHours(); - let startTimeHour = new Date(dayObject.accessStartTime).getHours(); - startTimeHour = transformHourFormat(startTimeHour); - let startTimeMinutes = new Date(dayObject.accessStartTime).getMinutes(); - - let endTimeHour = new Date(dayObject.accessEndTime).getHours(); - endTimeHour = transformHourFormat(endTimeHour); - let endTimeMinutes = new Date(dayObject.accessEndTime).getMinutes(); - - if(startTimeMinutes !== 0) { - startTimeHour += `:${startTimeMinutes}`; - } - if(endTimeMinutes !== 0) { - endTimeHour += `:${endTimeMinutes}`; - } - let certainDay = [...fileOfHoures] - .find((elem,index) => index === new Date(dayObject.startTime).getDay()); - let certainPlace = [...certainDay.children] - .find((elem,index) => index === certainHour); +const transformObjectFunc = (element) => { + const endYearForObj1 = new Date(element.startTime).getFullYear(); + const endMonthForObj1 = new Date(element.startTime).getMonth(); + const endDateForObj1 = new Date(element.startTime).getDate(); + let endTimeForObj1 = new Date(endYearForObj1,endMonthForObj1,endDateForObj1,24); - const divElem = document.createElement('div'); - const h7Elem = document.createElement('h7'); - dayObject.header ? h7Elem.innerHTML = dayObject.header : h7Elem.innerHTML = "without of header"; - const pElem = document.createElement('p'); - pElem.innerHTML = `${startTimeHour} PM - ${endTimeHour} AM`; - divElem.classList.add('main__sidebar_day_object'); - divElem.setAttribute('data-id', dayObject.ident); - forHeight(dayObject, divElem); - divElem.append(h7Elem, pElem); - certainPlace.append(divElem); -}; + const startYearForObj2 = new Date(element.endTime).getFullYear(); + const startMonthForObj2 = new Date(element.endTime).getMonth(); + const endDateForObj2 = new Date(element.endTime).getDate(); + const startTimeForObj2 = new Date(startYearForObj2,startMonthForObj2,endDateForObj2); + const indentificator = Math.random().toFixed(10); -const generateLongEvent = (object) => { - const year = new Date(object.startTime).getFullYear(); - const month = new Date(object.startTime).getMonth(); - const date = new Date(object.startTime).getDate(); - const lastTimeThisDay = new Date(year,month,date,24,0); - const firstTimeNextDay = new Date(year,month,date+1); - const identificator = object.ident; - const identificator2 = Math.random().toFixed(10); - const onePartEvent = { - header:object.header, - startTime:object.startTime, - endTime:lastTimeThisDay, - description:object.description, - ident:identificator, - accessStartTime: object.startTime, - accessEndTime: object.endTime, + const obj1 = { + header: element.header, + startTime:element.startTime, + endTime: endTimeForObj1, + description:element.description, + ident: indentificator, }; - const twoPartEvent = { - header:object.header, - startTime:firstTimeNextDay, - endTime:object.endTime, - description:object.description, - ident:identificator, - id2:undefined, - additionalId2:undefined, - accessStartTime:object.startTime, - accessEndTime:object.endTime, + const obj2 = { + header: element.header, + startTime:startTimeForObj2, + endTime: element.endTime, + description:element.description, + ident: indentificator, }; - if(object.endTime.getHours() === 0){ - [onePartEvent].forEach(element => fillDayPlaceForLongEvent(element)); - }else if(object.endTime < lastPoint){ - [onePartEvent,twoPartEvent].forEach(element => fillDayPlaceForLongEvent(element)); - }else{ - eventsArray.forEach((elem,index) => { - if(elem.additionalId2 !== undefined){ - eventsArray.splice(index,1); - eventsArray.splice(addintionalIndexOfElem,1); - } - }); - object.id2 = identificator2; - const tempObj = {...twoPartEvent}; - tempObj.id2 = identificator2; - tempObj.additionalId2 = identificator2; - fillDayPlaceForLongEvent(onePartEvent); - eventsArray.push(tempObj); - } + eventsArray.push(obj1, obj2); }; + const forHeight = (object, elem) => { if(object.startTime.getMinutes() === 15)elem.style.top = '25%'; if(object.startTime.getMinutes() === 30)elem.style.top = '50%'; @@ -120,15 +68,18 @@ const transformHourFormat = (hour) => { }; const fillDayPlace = (dayObject) => { - let certainHour = new Date(dayObject.startTime).getHours(); + const startTime = new Date(dayObject.startTime); + const endTime = new Date(dayObject.endTime); - let startTimeHour = new Date(dayObject.startTime).getHours(); + let certainHour = startTime.getHours(); + + let startTimeHour = startTime.getHours(); startTimeHour = transformHourFormat(startTimeHour); - let startTimeMinutes = new Date(dayObject.startTime).getMinutes(); - - let endTimeHour = new Date(dayObject.endTime).getHours(); + let startTimeMinutes = startTime.getMinutes(); + + let endTimeHour = endTime.getHours(); endTimeHour = transformHourFormat(endTimeHour); - let endTimeMinutes = new Date(dayObject.endTime).getMinutes(); + let endTimeMinutes = endTime.getMinutes(); if(startTimeMinutes !== 0) { startTimeHour += `:${startTimeMinutes}`; @@ -144,13 +95,13 @@ const fillDayPlace = (dayObject) => { let tempNum = 12; let tempVal; [...fileOfHoures].forEach(() => { - if(new Date(dayObject.startTime).getHours() <= tempNum && new Date(dayObject.endTime).getHours() <= tempNum){ + if(startTime.getHours() <= tempNum && endTime.getHours() <= tempNum){ tempVal = `${startTimeHour} - ${endTimeHour} AM`; } - if(new Date(dayObject.startTime).getHours() <= tempNum && new Date(dayObject.endTime).getHours() > tempNum){ + if(startTime.getHours() <= tempNum && endTime.getHours() > tempNum){ tempVal = `${startTimeHour} AM - ${endTimeHour} PM`; } - if(new Date(dayObject.startTime).getHours() > tempNum){ + if(startTime.getHours() > tempNum){ tempVal = `${startTimeHour} - ${endTimeHour} PM`; } }); @@ -168,7 +119,8 @@ const fillDayPlace = (dayObject) => { }; -const filterCorrectDays = (eventsArray, firstDayOfWeek, lastDayOfWeek) => { + +export const filterCorrectDays = (eventsArray, firstDayOfWeek, lastDayOfWeek) => { let firstDateInWeek = new Date(firstDayOfWeek); let firstDayYear = firstDateInWeek.getFullYear(); let firstDayMonth = firstDateInWeek.getMonth(); @@ -184,12 +136,22 @@ const filterCorrectDays = (eventsArray, firstDayOfWeek, lastDayOfWeek) => { .filter(elem => elem.startTime >= firstPoint && elem.startTime < lastPoint); }; -export const renderEventObject = (eventsArray) => { - let tempArr = filterCorrectDays(eventsArray, arrDaysOfWeek[0], arrDaysOfWeek[6]); - tempArr.forEach(elem => { - if(elem.startTime.getDate() !== elem.endTime.getDate()){ - generateLongEvent(elem); - }else fillDayPlace(elem); +const forChangingEventsArray = (array) => { + array.map((element,index) => { + if(element.startTime.getDate() !== element.endTime.getDate() && element.endTime.getHours() > 0){ + array.splice(index,1); + transformObjectFunc(element); + } }); -}; + let tempArr = filterCorrectDays(array,arrDaysOfWeek[0],arrDaysOfWeek[6]); + tempArr.forEach(elem => fillDayPlace(elem)); +}; + + + + + +export const renderEventObject = (array) => { + return forChangingEventsArray(array); +}; renderEventObject(eventsArray); \ No newline at end of file diff --git a/src/scripts/popup_funcs.js b/src/scripts/popup_funcs.js index 3893d74..88a0897 100644 --- a/src/scripts/popup_funcs.js +++ b/src/scripts/popup_funcs.js @@ -2,65 +2,47 @@ import { eventsArray } from './storage.js'; import { renderEventObject, clearFunc } from './generate_event_object.js'; import { renderEventOnClick } from './event_on_click.js'; import { renderRedLIne } from './redline.js'; -import { funcToMakeMarkNull } from './edit_event.js'; +import { funcForCheckIntersectionOfEvents } from './validate.js'; +const popupBlock = document.querySelector('#popup'); const blockOfDays = document.querySelector('.main__sidebar_days'); -const popupBlock = document.querySelector('.popup-layer'); + +const saveButton = document.querySelector('.event__btn-save'); +export const funcForSaveButton = event => { + event.preventDefault(); + const formDataPopup = [...new FormData(popupBlock)] + .reduce((acc, [faild, value]) => ({...acc, [faild]: value }), {}); + + const tempObj = { + header: formDataPopup.eventName, + startTime: new Date(formDataPopup.eventDateStart + 'T' + formDataPopup.eventTimeStart + ':' + formDataPopup.eventTimeStartMin + ':00'), + endTime: new Date(formDataPopup.eventDateEnd + 'T' + formDataPopup.eventTimeEnd + ':' + formDataPopup.eventTimeEndMin + ':00'), + description: formDataPopup.description, + ident: Math.random().toFixed(10) + }; + console.log(tempObj.startTime); + eventsArray.push(tempObj); + clearFunc(); + renderEventObject(eventsArray); + document.querySelector('.popup-layer').style.display = 'none'; + blockOfDays.addEventListener('click', renderEventOnClick); + renderRedLIne(); +}; +saveButton.addEventListener('click', funcForSaveButton); const lockWindow = document.querySelector('.popup__btn-close'); export const funcForLockWindow = () => { popupBlock.style.display = 'none'; + document.querySelector('.popup-layer').style.display = 'none'; blockOfDays.addEventListener('click', renderEventOnClick); - funcToMakeMarkNull(); }; lockWindow.addEventListener('click', funcForLockWindow); -const saveButton = document.querySelector('.event__btn-save'); -export const funcForSaveButton = event => { - event.preventDefault(); - - const tempObj = { - header: undefined, - startTime: undefined, - endTime: undefined, - description: undefined, - ident: Math.random().toFixed(10), - }; - const titleInput = document.querySelector('.event__name'); - tempObj.header = titleInput.value; - const startTimeInput = document.querySelector('.event__date-start'); - const firstStartDate_year = new Date(startTimeInput.value).getFullYear(); - const firstStartDate_month = new Date(startTimeInput.value).getMonth(); - const firstStartDate_date = new Date(startTimeInput.value).getDate(); - const firstStartDate_hours = +document.querySelector('.event__time-start').value; - const firstStartDate_minutes = +document.querySelector('.event__time-min-start').value; - tempObj.startTime = new Date(firstStartDate_year, firstStartDate_month, - firstStartDate_date, firstStartDate_hours, firstStartDate_minutes); - const endTimeInput = document.querySelector('.event__date-end'); - const firstEndDate_year = new Date(endTimeInput.value).getFullYear(); - const firstEndDate_month = new Date(endTimeInput.value).getMonth(); - const firstEndDate_date = new Date(endTimeInput.value).getDate(); - const firstEndDate_hours = +document.querySelector('.event__time-end').value; - const firstEndDate_minutes = +document.querySelector('.event__time-min-end').value; - tempObj.endTime = new Date(firstEndDate_year, firstEndDate_month, - firstEndDate_date, firstEndDate_hours, firstEndDate_minutes); - - const descriptionInput = document.querySelector('.multiline__text'); - tempObj.description = descriptionInput.value; - - eventsArray.push(tempObj); - clearFunc(); - renderEventObject(eventsArray); - popupBlock.style.display = 'none'; - blockOfDays.addEventListener('click', renderEventOnClick); - renderRedLIne(); -}; -saveButton.addEventListener('click', funcForSaveButton); \ No newline at end of file diff --git a/src/scripts/storage.js b/src/scripts/storage.js index ef1aeac..8536368 100644 --- a/src/scripts/storage.js +++ b/src/scripts/storage.js @@ -16,13 +16,13 @@ export const eventsArray = [ { header: undefined, startTime: new Date(2019,11,25,9,30), - endTime: new Date(2019,11,25,11,0), + endTime: new Date(2019,11,25,11), description: undefined, ident:Math.random().toFixed(10), }, { header: 'Dinner with friends', - startTime: new Date(2019,11,29,18,0), + startTime: new Date(2019,11,29,18), endTime: new Date(2019,11,29,19,30), description: undefined, ident:Math.random().toFixed(10), diff --git a/src/scripts/validate.js b/src/scripts/validate.js new file mode 100644 index 0000000..63c5270 --- /dev/null +++ b/src/scripts/validate.js @@ -0,0 +1,20 @@ +import { arrDaysOfWeek } from './current_week.js'; +import { filterCorrectDays } from './generate_event_object.js'; +import { eventsArray } from './storage.js'; + +//const validateString = document.querySelector('.validate_string'); +const btnSave = document.querySelector('.event__btn-save'); +const btnSaveAfterEdit = document.querySelector('.event__btn-save_after_edit'); + +export const funcForCheckIntersectionOfEvents = (array) => { + let tempArr = filterCorrectDays(array,arrDaysOfWeek[0],arrDaysOfWeek[6]) + .sort((a, b) => a.startTime - b.startTime); + let x = true; + for(let i = 0; i < tempArr.length; i++){ + if(tempArr[i].endTime > tempArr[i++].startTime){ + x = false; + break; + } + } + return x; +}; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index c2c8118..8e5329d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -54,6 +54,7 @@ padding: 4px; position: relative; z-index: 1; + box-shadow: 3px 3px 5px 0 #b5bbc1; h7, p { margin: 0;