Skip to content

Commit fa39cdf

Browse files
karaulkaraul
committed
table formatting
1 parent 5903092 commit fa39cdf

File tree

5 files changed

+84
-88
lines changed

5 files changed

+84
-88
lines changed

‎CHANGELOG.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Changelog
2+
Changes to this project are documented in this file
3+
4+
#### 2020-06-28
5+
- added `tableHeaders.js` for external table formatting
6+
#### 2020-02-27
7+
- README.md
8+
- CHANGELOG.md is started after reading nice [source](https://keepachangelog.com/en/1.0.0/)
9+
- few utilities `utilitites/*.js` to check FIT flie and generate table are added, they need better diocumentation
10+
- src folder is cleaned
11+
- index.html: better table formatting
12+
- utilities need better diocumentation
13+
### 2020-02-26
14+
Prototype works, needs utlitities to work with tables

‎index.html

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -36,24 +36,7 @@
3636
}
3737
</style>
3838

39-
<script> tableHeaders = {
40-
start_time: "Day and time",
41-
//time_created: "Created time",
42-
sport: "sport",
43-
//,sub_sport: null
44-
total_distance: "Distance, km",
45-
//,total_elapsed_time: null,
46-
total_timer_time: "time, hour",
47-
enhanced_avg_speed: "Speed",
48-
avg_speed: "Speed",
49-
pace: "pace",
50-
avg_heart_rate: "HR",
51-
avg_HRE: "HRE",
52-
avg_running_cadence: "cadence",
53-
avg_cadence: "cadence",
54-
filename: "File"
55-
};
56-
</script>
39+
<script src=./utilities/tableHeaders.js></script>
5740
<script src=./src/main.js></script>
5841
</head>
5942

‎screenshots/mainWindow.JPG

-12.4 KB
Loading

‎src/main.js

Lines changed: 51 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@ document.addEventListener('DOMContentLoaded', function () {
3232

3333
var csvfilename, data, headers;
3434

35+
var tableHeadersFlag;
36+
try {
37+
tableHeaders = tableHeaders;
38+
tableHeadersFlag = true;
39+
} catch (err) {
40+
tableHeadersFlag = false;
41+
}
42+
43+
3544
/*
3645
var fitParser = new FitParser({
3746
force: true,
@@ -46,14 +55,15 @@ document.addEventListener('DOMContentLoaded', function () {
4655

4756
readtable.onchange = function (e) {
4857
var file = this.files[0];
49-
console.log(file);
58+
//console.log(file);
5059
csvfilename = file.name;
5160
csvReader.readAsText(file);
5261
}
5362

5463

5564
csvReader.onload = function (e) {
5665
var text = e.target.result;
66+
//console.log(text);
5767
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
5868
for (var i = linestart; i < lines.length; i++) {
5969
lines[i] = lines[i].trim().replace(/\s{2,}/g, ' ');
@@ -70,28 +80,32 @@ document.addEventListener('DOMContentLoaded', function () {
7080
var r = {};
7181
var linedata = lines[i].split(delimiter);
7282
//console.log(linedata);
73-
if (linedata[0].slice(-4) === ".fit") {
74-
for (var k = 0; k < linedata.length; k++) {
75-
//console.log(headers[k]);
76-
//console.log(linedata[k]);
83+
for (var k = 0; k < linedata.length; k++) {
84+
//console.log(headers[k]);
85+
//console.log(linedata[k]);
86+
if (tableHeadersFlag) {
7787
if (headers[k] in tableHeaders || headers[k] === "filename") {
7888
r[headers[k]] = linedata[k];
7989
}
90+
} else {
91+
r[headers[k]] = linedata[k];
8092
}
81-
data.push(r);
82-
}
93+
}
94+
data.push(r);
8395
}
8496

8597
// sort out headers accoreing to tableHeaders
86-
var kput = 0;
87-
for (const [key, value] of Object.entries(tableHeaders)) {
88-
for (k = 0; k < headers.length; k++) {
89-
if (key === headers[k]) {
90-
var h = headers[kput];
91-
headers[kput] = headers[k];
92-
headers[k] = h;
93-
kput++;
94-
break;
98+
if (tableHeadersFlag) {
99+
var kput = 0;
100+
for (const [key, value] of Object.entries(tableHeaders)) {
101+
for (k = 0; k < headers.length; k++) {
102+
if (key === headers[k]) {
103+
var h = headers[kput];
104+
headers[kput] = headers[k];
105+
headers[k] = h;
106+
kput++;
107+
break;
108+
}
95109
}
96110
}
97111
};
@@ -102,20 +116,31 @@ document.addEventListener('DOMContentLoaded', function () {
102116

103117
// add header for the Plot button
104118
headers.push("Plot");
105-
tableHeaders.Plot = "Plot";
119+
if (tableHeadersFlag) tableHeaders.Plot = {
120+
name: "Plot",
121+
style: "width: 30px"
122+
};
106123

107124
var row, cell;
108125
const table = document.createElement("table");
109126
const tHead = table.createTHead();
110127
row = tHead.insertRow();
111-
var w = 100/(headers.length);
128+
var w = 100 / (headers.length);
112129
row.style = "color: #fff; background-color: #555";
113130
headers.forEach(p => {
114-
cell = row.insertCell();
115-
cell.textContent = tableHeaders[p];
116-
var width = "width: " + (p==="time_created"? (w+w/3).toString():p === "Plot"? (w-w/3).toString(): w.toString()) +"%;";
117-
cell.style = "text-align:right; word-wrap:break-word; " + width;
118-
cell.tabIndex = 0;
131+
if (tableHeadersFlag) {
132+
if (p in tableHeaders) {
133+
cell = row.insertCell();
134+
cell.textContent = tableHeaders[p].name;
135+
cell.style = "text-align:right; word-wrap:break-word; " + tableHeaders[p].style;
136+
cell.tabIndex = 0;
137+
}
138+
} else {
139+
cell = row.insertCell();
140+
cell.textContent = p;
141+
cell.style = "text-align:right; word-wrap:break-word; "
142+
cell.tabIndex = 0;
143+
}
119144
});
120145

121146
const tBody = table.createTBody();
@@ -127,10 +152,11 @@ document.addEventListener('DOMContentLoaded', function () {
127152
cell.innerHTML = "<button id=" + d["filename"] + " style='width: 39px; height: 20px;'>Plot</button>";
128153
cell.addEventListener("click", plotdata);
129154
} else {
130-
var v = isNaN(d[p]) ? d[p] : parseFloat(d[p]).toFixed(2); // toPrecision(6).
155+
var v = isNaN(d[p]) ? (d[p] === "undefined" ? " " : d[p]) :
156+
parseFloat(d[p]).toFixed(2); // toPrecision(6).
131157
cell.textContent = v;
132158
}
133-
cell.style = "text-align:right";
159+
cell.style = "text-align:right; word-wrap:break-word; "
134160
});
135161
}
136162
document.body.appendChild(table);
@@ -155,51 +181,6 @@ document.addEventListener('DOMContentLoaded', function () {
155181

156182
}
157183

158-
function plotdata_working(e) {
159-
// https://www.codemag.com/article/1511031/CRUD-in-HTML-JavaScript-and-jQuery
160-
var filename = e.target.id;
161-
console.log(filename);
162-
var xhr = new XMLHttpRequest();
163-
//xhr.onreadystatechange = httpRequestfoo;
164-
xhr.onload = httpRequestfoo;
165-
xhr.open('GET', filename, true);
166-
xhr.responseType = 'arraybuffer';
167-
xhr.onerror = function (e) {
168-
console.log(error(xhr.statusText));
169-
};
170-
xhr.send(null);
171-
// https://stackoverflow.com/questions/7255719/downloading-binary-data-using-xmlhttprequest-without-overridemimetype
172-
}
173-
174-
175-
function httpRequestfoo() {
176-
if (this.readyState === 4) {
177-
if (this.status === 200) {
178-
blob = new Uint8Array(this.response);
179-
//loadFitFile();
180-
windowFitplotter = windowFitplotter || [];
181-
console.log(windowFitplotter);
182-
sessionStorage.setItem("blob", blob);
183-
if (windowFitplotter.window) {
184-
loadFitFile(blob);
185-
} else {
186-
windowFitplotter = window.open('fitplotter.html');
187-
}
188-
/*
189-
fitParser.parse(blob, function (error, data) {
190-
if (error) {
191-
console.error(error);
192-
}
193-
else {
194-
console.log(data);
195-
}
196-
});
197-
*/
198-
}
199-
}
200-
}
201-
202-
203184
function resizableGrid(table) {
204185
var row = table.getElementsByTagName('tr')[0],
205186
cols = row ? row.children : undefined;

‎utilities/tableHeaders.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
tableHeaders = {
2+
start_time: {name: "Day and time", style: "width: 200px;"},
3+
time_created: {name: "Day and time", style: "width: 125px;"},
4+
sport: {name: "sport", style: "width: 10%;"},
5+
//sub_sport: {name: null, style: "width: 10%;"},
6+
total_distance: {name: "Distance, km", style: "width: 10%;"},
7+
//total_elapsed_time: {name: null, style: "width: 10%;"},
8+
total_timer_time: {name: "time, hour", style: "width: 10%"},
9+
enhanced_avg_speed: {name: "Speed", style: "width: 10%;"},
10+
avg_speed: {name: "Speed", style: "width: 10%;"},
11+
pace: {name: "pace", style: "width: 5%;"},
12+
avg_heart_rate: {name: "HR", style: "width: 7%;"},
13+
HRE: {name: "HRE", style: "width: 7%;"},
14+
avg_HRE: {name: "HRE", style: "width: 7%;"},
15+
avg_running_cadence: {name: "cadence", style: "width: 10%;"},
16+
avg_cadence: {name: "cadence", style: "width: 10%"},
17+
//filename: {name: "File", style: "width: 200px;"}
18+
};

0 commit comments

Comments
 (0)