Spaces:
Sleeping
Sleeping
File size: 7,741 Bytes
147da27 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!-- jinja2 template engine coding style for flask framework -->
<!DOCTYPE html>
<html>
<head>
<title>Project Task Breakdown</title>
<link rel="stylesheet" href="{{ url_for('static', filename='ProjectBreakdown.css') }}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<!-- Navigation bar; To go to different pages without having to go back to index/home page -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="{{ url_for('text_summarization') }}">Summarization</a>
<a class="nav-link" aria-current="page" href="{{ url_for('project_breakdown') }}">Task Breakdown</a>
<a class="nav-link" href="{{ url_for('language_translation') }}">Translation</a>
<a class="nav-link" href="{{ url_for('text_generation') }}">Generation</a>
</div>
</div>
</div>
</nav>
<header>
<img src="{{ url_for('static', filename='Images/Refineverse logo.png') }}" alt="Refineverse Logo">
<h1>Project Task Breakdown</h1>
</header>
<!-- User input textarea box; breakdown & clear button functionality; display output functionality -->
<main>
<form action="#" method="POST">
<div class="user-story">
<h2>User Story</h2>
<textarea id="user-story-text" name='user-story-text' placeholder="Enter your user story"></textarea>
<button id="clear-btn" formmethod="GET" formaction="#" onclick="clearTextArea()">Clear</button>
<!-- When using flash, it is necessary to always use a for-loop to grab all messages -->
{% with messages = get_flashed_messages(with_categories=true) %} <!-- This is to use flash with pre-set categories -->
{% for category, message in messages %}
{% if category == 'error' %} <!-- If it is a flash message with the error, message, we display our exception message -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% else %} <!-- Otherwise, proceed as usual -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% endfor %}
{% endwith %}
<button id="breakdown-btn" name="breakdown-btn" type="submit">Breakdown</button>
</div>
</form>
<div class="user-story-list">
<h2>Breakdown Summary</h2>
<!-- Output Table -->
<table id="breakdown-table">
<thead>
<tr>
<th onclick="sortTable(0)">User Story</th>
<th onclick="sortTable(1)">Project Task</th>
</tr>
</thead>
<!-- will need to Use For Loop to link sqlite3 database -->
<tbody id="breakdown-body">
{% for row in rows %}
<tr>
<!-- Return and display output from Refineverse.py based on routing from ZeroshotFeature.py -->
<td>{{ row[0] }}</td>
<td>{{ row[1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</main>
<div class="back-Btn-Container">
<div class="buttons-container">
<a href="{{ url_for('index') }}"><button class="back-btn">Back</button></a>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script>
function clearTextArea() {
document.getElementById("user-story-text").value = "";
}
// Function to sort table in ascending/descending order
function sortTable(columnIndex) {
// Initialize variables
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("breakdown-table");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[columnIndex];
y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
// Add arrow icons to the header cells to indicate the sort direction:
var headers = table.getElementsByTagName("TH");
for (i = 0; i < headers.length; i++) {
headers[i].innerHTML = headers[i].innerHTML.replace(/ ▲| ▼/g, "");
}
var arrow = document.createElement("span");
arrow.className = "arrow";
if (dir == "asc") {
arrow.innerHTML = " ▲";
} else {
arrow.innerHTML = " ▼";
}
headers[columnIndex].appendChild(arrow);
}
</script>
</body>
</html>
|