Skip to content

Commit

Permalink
add ability to edit tasks
Browse files Browse the repository at this point in the history
  • Loading branch information
@kethan1
kethan1 committed Mar 2, 2021
1 parent 2d80eb7 commit 56410e2
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 92 deletions.
3 changes: 3 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import url('../node_modules/@fortawesome/fontawesome-free/css/all.min.css');
@import url('../node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css');

@font-face {
font-family: "Comfortaa";
src: url(assets/fonts/Comfortaa-Regular.ttf) format("truetype");
Expand Down
211 changes: 125 additions & 86 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,131 @@
<!DOCTYPE html>
<html>
<head id="head">
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="../node_modules/materialize-css/dist/css/materialize.min.css">
<script src="../node_modules/materialize-css/dist/js/materialize.min.js"></script>
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="index.css">
<script src="render.js"></script>
</head>
<body>
<h4 style="text-align: center;">To-Do List</h4>
<div style="text-align: right; margin-right: 3vw;">
<a href="settings.html" style="color: var(--settings-icon-color);"><i class="fas fa-cog fa-lg"></i></a>
</div>
<head id="head">
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="../node_modules/materialize-css/dist/css/materialize.min.css">
<script src="../node_modules/materialize-css/dist/js/materialize.min.js"></script>
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="index.css">
<script src="render.js"></script>
</head>
<body>
<h4 style="text-align: center;">To-Do List</h4>
<div style="text-align: right; margin-right: 3vw;">
<a href="settings.html" style="color: var(--settings-icon-color);"><i class="fas fa-cog fa-lg"></i></a>
</div>

<div style="margin-right: 16%; margin-left: 7%">
<a href="addListPage.html">Add New List</a>
<div id="to_do_lists" class="content"></div>
</div>
<script>
function RemoveItemfromListInterfacer(x1, x2) {
RemoveItemfromList(x1, x2);
setToDoLists();
}
function RemoveListInterfacer(x1) {
DeleteList(x1);
setToDoLists();
}
function AddTaskInterfacerP1() {
var to_insert_in = document.getElementById(`add_task_input_${event.target.id}`);
to_insert_in.innerHTML = `<td>
<div class='input-field'>
<input id='NewInputName_${event.target.id}' type='text' name='NewInputName' required>
<label for='NewInputName_${event.target.id}'>Task Name</label>
</div>
<div class="row">
<div class="input-field col s6">
<button onclick="AddTaskInterfacerP3('${event.target.id}')" class="btn waves-effect
<div style="margin-right: 16%; margin-left: 7%">
<a href="addListPage.html">Add New List</a>
<div id="to_do_lists" class="content"></div>
</div>
<script>
function RemoveItemfromListInterfacer(x1, x2) {
RemoveItemfromList(x1, x2);
setToDoLists();
}
function RemoveListInterfacer(x1) {
DeleteList(x1);
setToDoLists();
}
function AddTaskInterfacerP1() {
var to_insert_in = document.getElementById(`add_task_input_${event.target.id}`);
to_insert_in.innerHTML = `<td>
<div class='input-field'>
<input id='NewInputName_${event.target.id}' type='text' name='NewInputName' required>
<label for='NewInputName_${event.target.id}'>Task Name</label>
</div>
<div class="row">
<div class="input-field col s6">
<button onclick="AddTaskInterfacerP3('${event.target.id}')" class="btn waves-effect
waves-light btn-small" name="action">Remove</button>
</div>
<ndiv class="input-field col s6">
<button onclick="AddTaskInterfacerP2('${event.target.id}')" class="btn waves-effect
</div>
<ndiv class="input-field col s6">
<button onclick="AddTaskInterfacerP2('${event.target.id}')" class="btn waves-effect
waves-light btn-small" name="action">Add</button>
</div>
</div>
</td>`;
}
function AddTaskInterfacerP2(x1) {
AddItemtoList(x1, document.getElementById(`NewInputName_${x1}`).value);
setToDoLists();
}
function AddTaskInterfacerP3(x1) {
var to_insert_in = document.getElementById(`add_task_input_${x1}`);
to_insert_in.innerHTML = "";
}
function setToDoLists() {
var to_do_lists = document.getElementById("to_do_lists");
to_do_lists.innerHTML = "";
for (var [key, value] of Object.entries(GetLists())) {
var tmp_string = "";
if (value.length != 0) {
for (var i=0; i < value.length; i++) {
tmp_string+=`<tr><td>&#9679;&nbsp;</span>${value[i]} <a style="cursor: pointer;"
onClick="RemoveItemfromListInterfacer('${key}', '${value[i]}')">❌</a></td></tr>`;
}
}

to_do_lists.innerHTML+=`<div style="display: inline-block; vertical-align: top; padding:
1.5vw 2.5vw; margin: 2vw; resize: both; overflow: auto; border-radius: 4px;" class="div_background_color">
<table>
<thead>
<tr style="border: 0px solid black !important;">
<th><span style="font-size: 1.75vw">${key}</span><a style="cursor: pointer;"
onClick="RemoveListInterfacer('${key}')">❌</a></th>
</tr>
</thead>
<tbody>
${tmp_string}
<tr style="border: 0px solid black !important;" id="add_task_input_${key}"></tr>
<tr style="border: 0px solid black !important;"><td><a id="${key}" onClick="AddTaskInterfacerP1()"></a><span id="${key}" style="cursor: pointer" onClick="AddTaskInterfacerP1()" class="plus_sign_green">➕</span></td></tr>
</tbody>
</table>
</div>`
}
}
setToDoLists()
</script>
</body>
<script src="detectAndChangeTheme.js"></script>
</div>
</div>
</td>`;
}
function AddTaskInterfacerP2(x1) {
AddItemtoList(x1, document.getElementById(`NewInputName_${x1}`).value);
setToDoLists();
}
function AddTaskInterfacerP3(x1) {
var to_insert_in = document.getElementById(`add_task_input_${x1}`);
to_insert_in.innerHTML = "";
}
function EditTask(elementID, theKey, save=false, oldValue="") {
var element = document.getElementById(elementID)
var theElementChild = element.firstElementChild
if (save) {
var newValue = document.getElementById(elementID).value
element.parentElement.innerHTML = `
&#9679;&nbsp;
<span id="${newValue}">${newValue}</span>
<a style="color: var(--global-color-invert)" onClick="EditTask('${newValue}', '${theKey}')"><i class="fas fa-pencil-alt"></i></a>
<a style="cursor: pointer;" onClick="RemoveItemfromListInterfacer('${theKey}', '${newValue}')">❌</a>
`
EditItem(theKey, oldValue, newValue)
} else {
if (theElementChild === null) {
old_elm_val = element.innerHTML
element.parentElement.innerHTML = `
<span id="${elementID}">
<input id="input_${elementID}" value="${element.innerHTML}" type="text">
<a onClick="EditTask('input_${elementID}', '${theKey}', save=true, oldValue='${old_elm_val}')" class="waves-effect waves-light btn">Save</a>
</span>
`
var element = document.getElementById(elementID)
var theElementChild = element.firstElementChild
element.firstElementChild.focus();
var val = element.firstElementChild.value;
element.firstElementChild.value = '';
element.firstElementChild.value = val;
}
}

}
function setToDoLists() {
var to_do_lists = document.getElementById("to_do_lists");
to_do_lists.innerHTML = "";
for (var [key, value] of Object.entries(GetLists())) {
var to_do_items = "";
if (value.length != 0) {
for (var i=0; i < value.length; i++) {
to_do_items+=`
<tr>
<td>
&#9679;&nbsp;
<span id="${value[i]}">${value[i]}</span>
<a style="color: var(--global-color-invert)" onClick="EditTask('${value[i]}', '${key}')"><i class="fas fa-pencil-alt"></i></a>
<a style="cursor: pointer;" onClick="RemoveItemfromListInterfacer('${key}', '${value[i]}')">❌</a>
</td>
</tr>`;
}
}

to_do_lists.innerHTML+=`
<div style="display: inline-block; vertical-align: top; padding:
1.5vw 2.5vw; margin: 2vw; resize: both; overflow: auto; border-radius: 4px;" class="div_background_color">
<table>
<thead>
<tr style="border: 0px solid black !important;">
<th><span style="font-size: 18px">${key}</span><a style="cursor: pointer;"
onClick="RemoveListInterfacer('${key}')">❌</a></th>
</tr>
</thead>
<tbody>
${to_do_items}
<tr style="border: 0px solid black !important;" id="add_task_input_${key}"></tr>
<tr style="border: 0px solid black !important;"><td><a id="${key}" onClick="AddTaskInterfacerP1()"></a><span id="${key}" style="cursor: pointer" onClick="AddTaskInterfacerP1()" class="plus_sign_green">➕</span></td></tr>
</tbody>
</table>
</div>`;
}
}
setToDoLists()
</script>
</body>
<script src="detectAndChangeTheme.js"></script>
</html>
3 changes: 1 addition & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,8 @@ const createWindow = () => {
height: 600,
icon: "../assets/app_icons/app_icon.png",
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true,
contextIsolation: false,
contextIsolation: false
},
});

Expand Down
10 changes: 6 additions & 4 deletions src/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,12 @@ function RemoveItemfromList(listName, item) {
get_store().set(`Simple-To-Do-App.${listName}`, tmp_array2);
}

function DeleteList(listName) {
get_store().delete(`Simple-To-Do-App.${listName}`)
function EditItem(listName, item, newItem) {
var tmp_array = get_store().get(`Simple-To-Do-App.${listName}`)
tmp_array[tmp_array.indexOf(item)] = newItem;
get_store().set(`Simple-To-Do-App.${listName}`, tmp_array)
}

function SaveDivPosition() {
var all_divs = document.getElementById("")
function DeleteList(listName) {
get_store().delete(`Simple-To-Do-App.${listName}`)
}

0 comments on commit 56410e2

Please sign in to comment.