nidia-dashboard-composer/preview.html at main · antbald/nidia-dashboard-composer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nidia Dashboard Composer Preview</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #fafafa;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            --primary-color: #03a9f4;
            --rgb-primary-color: 3, 169, 244;
            --primary-text-color: #212121;
            --secondary-text-color: #757575;
            --primary-background-color: #ffffff;
            --secondary-background-color: #f8f9fa;
            --divider-color: #e0e0e0;
            --card-background-color: #ffffff;
            --ha-card-background: #ffffff;
            --ha-card-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- The Custom Panel Component -->
    <nidia-dashboard-composer-panel id="panel"></nidia-dashboard-composer-panel>

    <script type="module">
        // Import the compiled module directly
        import './custom_components/nidia_dashboard_composer/www/nidia-dashboard-composer-panel.js';

        // Mock Home Assistant object (hass)
        const mockHass = {
            states: {
                'sensor.energy_production': { entity_id: 'sensor.energy_production', attributes: { friendly_name: 'Solar Production' } },
                'sensor.energy_consumption': { entity_id: 'sensor.energy_consumption', attributes: { friendly_name: 'Home Consumption' } },
                'sensor.grid_import': { entity_id: 'sensor.grid_import', attributes: { friendly_name: 'Grid Import' } }
            },
            areas: {
                'living_room': { area_id: 'living_room', name: 'Living Room', floor_id: 'Ground Floor' },
                'kitchen': { area_id: 'kitchen', name: 'Kitchen', floor_id: 'Ground Floor' },
                'bedroom': { area_id: 'bedroom', name: 'Master Bedroom', floor_id: 'First Floor' },
                'garage': { area_id: 'garage', name: 'Garage', floor_id: null }
            },
            // Mock WebSocket calls
            callWS: async (msg) => {
                console.log('[MockHass] callWS:', msg);

                // Mock config response
                if (msg.type === 'nidia_dashboard_composer/config/get') {
                    return {
                        areas: ['living_room', 'kitchen'],
                        modules: ['home'],
                        theme: 'default',
                        layout_style: 'standard',
                        energy_villetta: { enabled: true }
                    };
                }

                if (msg.type === 'nidia_dashboard_composer/config/save') {
                    return { success: true };
                }

                // Mock generate response
                if (msg.type === 'nidia_dashboard_composer/generate') {
                    return {
                        title: "Generated Dashboard Preview",
                        views: [{ title: "Home", cards: [] }]
                    };
                }

                return {};
            },
            connection: {
                subscribeMessage: () => Promise.resolve(() => { })
            }
        };

        // Initialize the panel once defined
        customElements.whenDefined('nidia-dashboard-composer-panel').then(() => {
            const panel = document.getElementById('panel');
            panel.hass = mockHass;
            panel.narrow = false;
        });
    </script>
</body>

</html>