Last active
December 9, 2019 11:25
-
-
Save mich-cook/893e3378ad3c94af997d147f6445cabf to your computer and use it in GitHub Desktop.
JavaScript snippet to hide unused activity columns in the 100k challenge "Your Meter Log" table in the Athlete Portal. Showing columns of 0s makes the table unnecessarily wide. columnRemoveExample.js is compatible with the existing markup that's in production on 09Dec19.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // this version uses the bottom row to find columns with a toal of 0.00m | |
| // and then hides the cells in all rows with the same column offsets | |
| // | |
| // it would be tempting to optimize this by moving the query selector | |
| // for the strong element to the top, but that will mess up the offsets | |
| // | |
| // there's probably a clever way to make the inner querySelectorAll() | |
| // more compact, but I couldn't find it quickly | |
| // | |
| const loggedKmTable = `table.kn-table`; | |
| document.querySelectorAll(`${loggedKmTable} tr.kn-table-totals td`) | |
| .forEach((node, i) => { try { | |
| if (node.querySelector(`strong`).textContent === `0.00m`) { | |
| document.querySelectorAll(`${loggedKmTable} tr td:nth-child(${i+1}), | |
| ${loggedKmTable} tr th:nth-child(${i+1})`) | |
| .forEach(node => { node.style.display = `none`; }); | |
| } | |
| // sometimes no strong element so we don't care about it since it has no text | |
| } catch(e) {}}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- example data and slightly minimized example of the table on in the Athlete Portal for "Your Meter Log" --> | |
| <!-- also formatted better for a snippet --> | |
| <style> | |
| .kn-table-totals td { | |
| background-color: #eee; | |
| border-top: 1px solid #dadada; | |
| } | |
| </style> | |
| <table class="kn-table kn-table-table is-bordered is-striped cell-editable"> | |
| <thead> | |
| <tr> | |
| <th class="field_59 sorted-asc"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_59|desc" address="true" class="kn-sort level is-compact"> | |
| <span>Activity Date</span> | |
| <span class="icon is-small is-transparent" style="margin-left: 3px;"> | |
| <i class="fa fa-sort-amount-asc"></i></span> | |
| </th> | |
| <th class="field_53"><span class="table-fixed-label"> | |
| <a href="#field_53|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Rowing Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_56"><span class="table-fixed-label"> | |
| <a href="#field_56|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Running Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_107"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_107|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Ski Erg Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_109"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_109|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Swimming Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_175"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_175|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Air Bike Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_327"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_327|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Spin Bike Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_330"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_330|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Road Bike Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_411"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_411|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Rucking Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_419"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_419|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Elliptical Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_429"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_429|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Stairmaster Score</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="field_304"> | |
| <span class="table-fixed-label"> | |
| <a href="#field_304|asc" address="true" class="kn-sort level is-compact"> | |
| <span>Notes</span> | |
| </a> | |
| </span> | |
| </th> | |
| <th class="kn-table-link"> | |
| <span class="table-fixed-label">Delete Meter Score</span> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">11/29/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">0m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">805.00m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">420.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">shorter dog walk for 805m</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">11/30/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">2,000m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">700.00m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">1,609.34m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">700m runs for WOD penalties</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/01/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">7,000m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">0.00m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">4,023.35m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11"> </span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/02/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">1,000m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">1,600.00m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">0.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11"> </span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/03/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">1,995m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">1,126.54m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">0.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">did 50 cals in the WOD</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/04/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">2,511m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">0.00m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">0.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11"> </span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/05/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">3,009m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">1,126.54m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">0.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">0.7mi dog walk</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/06/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">2,008m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">2,726.54m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">0.00m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">1600m loop run</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/07/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">0m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">2,735.88m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">4,023.35m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">1600m run in the WOD</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr> | |
| <td class="field_59" data-field-key="field_59"><span class="col-0">12/08/2019</span></td> | |
| <td class="field_53" data-field-key="field_53"><span class="col-1">1,000m</span></td> | |
| <td class="field_56" data-field-key="field_56"><span class="col-2">1,926.54m</span></td> | |
| <td class="field_107" data-field-key="field_107"><span class="col-3">0.00m</span></td> | |
| <td class="field_109" data-field-key="field_109"><span class="col-4">0.00m</span></td> | |
| <td class="field_175" data-field-key="field_175"><span class="col-5">5,230.35m</span></td> | |
| <td class="field_327" data-field-key="field_327"><span class="col-6">0.00m</span></td> | |
| <td class="field_330" data-field-key="field_330"><span class="col-7">0.00m</span></td> | |
| <td class="field_411" data-field-key="field_411"><span class="col-8">0.00m</span></td> | |
| <td class="field_419" data-field-key="field_419"><span class="col-9">0.00m</span></td> | |
| <td class="field_429" data-field-key="field_429"><span class="col-10">0.00m</span></td> | |
| <td class="field_304" data-field-key="field_304"><span class="col-11">WOD totals</span></td> | |
| <td class="kn-table-link"><span class="col-12"><span>delete</span></span></td> | |
| </tr> | |
| <tr class="kn-table-totals"> | |
| <td style="text-align: right;"><strong>Total</strong></td> | |
| <td><strong>20,523m</strong></td> | |
| <td><strong>12,747.04m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>15,306.39m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td><strong>0.00m</strong></td> | |
| <td> </td> | |
| <td class="kn-table-link"> </td> | |
| </tr> | |
| </tbody> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment