From b15211a1e1e39b9e8e791b06fc83f60aa6c5b45f Mon Sep 17 00:00:00 2001 From: Aaron Godfrey Date: Mon, 29 Jan 2024 19:34:48 -0800 Subject: [PATCH] Added sort_by and sort_dir config options. --- README.md | 24 ++++++++++++----------- info.md | 40 +++++++++++++++++++-------------------- nintendo-wishlist-card.js | 7 +++++++ 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index ab63894..cc862e7 100644 --- a/README.md +++ b/README.md @@ -33,17 +33,19 @@ cards: ## Configuration -| Name | Type | Default | Description | -| ------------ | ------ | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| type | string | _Required_ | `custom:nintendo-wishlist-card` | -| entity | string | _Required_ | The entity id of the nintendo-wishlist custom component. e.g. `sensor.nintendo_wishlist` | -| title | string | | The title to display at the top of the card. | -| image_style | string | boxart | The art style to display. Options are `boxart` or `backgroundart`. | -| max | int | 5 | The maximum number of items to show in the card. | -| accent_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#000` when `image_style` is `backgroundart` | Color of the ribbon in boxart image_style and background in backgroundart image_style. Accepts any valid css color e.g. (`red`, `#fff`) | -| title_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#fff` when `image_style` is `backgroundart` | Color of the title. Accepts any valid css color e.g. (`red`, `#fff`) | -| line1_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#fff` when `image_style` is `backgroundart` | Color of the pricing text. Accepts any valid css color e.g. (`red`, `#fff`) | -| border_color | string | `#fff` when `image_style` is `boxart`, `#000` when `image_style` is `backgroundart` | Color of the outside border in boxart image_style and border around image in backgroundart image_style. Accepts any valid css color e.g. (`red`, `#fff`) | +| Name | Type | Default | Description | +| ------------ | --------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| type | string | _Required_ | `custom:nintendo-wishlist-card` | +| entity | string | _Required_ | The entity id of the nintendo-wishlist custom component. e.g. `sensor.nintendo_wishlist` | +| title | string | | The title to display at the top of the card. | +| image_style | string | boxart | The art style to display. Options are `boxart` or `backgroundart`. | +| max | int | 5 | The maximum number of items to show in the card. | +| accent_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#000` when `image_style` is `backgroundart` | Color of the ribbon in boxart image_style and background in backgroundart image_style. Accepts any valid css color e.g. (`red`, `#fff`) | +| title_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#fff` when `image_style` is `backgroundart` | Color of the title. Accepts any valid css color e.g. (`red`, `#fff`) | +| line1_color | string | `var(--primary-color)` when `image_style` is `boxart`, `#fff` when `image_style` is `backgroundart` | Color of the pricing text. Accepts any valid css color e.g. (`red`, `#fff`) | +| border_color | string | `#fff` when `image_style` is `boxart`, `#000` when `image_style` is `backgroundart` | Color of the outside border in boxart image_style and border around image in backgroundart image_style. Accepts any valid css color e.g. (`red`, `#fff`) | +| sort_by | `percent_off`, `sale_price` | No specific order | What field the results should be sorted by. | +| sort_dir | `asc`, `desc` | `desc` | Which direction to sort the results. | ## Credits diff --git a/info.md b/info.md index a051a69..9c4c066 100644 --- a/info.md +++ b/info.md @@ -1,21 +1,19 @@ -Nintendo Wishlist Card -====================== +# Nintendo Wishlist Card [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) A card that displays Nintendo Switch games that are on sale from your wish list. -| Cover Art | Background Art -| ---- | ---- -| Cover Art | Background Art +| Cover Art | Background Art | +| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Cover Art | Background Art | -Install -------- +## Install -1) Install the [Nintendo Wishlist Custom Component](https://github.com/custom-components/sensor.nintendo_wishlist). -2) Copy the [nintendo-wishlist-card.js](https://raw.githubusercontent.com/custom-cards/nintendo-wishlist-card/master/nintendo-wishlist-card.js) into your `www/custom-lovelace` folder or install it +1. Install the [Nintendo Wishlist Custom Component](https://github.com/custom-components/sensor.nintendo_wishlist). +2. Copy the [nintendo-wishlist-card.js](https://raw.githubusercontent.com/custom-cards/nintendo-wishlist-card/master/nintendo-wishlist-card.js) into your `www/custom-lovelace` folder or install it from the [HACS (Home Assistant Community Store)](https://custom-components.github.io/hacs/). -3) Add the following to your `ui-lovelace.yaml` file under `resources`: +3. Add the following to your `ui-lovelace.yaml` file under `resources`: ```yaml resources: @@ -23,7 +21,7 @@ resources: type: js ``` -4) Add the card to one of your lovelace views. +4. Add the card to one of your lovelace views. ```yaml cards: @@ -33,18 +31,18 @@ cards: image_style: boxart ``` -Configuration -------------- +## Configuration -|Name|Type|Default|Description| -|-|-|-|-| -|type|string|*Required*|`custom:nintendo-wishlist-card`| -|entity|string|*Required*|The entity id of the nintendo-wishlist custom component. e.g. `sensor.nintendo_wishlist`| -|title|string||The title to display at the top of the card.| -|image_style|string|boxart|The art style to display. Options are `boxart` or `backgroundart`.| +| Name | Type | Default | Description | +| ----------- | -------------------------- | ----------------- | ---------------------------------------------------------------------------------------- | +| type | string | _Required_ | `custom:nintendo-wishlist-card` | +| entity | string | _Required_ | The entity id of the nintendo-wishlist custom component. e.g. `sensor.nintendo_wishlist` | +| title | string | | The title to display at the top of the card. | +| image_style | string | boxart | The art style to display. Options are `boxart` or `backgroundart`. | +| sort_by | `percent_off`,`sale_price` | No default order. | The field to sort the results in the car by. | +| sort_dir | `asc`,`desc` | `desc` | The direction to sort the results by (ascending or descending). | -Credits -------- +## Credits The code for this card is a minor modification of [@maykar](https://github.com/maykar)'s [upcoming-media-card](https://github.com/custom-cards/upcoming-media-card). diff --git a/nintendo-wishlist-card.js b/nintendo-wishlist-card.js index 0272284..0f4eb91 100644 --- a/nintendo-wishlist-card.js +++ b/nintendo-wishlist-card.js @@ -19,6 +19,13 @@ class NintendoWishlistCard extends HTMLElement { if (!json || !json.length) { return; } + + const sortBy = this.config.sort_by + const sortDir = this.config.sort_dir ?? 'desc' + if (sortBy) { + json.sort((a, b) => sortDir === 'desc' ? b[sortBy] - a[sortBy] : a[sortBy] - b[sortBy]) + } + const view = this.config.image_style || "boxart"; const title_size = "large"; const line1_size = "medium";