1  import dash
 2  from dash import html, dcc
 3  from config import RIVERS
 4  
 5  def create_header():
 6      """Create the application header with modern styling"""
 7      return html.Div([
 8          html.H1(
 9              "Fäbu's App",
10              className="app-header"
11          ),
12      ], style={"padding": "10px"})
13  
14  def create_latest_measurements_section():
15      """Create the latest measurements dashboard with modern design"""
16      rivers = ["aare", "reuss"]
17      
18      measurements_grid = []
19      for river in rivers:
20          river_config = RIVERS.get(river, {})
21          measurements_grid.append(
22              html.Div([
23                  html.H3(
24                      river_config.get("display_name", river.title()),
25                      className="river-header",
26                  ),
27                  html.Div([
28                      html.Div([
29                          html.Div("Temperatur:", className="measurement-label"),
30                          html.Div(id=f"{river}-temp-value", className="measurement-value"),
31                      ], className="measurement-item"),
32                      html.Div([
33                          html.Div("Abfluss:", className="measurement-label"),
34                          html.Div(id=f"{river}-flow-value", className="measurement-value"),
35                      ], className="measurement-item"),
36                      html.Div([
37                          html.Div("Wasserstand:", className="measurement-label"),
38                          html.Div(id=f"{river}-level-value", className="measurement-value"),
39                      ], className="measurement-item"),
40                  ], className="measurement-grid"),
41              ], className="measurement-card")
42          )
43      
44      return html.Div([
45          html.H2(
46              "Aktuelle Messwerte",
47              className="dashboard-title",
48          ),
49          html.Div(
50              measurements_grid,
51              style={
52                  "display": "flex",
53                  "gap": "1.5rem",
54                  "marginBottom": "1.5rem",
55                  "flexWrap": "wrap",
56              },
57          ),
58          html.Div(
59              id="last-updated",
60              className="last-updated",
61          ),
62      ], className="measurement-card")
63  
64  def create_river_section(river_name: str):
65      """Create a river section with temperature and flow graphs"""
66      river_config = RIVERS.get(river_name, {})
67      river_title = river_config.get("display_name", river_name.title())
68      
69      return html.Div([
70          html.H2(river_title, className="river-title"),
71          html.Div([
72              dcc.Graph(
73                  id=f"{river_name}-temp-graph",
74                  config={"displayModeBar": False},
75                  className="graph-container",
76              ),
77              dcc.Graph(
78                  id=f"{river_name}-flow-graph",
79                  config={"displayModeBar": False},
80                  className="graph-container",
81              ),
82          ], className="graphs-container"),
83      ], className="river-section")
84  
85  def create_layout():
86      """Create the complete layout with modern styling"""
87      return html.Div([
88          create_header(),
89          create_latest_measurements_section(),
90          create_river_section("aare"),
91          create_river_section("reuss"),
92          dcc.Interval(
93              id="interval-refresh", 
94              interval=10 * 60 * 1000, 
95              n_intervals=0
96          ),
97      ], style={"padding": "20px", "maxWidth": "1200px", "margin": "0 auto", "fontFamily": "Inter, sans-serif"})