<!DOCTYPE html> <html lang="en"> <head > <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Project Detail</title> <!-- GoogleFont: Source Sans Pro --> <link rel="stylesheet" href="/css/GoogleFont.css"> <!-- Font Awesome --> <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css"> <!-- Theme style --> <link rel="stylesheet" href="/css/adminlte.min.css"> <!-- bootstrap.css --> <link rel="stylesheet" href="/css/bootstrap.css"> <!-- fontawesome --> <link rel="stylesheet" href="/css/fontawesome.css"> <!-- jQuery library --> <script src="/js/jQuery.js"></script> <!-- Popper JS --> <script src="/js/Popper.js"></script> <!-- Latest compiled JavaScript --> <script src="/js/compiled.js"></script> <link type="text/css" href="/css/style.css" rel="stylesheet"> <!-- Font Awesome Icons --> <link type="text/css" rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css"> <!-- overlayScrollbars --> <link type="text/css" rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <script src="/js/renderTable.js"></script> <script src="/js/dataTable.js"></script> <link rel="stylesheet" href="/css/dataTable.css"> <script src="/dist/js/select2.min.js"></script> <link href="/dist/css/select2.min.css" rel="stylesheet" /> <link href="/dist/css/select22.min.css" rel="stylesheet" /> <link rel="stylesheet" href="/css/modal-dialog.css"> <link rel="stylesheet" href="/css/general.css"> <script src="/js/plnClient.js"></script> <script src="/js/projectDetail.js"></script> <script src="/js/task.js"></script> </head> <body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed" > <!-- Site wrapper --> <div class="wrapper"> <!-- Navbar --> <nav class="main-header navbar navbar-expand navbar-dark"> <!-- Left navbar links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> </ul> <!-- Right navbar links --> <ul class="navbar-nav ml-auto"> <!-- Navbar Search --> <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="fas fa-search"></i> </a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"> <i class="fas fa-times"></i> </button> </div> </div> </form> </div> </li> <li class="nav-item"> <a class="nav-link" data-widget="fullscreen" href="#" role="button"> <i class="fas fa-expand-arrows-alt"></i> </a> </li> <li class="nav-item"> <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"> <i class="fas fa-th-large"></i> </a> </li> </ul> </nav> <!-- /.navbar --> <!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user (optional) --> <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="image"> <img src="/images/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"> </div> <div class="info"> <a href="#" class="d-block">Alexander Pierce</a> </div> </div> <!-- SidebarSearch Form --> <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon fas fa-book"></i> <p> Project <i class="fas fa-angle-left right"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item" > <a href="projects.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Projects</p> </a> </li> <li class="nav-item"> <a href="project-add.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Project Add</p> </a> </li> <li class="nav-item"> <a href="project-edit.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Project Edit</p> </a> </li> <li class="nav-item"> <a href="project-detail.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Project Detail</p> </a> </li> </ul> </li> </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1> <span id="projectID"></span> </h1> </div> </div> </div><!-- /.container-fluid --> </section> <!-- Main content --> <section class="content"> <!-- Default box --> <div class="card"> <div class="card-header"> <h1 class="text-primary fas fa-paint-brush" id="projectName" ></h1> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove"> <i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> <div class="row"> <div class="col-12 col-md-12 col-lg-8 order-2 order-md-1"> <div class="row"> <div class="col-12 col-sm-6"> <div class="info-box bg-light"> <div class="info-box-content"> <span class="info-box-text text-center text-muted">Status</span> <span class="info-box-number text-center text-muted mb-0" id ="projectStatus"></span> </div> </div> </div> <div class="col-12 col-sm-6"> <div class="info-box bg-light"> <div class="info-box-content"> <span class="info-box-text text-center text-muted" >Deadline</span> <span class="info-box-number text-center text-muted mb-0" id="deadline"></span> </div> </div> </div> </div> <div class="row"> <div class="col-12 col-sm-6"> <div class="info-box bg-light"> <div class="info-box-content"> <span class="info-box-text text-center text-muted">Estimated budget</span> <span class="info-box-number text-center text-muted mb-0" id="estimatedBudget"></span> </div> </div> </div> <div class="col-12 col-sm-6"> <div class="info-box bg-light"> <div class="info-box-content"> <span class="info-box-text text-center text-muted" >Estimated project duration</span> <span class="info-box-number text-center text-muted mb-0" id="estimatedDuration"></span> </div> </div> </div> </div> <!-- DONUT CHART --> <div class="col-12 "> <div class="card-body"> <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; width:40%;"></canvas> </div> <!-- /.card-body --> </div> </div> <div class="col-12 col-md-12 col-lg-4 order-1 order-md-2"> <h3 class="text-primary">Descreption</h3> <p class="text-muted"><span id="descreption"></span></p> <br> <div class="text-muted"> <p class="text-sm lli">Project Leader<span hidden id="projectLeaderID"></span> <b class="d-block" id="flname"></b> <b class="d-block coo">Contact Info</b> <b class="d-block" >Phone Number: <span id="phoneNumber"></span></b> <b class="d-block">Email: <span id="email"></span> </b> </p> <p class="text-sm lli ">Client <span hidden id="clientID">asas</span> <b class="d-block" id="flnameclient"></b> <b class="d-block coo">Contact Info</b> <b class="d-block" >Phone Number: <span id="phoneNumberclient"></span></b> <b class="d-block">Email: <span id="emailclient"></span> </b> </p> <br> <p class="text-sm">Create Date Time <b class="d-block" id="createDateTime"></b> </p> </div> </div> </div> </div> <!-- /.card-body --> </div> <div class="card"> <div class="card-header"> <h3 class="card-title">Project's tasks</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove"> <i class="fas fa-times"></i> </button> </div> </div> <div class="card-body p-0"> <table class="table table-striped projects" id ="queryAllTasksTable"> <thead> <tr> <th style="width: 5%"> # </th> <th style="width: 15%"> Task Name </th> <th style="width: 15%"> Estemated Duration <span>in monthe</span> </th> <th style="width: 10%"> Dead line </th> <th style="width: 10%"> Defecalt Degree /10 </th> <th style="width: 10%"> Wage </th> <th style="width: 15%" > Status </th> <th style="width: 15%"> </th> </tr> </thead> </table> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#add-task"> Add New Task </button> <form> <div class="modal fade" id="add-task"> <div class="modal-dialog"> <div class="modal-content bg-secondary"> <div class="modal-header"> <h4 class="modal-title">Add New Task</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="card-body"> <div class="form-group"> <label for="taskName">Task Name</label> <input type="text" id="taskName" class="form-control" required> </div> <div class="form-group"> <label for="taskdescreption">Task Description</label> <textarea id="taskdescreption" class="form-control" rows="4" required></textarea> </div> <div class="form-group"> <label for="taskStatus">Status</label> <select id="taskStatus" class="form-control custom-select" required> <option>Not Started</option> <option>On Hold</option> <option>Canceled</option> <option>Success</option> <option>In progress</option> </select> </div> <div class="form-group"> <label for="defecaltDegree">Defecalt Degree</label> <select id="defecaltDegree" class="form-control" required> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="form-group"> <label for="taskEmployeeID">Employee</label> <select id="taskEmployeeID" class="form-control custom-select" required> <option></option> </select> </div> </div> </div> <div class="col-md-6"> <div class="card-body"> <div class="form-group"> <label for="taskWage">Task wage</label> <input type="number" id="taskWage" class="form-control" required> <span id="taskWageError" class="errmsg"></span> </div> <div class="form-group"> <label for="estematedTaskDuration">Estimated task duration</label> <input type="number" id="estematedTaskDuration" class="form-control" required> <span id="estematedTaskDurationError" class="errmsg"></span> </div> <div class="form-group"> <label for="taskDeadline">deadline</label> <input type="Date" id="taskDeadline" class="form-control" required> </div> </div> </div> </div> </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button> <button type="submit" onsubmit="return false" id="addNewTask" class="btn btn-outline-light">Add Task</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> </form> </div> <!-- /.card-body --> </div> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-dark"> <!-- Control sidebar content goes here --> </aside> <!-- /.control-sidebar --> </div> <!-- ./wrapper --> <form> <div class="modal fade" id="modal-edit"> <div class="modal-dialog"> <div class="modal-content bg-secondary"> <div class="modal-header"> <h4 class="modal-title">Edit Task <br> <p id="taskIDEdit"></p> </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="card-body"> <div class="form-group"> <label for="taskNameEdit">Task Name</label> <input type="text" id="taskNameEdit" class="form-control" required> </div> <div class="form-group"> <label for="taskdescreptionEdit">Task Description</label> <textarea id="taskdescreptionEdit" class="form-control" rows="4" required></textarea> </div> <div class="form-group"> <label for="taskStatusEdit">Status</label> <select id="taskStatusEdit" class="form-control custom-select" required> <option selected disabled>Select one</option> <option>On Hold</option> <option>Canceled</option> <option>Success</option> <option>Not Started</option> <option>In progress</option> </select> </div> <div class="form-group"> <label for="taskEmployeeEdit">Employee</label> <select id="taskEmployeeEdit" class="form-control custom-select" required> <option></option> </select> </div> <div class="form-group"> <label for="defecaltDegreeEdit">Defecalt Degree</label> <select id="defecaltDegreeEdit" class="form-control" required> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> </div> <div class="card-body"> <div class="form-group"> <label for="taskWageEdit">Task Wage</label> <input type="number" id="taskWageEdit" class="form-control" required> <span id="taskWageEditError" class="errmsg"></span> </div> <div class="form-group"> <label for="estematedTaskDurationEdit">Estimated task duration</label> <input type="number" id="estematedTaskDurationEdit" class="form-control" required> <span id="estematedTaskDurationEditError" class="errmsg"></span> </div> <div class="form-group"> <label for="taskDeadlineEdit">deadline</label> <input type="Date" id="taskDeadlineEdit" class="form-control" required> </div> </div> </div> </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button> <button type="submit" id="editTask" class="btn btn-outline-light">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> </form> <label for="taskhelper" hidden>Task Name</label> <input hidden type="text" id="taskhelper" class="form-control" required> <!-- jQuery --> <script src="/plugins/jquery/jquery.min.js"></script> <!-- Bootstrap 4 --> <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- AdminLTE App --> <script src="/js/adminlte.min.js"></script> <!-- AdminLTE for demo purposes --> <script src="/js/demo.js"></script> <!-- ChartJS --> <script src="/plugins/chart.js/Chart.min.js"></script> </body> </html> </body> </html>