Enhance Seventeen Track Card: Advanced Sorting, Custom Padding, and C…

…olumn Visibility Options (#13) * Update seventeen-track-card.js - **Sorting Enhancement:** Replaced the original boolean `sort` option with a new `sort_order` variable. Now accepts `"ASC"` or `"DESC"` (case-insensitive) to sort packages by timestamp. If not provided or left empty, no sorting is applied. - **Table Padding Update:** Modified the `table_padding` configuration to accept a single CSS length value (e.g., `"15px"`). This value is applied uniformly to all sides of the table. The default has been updated to `"32px"`. - **Row Separator Control:** Introduced a new `separator` variable to control the display of row separators. This feature is now disabled by default (`false`), giving you the option to enable it if desired. - **Column Visibility Options:** Added new configuration variables `show_title`, `show_status`, `show_location`, and `show_last_update` (all defaulting to `true`). These options allow you to selectively display or hide each column in the table. - **One-line Last Update Styling:** Added a new variable `one_line_last_update` that, when set to `true`, renders the Last Update column with a fixed width style (e.g., `width:25%`) for a compact one-line display.
ping-localhost · Feb 18, 2025 · 66898da · 66898da
1 parent 8fb29ff
commit 66898da
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -2,22 +2,29 @@
 
 [![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg?style=for-the-badge)](https://github.com/hacs/integration) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/ping-localhost/seventeen-track-card?style=for-the-badge) ![GitHub Release Date](https://img.shields.io/github/release-date/ping-localhost/seventeen-track-card?style=for-the-badge)
 
-This card give you a list of shipment information generated by the official [17track.net sensor](https://www.home-assistant.io/components/seventeentrack/).
+This card gives you a list of shipment information generated by the official [17track.net sensor](https://www.home-assistant.io/components/seventeentrack/).
 
 ## Options
 
-| Name | Type | Requirement | Description
-| ---- | ---- | ------- | -----------
-| type | string | **Required** | `custom:seventeen-track-card`
-| entity | string | **Required** | The entity_id of the entity you want to show (for example, `sensor.seventeentrack_packages_in_transit`).
-| title | string | **Optional** | Add a custom title to the card.
-| sort | boolean | **Optional** | Sortes packages by their timestamp (in ascending order)
+| Name                 | Type    | Requirement | Description |
+| -------------------- | ------- | ----------- | ----------- |
+| type                 | string  | **Required** | `custom:seventeen-track-card` |
+| entity               | string  | **Required** | The entity_id of the sensor you want to show (e.g., `sensor.seventeentrack_packages_in_transit`). |
+| title                | string  | **Optional** | Custom title for the card. Defaults to `17Track.net`. |
+| sort_order           | string  | **Optional** | Sort packages by timestamp. Accepts `"ASC"` or `"DESC"` (case-insensitive). If not provided, no sorting is performed. |
+| table_padding        | string  | **Optional** | Table padding for all sides. Provide a single CSS length (e.g., `"15px"`). Defaults to `"32px"`. |
+| separator            | boolean | **Optional** | Enable row separators between packages. Defaults to `false`. |
+| show_title           | boolean | **Optional** | Show the Title column. Defaults to `true`. |
+| show_status          | boolean | **Optional** | Show the Status column. Defaults to `true`. |
+| show_location        | boolean | **Optional** | Show the Location column. Defaults to `true`. |
+| show_last_update     | boolean | **Optional** | Show the Last Update column. Defaults to `true`. |
+| one_line_last_update | boolean | **Optional** | If `true`, displays the Last Update column with a fixed width style (i.e., one line). Defaults to `false`. |
 
 ## Manual installation
 
 ### Step 1
 
-Install `seventeen-track-card` by copying `seventeen-track-card.js` from this repo to `<config directory>/www/seventeen-track-card.js` on your Home Assistant instanse.
+Install `seventeen-track-card` by copying `seventeen-track-card.js` from this repo to `<config directory>/www/seventeen-track-card.js` on your Home Assistant instance.
 
 **Example:**
 
@@ -28,7 +35,7 @@ mv seventeen-track-card.js /config/www/
 
 ### Step 2
 
-Link `seventeen-track-card` inside you `ui-lovelace.yaml`.
+Link `seventeen-track-card` inside your `ui-lovelace.yaml`.
 
 ```yaml
 resources:
@@ -44,7 +51,7 @@ Install HACS as per there [Installation guide](https://hacs.xyz/docs/installatio
 
 ### Step 2
 
-Add my repository as a custom repostiory in the HACS settings (and be sure to select the `Plugin`-category). 
+Add my repository as a custom repostiory in the HACS settings (and be sure to select the `Plugin` category). 
 
 ### Step 3
 
@@ -61,6 +68,15 @@ Add a custom element in your `ui-lovelace.yaml`
 ```yaml
       - type: custom:seventeen-track-card
         entity: sensor.seventeentrack_packages_in_transit
+        title: "17Track.net"              # Default title
+        sort_order: ""                    # Options: "ASC" or "DESC". Default is no sorting.
+        table_padding: "32px"             # Default padding for all sides (use a single CSS value)
+        separator: false                  # Enable row separators (default: false)
+        show_title: true                  # Show the Title column (default: true)
+        show_status: true                 # Show the Status column (default: true)
+        show_location: true               # Show the Location column (default: true)
+        show_last_update: true            # Show the Last Update column (default: true)
+        one_line_last_update: false       # Display Last Update in one line (default: false)
 ```
 
 # Final result

diff --git a/info.md b/info.md
@@ -1,16 +1,22 @@
 ## Description
 
-Seventeen Track Card is customizable card for the Home Assistant Lovelace front-end. It allows you to show what packages are currently in transit.
+Seventeen Track Card is a customizable card for the Home Assistant Lovelace front-end. It allows you to show what packages are currently in transit.
 
 ## Options
 
-| Name | Type | Requirement | Description
-| ---- | ---- | ------- | -----------
-| type | string | **Required** | `custom:seventeen-track-card`
-| entity | string | **Required** | The entity_id of the entity you want to show (for example, `sensor.seventeentrack_packages_in_transit`).
-| title | string | **Optional** | Add a custom title to the card.
-| sort | boolean | **Optional** | Sortes packages by their timestamp (in ascending order)
-
+| Name                 | Type    | Requirement | Description |
+| -------------------- | ------- | ----------- | ----------- |
+| type                 | string  | **Required** | `custom:seventeen-track-card` |
+| entity               | string  | **Required** | The entity_id of the sensor you want to show (e.g., `sensor.seventeentrack_packages_in_transit`). |
+| title                | string  | **Optional** | Custom title for the card. |
+| sort_order           | string  | **Optional** | Sort packages by timestamp. Accepts `"ASC"` or `"DESC"` (case-insensitive). If not provided, no sorting is performed. |
+| table_padding        | string  | **Optional** | Table padding for all sides. Provide a single CSS length (e.g., `"15px"`). Defaults to `"32px"`. |
+| separator            | boolean | **Optional** | Enable row separators between packages. Defaults to `false`. |
+| show_title           | boolean | **Optional** | Show the Title column. Defaults to `true`. |
+| show_status          | boolean | **Optional** | Show the Status column. Defaults to `true`. |
+| show_location        | boolean | **Optional** | Show the Location column. Defaults to `true`. |
+| show_last_update     | boolean | **Optional** | Show the Last Update column. Defaults to `true`. |
+| one_line_last_update | boolean | **Optional** | If `true`, displays the Last Update column with a fixed width style (i.e., one line). Defaults to `false`. |
 
 ## Example
 

diff --git a/seventeen-track-card.js b/seventeen-track-card.js
@@ -3,7 +3,6 @@ class SeventeenTrackCard extends HTMLElement {
     if (!config.entity) {
       throw new Error('You need to define an entity');
     }
-
     this.config = config;
   }
 
@@ -14,25 +13,37 @@ class SeventeenTrackCard extends HTMLElement {
   set hass(hass) {
     const entityId = this.config.entity;
     const state = hass.states[entityId];
-    const sortPackages = this.config.sort || false;
-    const packages = state.attributes.packages || [];
+    let packages = state.attributes.packages || [];
 
-    if (sortPackages) {
+    // Sorting: use config.sort_order with values "ASC" or "DESC"
+    const sortOrder = this.config.sort_order ? this.config.sort_order.toUpperCase() : null;
+    if (sortOrder === "ASC" || sortOrder === "DESC") {
       packages.sort((first, second) => {
-        return new Date(first.timestamp).getTime() - new Date(second.timestamp).getTime();
+        const diff =
+          new Date(first.timestamp).getTime() - new Date(second.timestamp).getTime();
+        return sortOrder === "ASC" ? diff : -diff;
       });
     }
 
+    // Create card structure if it doesn't exist
     if (!this.content) {
       const card = document.createElement('ha-card');
-      const style = document.createElement('style');
-      this.content = document.createElement('div');
-
       card.header = this.config.title || '17Track.net';
+
+      // Table padding: if provided, use the given value for all sides; default is 32px.
+      const pad = this.config.table_padding || "32px";
+      const tablePadding = `${pad} ${pad} ${pad} ${pad}`;
+
+      // Whether to add row separators (default false)
+      const addSeparators =
+        this.config.separator !== undefined ? this.config.separator : false;
+
+      // Build style content with conditional separator rule
+      const style = document.createElement('style');
       style.textContent = `
         table {
           width: 100%;
-          padding: 0 32px 32px 32px;
+          padding: ${tablePadding};
         }
         thead th {
           text-align: left;
@@ -43,51 +54,98 @@ class SeventeenTrackCard extends HTMLElement {
         tbody tr:nth-child(even) {
           background-color: var(--secondary-background-color);
         }
+        ${addSeparators ? `
+        /* Add the style for separating rows */
+        tbody tr:not(:last-child) {
+          box-shadow: 0 1px 0 0 var(--primary-color);
+        }
+        ` : ''}
         td a {
           color: var(--primary-text-color);
           font-weight: normal;
         }
       `;
 
+      this.content = document.createElement('div');
       card.appendChild(this.content);
       this.appendChild(style);
       this.appendChild(card);
     }
 
-    const formatDate = (input) => input.toISOString().slice(0, 16).replace('T', ' ');
+    // Date formatting function
+    const formatDate = (input) =>
+      input.toISOString().slice(0, 16).replace('T', ' ');
+
+    // Determine which columns to show (default is true for each)
+    const showTitle = this.config.show_title !== false;
+    const showStatus = this.config.show_status !== false;
+    const showLocation = this.config.show_location !== false;
+    const showLastUpdate = this.config.show_last_update !== false;
 
-    const content = `
-      ${packages.map(elem => `
-          <tr>
+    // Build table header with conditional one-line style for Last Update
+    let headerHTML = '<tr>';
+    if (showTitle) {
+      headerHTML += '<th>Title</th>';
+    }
+    if (showStatus) {
+      headerHTML += '<th>Status</th>';
+    }
+    if (showLocation) {
+      headerHTML += '<th>Location</th>';
+    }
+    if (showLastUpdate) {
+      if (this.config.one_line_last_update === true) {
+        headerHTML += '<th style="width:25%">Last Update</th>';
+      } else {
+        headerHTML += '<th>Last Update</th>';
+      }
+    }
+    headerHTML += '</tr>';
+
+    // Build table rows based on visible columns
+    const rowsHTML = packages
+      .map((elem) => {
+        let row = '<tr>';
+        if (showTitle) {
+          row += `
             <td>
-              <a href="https://t.17track.net/en#nums=${elem.tracking_number}" target='_blank'>
+              <a href="https://t.17track.net/en#nums=${elem.tracking_number}" target="_blank">
                 ${elem.friendly_name ? elem.friendly_name : elem.tracking_number}
               </a>
             </td>
-            <td>${elem.info_text}</td>
-            <td>${elem.location ? elem.location : 'Unknown'}</td>
-            <td>${elem.timestamp ? formatDate(new Date(elem.timestamp)) : 'Unknown'}</td>
-            </tr>
-      `).join('')}
-    `;
+          `;
+        }
+        if (showStatus) {
+          row += `<td>${elem.info_text}</td>`;
+        }
+        if (showLocation) {
+          row += `<td>${elem.location ? elem.location : 'Unknown'}</td>`;
+        }
+        if (showLastUpdate) {
+          row += `<td>${elem.timestamp ? formatDate(new Date(elem.timestamp)) : 'Unknown'}</td>`;
+        }
+        row += '</tr>';
+        return row;
+      })
+      .join('');
 
+    // Set innerHTML of content with the complete table
     this.content.innerHTML = `
       <table>
         <thead>
-          <tr>
-            <th>Title</th>
-            <th>Status</th>
-            <th>Location</th>
-            <th>Last update</th>
-            </tr>
+          ${headerHTML}
         </thead>
-      <tbody>
-        ${content}
-      </tbody>
+        <tbody>
+          ${rowsHTML}
+        </tbody>
       </table>
     `;
   }
 }
 
 customElements.define('seventeen-track-card', SeventeenTrackCard);
-console.info("%c SeventeenTrackCard %c v1.1.3 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
+console.info(
+  "%c SeventeenTrackCard %c v1.1.3 ",
+  "color: orange; font-weight: bold; background: black",
+  "color: white; font-weight: bold; background: dimgray"
+);