1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Page } from "page.slint";
5import { OverviewAdapter } from "overview.slint";
6import { UsageAdapter } from "usage.slint";
7import { WeatherAdapter } from "weather.slint";
8import { BalanceAdapter } from "balance.slint";
9import { GroupBox, Value, ValueDisplay, BarChart, BarTileModel, Tile, BarTiles, BalanceChart } from "../widgets/widgets.slint";
10
11export component ValueTile {
12 in property <string> title <=> i-group-box.title;
13 in property <[Value]> model <=> i-value-display.model;
14 in property <bool> alternative-colors <=> i-value-display.alternative-colors;
15 in property <bool> active;
16
17 i-group-box := GroupBox {
18 preferred-width: 100%;
19 preferred-height: 100%;
20
21 i-value-display := ValueDisplay {
22 active: root.active;
23 }
24 }
25}
26
27export component BarChartTile {
28 in property <string> title <=> i-group-box.title;
29 in property <[Value]> value-model <=> i-value-display.model;
30 in property <[float]> model <=> i-bar-chart.model;
31 in property <float> min <=> i-bar-chart.min;
32 in property <float> max <=> i-bar-chart.max;
33 in property <bool> active;
34
35 height: i-group-box.min-height;
36
37 i-group-box := GroupBox {
38 preferred-width: 100%;
39 min-height: 124px;
40
41 i-value-display := ValueDisplay {
42 width: 100%;
43 alternative-colors: true;
44 active: root.active;
45 vertical: true;
46 }
47
48 i-bar-chart := BarChart {
49 horizontal-stretch: 1;
50 }
51 }
52}
53
54export component WeatherTile {
55 in property <string> title <=> i-group-box.title;
56 in property <image> current-temperature-icon <=> i-tile.icon;
57 in property <string> current-temperature <=> i-tile.value;
58 in property <string> current-day <=> i-tile.text;
59 in property <string> current-weather-description <=> i-tile.sub-text;
60 in property <[BarTileModel]> week-model <=> i-bar-tiles.model;
61
62 i-group-box := GroupBox {
63 spacing: 1px;
64 i-tile := Tile {}
65 i-bar-tiles := BarTiles {}
66 }
67}
68
69export component BalanceTile {
70 in property <[string]> x-axis-model;
71 in property <[int]> y-axis-model;
72 in property <[float]> model;
73 in property <float> min;
74 in property <float> max;
75 in property <string> y-unit;
76 in property <string> title;
77
78 GroupBox {
79 title: root.title;
80
81 BalanceChart {
82
83 x-axis-model: root.x-axis-model;
84 y-axis-model: root.y-axis-model;
85 model: root.model;
86 min: root.min;
87 max: root.max;
88 y-unit: root.y-unit;
89 }
90 }
91}
92
93export component Dashboard inherits Page {
94 GridLayout {
95 padding-left: 20px;
96 padding-right: 20px;
97 padding-top: 20px;
98 padding-bottom: 60px;
99 spacing: 20px;
100
101 Row {
102 ValueTile {
103 title: OverviewAdapter.production-title;
104 model: OverviewAdapter.production-model;
105 active: root.active;
106 }
107
108 ValueTile {
109 title: OverviewAdapter.self-consumption-title;
110 model: OverviewAdapter.self-consumption-model;
111 alternative-colors: true;
112 active: root.active;
113 }
114 }
115
116 Row {
117 BalanceTile {
118 x-axis-model <=> BalanceAdapter.x-axis-model;
119 y-axis-model <=> BalanceAdapter.y-axis-model;
120 model <=> BalanceAdapter.model;
121 min <=> BalanceAdapter.min;
122 max <=> BalanceAdapter.max;
123 y-unit <=> BalanceAdapter.y-unit;
124 title <=> BalanceAdapter.title;
125 }
126
127 WeatherTile {
128 title <=> WeatherAdapter.title;
129 current-temperature-icon <=> WeatherAdapter.current-temperature-icon;
130 current-temperature <=> WeatherAdapter.current-temperature;
131 current-day <=> WeatherAdapter.current-day;
132 current-weather-description <=> WeatherAdapter.current-weather-description;
133 week-model <=> WeatherAdapter.week-model;
134 }
135 }
136
137 Row {
138 BarChartTile {
139 colspan: 2;
140 title: UsageAdapter.title;
141 model: UsageAdapter.model;
142 min: UsageAdapter.min;
143 max: UsageAdapter.max;
144 value-model: UsageAdapter.overview-model;
145 active: root.active;
146 }
147 }
148 }
149}