Total card rewrite with tons of improvements and visual editor suppor…

…t. Beta release for now.

.devcontainer/config/configuration.yaml

@@ -0,0 +1,11 @@
+default_config:
+demo:
+
+sensor:
+  - platform: entur_public_transport
+    name: Transport
+    show_on_map: true
+    stop_ids:
+      - "NSR:StopPlace:548" # Bergen train station
+      - "NSR:StopPlace:5850" # Grorud T bus stop
+      - "NSR:StopPlace:58652" # Mortavika ferry

.devcontainer/devcontainer.json

@@ -1,31 +1,40 @@
 {
-  "name": "Entur Card Development",
-  "image": "ludeeus/devcontainer:monster-stable",
-  "context": "..",
-  "appPort": ["5000:5000", "9123:8123"],
-  "postCreateCommand": "npm install",
-  "runArgs": [
-    "-v",
-    "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+  "image": "thomasloven/hass-custom-devcontainer",
+  "onCreateCommand": "sudo chown -R vscode:nvm /usr/local/share/nvm && npm install -g pnpm",
+  "postCreateCommand": "sudo -E container setup && pnpm config set store-dir $XDG_DATA_HOME && pnpm install",
+  "forwardPorts": [8123, 5173],
+  "mounts": [
+    "source=${localWorkspaceFolder},target=/config/www/workspace,type=bind",
+    "source=${localWorkspaceFolder}/.devcontainer/config,target=/config/config,type=bind",
+    "source=${localWorkspaceFolder}/.devcontainer/config/configuration.yaml,target=/config/configuration.yaml,type=bind"
   ],
-  "extensions": [
-    "github.vscode-pull-request-github",
-    "eamodio.gitlens",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bierner.lit-html",
-    "runem.lit-plugin",
-    "auchenberg.vscode-browser-preview",
-    "davidanson.vscode-markdownlint",
-    "redhat.vscode-yaml"
-  ],
-  "settings": {
-    "files.eol": "\n",
-    "editor.tabSize": 4,
-    "terminal.integrated.shell.linux": "/bin/bash",
-    "editor.formatOnPaste": false,
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "files.trimTrailingWhitespace": true
+  "containerEnv": {
+    "HASS_USERNAME": "dev",
+    "HASS_PASSWORD": "dev",
+    "LOVELACE_LOCAL_FILES": "./dist/entur-card.js",
+    "XDG_DATA_HOME": "/home/vscode/.local/share"
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "esbenp.prettier-vscode",
+        "runem.lit-plugin",
+        "dbaeumer.vscode-eslint"
+      ],
+      "settings": {
+        "files.eol": "\n",
+        "editor.tabSize": 2,
+        "editor.formatOnPaste": false,
+        "editor.formatOnSave": true,
+        "editor.formatOnType": true,
+        "[javascript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "files.trimTrailingWhitespace": true
+      }
+    }
   }
 }

.gitignore

@@ -1,4 +1,28 @@
-node_modules/
-.rpt2_cache/
-yarn.lock
-package-lock.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.pnpm-store
+dist
+dist-ssr
+*.local
+build
+temp
+.temp
+
+# Editor directories and files
+# .vscode/*
+# !.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,85 +1,131 @@
 # Entur Card
 
-[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
+[![hacs][hacs-badge]][hacs-url]
+[![GitHub Release][releases-shield]][releases]
+[![License][license-shield]](LICENSE)
+![Project Maintenance][maintenance-shield]
+[![BuyMeCoffee][buymecoffeebadge]][buymecoffee]
 
 This card is made to work with the [Entur public transport](https://www.home-assistant.io/components/sensor.entur_public_transport/) component. You will have to configure the Entur component before you can use this card.
-To easily extract stop id's from entur you can log in [here](https://stoppested.entur.org) with username and password **guest**.
+Click [here](https://stoppested.entur.org) to get stop id's for your setup.
 
-[![image.png](https://i.postimg.cc/KjGQ2pwz/image.png)](https://postimg.cc/S2PcLdyF)
+![Example][exampleimg]
 
->⚠️ Unfortunately there is currently no provided method to define a start and a stop station with entur. But you can add a whitelist of *lines* so that you can force only relevant results.
+> ⚠️ Unfortunately there is currently no provided method to define a start and a stop station with entur. But you can add a whitelist of _lines_ so that you can force only relevant results.
 
-### Installation
+### Features
 
-- Copy the `entur-card.js` file to your `config/www`
-- Add `entur-card.js` as a dependency in your `ui-lovelace.yaml`
+- 🛠 Editor (no need to edit `yaml`)
+- 🌎 Internationalization
+- 😍 Customize routes and lines
+- 🌓 Light and dark theme support
 
-```yaml
-resources:
-  - url: /local/entur-card.js?v=1
-    type: js
-```
-
->⚠️ Make sure you change v=1 to a higher number every time you update your card with new code!
+## Installation
 
-## Options for card
+### HACS
 
-### CONFIGURATION VARIABLES
-**type**
-(string)(Required) custom:entur-card
+Entur Card is available in [HACS][hacs] (Home Assistant Community Store).
 
-**name**
-(string) Name of the card (set to false to disable)
+1. Install HACS if you don't have it already
+2. Open HACS in Home Assistant
+3. Go to "Frontend" section
+4. Click button with "+" icon
+5. Search for "Entur Card"
 
-**show_clock**
-(boolean) Display clock
+### Manual
 
-**show_next**
-(boolean) Display next line if true
+1. Download `entur-card.js` file from the [latest-release].
+2. Put `entur-card.js` file into your `config/www` folder.
+3. Add reference to `entur-card.js` in Dashboard. There's two way to do that:
+   - **Using UI:** _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ as `/local/entur-card.js` → Set _Resource type_ as `JavaScript Module`.
+     **Note:** If you do not see the Resources menu, you will need to enable _Advanced Mode_ in your _User Profile_
+   - **Using YAML:** Add following code to `lovelace` section.
+     ```yaml
+     resources:
+       - url: /local/entur-card.js
+         type: js
+     ```
 
-**show_human**:
-(boolean)(Optional) Display human readable time if true
+---
 
-**show_extra_departures**:
-(boolean) Requires number_of_departures defined in your entur compontent.
+## Card options
 
-**entities**
-(list)(Required) A list of entity IDs or entity objects, see below.
+| Field             | Type               | Description                                        |
+| ----------------- | ------------------ | -------------------------------------------------- |
+| custom:entur-card | `string(required)` |
+| name              | `string`           | Name of the card                                   |
+| divide_routes     | `true/false`       | Add a line divider between routes                  |
+| display_time      | `true/false`       | Displays the time in the header                    |
+| entities          | `list(required)`   | A list of entity IDs or entity objects, see below. |
 
-## Options For Entities
-If you define entities as objects instead of strings, you can add more customization and configuration:
+## Entity options
 
-### CONFIGURATION VARIABLES
-**entity**
-(string)(Required) Home Assistant entity ID.
+| Field               | Type               | Description                                           |
+| ------------------- | ------------------ | ----------------------------------------------------- |
+| entity              | `string(required)` | Home Assistant entity ID.                             |
+| icon                | `string`           | Overrides the icon.                                   |
+| name                | `string`           | Overrides friendly name.                              |
+| destination         | `string`           | Display hardcoded destination name.                   |
+| clock_icon_state    | `string`           | None or `left` / `right` side of the time string.     |
+| extra_departures    | `string`           | `next` or `all`.                                      |
+| human_readable_time | `string`           | Show for `all`, `line`, `line_next` or `line_extras`. |
+| remaining_time      | `string`           | Show for `all`, `line`, `line_next` or `line_extras`. |
 
-**name**
-(string)(Optional) Overwrites friendly name.
-
-**destination**
-(string)(Optional) Destination to show in title (Only for visual representation).
+## Entur configuration
 
+```yaml
+sensor:
+  - platform: entur_public_transport
+    name: Transport
+    show_on_map: true
+    stop_ids:
+      - "NSR:StopPlace:5850" # Grorud T bus stop
+      - "NSR:StopPlace:548" # Bergen train station
+      - "NSR:StopPlace:58652" # Mortavika ferry
+```
 
-#### Configure the new card inside `ui-lovelace.yaml`
+## Manual card configuration
 
-## Example configuration for this card.
 ```yaml
 - type: custom:entur-card
   name: Rutetider
-  show_clock: true
-  show_next: true
-  show_human: true
-  show_extra_departures: true
   entities:
-    - entity: sensor.transport_studentersamfundet
-      name: Studentersamfundet
-      destination: Halstein Gård
-    - entity: sensor.transport_trondheim_s_platform_4
-      name: Trondheim Sentralbanestasjon
-    - entity: sensor.transport_trondheim_lufthavn
-      name: Trondheim lufthavn
+    - entity: sensor.transport_grorud_t
+      extra_departures: all
+      divide_lines: true
+      clock_icon_state: left
+    - entity: sensor.transport_bergen_stasjon
+      human_readable_time: line
+    - entity: sensor.transport_mortavika_ferjekai
+      remaining_time: all
+      clock_icon_state: left
+  display_time: true
+  divide_routes: true
 ```
 
+## Contributions are welcome!
+
+---
+
 ⭐️ this repository if you found it useful ❤️
 
-<a href="https://www.buymeacoffee.com/jonkristian" target="_blank"><img src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+[![BuyMeCoffee][buymecoffebadge2]][buymecoffee]
+
+<!-- Badges -->
+
+[buymecoffee]: https://www.buymeacoffee.com/jonkristian
+[buymecoffeebadge]: https://img.shields.io/badge/buy%20me%20a%20coffee-donate-yellow.svg?style=for-the-badge
+[buymecoffebadge2]: https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/white_img.png
+[hacs-url]: https://github.com/hacs/integration
+[hacs-badge]: https://img.shields.io/badge/HACS-default-orange.svg?style=for-the-badge
+[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge
+[forum]: https://community.home-assistant.io/
+[license-shield]: https://img.shields.io/github/license/jonkristian/entur-card.svg?style=for-the-badge
+[maintenance-shield]: https://img.shields.io/badge/maintainer-Jon%20Kristian%20Nilsen%20%40jonkristian-blue.svg?style=for-the-badge
+[releases-shield]: https://img.shields.io/github/release/jonkristian/entur-card.svg?style=for-the-badge
+[releases]: https://github.com/jonkristian/entur-card/releases
+
+<!-- References -->
+
+[hacs]: https://hacs.xyz
+[exampleimg]: example.png