From 18f94fb85ada39c6fe48c12e0cb91438176024dd Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 10:58:50 +0530 Subject: [PATCH 01/14] added popup and buttons for go to page --- index.html | 9 +++++++- script.js | 62 ++++++++++++++++++++++++++++++++++-------------------- styles.css | 45 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 6bad33c..2a633ed 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

EVENT MANAGER

UPLOAD CSV
-
+
EVENT MANAGER onclick="submitCsv()" />
+
+ + +
+
+
+
diff --git a/script.js b/script.js index bc35f96..5080b22 100644 --- a/script.js +++ b/script.js @@ -17,14 +17,12 @@ class Task { function submitCsv() { let csvType = document.getElementById("csv-type-select").value; let csvFile = document.getElementById("input-file").files[0]; - localStorage.setItem("csvFile", csvFile); - console.log(csvFile); if (csvFile == "" || csvFile == null) { - alert("Please select a CSV file."); + setWarningPopup("Please select a CSV file."); return; } else { if (!csvFile["name"].toLowerCase().endsWith(".csv")) { - alert("Please select a file with a .csv extension."); + setWarningPopup("Please select a file with a .csv extension."); document.getElementById("input-file").value = ""; return; } @@ -37,11 +35,11 @@ function submitCsv() { const contents = e.target.result; if (csvType == "events") { if (parseToEvent(contents)) { - alert("Events added successfully"); + setWarningPopup("Events added successfully"); } } else { if (parseToTask(contents)) { - alert("Tasks added successfully"); + setWarningPopup("Tasks added successfully"); } } }; @@ -53,24 +51,26 @@ function submitCsv() { function parseToEvent(contents) { let eventList = []; const rows = contents.split("\n"); - const header = rows[0]; + const header = rows.shift(); + if (validateHeader(header, "events")) { return false; } + rows.forEach((row) => { + if((row.trim())!==""){ const columns = row.split(","); const event = new Event(columns[0], columns[1], columns[2], columns[3]); eventList.push(event); - }); - console.log(eventList); - localStorage.setItem("events", eventList); + }}); + localStorage.setItem("events", JSON.stringify(eventList)); return eventList; } function parseToTask(contents) { let taskList = []; const rows = contents.split("\n"); - const header = rows[0]; + const header = rows.shift(); if (validateHeader(header, "tasks")) { return false; } @@ -79,26 +79,42 @@ function parseToTask(contents) { const event = new Task(columns[0], columns[1]); taskList.push(event); }); - console.log(taskList); - localStorage.setItem("tasks", taskList); + localStorage.setItem("tasks", JSON.stringify(taskList)); return taskList; } function validateHeader(header, type) { - console.log(header); if (type == "events") { - if (header.trim() == "eventid,eventname,start_date,end_date") { - alert("Correct row"); - } else { - alert("Incorrect event headers"); + if (!(header.trim() == "eventid,eventname,start_date,end_date")) { + setWarningPopup("Incorrect event headers"); + document.getElementById("input-file").value = ""; return true; - } + } } else if (type == "tasks") { - if (header.trim() == "eventid,task_name") { - alert("Correct row"); - } else { - alert("Incorrect task headers"); + if (!(header.trim() == "eventid,task_name")) { + setWarningPopup("Incorrect task headers"); + document.getElementById("input-file").value = ""; return true; } } } + +function setWarningPopup(msg) { + document.getElementById("warning-msg").innerText = "MESSAGE\n" + msg; + document.getElementById("warning-popup").style.padding = "20px"; + let closeButton = document.createElement("input"); + closeButton.className = "close-btn"; + closeButton.id = "close"; + closeButton.value = "CLOSE"; + closeButton.addEventListener("click", reverseInvoice); + document.getElementById("warning-popup").appendChild(closeButton); + document.getElementById("warning-popup").style.border="2px solid black"; + document.getElementById("csv-input-div").style.opacity = "10%"; +} +function reverseInvoice() { + document.getElementById("warning-msg").innerText = ""; + document.getElementById("close").remove(); + document.getElementById("warning-popup").style.border="none"; + document.getElementById("csv-input-div").style.opacity = "100%"; + document.getElementById("warning-popup").style.padding = "0px"; +} diff --git a/styles.css b/styles.css index e4bbd37..5893beb 100644 --- a/styles.css +++ b/styles.css @@ -22,6 +22,7 @@ html { .page-container { text-align: center; padding: 5%; + position: relative; } .csv-input-div { @@ -48,6 +49,18 @@ html { color: var(--new-black); } +.warning-popup { + position: absolute; + top: 50%; + border-radius: 20px; + left: 50%; + transform: translate(-50%, 50%); + background-color: #32e0c4; + font-size: 15px; + font-weight: bold; + border:none; +} + .input-file { background-color: var(--new-black); margin: 5% auto; @@ -70,11 +83,30 @@ html { margin-top: 20px; } +.goto-button{ + background-color: var(--new-black); + border-radius: 5px; + border: 2px solid var(--light-orange); + width: 50%; + color: var(--light-orange); + max-width: 200px; + height: 35px; + font-weight: bold; + margin-bottom: 20px; + margin-top: 20px; +} + .submit-csv-button:hover { background-color: var(--new-white); border: 1px solid var(--light-orange); } +.goto-button:hover { + background-color: var(--new-white); + border: 3px solid var(--new-black); + color: var(--new-black); +} + .csv-type-select { width: 80%; max-width: 300px; @@ -94,3 +126,16 @@ html { color: var(--light-orange); padding: 2%; } + +.close-btn { + width: 90px; + margin-top: 5px; + background-color: red; + color: #32e0c4; + font-weight: bold; + border: 1px solid red; + border-radius: 20px; + padding: 5px; + text-align: center; + cursor: pointer; +} From 11633c35778a2bba9fa796c22c5e29aed5d23210 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:00:01 +0530 Subject: [PATCH 02/14] formatted --- script.js | 19 ++++++++++--------- styles.css | 4 ++-- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/script.js b/script.js index 5080b22..a719834 100644 --- a/script.js +++ b/script.js @@ -56,13 +56,14 @@ function parseToEvent(contents) { if (validateHeader(header, "events")) { return false; } - + rows.forEach((row) => { - if((row.trim())!==""){ - const columns = row.split(","); - const event = new Event(columns[0], columns[1], columns[2], columns[3]); - eventList.push(event); - }}); + if (row.trim() !== "") { + const columns = row.split(","); + const event = new Event(columns[0], columns[1], columns[2], columns[3]); + eventList.push(event); + } + }); localStorage.setItem("events", JSON.stringify(eventList)); return eventList; } @@ -89,7 +90,7 @@ function validateHeader(header, type) { setWarningPopup("Incorrect event headers"); document.getElementById("input-file").value = ""; return true; - } + } } else if (type == "tasks") { if (!(header.trim() == "eventid,task_name")) { setWarningPopup("Incorrect task headers"); @@ -108,13 +109,13 @@ function setWarningPopup(msg) { closeButton.value = "CLOSE"; closeButton.addEventListener("click", reverseInvoice); document.getElementById("warning-popup").appendChild(closeButton); - document.getElementById("warning-popup").style.border="2px solid black"; + document.getElementById("warning-popup").style.border = "2px solid black"; document.getElementById("csv-input-div").style.opacity = "10%"; } function reverseInvoice() { document.getElementById("warning-msg").innerText = ""; document.getElementById("close").remove(); - document.getElementById("warning-popup").style.border="none"; + document.getElementById("warning-popup").style.border = "none"; document.getElementById("csv-input-div").style.opacity = "100%"; document.getElementById("warning-popup").style.padding = "0px"; } diff --git a/styles.css b/styles.css index 5893beb..4fe96de 100644 --- a/styles.css +++ b/styles.css @@ -58,7 +58,7 @@ html { background-color: #32e0c4; font-size: 15px; font-weight: bold; - border:none; + border: none; } .input-file { @@ -83,7 +83,7 @@ html { margin-top: 20px; } -.goto-button{ +.goto-button { background-color: var(--new-black); border-radius: 5px; border: 2px solid var(--light-orange); From cc4de7e5b8e18572f0ed1f14f8e4fc8ac2896fe6 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:05:01 +0530 Subject: [PATCH 03/14] modularity added --- events/events.html | 0 events/script.js | 0 events/styles.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 events/events.html create mode 100644 events/script.js create mode 100644 events/styles.css diff --git a/events/events.html b/events/events.html new file mode 100644 index 0000000..e69de29 diff --git a/events/script.js b/events/script.js new file mode 100644 index 0000000..e69de29 diff --git a/events/styles.css b/events/styles.css new file mode 100644 index 0000000..e69de29 From 9eaa891b9741d57bcb427fe1c7e61235b47f6a08 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:05:59 +0530 Subject: [PATCH 04/14] modularity added --- index.html | 4 ++-- tasks/script.js | 0 tasks/styles.css | 0 tasks/tasks.html | 0 4 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 tasks/script.js create mode 100644 tasks/styles.css create mode 100644 tasks/tasks.html diff --git a/index.html b/index.html index 2a633ed..1eb8764 100644 --- a/index.html +++ b/index.html @@ -36,8 +36,8 @@

EVENT MANAGER

/>
- - + +
diff --git a/tasks/script.js b/tasks/script.js new file mode 100644 index 0000000..e69de29 diff --git a/tasks/styles.css b/tasks/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/tasks/tasks.html b/tasks/tasks.html new file mode 100644 index 0000000..e69de29 From e6a0f65ac3c622c3ffeb5369c0733d2b2387129b Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:08:05 +0530 Subject: [PATCH 05/14] renamed files --- events/{script.js => eventScript.js} | 0 events/{styles.css => eventStyles.css} | 0 events/events.html | 15 +++++++++++++++ tasks/{script.js => eventScript.js} | 0 tasks/{styles.css => eventStyles.css} | 0 5 files changed, 15 insertions(+) rename events/{script.js => eventScript.js} (100%) rename events/{styles.css => eventStyles.css} (100%) rename tasks/{script.js => eventScript.js} (100%) rename tasks/{styles.css => eventStyles.css} (100%) diff --git a/events/script.js b/events/eventScript.js similarity index 100% rename from events/script.js rename to events/eventScript.js diff --git a/events/styles.css b/events/eventStyles.css similarity index 100% rename from events/styles.css rename to events/eventStyles.css diff --git a/events/events.html b/events/events.html index e69de29..3a063f3 100644 --- a/events/events.html +++ b/events/events.html @@ -0,0 +1,15 @@ + + + + Event Manager + + + +
+
+
+
+
+ + + diff --git a/tasks/script.js b/tasks/eventScript.js similarity index 100% rename from tasks/script.js rename to tasks/eventScript.js diff --git a/tasks/styles.css b/tasks/eventStyles.css similarity index 100% rename from tasks/styles.css rename to tasks/eventStyles.css From 5fd2a35f0dad32e073c899be219ab5e6100bae94 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:32:05 +0530 Subject: [PATCH 06/14] new file structure added --- events/eventScript.js => README.md | 0 css/header.css | 40 +++++++++++++++++++++++++++++ styles.css => css/styles.css | 41 +----------------------------- events/eventStyles.css | 0 events/events.html | 15 ----------- index.html | 4 +-- script.js => scripts/script.js | 0 tasks/eventScript.js | 0 tasks/eventStyles.css | 0 tasks/tasks.html | 0 10 files changed, 43 insertions(+), 57 deletions(-) rename events/eventScript.js => README.md (100%) create mode 100644 css/header.css rename styles.css => css/styles.css (71%) delete mode 100644 events/eventStyles.css delete mode 100644 events/events.html rename script.js => scripts/script.js (100%) delete mode 100644 tasks/eventScript.js delete mode 100644 tasks/eventStyles.css delete mode 100644 tasks/tasks.html diff --git a/events/eventScript.js b/README.md similarity index 100% rename from events/eventScript.js rename to README.md diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..547797b --- /dev/null +++ b/css/header.css @@ -0,0 +1,40 @@ +:root { + --new-black: #1f2833; /* Dark blueish black */ + --light-orange: #66ffcc; /* Turquoise */ + --new-white: #eef5db; /* Pale greenish white */ + --light-brown: #9a8c98; /* Dusty lavender */ + --background-color: #e0e0e0; + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body, + html { + background-color: var(--background-color); + height: 100%; + font-family: monospace; + } + + .page-container { + text-align: center; + padding: 1%; + position: relative; + } + + .title-header { + font-family: Georgia, "Times New Roman", Times, serif, Courier, monospace; + font-size: 2.3rem; + font-weight: bold; + color: var(--new-black); + } + + .todo-header { + width: 100%; + background-color: var(--new-black); + color: var(--light-orange); + padding: 2%; + } \ No newline at end of file diff --git a/styles.css b/css/styles.css similarity index 71% rename from styles.css rename to css/styles.css index 4fe96de..797f9f9 100644 --- a/styles.css +++ b/css/styles.css @@ -1,29 +1,4 @@ -:root { - --new-black: #1f2833; /* Dark blueish black */ - --light-orange: #66ffcc; /* Turquoise */ - --new-white: #eef5db; /* Pale greenish white */ - --light-brown: #9a8c98; /* Dusty lavender */ - --background-color: #e0e0e0; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body, -html { - background-color: var(--background-color); - height: 100%; - font-family: monospace; -} - -.page-container { - text-align: center; - padding: 5%; - position: relative; -} +@import url("./header.css"); .csv-input-div { margin: 20px auto; @@ -42,13 +17,6 @@ html { padding: 10px; } -.title-header { - font-family: Georgia, "Times New Roman", Times, serif, Courier, monospace; - font-size: 2.3rem; - font-weight: bold; - color: var(--new-black); -} - .warning-popup { position: absolute; top: 50%; @@ -120,13 +88,6 @@ html { font-family: Arial, Helvetica, sans-serif; } -.todo-header { - width: 100%; - background-color: var(--new-black); - color: var(--light-orange); - padding: 2%; -} - .close-btn { width: 90px; margin-top: 5px; diff --git a/events/eventStyles.css b/events/eventStyles.css deleted file mode 100644 index e69de29..0000000 diff --git a/events/events.html b/events/events.html deleted file mode 100644 index 3a063f3..0000000 --- a/events/events.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - Event Manager - - - -
-
-
-
-
- - - diff --git a/index.html b/index.html index 1eb8764..e904cc1 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Event Manager - +
@@ -44,6 +44,6 @@

EVENT MANAGER

- + diff --git a/script.js b/scripts/script.js similarity index 100% rename from script.js rename to scripts/script.js diff --git a/tasks/eventScript.js b/tasks/eventScript.js deleted file mode 100644 index e69de29..0000000 diff --git a/tasks/eventStyles.css b/tasks/eventStyles.css deleted file mode 100644 index e69de29..0000000 diff --git a/tasks/tasks.html b/tasks/tasks.html deleted file mode 100644 index e69de29..0000000 From a95a340f2ed98632f3370a367aeece335259cd77 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:38:52 +0530 Subject: [PATCH 07/14] events basic structure added --- css/events.css | 1 + events.html | 19 +++++++++++++++++++ index.html | 8 ++++++-- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 css/events.css create mode 100644 events.html diff --git a/css/events.css b/css/events.css new file mode 100644 index 0000000..94fe61b --- /dev/null +++ b/css/events.css @@ -0,0 +1 @@ +@import url('./header.css'); \ No newline at end of file diff --git a/events.html b/events.html new file mode 100644 index 0000000..cdccdb6 --- /dev/null +++ b/events.html @@ -0,0 +1,19 @@ + + + + Event Manager + + + +
+

EVENT MANAGER

+
+
+
UPLOAD CSV
+
+
+
+
+ + + diff --git a/index.html b/index.html index e904cc1..472edcd 100644 --- a/index.html +++ b/index.html @@ -36,8 +36,12 @@

EVENT MANAGER

/>
- - + +
From 5592d9306e85125ee50152aed4489728a65ebfd7 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 11:51:10 +0530 Subject: [PATCH 08/14] header.css added --- css/header.css | 9 +++++++++ css/styles.css | 9 --------- events.html | 4 +++- index.html | 2 +- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/css/header.css b/css/header.css index 547797b..547ecbb 100644 --- a/css/header.css +++ b/css/header.css @@ -37,4 +37,13 @@ background-color: var(--new-black); color: var(--light-orange); padding: 2%; + } + +.contents-div { + margin: 20px auto; + font-size: large; + font-weight: bold; + width: 80%; + max-width: 600px; + border-radius: 5px; } \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 797f9f9..08a0ba1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,14 +1,5 @@ @import url("./header.css"); -.csv-input-div { - margin: 20px auto; - font-size: large; - font-weight: bold; - width: 80%; - max-width: 600px; - border-radius: 5px; -} - .upload-csv-div { background-color: var(--new-black); border-radius: 10px; diff --git a/events.html b/events.html index cdccdb6..9a6e5cf 100644 --- a/events.html +++ b/events.html @@ -9,7 +9,9 @@

EVENT MANAGER

-
UPLOAD CSV
+
EVENTS
+
+
diff --git a/index.html b/index.html index 472edcd..84cd960 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

EVENT MANAGER

UPLOAD CSV
-
+
Date: Thu, 25 Jul 2024 12:34:28 +0530 Subject: [PATCH 09/14] tables added for events --- css/events.css | 31 +++++++++++++- css/header.css | 102 ++++++++++++++++++++++++++-------------------- events.html | 71 +++++++++++++++++++++++++++++++- index.html | 8 +--- scripts/events.js | 20 +++++++++ 5 files changed, 179 insertions(+), 53 deletions(-) create mode 100644 scripts/events.js diff --git a/css/events.css b/css/events.css index 94fe61b..18086fe 100644 --- a/css/events.css +++ b/css/events.css @@ -1 +1,30 @@ -@import url('./header.css'); \ No newline at end of file +@import url('./header.css'); + +/* code pen table */ +table { + border-collapse: collapse; + width: 100%; + } + + td, th { + border: 1px solid #dddddd; + text-align: center; + padding:6px 20px; + } + tr th { + border: 1px solid #dddddd; + text-align: center; + padding:6px 20px; + background-color: #ad1e23; + color:#fff; + } + + tr:hover { + background-color: #dddddd; + cursor: pointer; + } + + .content td, .content th { + border-top: 1px solid transparent; + padding: 2px 10px 2px 15px; + } \ No newline at end of file diff --git a/css/header.css b/css/header.css index 547ecbb..f4fd263 100644 --- a/css/header.css +++ b/css/header.css @@ -1,49 +1,61 @@ :root { - --new-black: #1f2833; /* Dark blueish black */ - --light-orange: #66ffcc; /* Turquoise */ - --new-white: #eef5db; /* Pale greenish white */ - --light-brown: #9a8c98; /* Dusty lavender */ - --background-color: #e0e0e0; - } - - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - body, - html { - background-color: var(--background-color); - height: 100%; - font-family: monospace; - } - - .page-container { - text-align: center; - padding: 1%; - position: relative; - } + --new-black: #1f2833; /* Dark blueish black */ + --light-orange: #66ffcc; /* Turquoise */ + --new-white: #eef5db; /* Pale greenish white */ + --light-brown: #9a8c98; /* Dusty lavender */ + --background-color: #e0e0e0; +} - .title-header { - font-family: Georgia, "Times New Roman", Times, serif, Courier, monospace; - font-size: 2.3rem; - font-weight: bold; - color: var(--new-black); - } +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +html { + background-color: var(--background-color); + height: 100%; + font-family: monospace; +} + +.page-container { + text-align: center; + padding: 1%; + position: relative; +} + +.title-header { + font-family: Georgia, "Times New Roman", Times, serif, Courier, monospace; + font-size: 2.3rem; + font-weight: bold; + color: var(--new-black); +} + +.todo-header { + width: 100%; + background-color: var(--new-black); + color: var(--light-orange); + padding: 2%; +} - .todo-header { - width: 100%; - background-color: var(--new-black); - color: var(--light-orange); - padding: 2%; - } - .contents-div { - margin: 20px auto; - font-size: large; - font-weight: bold; - width: 80%; - max-width: 600px; - border-radius: 5px; - } \ No newline at end of file + margin: 20px auto; + font-size: large; + font-weight: bold; + width: 80%; + max-width: 600px; + border-radius: 5px; +} + +.warning-popup { + position: absolute; + top: 50%; + border-radius: 20px; + left: 50%; + transform: translate(-50%, 50%); + background-color: #32e0c4; + font-size: 15px; + font-weight: bold; + border: none; +} diff --git a/events.html b/events.html index 9a6e5cf..0c865c7 100644 --- a/events.html +++ b/events.html @@ -11,11 +11,80 @@

EVENT MANAGER

EVENTS
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameStart dateEnd dateProgressAction
100.617±6±8±8
120.888±6±8±8
161.580±8±8±5
202.470±5±8±8
222.984±4±8±8
253.850±4±8±8
284.840±4±8±8
326.310±4±8±8
+
- + diff --git a/index.html b/index.html index 84cd960..409adcb 100644 --- a/index.html +++ b/index.html @@ -36,12 +36,8 @@

EVENT MANAGER

/>
- - + +
diff --git a/scripts/events.js b/scripts/events.js new file mode 100644 index 0000000..6c48b1c --- /dev/null +++ b/scripts/events.js @@ -0,0 +1,20 @@ +const events=localStorage.getItem("events"); +console.log(JSON.parse(events)[0]["eventId"]); +function generateEventsTable(){ + //create table + let eventsTable=document.createElement("table"); + + + + + for (let i = 1; i <= events.length; i++) { + let tr = eventsTable.insertRow(); + for (let j = 1; j <= cols; j++) { + let tc = tr.insertCell(); + let input = document.createElement("input"); + input.setAttribute("type", "text"); + input.setAttribute("name", "row"); + input.id = "mul" + x + "-" + i + "," + j; + tc.appendChild(input); +} + }} From 0d860e7d1eee62cd8bad597d7bb596487111a9ba Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 12:35:28 +0530 Subject: [PATCH 10/14] table css added as common --- css/events.css | 30 +----------------------------- css/table.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 css/table.css diff --git a/css/events.css b/css/events.css index 18086fe..2b7251d 100644 --- a/css/events.css +++ b/css/events.css @@ -1,30 +1,2 @@ @import url('./header.css'); - -/* code pen table */ -table { - border-collapse: collapse; - width: 100%; - } - - td, th { - border: 1px solid #dddddd; - text-align: center; - padding:6px 20px; - } - tr th { - border: 1px solid #dddddd; - text-align: center; - padding:6px 20px; - background-color: #ad1e23; - color:#fff; - } - - tr:hover { - background-color: #dddddd; - cursor: pointer; - } - - .content td, .content th { - border-top: 1px solid transparent; - padding: 2px 10px 2px 15px; - } \ No newline at end of file +@import url('./table.css'); \ No newline at end of file diff --git a/css/table.css b/css/table.css new file mode 100644 index 0000000..54d7830 --- /dev/null +++ b/css/table.css @@ -0,0 +1,28 @@ +/* code pen table */ +table { + border-collapse: collapse; + width: 100%; + } + + td, th { + border: 1px solid #dddddd; + text-align: center; + padding:6px 20px; + } + tr th { + border: 1px solid #dddddd; + text-align: center; + padding:6px 20px; + background-color: #ad1e23; + color:#fff; + } + + tr:hover { + background-color: #dddddd; + cursor: pointer; + } + + .content td, .content th { + border-top: 1px solid transparent; + padding: 2px 10px 2px 15px; + } \ No newline at end of file From 113e8e5a0370f3766b381bbb63cfa15540131aca Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 13:56:08 +0530 Subject: [PATCH 11/14] added tasks --- css/tasks.css | 2 ++ events.html | 79 +++++++---------------------------------------- index.html | 1 - scripts/events.js | 75 ++++++++++++++++++++++++++++++++++---------- scripts/tasks.js | 31 +++++++++++++++++++ tasks.html | 29 +++++++++++++++++ 6 files changed, 132 insertions(+), 85 deletions(-) create mode 100644 css/tasks.css create mode 100644 scripts/tasks.js create mode 100644 tasks.html diff --git a/css/tasks.css b/css/tasks.css new file mode 100644 index 0000000..2b7251d --- /dev/null +++ b/css/tasks.css @@ -0,0 +1,2 @@ +@import url('./header.css'); +@import url('./table.css'); \ No newline at end of file diff --git a/events.html b/events.html index 0c865c7..c8f591c 100644 --- a/events.html +++ b/events.html @@ -11,75 +11,18 @@

EVENT MANAGER

EVENTS
-
- - +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameStart dateEnd dateProgressAction
100.617±6±8±8
120.888±6±8±8
161.580±8±8±5
202.470±5±8±8
222.984±4±8±8
253.850±4±8±8
284.840±4±8±8
326.310±4±8±8
-
+ Event Id + Event Name + Start date + End date + Progress + Action + + +
diff --git a/index.html b/index.html index 409adcb..748e709 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,6 @@

EVENT MANAGER

-
diff --git a/scripts/events.js b/scripts/events.js index 6c48b1c..9691504 100644 --- a/scripts/events.js +++ b/scripts/events.js @@ -1,20 +1,63 @@ -const events=localStorage.getItem("events"); -console.log(JSON.parse(events)[0]["eventId"]); -function generateEventsTable(){ - //create table - let eventsTable=document.createElement("table"); - +const eventJson = localStorage.getItem("events"); +let events=JSON.parse(eventJson); +console.log(events); +let eventsTable = document.getElementById("events-table"); + +events.forEach((element) => { + let eventName = element["eventName"]; + let eventId = element["eventId"]; + let startDate = element["startDate"]; + let endDate = element["endDate"]; + console.log(eventName,eventId,startDate,endDate); + let eventColumn = createRow(eventId, eventName, startDate, endDate); + eventsTable.appendChild(eventColumn); +}); + +function createRow(eventId, eventName, startDate, endDate) { + let idRow = document.createElement("td"); + let nameRow = document.createElement("td"); + let startDateRow = document.createElement("td"); + let endDateRow = document.createElement("td"); + let progressRow=document.createElement("td"); + let actionRow=createAction(eventId); + + idRow.textContent = eventId; + nameRow.textContent = eventName; + startDateRow.textContent = startDate; + endDateRow.textContent = endDate; + progressRow.textContent="Pending"; + + + let eventColumn = document.createElement("tr"); + eventColumn.id = eventId; + eventColumn.appendChild(idRow); + eventColumn.appendChild(nameRow); + eventColumn.appendChild(startDateRow); + eventColumn.appendChild(endDateRow); + eventColumn.appendChild(progressRow); + eventColumn.appendChild(actionRow); + return eventColumn; +} + + +function createAction(eventId){ + let actionRow=document.createElement("td"); + let actionAnchor=document.createElement("a"); + actionAnchor.onclick=function(){ + goToTasks(eventId); + } + let actionButton=document.createElement("button"); - for (let i = 1; i <= events.length; i++) { - let tr = eventsTable.insertRow(); - for (let j = 1; j <= cols; j++) { - let tc = tr.insertCell(); - let input = document.createElement("input"); - input.setAttribute("type", "text"); - input.setAttribute("name", "row"); - input.id = "mul" + x + "-" + i + "," + j; - tc.appendChild(input); + actionButton.textContent="TASK"; + actionAnchor.appendChild(actionButton); + actionRow.appendChild(actionAnchor); + + return actionRow; } - }} + +function goToTasks(eventId){ + localStorage.setItem("eventId",eventId); + window.location.href="./tasks.html"; +} \ No newline at end of file diff --git a/scripts/tasks.js b/scripts/tasks.js new file mode 100644 index 0000000..e960e18 --- /dev/null +++ b/scripts/tasks.js @@ -0,0 +1,31 @@ +const taskJson = localStorage.getItem("tasks"); +let tasks = JSON.parse(taskJson); +console.log(tasks); +let tasksTable = document.getElementById("tasks-table"); +let requiredTask = localStorage.getItem("eventId"); + +tasks.forEach((element) => { + let taskId = element["eventId"]; + if (taskId == requiredTask) { + let taskName = element["taskName"]; + console.log(taskName, taskId); + let taskColumn = createRow(taskId, taskName); + tasksTable.appendChild(taskColumn); + } +}); + +function createRow(taskId, taskName) { + let idRow = document.createElement("td"); + let nameRow = document.createElement("td"); + + idRow.textContent = taskId; + nameRow.textContent = taskName; + + let taskColumn = document.createElement("tr"); + taskColumn.id = taskId; + + taskColumn.appendChild(idRow); + taskColumn.appendChild(nameRow); + + return taskColumn; +} diff --git a/tasks.html b/tasks.html new file mode 100644 index 0000000..2f543b3 --- /dev/null +++ b/tasks.html @@ -0,0 +1,29 @@ + + + + Event Manager + + + +
+

EVENT MANAGER

+
+
+
TASKS
+
+
+ + + + +
Event IdTask Name +
+
+
+
+
+
+
+ + + From bcdb6ce0a9e45a6ce1028a0031f8ce72b92e921a Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 14:08:10 +0530 Subject: [PATCH 12/14] added status select for tasks --- scripts/tasks.js | 26 ++++++++++++++++++++++++++ tasks.html | 1 + 2 files changed, 27 insertions(+) diff --git a/scripts/tasks.js b/scripts/tasks.js index e960e18..435ed67 100644 --- a/scripts/tasks.js +++ b/scripts/tasks.js @@ -17,6 +17,7 @@ tasks.forEach((element) => { function createRow(taskId, taskName) { let idRow = document.createElement("td"); let nameRow = document.createElement("td"); + let statusRow=createStatusSelect(); idRow.textContent = taskId; nameRow.textContent = taskName; @@ -26,6 +27,31 @@ function createRow(taskId, taskName) { taskColumn.appendChild(idRow); taskColumn.appendChild(nameRow); + taskColumn.appendChild(statusRow); return taskColumn; } + +function createStatusSelect(){ + let statusRow = document.createElement("td"); + let statusSelect=document.createElement('select'); + + let notStartedOption=document.createElement('option'); + notStartedOption.textContent="Not Started"; + notStartedOption.value="Not-Started"; + + let progressOption=document.createElement('option'); + progressOption.textContent="In Progress"; + progressOption.value="In Progress"; + + let startedOption=document.createElement('option'); + startedOption.textContent="Started"; + startedOption.value="Started"; + + statusSelect.appendChild(notStartedOption); + statusSelect.appendChild(progressOption); + statusSelect.appendChild(startedOption); + + statusRow.appendChild(statusSelect); + return statusRow; +} \ No newline at end of file diff --git a/tasks.html b/tasks.html index 2f543b3..099f855 100644 --- a/tasks.html +++ b/tasks.html @@ -16,6 +16,7 @@

EVENT MANAGER

Event Id Task Name + Staus
From 41ea2f44a2e91b12e3216002cc7850405dd9a003 Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 15:09:43 +0530 Subject: [PATCH 13/14] adding task - event status updater --- css/tasks.css | 11 +++++- scripts/events.js | 10 ++++-- scripts/tasks.js | 87 +++++++++++++++++++++++++++++------------------ tasks.html | 5 +-- 4 files changed, 75 insertions(+), 38 deletions(-) diff --git a/css/tasks.css b/css/tasks.css index 2b7251d..30175e1 100644 --- a/css/tasks.css +++ b/css/tasks.css @@ -1,2 +1,11 @@ @import url('./header.css'); -@import url('./table.css'); \ No newline at end of file +@import url('./table.css'); + +.confirm-button{ + width: 100px; + height: 20px; + border-radius: 20px; + background-color: black; + color: azure; + margin-top: 50px; +} \ No newline at end of file diff --git a/scripts/events.js b/scripts/events.js index 9691504..e8bd386 100644 --- a/scripts/events.js +++ b/scripts/events.js @@ -8,9 +8,11 @@ events.forEach((element) => { let eventId = element["eventId"]; let startDate = element["startDate"]; let endDate = element["endDate"]; - console.log(eventName,eventId,startDate,endDate); + let eventColumn = createRow(eventId, eventName, startDate, endDate); + eventsTable.appendChild(eventColumn); + localStorage.setItem('status-event-'+eventId,'Not Started'); }); function createRow(eventId, eventName, startDate, endDate) { @@ -25,7 +27,7 @@ function createRow(eventId, eventName, startDate, endDate) { nameRow.textContent = eventName; startDateRow.textContent = startDate; endDateRow.textContent = endDate; - progressRow.textContent="Pending"; + progressRow.textContent="Not Started"; let eventColumn = document.createElement("tr"); @@ -60,4 +62,8 @@ function createAction(eventId){ function goToTasks(eventId){ localStorage.setItem("eventId",eventId); window.location.href="./tasks.html"; +} + +function checkProgress(){ + } \ No newline at end of file diff --git a/scripts/tasks.js b/scripts/tasks.js index 435ed67..7c35586 100644 --- a/scripts/tasks.js +++ b/scripts/tasks.js @@ -1,23 +1,26 @@ -const taskJson = localStorage.getItem("tasks"); -let tasks = JSON.parse(taskJson); -console.log(tasks); -let tasksTable = document.getElementById("tasks-table"); -let requiredTask = localStorage.getItem("eventId"); - -tasks.forEach((element) => { - let taskId = element["eventId"]; - if (taskId == requiredTask) { - let taskName = element["taskName"]; - console.log(taskName, taskId); - let taskColumn = createRow(taskId, taskName); - tasksTable.appendChild(taskColumn); - } +document.addEventListener("DOMContentLoaded", function () { + const taskJson = localStorage.getItem("tasks"); + tasks = JSON.parse(taskJson); + tasksTable = document.getElementById("tasks-table"); + requiredEvent = localStorage.getItem("eventId"); + taskLength = 0; + + tasks.forEach((element) => { + let taskId = element["eventId"]; + if (taskId == requiredEvent) { + taskLength += 1; + let taskName = element["taskName"]; + console.log(taskName, taskId); + let taskColumn = createRow(taskId, taskName); + tasksTable.appendChild(taskColumn); + } + }); }); function createRow(taskId, taskName) { let idRow = document.createElement("td"); let nameRow = document.createElement("td"); - let statusRow=createStatusSelect(); + let statusRow = createStatusSelect(); idRow.textContent = taskId; nameRow.textContent = taskName; @@ -32,26 +35,44 @@ function createRow(taskId, taskName) { return taskColumn; } -function createStatusSelect(){ - let statusRow = document.createElement("td"); - let statusSelect=document.createElement('select'); +function createStatusSelect() { + let statusRow = document.createElement("td"); + let statusSelect = document.createElement("select"); + + let notStartedOption = document.createElement("option"); + notStartedOption.textContent = "Not Started"; + notStartedOption.value = 0; + + let progressOption = document.createElement("option"); + progressOption.textContent = "In Progress"; + progressOption.value = 1; - let notStartedOption=document.createElement('option'); - notStartedOption.textContent="Not Started"; - notStartedOption.value="Not-Started"; + let startedOption = document.createElement("option"); + startedOption.textContent = "Started"; + startedOption.value = 2; - let progressOption=document.createElement('option'); - progressOption.textContent="In Progress"; - progressOption.value="In Progress"; + statusSelect.appendChild(notStartedOption); + statusSelect.appendChild(progressOption); + statusSelect.appendChild(startedOption); - let startedOption=document.createElement('option'); - startedOption.textContent="Started"; - startedOption.value="Started"; + statusRow.appendChild(statusSelect); + return statusRow; +} + +function confirmStatus() { + let statusSelects = tasksTable.querySelectorAll("select"); + let status = 0; - statusSelect.appendChild(notStartedOption); - statusSelect.appendChild(progressOption); - statusSelect.appendChild(startedOption); + statusSelects.forEach((select) => { + let statusValue = parseInt(select.value); + status += statusValue; + }); - statusRow.appendChild(statusSelect); - return statusRow; -} \ No newline at end of file + if (status > 0 && status < 2 * taskLength) { + console.log("status"); + localStorage.setItem("status-event-" + requiredEvent, "In Progress"); + } else if (status > 0 && status == tasks.length) { + localStorage.setItem("status-event-" + requiredEvent, "Complete"); + } + console.log(status); +} diff --git a/tasks.html b/tasks.html index 099f855..b8c38e2 100644 --- a/tasks.html +++ b/tasks.html @@ -2,7 +2,7 @@ Event Manager - +
@@ -16,10 +16,11 @@

EVENT MANAGER

Event Id Task Name - Staus + Status
+
From 863c7b805d74e349d05af0515eb4d5a95ab5875d Mon Sep 17 00:00:00 2001 From: sreedev Date: Thu, 25 Jul 2024 17:11:13 +0530 Subject: [PATCH 14/14] progress values being updated from local storage added,only validations remain --- scripts/tasks.js | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/scripts/tasks.js b/scripts/tasks.js index 7c35586..9a2206a 100644 --- a/scripts/tasks.js +++ b/scripts/tasks.js @@ -3,18 +3,21 @@ document.addEventListener("DOMContentLoaded", function () { tasks = JSON.parse(taskJson); tasksTable = document.getElementById("tasks-table"); requiredEvent = localStorage.getItem("eventId"); - taskLength = 0; + taskCount = 0; + statusArray = []; tasks.forEach((element) => { let taskId = element["eventId"]; if (taskId == requiredEvent) { - taskLength += 1; let taskName = element["taskName"]; - console.log(taskName, taskId); let taskColumn = createRow(taskId, taskName); tasksTable.appendChild(taskColumn); } }); + if (localStorage.getItem("task-status-" + requiredEvent) == null) { + localStorage.setItem("task-status-" + requiredEvent, statusArray); + } + updateStatus(); }); function createRow(taskId, taskName) { @@ -36,43 +39,50 @@ function createRow(taskId, taskName) { } function createStatusSelect() { + taskCount += 1; let statusRow = document.createElement("td"); let statusSelect = document.createElement("select"); + statusSelect.id = "task" + taskCount; let notStartedOption = document.createElement("option"); notStartedOption.textContent = "Not Started"; - notStartedOption.value = 0; + notStartedOption.value = "Not Started"; let progressOption = document.createElement("option"); progressOption.textContent = "In Progress"; - progressOption.value = 1; + progressOption.value = "In Progress"; let startedOption = document.createElement("option"); startedOption.textContent = "Started"; - startedOption.value = 2; + startedOption.value = "Started"; statusSelect.appendChild(notStartedOption); statusSelect.appendChild(progressOption); statusSelect.appendChild(startedOption); statusRow.appendChild(statusSelect); + statusArray.push("Not Started"); return statusRow; } function confirmStatus() { + statusList = []; let statusSelects = tasksTable.querySelectorAll("select"); - let status = 0; - statusSelects.forEach((select) => { - let statusValue = parseInt(select.value); - status += statusValue; + let status = select.value; + statusList.push(status); }); - if (status > 0 && status < 2 * taskLength) { - console.log("status"); - localStorage.setItem("status-event-" + requiredEvent, "In Progress"); - } else if (status > 0 && status == tasks.length) { - localStorage.setItem("status-event-" + requiredEvent, "Complete"); + let statusListJson = JSON.stringify(statusList); + localStorage.setItem("task-status-" + requiredEvent, statusListJson); +} +function updateStatus() { + let statusListJson = localStorage.getItem("task-status-" + requiredEvent); + let statusList = JSON.parse(statusListJson); + + for (let i = 0; i < statusList.length; i++) { + let taskId = "task" + (i + 1); + let statusSelect = document.getElementById(taskId); + statusSelect.value = statusList[i]; } - console.log(status); }