Skip to content

Commit

Permalink
#19 - Fixed popup in LitElement plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@fratsloos
fratsloos committed Oct 29, 2022
1 parent a2bd7ff commit 061b066
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 77 deletions.
105 changes: 104 additions & 1 deletion dist/fr24_card.js
View file

Large diffs are not rendered by default.

28 changes: 13 additions & 15 deletions src/javascript/fr24_card_lit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import Table from "./helpers/table-lit.js";
// Add card to the custom cards
window.customCards = window.customCards || [];
window.customCards.push({
type: "fr24-card-lit",
type: "fr24-card",
name: "Flight Radar card (Lit)",
description: "Card that shows the tracked flights",
preview: false,
});

window.fr24db = [];

class FR24CardLit extends LitElement {
class FR24Card extends LitElement {
static get properties() {
return {
hass: {},
Expand All @@ -43,18 +43,16 @@ class FR24CardLit extends LitElement {
this._parseAircrafts();

return html`
<fr24-card>
<ha-card header="${this.config.title}">
<div class="card-content">
<fr24-table
.config="${this.config}"
.hass="${this.hass}"
.aircrafts="${this._aircrafts}"
.lang=${this._lang.content}
></fr24-table>
</div>
</ha-card>
</fr24-card>
<ha-card header="${this.config.title}">
<div class="card-content">
<fr24-table
.config="${this.config}"
.hass="${this.hass}"
.aircrafts="${this._aircrafts}"
.lang=${this._lang.content}
></fr24-table>
</div>
</ha-card>
`;
}
return html`<fr24-card>Entity <b>not</b> set</fr24-card>`;
Expand Down Expand Up @@ -254,4 +252,4 @@ class FR24CardLit extends LitElement {
}
}

customElements.define("fr24-card-lit", FR24CardLit);
customElements.define("fr24-card", FR24Card);
121 changes: 66 additions & 55 deletions src/javascript/helpers/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export default class Popup {
.then(function (data) {
// Parse the data
let json = JSON.parse(data);
console.log("json", json);

// Content of the popup
let content = "";
Expand All @@ -35,6 +34,13 @@ export default class Popup {
popup.aircraft.flight ||
popup.aircraft.hex;

let subtitle;
if (popup.aircraft.registration) {
subtitle = popup.aircraft.flight || popup.aircraft.hex;
} else {
subtitle = popup.aircraft.hex;
}

// Check if photos found
if (json.photos.length > 0) {
let image = json.photos[0].thumbnail_large.src;
Expand All @@ -51,7 +57,7 @@ export default class Popup {
if (popup.aircraft.flag) {
content += `<img src="${popup.aircraft.flag}" height="15" />`;
}
content += `${title}</span><span>${popup.aircraft.value(
content += `${subtitle}</span><span>${popup.aircraft.value(
"icon",
true
)}</span>\n`;
Expand All @@ -69,48 +75,72 @@ export default class Popup {
}
});

// Colors
const colorPopupBackground =
popup.config.colors.popup_bg ?? "var(--card-background-color)";
const colorPopupMarkDownText =
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-color)";
const colorPopupMarkDownLink =
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-color)";
const colorPopupTableHeadBackground =
popup.config.colors.popup_table_head_bg ??
popup.config.colors.table_head_bg ??
"var(--primary-color)";
const colorPopupTableHeadText =
popup.config.colors.popup_table_head_text ??
popup.config.colors.table_head_text ??
"var(--app-header-text-color, white)";
const colorPopupTableRowText =
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-text-color)";
const colorPopupTableRowEvenBackground =
popup.config.colors.popup_table_even_row_bg ??
popup.config.colors.table_even_row_bg ??
"var(--primary-background-color)";
const colorPopupTableRowEvenText =
popup.config.colors.popup_table_even_row_text ??
popup.config.colors.table_even_row_text ??
"var(--primary-text-color)";

// Open popup using browser_mod
handleClick(popup.row, popup.hass, {
tap_action: {
action: "fire-dom-event",
browser_mod: {
command: "popup",
hide_header: true,
card: {
type: "markdown",
content: content,
card_mod: {
style: {
".": `
service: "browser_mod.popup",
data: {
hide_header: true,
style: `--popup-background-color:${colorPopupBackground};`,
title: title,
content: {
type: "markdown",
content: content,
card_mod: {
style: {
".": `
ha-markdown{
background:${
popup.config.colors.popup_bg ??
"var(--card-background-color)"
};
background:${colorPopupBackground};
}
ha-markdown.no-header{
padding-top:0 !important;
}`,
"ha-markdown$": `
"ha-markdown$": `
font {
color: ${
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-text-color)"
};
color: ${colorPopupMarkDownText};
}
font a{
color:${
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-color)"
};
color:${colorPopupMarkDownLink};
}
h2{
display:flex;
justify-content:space-between;
color:${
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-text-color)"
};
color:${colorPopupMarkDownText};
}
h2 img{
height:.8em;
Expand All @@ -127,36 +157,17 @@ export default class Popup {
padding:4px;
}
table tr th{
background-color:${
popup.config.colors.popup_table_head_bg ??
popup.config.colors.table_head_bg ??
"var(--primary-color)"
};
color:${
popup.config.colors.popup_table_head_text ??
popup.config.colors.table_head_text ??
"var(--app-header-text-color, white)"
};
background-color:${colorPopupTableHeadBackground};
color:${colorPopupTableHeadText};
}
table tr{
color:${
popup.config.colors.popup_text ??
popup.config.colors.table_text ??
"var(--primary-text-color)"
};
color:${colorPopupTableRowText};
}
table tr:nth-child(even){
background-color:${
popup.config.colors.popup_table_even_row_bg ??
popup.config.colors.table_even_row_bg ??
"var(--primary-background-color)"
};
color:${
popup.config.colors.popup_table_even_row_text ??
popup.config.colors.table_even_row_text ??
"var(--primary-text-color)"
};
background-color:${colorPopupTableRowEvenBackground};
color:${colorPopupTableRowEvenText};
}`,
},
},
},
},
Expand Down
12 changes: 6 additions & 6 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
entry: "./src/javascript/fr24_card.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "fr24_card.js",
},
// entry: "./src/javascript/fr24_card.js",
// output: {
// path: path.resolve(__dirname, "dist"),
// filename: "fr24_card.js",
// },

entry: "./src/javascript/fr24_card_lit.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "fr24_card_lit.js",
filename: "fr24_card.js",
},

module: {
Expand Down

0 comments on commit 061b066

Please sign in to comment.