diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index 730ce61..1e790e5 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -2,18 +2,9 @@ import Notes from "./views/Notes.js"; import ArchivedNotes from "./views/ArchivedNotes.js"; import NewNote from "./views/NewNote.js"; import EditNote from "./views/EditNote.js"; -import { data } from "./utils.js"; +import { pathToRegex, getParams, getInitData } from "./utils.js"; -const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); - -const getParams = match => { - const values = match.result.slice(1); - const keys = Array.from(match.route.path.matchAll(/:(\w+)/g)).map(result => result[1]); - - return Object.fromEntries(keys.map((key, i) => { - return [key, values[i]]; - })); -} +const initData = getInitData(); const router = async () => { const routes = [ @@ -30,7 +21,8 @@ const router = async () => { } }) - let match = potentialMatches.find(potentialMatch => potentialMatch.result !== null); + let match = potentialMatches + .find(potentialMatch => potentialMatch.result !== null); if (!match) { match = { @@ -40,64 +32,67 @@ const router = async () => { } const view = new match.route.view(getParams(match)); - document.querySelector("#app").innerHTML = await view.getHtml(); } -var localData = JSON.parse(localStorage.getItem("data")); - -if (!localData) { - localStorage.setItem("data", JSON.stringify(data)); -} - +document.addEventListener("DOMContentLoaded", router); window.addEventListener("popstate", router); -document.addEventListener("DOMContentLoaded", () => { - router(); -}) - window.onload = () => { - document.body.addEventListener("click", e => { - if (e.target.matches("#showArchive")) { + document.getElementById('showArchive') + ?.addEventListener("click", (e) => { e.preventDefault(); window.location.assign("/archived"); - } - if (e.target.matches("#createNote")) { + }) + + document.getElementById('createNote') + ?.addEventListener("click", (e) => { e.preventDefault(); window.location.assign("/new"); - } - if (e.target.matches("#editNote")) { + }) + + document.querySelectorAll('.editNote').forEach((button) => { + button.addEventListener("click", (e) => { e.preventDefault(); const index = parseInt(e.target.getAttribute('data-index')); window.location.assign(`/edit/${index}`); - } - if (e.target.matches("#archiveNote")) { + }) + }) + + document.querySelectorAll('.archiveNote').forEach((button) => { + button.addEventListener("click", (e) => { e.preventDefault(); const index = parseInt(e.target.getAttribute('data-index')); - const newData = localData.map((item, i) => ({ + const newData = initData.map((item, i) => ({ ...item, archived: i === index ? true : item.archived })) localStorage.setItem("data", JSON.stringify(newData)); window.location.reload(); - } - if (e.target.matches("#unarchiveNote")) { + }) + }) + + document.querySelectorAll('.unarchiveNote').forEach((button) => { + button.addEventListener("click", (e) => { e.preventDefault(); const created = e.target.getAttribute('data-created'); - const newData = localData.map((item) => ({ + const newData = initData.map((item) => ({ ...item, archived: item.created === created ? false : item.archived })) localStorage.setItem("data", JSON.stringify(newData)); window.location.reload(); - } - if (e.target.matches("#removeNote")) { + }) + }) + + document.querySelectorAll('.removeNote').forEach((button) => { + button.addEventListener("click", (e) => { e.preventDefault(); const index = parseInt(e.target.getAttribute('data-index')); - const newData = localData.filter((_, i) => i !== index); + const newData = initData.filter((_, i) => i !== index); localStorage.setItem("data", JSON.stringify(newData)); window.location.reload(); - } + }) }) document.getElementById("newNoteForm") @@ -110,7 +105,7 @@ window.onload = () => { archived: false, created: new Date() } - const newData = [...localData, newNote]; + const newData = [...initData, newNote]; localStorage.setItem("data", JSON.stringify(newData)); window.location.replace("/"); }) @@ -120,30 +115,15 @@ window.onload = () => { e.preventDefault(); const index = parseInt(e.target.getAttribute('data-index')); - const newData = localData.filter((_, i) => i !== index); - const changedDates = localData[index]?.dates || []; - const lastChangedTimestamp = new Date(changedDates?.[changedDates.length - 1]).setHours(0, 0, 0, 0); - const createdTimestamp = new Date(localData[index].created).setHours(0, 0, 0, 0); - const currentTimestamp = new Date(e.target[1].value).setHours(0, 0, 0, 0); - const createdDate = new Date(createdTimestamp); - const currentDate = new Date(currentTimestamp); + const newData = initData.filter((_, i) => i !== index); + const createdDate = new Date(initData[index].created); const editedNote = { name: e.target[0].value, - category: e.target[2].value, - content: e.target[3].value, - archived: false, - created: createdDate - } - - if (changedDates.length && lastChangedTimestamp !== currentTimestamp) { - editedNote.dates = [...changedDates, currentDate] - } - else if (lastChangedTimestamp === currentTimestamp) { - editedNote.dates = changedDates; - } - else if (createdTimestamp !== currentTimestamp) { - editedNote.dates = [createdDate, currentDate]; + category: e.target[1].value, + content: e.target[2].value, + created: createdDate, + archived: false } newData.push(editedNote); diff --git a/frontend/static/js/utils.js b/frontend/static/js/utils.js index 74bf928..266ae6d 100644 --- a/frontend/static/js/utils.js +++ b/frontend/static/js/utils.js @@ -1,4 +1,4 @@ -export const data = [ +const data = [ { name: "Shoping list", created: new Date(2021, 3, 20), @@ -17,12 +17,8 @@ export const data = [ name: "New Feature", created: new Date(2021, 4, 5), category: "Idea", - content: "Implement new feature", + content: "Implement new feature from 5/5/2021 to 3/5/2021", archived: false, - dates: [ - new Date(2021, 4, 5), - new Date(2021, 4, 3), - ] }, { name: "Free Guy", @@ -49,7 +45,7 @@ export const data = [ name: "Pass the test tasks", created: new Date(2021, 4, 10), category: "Task", - content: "Need to do all tasks", + content: "Need to do all tasks to 10/10/2021", archived: true }, ] @@ -70,4 +66,24 @@ export const archiveIconPath = "https://img.icons8.com/pastel-glyph/20/000000/ar export const deleteIconPath = "https://img.icons8.com/ios-glyphs/20/000000/trash--v1.png"; export const restoreIconPath = "https://img.icons8.com/ios/20/000000/restore-page.png"; export const createdFormat = { month: 'long', day: 'numeric', year: 'numeric' }; -export const datesFormat = { day: 'numeric', month: 'numeric', year: 'numeric' }; \ No newline at end of file + +export const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); + +export const getParams = match => { + const values = match.result.slice(1); + const keys = Array.from(match.route.path.matchAll(/:(\w+)/g)).map(result => result[1]); + + return Object.fromEntries(keys.map((key, i) => { + return [key, values[i]]; + })); +} + +export const getInitData = () => { + var localData = JSON.parse(localStorage.getItem("data")); + + if (!localData) { + localStorage.setItem("data", JSON.stringify(data)); + return data; + } + return localData; +} \ No newline at end of file diff --git a/frontend/static/js/views/ArchivedNotes.js b/frontend/static/js/views/ArchivedNotes.js index 0a317ae..d9ecccf 100644 --- a/frontend/static/js/views/ArchivedNotes.js +++ b/frontend/static/js/views/ArchivedNotes.js @@ -1,5 +1,5 @@ import AbstractView from "./AbstractView.js"; -import { getCategoryIconPath, restoreIconPath, createdFormat, datesFormat } from "../utils.js"; +import { getCategoryIconPath, restoreIconPath, createdFormat } from "../utils.js"; export default class extends AbstractView { constructor(params) { @@ -15,9 +15,7 @@ export default class extends AbstractView { return onlyArchived.reduce((result = '', item) => { if (item.archived) { - const dates = item.dates - ? item.dates?.map(date => new Date(date).toLocaleString('am-ET', datesFormat)) - : []; + const dates = item.content.match(/\d{0,31}(\D)\d{0,12}\1\d{4}/g) || []; return result += ( ` @@ -30,11 +28,11 @@ export default class extends AbstractView { ${new Date(item.created).toLocaleString('en-CA', createdFormat)} ${item.category} ${item.content} - ${dates.toString().replace(/,/g, ', ')} + ${dates.length > 1 ? dates.toString().replaceAll(/,/g, ', ') : dates}
-
diff --git a/frontend/static/js/views/EditNote.js b/frontend/static/js/views/EditNote.js index f353690..1a1561d 100644 --- a/frontend/static/js/views/EditNote.js +++ b/frontend/static/js/views/EditNote.js @@ -1,19 +1,19 @@ import AbstractView from "./AbstractView.js"; export default class extends AbstractView { - constructor(params) { - super(params); - this.noteId = params.id; - this.data = JSON.parse(localStorage.getItem("data"))[this.noteId]; - } + constructor(params) { + super(params); + this.noteId = params.id; + this.data = JSON.parse(localStorage.getItem("data"))[this.noteId]; + this.checkIsSelected = this.checkIsSelected.bind(this); + } - async getHtml() { - const changedDates = this.data?.dates; - const date = changedDates - ? changedDates[changedDates.length - 1] - : this.data.created; + checkIsSelected = (option) => { + return this.data.category == option ? 'selected' : null; + } - return ` + async getHtml() { + return `

Edit note

@@ -21,16 +21,18 @@ export default class extends AbstractView {
Name
-
-
Date
- -
Category
@@ -40,6 +42,6 @@ export default class extends AbstractView {
- `; - } + `; + } } \ No newline at end of file diff --git a/frontend/static/js/views/NewNote.js b/frontend/static/js/views/NewNote.js index 497dade..0dc8514 100644 --- a/frontend/static/js/views/NewNote.js +++ b/frontend/static/js/views/NewNote.js @@ -1,34 +1,34 @@ import AbstractView from "./AbstractView.js"; export default class extends AbstractView { - constructor(params) { - super(params); - } + constructor(params) { + super(params); + } - async getHtml() { - return ` -
-
-

Create new note

-
-
Name
- -
-
-
Category
- -
-
-
Content
- -
- -
+ async getHtml() { + return ` +
+
+

Create new note

+
+
Name
+ +
+
+
Category
+ +
+
+
Content
+
- `; - } + +
+
+ `; + } } \ No newline at end of file diff --git a/frontend/static/js/views/Notes.js b/frontend/static/js/views/Notes.js index a24ebb6..a9a9842 100644 --- a/frontend/static/js/views/Notes.js +++ b/frontend/static/js/views/Notes.js @@ -1,6 +1,6 @@ import AbstractView from "./AbstractView.js"; import { getCategoryIconPath, editIconPath, archiveIconPath } from "../utils.js"; -import { deleteIconPath, createdFormat, datesFormat } from "../utils.js"; +import { deleteIconPath, createdFormat } from "../utils.js"; export default class extends AbstractView { constructor(params) { @@ -16,10 +16,7 @@ export default class extends AbstractView { return sortedData.reduce((result = '', item, index) => { if (!item.archived) { - const dates = item.dates - ? item.dates?.reverse().map(date => new Date(date).toLocaleString('am-ET', datesFormat)) - : []; - + const dates = item.content.match(/\d{0,31}(\D)\d{0,12}\1\d{4}/g) || []; return result += ( ` @@ -31,17 +28,17 @@ export default class extends AbstractView { ${new Date(item.created).toLocaleString('en-CA', createdFormat)} ${item.category} ${item.content} - ${dates.toString().replace(/,/g, ', ')} + ${dates.length > 1 ? dates.toString().replaceAll(/,/g, ', ') : dates}
- - -
diff --git a/server.js b/server.js index f98732b..1eb2d78 100644 --- a/server.js +++ b/server.js @@ -6,7 +6,7 @@ const app = express(); app.use("/static", express.static(path.resolve(__dirname, "frontend", "static"))); app.get("/*", (req, res) => { - res.sendFile(path.resolve(__dirname, "frontend", "index.html")); + res.sendFile(path.resolve(__dirname, "frontend", "index.html")); }); app.listen(3000, () => console.log("Server running...")); \ No newline at end of file