-
Notifications
You must be signed in to change notification settings - Fork 1
Dev WebUI ToDo Page
The CSS file is being ignored, as it is not important to know about The HTML file is being shown only to inform about the Structure of the Web page The JS File is of more relative importance and has to be understood as it contains information as to how data is sent back and forth between the server and how the data is used to build the web page
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="JS\ToDo.js"></script>
<link rel="stylesheet" type="text/css" href="CSS\ToDo.css"></script>
<title>To-Do App</title>
</head>This part has a button which adds tasks to list using THIS JS. It also contains buttons which edit the list name and deletes the list. (Click on links for JS). It also contains a textbox which contains the list name.
<div id="ListDiv">
<div style="flex-direction: row;position: absolute;top: 1%;left: 1%;right: 1%;margin: auto; height: 7%;">
<p id="SelectedListName" style="color: aliceblue; position: absolute;left: 0%; height: 100%;
margin: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 200%; text-align: left;"></p>
<button id="DeleteListButton" onclick="DeleteList()" style="color: aliceblue; position: absolute;top: 0%;right: 2%; margin: auto; height: 80%; bottom: 0%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(226, 0, 106);">DELETE LIST</button>
<button id="EditListButton" onclick="EditListName()" style="color: aliceblue; position: absolute;top: 0%;right: 14%; margin: auto; height: 80%; bottom: 0%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(129, 204, 32);">EDIT</button>
</div>
<ol id="ItemOL"></ol>
<div id="NewItemBoxDiv" style="flex-direction: row;">
<input type="text" placeholder=" Add New Item" id="NewItemBox">
<button class="ButtonStyle" onclick="AddNewTask()" style="margin:auto;position: absolute;right: 1%;bottom: 1%; top: 1%; width:5%;">Add</button>
</div>
</div>This part of the UI contanins the list of LISTS and a button to add another LIST
<div id="ListsNav">
<h2 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;position: absolute;margin: auto;top: 0%;left: 0%;right: 0%;">YOUR LISTS</h2>
<ol id="ListsOL"></ol>
<button id="AddListButton" onclick="AddList()" style="color: aliceblue; position: absolute;right: 2%; margin: auto; height: 8%; bottom: 2%;left: 2%; width:70%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(15, 119, 179);">ADD LIST</button>
</div>This UI has the following buttons, which help control the app:
<div id="AppNav">
<button id="DBButtonDiv" style="bottom: 85%;" onclick="ShutDownServer()">Shut Down Server</button>
<button id="DBButtonDiv" style="bottom: 69%;" onclick="DestroyToDoDBFrame()">Destroy Database</button>
<button id="DBButtonDiv" style="bottom: 53%;" onclick="DispAbout()">ABOUT</button>
<button id="DBButtonDiv" style="bottom: 37%;" onclick="DispToDoDataFrame()">Print ToDoBDFrame to terminal</button>
<button id="DBButtonDiv" style="bottom: 21%;" onclick="RefreshList()">Refresh List</button>
<button id="DBButtonDiv" style="bottom: 5%;" onclick="ExportToDoDB()">EXPORT TODO DATABASE</button>
</div>
</div>This part shows error messsages or notifications and is mostly used for debugging purposes; ignore it.
<div id="FooterDiv" class="row">
<p style="font-weight: bold; position: absolute; left: 5px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">App Status and notification:</p>
<p style="position: absolute; left: 250px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Everything looks good!</p>
</div>
</body>
</html>var UserInList = 1;
var ToDoDataFrame;This function refreshes the list display (Here)
function PageOnLoad()
{
RefreshList();
}This command sends a POST request to print the list to terminal to the server (Here)
function DispToDoDataFrame()
{
var http = new XMLHttpRequest();
http.open('POST', '/DispToDoDataFrame', true);
http.send();
alert("Attempted to display ToDoDBFrame in Terminal");
}This command alert the user about the creators of the app and its details
function DispAbout()
{
str = "The ToDo APP\n\nCreated by GROUP 10:\nMoyank Giri [PES1UG19CS280]\nVaibhava Krishna D [PES1UG19ME217]\n"
str += "T Tarun Aditya [PES1UG19CS535]\n\nA Python Project\nSemester 1 of batch 2019-23 : UE19CS102 - Section M"
str += "\n\nVERSION: 3"
alert(str);
}This command gets the list data from server (Here) and then manipulates it to print it to the display. Remember, the data comes in as a formatted string and has to be "string decoded" to get the relevant data.. this function creates list items programmatically in HTML and CSS using JS and makes requests using Ajax(ignore the ajax part, since one need not know about it as, we are using only XMLHttpRequest part of AJAX).
It ALSO activates the list selection changed function which displays the tasks of the list selected to the screen in the web page (Here)
function RefreshList()
{
var request = new XMLHttpRequest();
request.open('GET', '/ListData', true);
request.onload = function()
{
// Only handle status code 200
if(request.status === 200)
{
ToDoDataFrame = String(request.response);
if (request.response=="")
{
alert("It appears that no lists exist.\n So, the database will be destroyed.")
DestroyToDoDBFrame();
return null;
}
var groups = ToDoDataFrame.split("DBG:");
var ListsOL = document.getElementById("ListsOL");
while (ListsOL.firstChild) {
ListsOL.removeChild(ListsOL.firstChild);
}
/*Here the HTML is changed programmatically to include list items*/
}
else if(request.status === 404)
{
alert("There was an error in obtaining the Database")
}
else
{
alert("There was an unknown error")
}
};
request.send();
}This command displays the tasks of the list selected to the screen in the web page
function ListSelectionChanged(text)
{
document.getElementById('SelectedListName').innerHTML = text;
var ItemOL = document.getElementById('ItemOL');
while (ItemOL.firstChild) {
ItemOL.removeChild(ItemOL.firstChild);
}
var groups = ToDoDataFrame.split("DBG:");
var temp = 0
groups.forEach(group => {
if (group.split('DBI:')[0] == text)
{
UserInList = temp;
var Items = group.split("DBI:");
for (let k = 1; k < Items.length; k++)
{
/*This part manipulates HTML to display the list*/
}
}
temp+=1;
});
}This command sends a POST request to add new task to the current list to the server using a promptbox (Here)
function AddNewTask()
{
var item = document.getElementById("NewItemBox");
var http = new XMLHttpRequest();
http.open('POST', '/Add', true);
if (item.value == "")
{
alert("You didn't enter any task")
}
else
{
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
http.send('DBG:'+UserInList+"ITEM:"+item.value);
}
}This command sends a POST request to add new list using a prompt box to get the list name, to the server (Here)
function AddList()
{
var http = new XMLHttpRequest();
http.open('POST', '/AddList', true);
var str = prompt("Enter List Name:");
if (str == "")
{
alert("You didn't enter any name")
}
else
{
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
http.send(str);
}
}This command sends a POST request to delete a task in the current list to the server (Here)
function DeleteTask(task)
{
var http = new XMLHttpRequest();
http.open('POST', '/Delete', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
http.send(task.name);
}This command sends a POST request to delete an entire list to the server (Here)
function DeleteList()
{
var http = new XMLHttpRequest();
http.open('POST', '/DeleteList', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
UserInList = 1;
RefreshList();
}
http.send(UserInList);
}This command sends a POST request to add edit a task name, taking input using prompt box, to the current list to the server (Here)
function EditTask(task)
{
var http = new XMLHttpRequest();
http.open('POST', '/Edit', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
var str = prompt("Edit the Task:",task.id);
if (str==null)
{
str = task.id;
}
http.send(task.name+"EDIT:"+str);
}This command sends a POST request to edit the name of a list (using prompt box input) to the server (Here)
function EditListName()
{
var http = new XMLHttpRequest();
http.open('POST', '/EditListName', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
initStr = document.getElementById('SelectedListName').innerHTML;
var str = prompt("Edit the List Name:",initStr);
if (str==null)
{
str = initStr;
}
http.send(UserInList+"EDIT:"+str);
}This command sends a POST request to mark a task as complete or incomplete when the user toggles its state to the current list to the server (Here)
function TaskCheckOrUncheck(checkbox)
{
var http = new XMLHttpRequest();
http.open('POST', '/Done', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "False")
{
alert("Something went wrong")
}
}
RefreshList();
}
if (checkbox.checked)
{
http.send(checkbox.name+"DONE:"+1);
}
else
{
http.send(checkbox.name+"DONE:"+0);
}
}This command sends a GET request to Export ToDoDB the server (Here), causing the server to make all the changes in the list to the database and then pass it back for exporting.
It gets the file as raw bytes, which are converted to a blob data type which is then given to the user to store it on his/her machine.
function ExportToDoDB()
{
var request = new XMLHttpRequest();
request.open('GET', '/Temp.db', true);
request.responseType = 'blob';
request.onload = function()
{
// Only handle status code 200
if(request.status === 200)
{
// The actual download
var blob = new Blob([request.response], { type: 'application/octet-stream' });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "ToDo.db";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
alert("The existing ToDo Database has been exported")
}
else if(request.status === 404)
{
alert("There was an error in obtaining the Database")
}
else
{
alert("There was an unknown error")
}
};
request.send();
}This command sends a POST request to destroy the database to the server (Here) and if that was successful it takes the user to the database creation page, or if it was not it shuts down the app.
function DestroyToDoDBFrame()
{
var http = new XMLHttpRequest();
http.open('POST', '/DestroyToDoDBFrame', true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200)
{
if (http.response == "True")
{
alert("ToDoDBFrame has been destroyed. you will be redirected to Homepage.")
var link = document.createElement('a');
link.href = '\index.html';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else
{
alert("There was an error. The server shall stop.");
ShutDownServer();
}
}
}
http.send();
}This command sends a POST request to shut down the server (Here)
function ShutDownServer()
{
var http = new XMLHttpRequest();
alert("Attempting to shutdown the Webserver")
http.open('POST', '/ShutDownServer', false);
http.send();
}