Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup boilerplate #11

Merged
merged 6 commits into from
Feb 18, 2022
Merged

Cleanup boilerplate #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bee5647
Remove unused imports
ulic75 Jan 14, 2022
1ee8fe3
A little clean up of whitespace
ulic75 Jan 14, 2022
5d2327e
Create separate config interface for MySlider
ulic75 Jan 14, 2022
ab6b07c
Remove yet to be implemented card editor
ulic75 Jan 14, 2022
b1cdccd
Renamed BoilerplateCardConfig to MyFooterCardConfig
ulic75 Jan 14, 2022
4d0e0c7
refactored boilerplate-card-editor to my-footer-card-editor
ulic75 Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/action-handler-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,16 +161,15 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}
}

// TODO You need to replace all instances of "action-handler-boilerplate" with "action-handler-<your card name>"
customElements.define('action-handler-boilerplate', ActionHandler);
customElements.define('action-handler-my-footer', ActionHandler);

const getActionHandler = (): ActionHandler => {
const body = document.body;
if (body.querySelector('action-handler-boilerplate')) {
return body.querySelector('action-handler-boilerplate') as ActionHandler;
if (body.querySelector('action-handler-my-footer')) {
return body.querySelector('action-handler-my-footer') as ActionHandler;
}

const actionhandler = document.createElement('action-handler-boilerplate');
const actionhandler = document.createElement('action-handler-my-footer');
body.appendChild(actionhandler);

return actionhandler as ActionHandler;
Expand Down
23 changes: 14 additions & 9 deletions src/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from 'lit-element';
import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'custom-card-helpers';

import { BoilerplateCardConfig } from './types';
import { MyFooterCardConfig } from './types';

const options = {
required: {
Expand Down Expand Up @@ -55,15 +55,15 @@ const options = {
},
};

@customElement('boilerplate-card-editor')
export class BoilerplateCardEditor extends LitElement implements LovelaceCardEditor {
@customElement('my-footer-card-editor')
export class MyFooterCardEditor extends LitElement implements LovelaceCardEditor {
@property({ attribute: false }) public hass?: HomeAssistant;
@internalProperty() private _config?: BoilerplateCardConfig;
@internalProperty() private _config?: MyFooterCardConfig;
@internalProperty() private _toggle?: boolean;
@internalProperty() private _helpers?: any;
private _initialized = false;

public setConfig(config: BoilerplateCardConfig): void {
public setConfig(config: MyFooterCardConfig): void {
this._config = config;

this.loadCardHelpers();
Expand Down Expand Up @@ -114,7 +114,9 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
this._helpers.importMoreInfoControl('climate');

// You can restrict on domain type
const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'sun');
const entities = Object.keys(this.hass.states).filter(
(eid) => eid.substr(0, eid.indexOf('.')) === 'sun'
);

return html`
<div class="card-config">
Expand All @@ -133,8 +135,11 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
@value-changed=${this._valueChanged}
.configValue=${'entity'}
>
<paper-listbox slot="dropdown-content" .selected=${entities.indexOf(this._entity)}>
${entities.map(entity => {
<paper-listbox
slot="dropdown-content"
.selected=${entities.indexOf(this._entity)}
>
${entities.map((entity) => {
return html`
<paper-item>${entity}</paper-item>
`;
Expand Down Expand Up @@ -275,7 +280,7 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
}
if (target.configValue) {
if (target.value === '') {
const tmpConfig = {...this._config};
const tmpConfig = { ...this._config };
delete tmpConfig[target.configValue];
this._config = tmpConfig;
} else {
Expand Down
46 changes: 19 additions & 27 deletions src/my-footer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,11 @@ import {
hasAction,
ActionHandlerEvent,
handleAction,
LovelaceCardEditor,
getLovelace,
} from 'custom-card-helpers'; // This is a community maintained npm module with common helper functions/types
import { subscribeRenderTemplate } from 'card-tools/src/templates'
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'

import './editor';

import type { BoilerplateCardConfig } from './types';
import type { MyFooterCardConfig } from './types';
import { actionHandler } from './action-handler-directive';
import { FOOTER_VERSION } from './const';
import { localize } from './localize/localize';
Expand All @@ -49,10 +45,6 @@ console.info(
@customElement('my-footer')
export class MyFooter extends LitElement {

public static async getConfigElement(): Promise<LovelaceCardEditor> {
return document.createElement('boilerplate-card-editor');
}

public static getStubConfig(): object {
return {};
}
Expand All @@ -66,10 +58,10 @@ export class MyFooter extends LitElement {
}

@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private config!: BoilerplateCardConfig;
@internalProperty() private config!: MyFooterCardConfig;

// https://lit-element.polymer-project.org/guide/properties#accessors-custom
public setConfig(config: BoilerplateCardConfig): void {
public setConfig(config: MyFooterCardConfig): void {

// Run the content through a Jinja2 parser function and create new config field 'parsed_content'
this.applyTemplate(config.content ? config.content : '')
Expand All @@ -84,9 +76,9 @@ export class MyFooter extends LitElement {
...config,
}
})

// // Old code to set config, use if not parsing jinja2
// this.config = {
// this.config = {
// name: 'MyFooter',
// ...config,
// };
Expand Down Expand Up @@ -117,7 +109,7 @@ export class MyFooter extends LitElement {
// console.log('Entity Name:', entityName)
// console.log('Entity:', entity)
// conf.buttons[0]

const styles = conf.styles ? conf.styles : {}
const buttons = conf.buttons ? conf.buttons : []

Expand All @@ -139,7 +131,7 @@ export class MyFooter extends LitElement {
return Object.keys(style).reduce((acc, key) => (
acc + key.split(/(?=[A-Z])/).join('-').toLowerCase() + ':' + style[key] + ';'
), '');
}
}

const toggleScroll = () => {
this.config.disabled_scroll = !this.config.disabled_scroll
Expand All @@ -161,7 +153,7 @@ export class MyFooter extends LitElement {

<div class="button-container">
<div class="button">
<ha-icon class="icon" icon="mdi:cog-outline" style=""
<ha-icon class="icon" icon="mdi:cog-outline" style=""
@action=${e => {
this._handleDynamicButton(e, {toggle: this.config.scroll_disabled})
// console.log('Testing!!!')
Expand All @@ -175,7 +167,7 @@ export class MyFooter extends LitElement {
buttons.map((item, index) => {
return html`
<div class="button">
<ha-icon class="icon" key="${index}" icon="${item.button.icon}" style=""
<ha-icon class="icon" key="${index}" icon="${item.button.icon}" style=""
@action=${e => this._handleDynamicButton(e, item.button)}
.actionHandler=${actionHandler({
hasHold: hasAction(item.hold_action),
Expand Down Expand Up @@ -206,18 +198,18 @@ export class MyFooter extends LitElement {
}
}


// Promisified wrapper around subscribeRenderTemplate to allow this to be called as an async function
private parseTemplate(template, variables): Promise<string> {
return new Promise((resolve, reject) => {
let unsubRenderTemplate = subscribeRenderTemplate(null,
async (result) => {
resolve(result);
},
{template: template, variables: variables,
{template: template, variables: variables,
entity_ids: []}, false);
let unsub = console.log;

// Catch any errors and unsubscribe
(async () => {
try {
Expand All @@ -229,18 +221,18 @@ export class MyFooter extends LitElement {
})();
})
}

private async applyTemplate(template): Promise<string>{
try{
const _templateVariables = {
const _templateVariables = {
user: {
name: 'Anthon',
name: 'Anthon',
is_admin: true,
is_owner: true
},
page: {
...location,
path: location.pathname
path: location.pathname
},
// theme: this.hass.selectedTheme ? this.hass.selectedTheme : this.hass.themes.default_theme
theme: 'Dark - Wooden'
Expand All @@ -263,16 +255,16 @@ export class MyFooter extends LitElement {
.footer-container {
display: flex;
}

.text-container {

}
.text-container p {
border: inherit;
margin: 0;
padding: 0;
}

.button-container {
flex-grow: 1;
padding-right: 20px;
Expand Down
Loading