Skip to content

Commit b7d3ee1

Browse files
RetiredWizardRetiredWizard
authored
Move sort from table class to async function
1 parent ed6f9ea commit b7d3ee1

2 files changed

Lines changed: 58 additions & 69 deletions

File tree

‎supervisor/shared/web_workflow/static/directory.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;<span id="path"></span></h1>
1212
<div id="usbwarning" style="display: none;">🛈 USB is using the storage. Only allowing reads. See <a href="https://learn.adafruit.com/circuitpython-essentials/circuitpython-storage">the CircuitPython Essentials: Storage guide</a> for details.</div>
1313
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td><td><a class="edit_link" href="">Edit</a></td></tr></template>
14-
<table class="sortable">
14+
<table>
1515
<thead><tr><th>Type</th><th>Size</th><th>Path</th><th>Modified</th><th></th></tr></thead>
1616
<tbody></tbody>
1717
</table>

‎supervisor/shared/web_workflow/static/directory.js‎

Lines changed: 57 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,6 @@
1-
/*
2-
* This content is licensed according to the W3C Software License at
3-
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4-
*
5-
* File: sortable-table.js
6-
*
7-
* Desc: Adds sorting to a HTML data table that implements ARIA Authoring Practices
8-
*/
9-
10-
// 'use strict';
11-
12-
var columnIndex = 2;
13-
const sortEvent = new Event('sort');
14-
15-
class SortableTable {
16-
constructor(tableNode) {
17-
this.tableNode = tableNode;
18-
}
19-
20-
setColumnHeaderSort(columnIndex) {
21-
function compareValues(a, b) {
22-
if (a.value === b.value) {
23-
return 0;
24-
} else {
25-
return a.value < b.value ? -1 : 1;
26-
}
27-
}
28-
29-
var tbodyNode = this.tableNode.querySelector('tbody');
30-
var rowNodes = [];
31-
var dataCells = [];
32-
33-
var rowNode = tbodyNode.firstElementChild;
34-
35-
var index = 0;
36-
while (rowNode) {
37-
rowNodes.push(rowNode);
38-
var rowCells = rowNode.querySelectorAll('th, td');
39-
var dataCell = rowCells[columnIndex];
40-
41-
var data = {};
42-
data.index = index;
43-
data.value = dataCell.textContent.toLowerCase().trim();
44-
dataCells.push(data);
45-
rowNode = rowNode.nextElementSibling;
46-
index += 1;
47-
}
48-
49-
dataCells.sort(compareValues);
50-
51-
// remove rows
52-
while (tbodyNode.firstChild) {
53-
tbodyNode.removeChild(tbodyNode.lastChild);
54-
}
55-
56-
// add sorted rows
57-
for (var i = 0; i < dataCells.length; i += 1) {
58-
tbodyNode.appendChild(rowNodes[dataCells[i].index]);
59-
}
60-
}
61-
}
62-
63-
var sortable_directory = document.querySelector('table.sortable');
64-
const sd_class = {sortable_dir: new SortableTable(sortable_directory)};
65-
sortable_directory.addEventListener('sort', function () { sd_class["sortable_dir"].setColumnHeaderSort(columnIndex); } );
1+
// var sort_column = undefined;
2+
// (document.querySelectorAll("th")).forEach((element, indx) => { if (element.textContent == "Path") {sort_column = indx} } );
3+
var sort_column = 2;
664

675
let new_directory_name = document.getElementById("name");
686
let files = document.getElementById("files");
@@ -72,6 +10,15 @@ var current_path;
7210
var editable = undefined;
7311

7412
async function refresh_list() {
13+
14+
function compareValues(a, b) {
15+
if (a.value === b.value) {
16+
return 0;
17+
} else {
18+
return a.value < b.value ? -1 : 1;
19+
}
20+
}
21+
7522
current_path = window.location.hash.substr(1);
7623
if (current_path == "") {
7724
current_path = "/";
@@ -109,6 +56,10 @@ async function refresh_list() {
10956
}
11057
}
11158

59+
var dirCells = [];
60+
var dataCells = [];
61+
var index = 0;
62+
11263
if (window.location.path != "/fs/") {
11364
var clone = template.content.cloneNode(true);
11465
var td = clone.querySelectorAll("td");
@@ -119,13 +70,24 @@ async function refresh_list() {
11970
path.textContent = "..";
12071
// Remove the delete button
12172
td[4].replaceChildren();
73+
74+
var dataCell = td[sort_column];
75+
76+
var sortdata = {};
77+
sortdata.value = dataCell.textContent.toLowerCase().trim();
78+
sortdata.index = index;
79+
dirCells.push(sortdata);
80+
index += 1;
81+
12282
new_children.push(clone);
12383
}
12484

12585
for (const f of data) {
12686
// Clone the new row and insert it into the table
12787
var clone = template.content.cloneNode(true);
12888
var td = clone.querySelectorAll("td");
89+
var dataCell = td[sort_column];
90+
12991
var icon = "⬇";
13092
var file_path = current_path + f.name;
13193
let api_url = new URL("/fs" + file_path, url_base);
@@ -158,18 +120,45 @@ async function refresh_list() {
158120
delete_button.disabled = !editable;
159121
delete_button.onclick = del;
160122

161-
if (editable) {
123+
if (editable && !f.directory) {
162124
edit_url = new URL(edit_url, url_base);
163125
let edit_link = clone.querySelector(".edit_link");
164126
edit_link.href = edit_url
165127
}
166128

129+
var dataCell = td[sort_column];
130+
131+
var sortdata = {};
132+
sortdata.value = dataCell.textContent.toLowerCase().trim();
133+
sortdata.index = index;
134+
if (!f.directory) {
135+
dataCells.push(sortdata);
136+
index += 1;
137+
} else {
138+
dirCells.push(sortdata);
139+
index += 1;
140+
}
141+
167142
new_children.push(clone);
168143
}
144+
145+
dirCells.sort(compareValues);
146+
dataCells.sort(compareValues);
147+
169148
var tbody = document.querySelector("tbody");
170-
tbody.replaceChildren(...new_children);
171149

172-
sortable_directory.dispatchEvent(sortEvent);
150+
// remove rows
151+
while (tbody.firstChild) {
152+
tbody.removeChild(tbody.lastChild);
153+
}
154+
155+
// add sorted rows
156+
for (var i = 0; i < dirCells.length; i += 1) {
157+
tbody.appendChild(new_children[dirCells[i].index]);
158+
}
159+
for (var i = 0; i < dataCells.length; i += 1) {
160+
tbody.appendChild(new_children[dataCells[i].index]);
161+
}
173162
}
174163

175164
async function find_devices() {

0 commit comments

Comments
 (0)