13 | ${getDynamicStyles(data)}
14 |
15 | ${config.title ? html`
17 | ${config.title}
` : ''}
18 |
41 |
42 |
43 | `
44 | }
--------------------------------------------------------------------------------
/src/cards/full-card.ts:
--------------------------------------------------------------------------------
1 | import {html} from 'lit';
2 | import {DataDto, sunsynkPowerFlowCardConfig} from '../types';
3 | import {getDynamicStyles } from '../style';
4 | import {renderSolarElements} from '../components/full/pv/pv_elements';
5 | import {renderBatteryElements} from '../components/full/bat/bat-elements';
6 | import {renderGridElements} from '../components/full/grid/grid-elements';
7 | import {renderLoadElements} from '../components/full/load/load-elements';
8 | import {renderAuxLoadElements} from '../components/full/auxload/aux-elements';
9 | import {renderInverterElements} from '../components/full/inverter/inverter-elements';
10 |
11 |
12 | export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string, data: DataDto) => {
13 | return html`
14 |
15 | ${getDynamicStyles(data)}
16 |
17 | ${config.title ? html`
19 | ${config.title}
` : ''}
20 |
46 |
47 |
48 | `;
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/full/auxload/icon-configs.ts:
--------------------------------------------------------------------------------
1 | import {DataDto} from '../../../types';
2 | import {AuxIconConfig} from './render-static-aux-icons';
3 |
4 | export const getAuxIconConfigs = (data: DataDto): AuxIconConfig[] => [
5 | {
6 | id: 'aux_default',
7 | x: 371,
8 | y: 5,
9 | width: 83,
10 | height: 83,
11 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
12 | opacityCondition: data.auxType === 'default',
13 | iconType: 'aux',
14 | prefix: 'aux',
15 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
16 | viewBoxSize: 24,
17 | },
18 | {
19 | id: 'aux_generator',
20 | x: 374,
21 | y: 5,
22 | width: 74,
23 | height: 74,
24 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
25 | opacityCondition: data.auxType === 'gen',
26 | iconType: 'generator',
27 | prefix: 'aux',
28 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
29 | viewBoxSize: 24,
30 | },
31 | {
32 | id: 'aux_oven',
33 | x: 375,
34 | y: 8,
35 | width: 70,
36 | height: 70,
37 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
38 | opacityCondition: data.auxType === 'oven',
39 | iconType: 'oven',
40 | prefix: 'aux',
41 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
42 | viewBoxSize: 32,
43 | },
44 | {
45 | id: 'aux_boiler',
46 | x: 375,
47 | y: 8,
48 | width: 70,
49 | height: 70,
50 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
51 | opacityCondition: data.auxType === 'boiler',
52 | iconType: 'boiler',
53 | prefix: 'aux',
54 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
55 | viewBoxSize: 24,
56 | },
57 | {
58 | id: 'aux_ac',
59 | x: 380,
60 | y: 12,
61 | width: 60,
62 | height: 60,
63 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
64 | opacityCondition: data.auxType === 'aircon',
65 | iconType: 'aircon',
66 | prefix: 'aux',
67 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
68 | viewBoxSize: 24,
69 | },
70 | {
71 | id: 'aux_pump',
72 | x: 380,
73 | y: 15,
74 | width: 60,
75 | height: 70,
76 | displayCondition: !data.showAux || [1, 2].includes(data.additionalAuxLoad),
77 | opacityCondition: data.auxType === 'pump',
78 | iconType: 'pump',
79 | prefix: 'aux',
80 | dynamicColor: data.auxStatus === 'on' || data.auxStatus === '1' ? data.auxDynamicColour : data.auxOffColour,
81 | viewBoxSize: 24,
82 | },
83 | ];
--------------------------------------------------------------------------------
/src/components/full/auxload/render-static-aux-icons.ts:
--------------------------------------------------------------------------------
1 | import {html} from 'lit';
2 | import {icons} from '../../../helpers/icons';
3 |
4 | export interface AuxIconConfig {
5 | id: string;
6 | x: number;
7 | y: number;
8 | width: number;
9 | height: number;
10 | displayCondition: boolean;
11 | opacityCondition: boolean;
12 | iconType: 'boiler' | 'aircon' | 'pump' | 'oven' | 'generator' | 'inverter' | 'aux';
13 | prefix: string;
14 | dynamicColor: string;
15 | viewBoxSize: number;
16 | }
17 |
18 | export const renderStaticAuxIcon = (config: AuxIconConfig) => {
19 |
20 | const iconPath = icons[config.iconType];
21 |
22 | return html`
23 |