Skip to content

Dev WebUI Index Page

Jump to bottom
Tarun Aditya Thurlapati edited this page Apr 24, 2020 · 3 revisions

There are three parts to this page; The HTML, The CSS and the JS

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

Index.html

This part gets JS and CSS files and sets the title

<head>
    <script type="text/javascript" src="JS\index.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS\index.css"></script>
    <title>To-Do App</title>
</head>

This part Gives info about creators of the app:

<body style="background-color: rgb(0, 1, 75); margin: auto; position: absolute; top: 0%;bottom: 0%;left: 0%;right: 0%;">
    <div id="HeaderDiv">
        <h1>The ToDo APP</h1>
        <h2 style="LINE-HEIGHT:10px;">Created by GROUP 10:</h2>
        <p style="font-weight: bolder;LINE-HEIGHT:5px;">Moyank Giri [PES1UG19CS280]</p>
        <p style="font-weight: bolder;LINE-HEIGHT:5px;">Vaibhava Krishna D [PES1UG19ME217]</p>
        <p style="font-weight: bolder;LINE-HEIGHT:5px;">T Tarun Aditya [PES1UG19CS535]</p>
        <h3 style="LINE-HEIGHT:10px;">A Python Project</h3>
        <h3 style="LINE-HEIGHT:5px;">Semester 1 of batch 2019-23 : UE19CS102 - Section M</h3>
    </div>

The operational html:

Here, we have two buttons which on being clicked lead to the JS function being executed:

  1. Create tododb button
  2. import tododb button
    <div id="BodyDiv">
        <div id="DBButtonDiv" style="top: 10%;">
            <div>IMPORT TODO DATABASE:    <input id="inputFile" type="file" onchange="ImportToDoDB(event)" style="align-items: center;"></div>            
        </div>
        <button id="DBButtonDiv" style="bottom: 10%;" onclick="NewToDoDB()">CREATE NEW TODO DATABASE</button>
    </div>
    <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>

#Index.js

Imports the database

Here we get the file from the user and sends it to the server (HERE) as POST request (as an octet-stream), which will be an XML Http Request,and then acts on the string returned to determine if there was an error. If the operation is successful it navigates to todo page (HERE).

function ImportToDoDB(event)
{
    var fileList = event.target.files;
    var ToDodb = fileList[0];
    var http = new XMLHttpRequest();
    http.open('POST', '/Temp.db', true);
    http.setRequestHeader('Content-type', 'application/octet-stream');
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            if (http.responseText == "There was an error importing the database" || http.responseText == "There was an error in creating the database")
            {
                alert(http.responseText);	
                //Reload the page and ignore the browser cache.
                window.location.reload(true);
            }
            else
            {
                alert(http.responseText);
                GoToTODOHTML();
            }
        }
    }
    http.send(ToDodb);
}

Create DB

this function sends a command to the server (HERE) top create a new database and works on the returned string to determine if there was an error. If the operation is successful it navigates to todo page (HERE).

function NewToDoDB()
{
    var http = new XMLHttpRequest();
    http.open('POST', '/NewToDoDataBase', true);
    http.onreadystatechange = function()
    {
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
            GoToTODOHTML();
        }
    }
    http.send();
}

Go to Todo Page

This function navigates to ToDo page (HERE)

function GoToTODOHTML()
{
    var link = document.createElement('a');
    link.href = '/ToDo.html';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Clone this wiki locally