Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Tasks: Amnesiac</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://bootswatch.com/united/bootstrap.css">
- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
- <link rel="stylesheet" href="css/awesome-bootstrap-checkbox.css">
- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
- <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- <script src="js/data.js"></script>
- <style>
- table {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 1.42857143;
- color: #333;
- background-color: #fff;
- }
- /* #table tbody tr td li {
- display: none;
- }
- #table tbody tr:hover td li {
- display: inline-block;
- } */
- </style>
- </head>
- <body style="background-color: #f2f2f2">
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Amnesiac</a>
- </div>
- <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Actions <span class="caret"></span></a>
- <ul class="dropdown-menu" role="menu">
- <li><a href="#" id="newtask">New Task</a></li>
- <li><a href="#">Action2</a></li>
- <li class="divider"></li>
- <li><a href="#">Sort Tasks</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-form navbar-left" role="search">
- <div class="form-group">
- <input class="form-control" placeholder="Search" type="text">
- </div>
- </form>
- <button type="button" class="btn btn-primary" style="float: right;">
- <span class="glyphicon glyphicon-bell"></span>
- </button>
- </div>
- </div>
- -->
- <ul class="nav navbar-nav navbar-right">
- <li><a href="http://localhost:8081/logout">Sign Out</a></li>
- </ul>
- </div>
- </nav>
- <div class="container">
- <div class="row">
- <div class ="col-md-4" >
- <br><br><br>
- <ul class = "nav nav-pills nav-stacked" style="max-width: 260px;">
- <li id="li-all-tasks" class = "active">
- <a href = "#" onclick="switchPanel(0,'li-all-tasks')" aria-expanded="false" data-toole>
- <span class = "badge pull-right" id="all-tasks">0</span>
- <!-- Badge number should be replaced with number of items in panel-->
- All Tasks
- </a>
- </li>
- <li id="li-in-progress" class = "">
- <a href = "#" onclick="switchPanel(1,'li-in-progress')">
- <span class = "badge pull-right" id="in-progress">0</span>
- In progress
- </a>
- </li>
- <li id="li-completed" class="">
- <a href = "#" onclick="switchPanel(2,'li-completed')">
- <span class = "badge pull-right" id="completed-tasks">0</span>
- <!-- Badge number should be replaced with number of items in panel-->
- Completed Tasks
- </a>
- </li>
- <li id="li-archived" class="">
- <a href = "#" onclick="switchPanel(3,'li-archived')">
- <span class = "badge pull-right" id="archived-tasks">0</span>
- Archived
- </a>
- </li>
- </ul>
- </div>
- <div class ="col-md-8" style="background-color: white;" > <!-- This needs some work-->
- <div class="todolist">
- <br>
- <ul>
- <a href="#" id="add-task-button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> Add Task</a>
- <a href="#" id="delete-button" class="btn btn-default" onclick="mark(0)"><span class="glyphicon glyphicon-trash"></span> Delete</a>
- <a href="#" id="archive-mark" class="btn btn-default" onclick="mark(1)"><span class="glyphicon glyphicon-th-list"></span> Archive</a>
- <a href="#" id="mark-save-changes" class="btn btn-primary" style="display: none;" onclick="handleMark()"><span class="glyphicon glyphicon-ok"></span> Save Changes</a>
- <a href="#" id="cancel-delete-button" class="btn btn-default" style="display: none;" onclick="cancelMark()"><span class="glyphicon glyphicon-remove"></span> Cancel</a>
- </ul>
- <div class="modal" id="add-task-modal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close-modal-x">×</button>
- <h4 class="modal-title" id="modalTitle">Add New Task</h4>
- </div>
- <div class="modal-body">
- <form class="form-horizontal" id="form">
- <fieldset>
- <div class="form-group">
- <label for="inputTask" class="col-lg-2 control-label">Task</label>
- <div class="col-lg-10">
- <input class="form-control" autocomplete="off" id="inputTask" placeholder="New Task" value="" type="text">
- </div>
- </div>
- <div class="form-group">
- <label for="inputDescription" class="col-lg-2 control-label">Description</label>
- <div class="col-lg-10">
- <textarea class="form-control" autocomplete="off" rows="3" id="inputDescription"></textarea>
- </div>
- </div>
- <div class="form-group">
- <label for="date-time" class="col-lg-2 control-label">Date/Time</label>
- <div class="col-lg-10">
- <input type='text' class="form-control" id='date-time-picker' autocomplete="off">
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-2 control-label">Prioritize</label>
- <div class="col-lg-1">
- <input class="form-control" id="prioritize" type="checkbox" autocomplete="off">
- </div>
- </div>
- </fieldset>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal" id="close-modal">Close</button>
- <button type="button" class="btn btn-primary" id="save-changes">Save changes</button>
- </div>
- <div class="alert alert-dismissible alert-danger" style="display: none" id="alertd">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <strong id="alertMessage"></strong>
- </div>
- </div>
- </div>
- </div>
- <script>
- var modal = document.getElementById('add-task-modal');
- var btn = document.getElementById("add-task-button");
- var save = document.getElementById("save-changes");
- var span = document.getElementById("close-modal");
- var span2 = document.getElementById("close-modal-x");
- var form = document.getElementById("form");
- btn.onclick = function() {
- form.reset();
- document.getElementById("modalTitle").innerHTML = "Add New Task";
- modal.style.display = "block";
- document.getElementById('inputTask').focus();
- }
- save.onclick = function() {
- addTask();
- }
- span.onclick = function() {
- modal.style.display = "none";
- }
- span2.onclick = function() {
- modal.style.display = "none";
- }
- window.onclick = function(event) {
- if(event.target == modal) {
- modal.style.display = "none";
- }
- }
- modal.onkeydown = function(event) {
- if(event.keyCode==13)
- addTask();
- else if(event.keyCode==27)
- modal.style.display = "none";
- }
- </script>
- <div class="modal" id="description-modal">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close-modal-desc"> ×</button>
- <h4 class="modal-title" id="modalTitle-Desc">Description</h4>
- </div>
- <div class="modal-body">
- <p id="descriptionHTML"></p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-primary" data-dismiss="modal" id="close-button-desc">Close</button>
- </div>
- </div>
- </div>
- </div>
- <ul>
- <div class="progress">
- <div class="progress-bar progress-bar-success"></div> <!--Width should change with number of completed tasks-->
- </div>
- </ul>
- <ul>
- <table class="display" id="table"> <!--class = table table-striped table-hover -->
- <thead>
- <tr>
- <th id="state" style="padding:0; width: 80px " > Done </th>
- <th>Task</th>
- <th>Due Date</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement