Skip to content

Commit

Permalink
Merge branch 'release/v0.5.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@fratsloos
fratsloos committed Jul 8, 2022
2 parents f04f8a1 + 8b08cdd commit b89013e
Show file tree
Hide file tree
Showing 11 changed files with 433 additions and 14 deletions.
4 changes: 4 additions & 0 deletions build/data/registrations.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
{
"3C644A":"D-AIBJ",
"471F53":"HA-LWL",
"47C1F7":"LN-FGG",
"484A94":"PH-PXD",
"4853F6":"PH-HOW",
"4857B3":"PH-TTR",
"485A0D":"PH-TDB",
"485A84":"PH-TFR",
"485B2F":"PH-PPX",
"485B92":"PH-MLU",
"485E49":"PH-DOC",
"48605C":"PH-UMC",
"486265":"PH-TDX",
"4862B9":"PH-WYZ",
"4CA837":"EI-GAM"
}
2 changes: 1 addition & 1 deletion dist/fr24_card.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/fr24_database.js
View file

Large diffs are not rendered by default.

71 changes: 68 additions & 3 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ The FR24 card has many configuration options and supports multiple languages.
- [Installation](#installation)
- [Add the card to your dashboard](#add-the-card-to-your-dashboard)
- [Configuration](#configuration)
- [Colors](#colors)
- [Columns](#columns)
- [Hide](#hide)
- [Hide empty values](#hide-empty-values)
- [F.A.Q.](#faq)
- [Contribute](#contribute)
- [Credits](#credits)
Expand Down Expand Up @@ -81,6 +83,7 @@ The following configuration options are available:
| Option | Type | Default | Accepted | Description |
| :--------------- | :-------- | :----------------------------------------------------------------------------- | :------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `attribute` | `string` | `aircraft` | An attribute of the sensor | By default the card will read the aircrafts from the sensors `aircraft` attribute. If your sensor uses a different attribute, change this value to the name of your attribute. |
| `colors` | `object` | | | Used to overwrite the default color scheme of the card. See [Colors](#colors). |
| `columns` | `array` | `["flag", "registration", "flight", "altitude", "speed", "distance", "track"]` | Array with any of the columns, see [columns](#columns) | Array containing the columns to show in the table. The data of the other columns is available in the popup, if that is enabled. Too many columns will break your Dashboard, so the card will give a warning if too many columns are added. |
| `hide` | `object` | | | Used to configure which data is hidden. See [Hide](#hide). |
| `lang` | `string` | `null` | Any supported language, see the [lang folder](src/javascript/lang/) | Sets the display language of the data. By default the `hass` object of your browser will be used to set the language. If that language is not available, English will be used. The registered country is always in English. |
Expand All @@ -94,6 +97,40 @@ The following configuration options are available:
| `units` | `string` | `default` | `default`, `metric` | Sets the units for the values. The `default` units are as they are returned by Dump1090 (`ft` for altitude, `NM` for distance, `kt` for speed). When using `metric` the value and units are converted (`m` for altitude and distance, `m/s` for speed). |
| `zone` | `string` | `null` | Any sensor that is a zone, example `zone.home` | The distance between Home Assistant and the reported position of the aircraft is calculated using the position of a zone. If you don't set a `zone` the data doesn't have the distance. |

## Colors

By default the card uses the primairy and secondairy colors of the active color scheme. In some cases this might lead to unwanted results. Using the `colors` object in the configuration of the card it's possible to overwrite the colors of both the table in the card and the popup.

The colors can be added as values that are accepted by CSS: HEX code (which must be enclosed by single quotes), RGB value, named color or a CSS variable. Example:

```yaml
type: custom:fr24-card
entity: sensor.fr24_aircraft
colors:
table_head_bg: var(--primary-color)
table_head_text: yellow
table_units_bg: rgb(187,78,123)
table_units_text: '#00ff00'
```

With this option you can really go creative and make the ~~ugliest~~ most original creations. The following options are available:

| Key | Description |
| :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- |
| `table_head_bg` | Background color of the table header |
| `table_head_text` | Text color of the table header |
| `table_units_bg` | Background color of the row with the units |
| `table_units_text` | Text color of the row with the units |
| `table_text` | Default text color for cells |
| `table_even_row_bg` | Background color for every second row (zebra striping) |
| `table_even_row_text` | Text color for every second row (zebra striping) |
| `popup_bg` | Background color of the popup |
| `popup_text` | Default text color in the popup |
| `popup_table_head_bg` | Background color of the table header in the popup, if not used this option will fall back on `table_head_bg` |
| `popup_table_head_text` | Text color of the table header in the popup, if not used this option will fall back on `table_head_text` |
| `popup_table_even_row_bg` | Background color for every second row in the popup (zebra striping), if not used this option will fall back on `table_even_row_bg` |
| `popup_table_even_row_text` | Text color for every second row in the popup (zebra striping), if not used this option will fall back on `table_even_row_text` |

## Columns

The card supports the following columns:
Expand Down Expand Up @@ -128,9 +165,37 @@ hide:

The following keys are available in the object:

| Option | Type | Default | Accepted | Description |
| :------------- | :-------- | :------ | :-------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `old_messages` | `boolean` | `true` | `true`, `false` | By default aircraft data which is received more than 30 seconds ago will be filtered out of the card. Setting this option to `false` will show all aircraft data that is available in the JSON file. |
| Option | Type | Default | Accepted | Description |
| :------------- | :-------- | :------ | :----------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `old_messages` | `boolean` | `true` | `true`, `false` | By default aircraft data which is received more than 30 seconds ago will be filtered out of the card. Setting this option to `false` will show all aircraft data that is available in the JSON file. |
| `empty` | `array` | | Array with columns, see [examples](#hide-empty-values) | By default, all aircraft are shown, including empty values in the table. With this option it is possible to set the columns that should not be empty. The array acts as an 'or' selector; if one of the columns has an empty value, the plane is not added to the table. This option is especially useful in combination with `sort` and `order`. |

### Hide empty values

With the option `hide.empty` it's possible to remove empty values from the table.

Example to remove all rows where there is no distance:

```yaml
type: custom:fr24-card
entity: sensor.fr24_aircraft
hide:
empty:
- distance
```

Example to remove all rows where there is no distance *or* track:

```yaml
type: custom:fr24-card
entity: sensor.fr24_aircraft
hide:
empty:
- distance
- track
```

# F.A.Q.

Expand Down
124 changes: 119 additions & 5 deletions src/javascript/fr24_card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ class Fr24Card extends HTMLElement {
],
hide: {
old_messages: true,
empty: [],
},
lang: null,
larger_units: false,
Expand All @@ -80,14 +81,48 @@ class Fr24Card extends HTMLElement {
units: "default",
units_in_table: false,
zone: null,
colors: {
table_head_bg: null,
table_head_text: null,

table_units_bg: null,
table_units_text: null,

table_text: null,

table_even_row_bg: null,
table_even_row_text: null,

popup_bg: null,
popup_text: null,

popup_table_head_bg: null,
popup_table_head_text: null,

popup_table_even_row_bg: null,
popup_table_even_row_text: null,
},
};

// Overwrite config
const hideObject = {
...defaultConfig.hide,
...config.hide,
};

const colorsObject = {
...defaultConfig.colors,
...config.colors,
};

this._config = {
...defaultConfig,
...config,
};

this._config.hide = hideObject;
this._config.colors = colorsObject;

// Check config
if (!config.entity) {
throw new Error("You need to define an entity");
Expand Down Expand Up @@ -135,9 +170,7 @@ class Fr24Card extends HTMLElement {
this.card.appendChild(stylesheet);

// Load aircraft database
let loadAircraftdb = false;
if (window.fr24db.length === 0) {
loadAircraftdb = true;
const script = document.createElement("script");
script.setAttribute("async", "");
script.setAttribute("type", "text/javascript");
Expand Down Expand Up @@ -201,6 +234,14 @@ class Fr24Card extends HTMLElement {

if (this._config.hide.old_messages !== false && aircraft.seen > 30) {
addToAircrafts = false;
} else if (this._config.hide.empty.length > 0) {
for (let i = 0; i < this._config.hide.empty.length; i++) {
let column = this._config.hide.empty[i];
if (aircraft[column] === null || aircraft[column] === "") {
addToAircrafts = false;
break;
}
}
}

if (addToAircrafts) {
Expand Down Expand Up @@ -265,8 +306,28 @@ class Fr24Card extends HTMLElement {
// Styles of the cell
let styles = column.styles ?? null;

// Inline style
let style = "";
if (this._config.colors.table_head_bg !== null) {
style +=
"background-color:" +
this._config.colors.table_head_bg +
" !important;";
}
if (this._config.colors.table_head_text !== null) {
style +=
"color:" + this._config.colors.table_head_text + " !important;";
}

// Attributes
let attrs = [];
if (style.length > 0) {
attrs["style"] = style;
}

// Push header cell
headerCells.push(table.cell(value, styles, "th"));
let cell = table.cell(value, styles, "th", attrs);
headerCells.push(cell);
});

// Add header row
Expand All @@ -280,6 +341,7 @@ class Fr24Card extends HTMLElement {
hasUnits = true;

let unitCells = [];

this._config.columns.forEach((key) => {
// Get column from the available columns
let column = this._availableColumns[key];
Expand All @@ -295,9 +357,31 @@ class Fr24Card extends HTMLElement {
// Styles of the cell
let styles = column.styles ?? null;

// Inline style
let style = "";
if (this._config.colors.table_units_bg !== null) {
style +=
"background-color:" +
this._config.colors.table_units_bg +
" !important;";
}
if (this._config.colors.table_units_text !== null) {
style +=
"color:" + this._config.colors.table_units_text + " !important;";
}

// Attributes
let attrs = [];
if (style.length > 0) {
attrs["style"] = style;
}

// Push header cell
unitCells.push(table.cell(value, styles, "td"));
let cell = table.cell(value, styles, "td", attrs);
unitCells.push(cell);
});

// Add units row
table.row(unitCells, "thead");
}

Expand All @@ -313,9 +397,38 @@ class Fr24Card extends HTMLElement {
return;
}

let cell = table.cell(aircraft.value(key), column.styles ?? null);
// Inline style
let style = "";
if (i % 2 === 1) {
if (this._config.colors.table_even_row_bg !== null) {
style +=
"background-color:" +
this._config.colors.table_even_row_bg +
" !important;";
}
if (this._config.colors.table_even_row_text !== null) {
style +=
"color:" +
this._config.colors.table_even_row_text +
" !important;";
}
} else if (this._config.colors.table_text !== null) {
style += "color:" + this._config.colors.table_text + " !important;";
}

// Attributes
let attrs = [];
if (style.length > 0) {
attrs["style"] = style;
}

// Push header cell
let cell = table.cell(
aircraft.value(key),
column.styles ?? null,
"td",
attrs
);
cells.push(cell);
});

Expand Down Expand Up @@ -345,6 +458,7 @@ class Fr24Card extends HTMLElement {
const popup = new Popup(
this.contentDiv,
this._hass,
this._config,
this._lang,
this._aircrafts
);
Expand Down
8 changes: 8 additions & 0 deletions src/javascript/helpers/lang.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import de from "../lang/de.json";
import en from "../lang/en.json";
import nl from "../lang/nl.json";
import sl from "../lang/sl.json";

export default class Lang {
constructor(config, hass) {
Expand All @@ -18,9 +20,15 @@ export default class Lang {

if (this.config.lang !== "en") {
switch (this.config.lang) {
case "de":
this.content = de;
break;
case "nl":
this.content = nl;
break;
case "sl":
this.content = sl;
break;
}
}
};
Expand Down
Loading

0 comments on commit b89013e

Please sign in to comment.