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

add parsing dates from content, index refactoring #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add parsing dates from content, index refactoring #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52b9b84
add parsing dates from content, index refactoring
xdarkleonx Oct 9, 2021
400d707
Merge branch 'master' into develop
xdarkleonx Oct 9, 2021
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
102 changes: 41 additions & 61 deletions frontend/static/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 = {
Expand All @@ -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")
Expand All @@ -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("/");
})
Expand All @@ -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);
Expand Down
32 changes: 24 additions & 8 deletions frontend/static/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const data = [
const data = [
{
name: "Shoping list",
created: new Date(2021, 3, 20),
Expand All @@ -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",
Expand All @@ -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
},
]
Expand All @@ -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' };

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;
}
12 changes: 5 additions & 7 deletions frontend/static/js/views/ArchivedNotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 += (
`<tr>
Expand All @@ -30,11 +28,11 @@ export default class extends AbstractView {
<td>${new Date(item.created).toLocaleString('en-CA', createdFormat)}</td>
<td>${item.category}</td>
<td>${item.content}</td>
<td>${dates.toString().replace(/,/g, ', ')}</td>
<td>${dates.length > 1 ? dates.toString().replaceAll(/,/g, ', ') : dates}</td>
<td>
<div class="buttons">
<button class="editButton">
<img id="unarchiveNote" data-created="${item.created}" src=${restoreIconPath}/>
<button class="editButton unarchiveNote">
<img data-created="${item.created}" src=${restoreIconPath}/>
</button>
</div>
</td>
Expand Down
42 changes: 22 additions & 20 deletions frontend/static/js/views/EditNote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
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 `
<div class="main">
<form id="editNoteForm" data-index="${this.noteId}">
<h1>Edit note</h1>
<div class="inputBox">
<div class="inputText">Name</div>
<input type="text" id="name" value="${this.data.name}">
</div>
<div class="inputBox">
<div class="inputText">Date</div>
<input type="date" id="date" value="${new Date(date).toLocaleDateString('fr-CA')}">
</div>
<div class="inputBox">
<div class="inputText">Category</div>
<select id="category" value="${this.data.category}">
<option>Task</option>
<option>Random Thought</option>
<option>Idea</option>
<option ${this.checkIsSelected('Task')}>
Task
</option>
<option ${this.checkIsSelected('Random Thought')}>
Random Thought
</option>
<option ${this.checkIsSelected('Idea')}>
Idea
</option>
</select>
</div>
<div class="inputBox">
Expand All @@ -40,6 +42,6 @@ export default class extends AbstractView {
<button type="submit" class="save">Save note</button>
</form>
</div>
`;
}
`;
}
}
56 changes: 28 additions & 28 deletions frontend/static/js/views/NewNote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `
<div class="main">
<form id="newNoteForm">
<h1>Create new note</h1>
<div class="inputBox">
<div class="inputText">Name</div>
<input type="text" id="name">
</div>
<div class="inputBox">
<div class="inputText">Category</div>
<select id="category">
<option>Task</option>
<option>Random Thought</option>
<option>Idea</option>
</select>
</div>
<div class="inputBox">
<div class="inputText">Content</div>
<textarea name="content" rows="5"></textarea>
</div>
<button type="submit" class="save">Save note</button>
</form>
async getHtml() {
return `
<div class="main">
<form id="newNoteForm">
<h1>Create new note</h1>
<div class="inputBox">
<div class="inputText">Name</div>
<input type="text" id="name">
</div>
<div class="inputBox">
<div class="inputText">Category</div>
<select id="category">
<option>Task</option>
<option>Random Thought</option>
<option>Idea</option>
</select>
</div>
<div class="inputBox">
<div class="inputText">Content</div>
<textarea name="content" rows="5"></textarea>
</div>
`;
}
<button type="submit" class="save">Save note</button>
</form>
</div>
`;
}
}
Loading