From 66898dae21c0ef9405006a795da6214bf13a14d7 Mon Sep 17 00:00:00 2001 From: KrX3D Date: Wed, 19 Feb 2025 00:00:01 +0100 Subject: [PATCH] Enhance Seventeen Track Card: Advanced Sorting, Custom Padding, and Column 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. --- README.md | 36 ++++++++---- info.md | 22 +++++--- seventeen-track-card.js | 118 ++++++++++++++++++++++++++++++---------- 3 files changed, 128 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index b184723..f2cc999 100644 --- 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 `/www/seventeen-track-card.js` on your Home Assistant instanse. +Install `seventeen-track-card` by copying `seventeen-track-card.js` from this repo to `/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 index 4d1b674..7a09b6a 100644 --- 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 index 5969c05..b4b90c5 100644 --- 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 => ` - + // Build table header with conditional one-line style for Last Update + let headerHTML = ''; + if (showTitle) { + headerHTML += 'Title'; + } + if (showStatus) { + headerHTML += 'Status'; + } + if (showLocation) { + headerHTML += 'Location'; + } + if (showLastUpdate) { + if (this.config.one_line_last_update === true) { + headerHTML += 'Last Update'; + } else { + headerHTML += 'Last Update'; + } + } + headerHTML += ''; + + // Build table rows based on visible columns + const rowsHTML = packages + .map((elem) => { + let row = ''; + if (showTitle) { + row += ` - + ${elem.friendly_name ? elem.friendly_name : elem.tracking_number} - ${elem.info_text} - ${elem.location ? elem.location : 'Unknown'} - ${elem.timestamp ? formatDate(new Date(elem.timestamp)) : 'Unknown'} - - `).join('')} - `; + `; + } + if (showStatus) { + row += `${elem.info_text}`; + } + if (showLocation) { + row += `${elem.location ? elem.location : 'Unknown'}`; + } + if (showLastUpdate) { + row += `${elem.timestamp ? formatDate(new Date(elem.timestamp)) : 'Unknown'}`; + } + row += ''; + return row; + }) + .join(''); + // Set innerHTML of content with the complete table this.content.innerHTML = ` - - - - - - + ${headerHTML} - - ${content} - + + ${rowsHTML} +
TitleStatusLocationLast update
`; } } 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" +);