Skip to content

Commit 1ed2835

Browse files
bert27bert27
committed
refactor: modularized drinks machine backend, implemented sequential pumps with PWM, and standardized i18n/calibration
1 parent 3e437fb commit 1ed2835

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1360
-1377
lines changed

‎client/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const App: React.FC = () => {
2222
<Route path="/" element={<CarPage />} />
2323
<Route path="/irrigation" element={<Irrigation />} />
2424
<Route path="/drinks" element={<DrinksPage />} />
25-
<Route path="/drinks/:tabRouter" element={<DrinksPage />} />
25+
<Route path="/drinks/:tabId" element={<DrinksPage />} />
2626
<Route path="*" element={<Irrigation />} />
2727
</Routes>
2828
</main>

‎client/src/locales/en.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,17 @@
118118
},
119119
"liquids": {
120120
"cocacola": "Coke",
121-
"zumo de naranja": "Orange Juice",
121+
"orange juice": "Orange Juice",
122122
"vodka": "Vodka",
123-
"granadina": "Grenadine",
123+
"grenadine": "Grenadine",
124124
"tequila": "Tequila"
125125
},
126126
"cocktails": {
127127
"cocacola": "Coke",
128-
"zumo de naranja": "Orange Juice",
128+
"orange juice": "Orange Juice",
129129
"vodka shot": "Vodka shot",
130-
"vodka con cocacola": "Vodka & Coke",
131-
"destornillador": "Screwdriver",
130+
"vodka with cocacola": "Vodka & Coke",
131+
"screwdriver": "Screwdriver",
132132
"sex on the beach": "Sex on the Beach",
133133
"tequila sunrise": "Tequila Sunrise",
134134
"shirley temple": "Shirley Temple"

‎client/src/locales/es.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,17 @@
118118
},
119119
"liquids": {
120120
"cocacola": "Cocacola",
121-
"zumo de naranja": "Zumo de naranja",
121+
"orange juice": "Zumo de naranja",
122122
"vodka": "Vodka",
123-
"granadina": "Granadina",
123+
"grenadine": "Granadina",
124124
"tequila": "Tequila"
125125
},
126126
"cocktails": {
127127
"cocacola": "Cocacola",
128-
"zumo de naranja": "Zumo de naranja",
128+
"orange juice": "Zumo de naranja",
129129
"vodka shot": "Chupito de Vodka",
130-
"vodka con cocacola": "Vodka con Cocacola",
131-
"destornillador": "Destornillador",
130+
"vodka with cocacola": "Vodka con Cocacola",
131+
"screwdriver": "Destornillador",
132132
"sex on the beach": "Sex on the Beach",
133133
"tequila sunrise": "Tequila Sunrise",
134134
"shirley temple": "Shirley Temple"

‎client/src/pages/car/car-page.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.dashboard-container {
2+
padding: 2.5rem;
3+
display: flex;
4+
flex-direction: column;
5+
gap: 2rem;
6+
animation: fadeIn 0.8s ease-out;
7+
}
8+
9+
@keyframes fadeIn {
10+
from { opacity: 0; transform: translateY(10px); }
11+
to { opacity: 1; transform: translateY(0); }
12+
}
13+
14+
.premium-card {
15+
background: var(--bg-card) !important;
16+
backdrop-filter: blur(12px);
17+
-webkit-backdrop-filter: blur(12px);
18+
border: 1px solid var(--glass-border) !important;
19+
border-radius: 20px !important;
20+
box-shadow: var(--shadow-premium) !important;
21+
overflow: hidden;
22+
transition: transform 0.3s ease, box-shadow 0.3s ease;
23+
color: var(--text-main) !important;
24+
}
25+
26+
.premium-card:hover {
27+
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45) !important;
28+
}
29+
30+
/* Existing animations/utility classes remain above */
31+
32+
.car-page-container {
33+
min-height: 100vh;
34+
width: 100%;
35+
background: var(--bg-deep);
36+
padding: 8px; /* Mobile padding */
37+
display: flex;
38+
flex-direction: column;
39+
box-sizing: border-box;
40+
overflow-y: auto;
41+
}
42+
43+
.car-page-grid {
44+
flex-grow: 1;
45+
display: grid;
46+
grid-template-columns: 1fr; /* Mobile: Single column */
47+
gap: 1rem;
48+
min-height: 0; /* Fix flex/grid overflow issues */
49+
}
50+
51+
/* Layout Columns/Rows */
52+
.left-column, .right-column {
53+
display: flex;
54+
flex-direction: column;
55+
gap: 1rem;
56+
min-width: 0;
57+
}
58+
59+
.top-row {
60+
display: flex;
61+
flex-direction: column; /* Mobile: Stacked */
62+
gap: 1rem;
63+
min-height: 0;
64+
}
65+
66+
.telemetry-wrapper {
67+
flex: 1;
68+
min-width: 0;
69+
}
70+
71+
.rgb-wrapper {
72+
min-width: 100%;
73+
aspect-ratio: auto;
74+
}
75+
76+
.actuators-wrapper {
77+
min-height: 0;
78+
}
79+
80+
.kinetic-wrapper {
81+
flex: 1;
82+
min-height: 0;
83+
}
84+
85+
/* Shared styling for inner panels/cards */
86+
.dashboard-panel {
87+
padding: 16px;
88+
height: 100%;
89+
display: flex;
90+
flex-direction: column;
91+
overflow: hidden;
92+
}
93+
94+
/* --- DESKTOP LAYOUT (md breakpoint approx 900px) --- */
95+
@media (min-width: 900px) {
96+
.car-page-container {
97+
height: 100vh;
98+
overflow: hidden; /* No scroll on desktop */
99+
padding: 16px; /* Desktop padding */
100+
}
101+
102+
.car-page-grid {
103+
grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.3fr);
104+
height: calc(100vh - 120px); /* Adjust based on header height */
105+
overflow: hidden;
106+
}
107+
108+
.left-column, .right-column {
109+
height: 100%;
110+
overflow: hidden;
111+
}
112+
113+
.top-row {
114+
flex-direction: row; /* Side by side */
115+
height: 45%;
116+
overflow: hidden;
117+
}
118+
119+
.telemetry-wrapper {
120+
overflow: hidden;
121+
}
122+
123+
.rgb-wrapper {
124+
height: 100%;
125+
min-width: 300px;
126+
aspect-ratio: 1/1;
127+
}
128+
129+
.actuators-wrapper {
130+
height: 55%;
131+
}
132+
133+
.right-column {
134+
height: 100%;
135+
}
136+
137+
.dashboard-panel {
138+
padding: 24px; /* Larger padding on desktop */
139+
}
140+
}
141+

‎client/src/pages/car/car-page.tsx‎

Lines changed: 16 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React, { useEffect } from "react";
2-
import { Box, useTheme, useMediaQuery, Theme, Alert } from "@mui/material";
3-
import "@/pages/car/car-styles.css";
1+
import { Box, Alert } from "@mui/material";
2+
import "@/pages/car/car-page.css";
43
import { useRobotControl } from "./hooks/use-robot-control";
54
import { SimulationAlert } from "@/components/simulation-alert/simulation-alert";
65
import { robotService } from "@/pages/car/services/robot.service";
@@ -51,39 +50,8 @@ export const CarPage: React.FC = () => {
5150
}
5251
}
5352
};
54-
const theme = useTheme<Theme>();
55-
const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
56-
57-
useEffect(() => {
58-
document.title = "RobotCore";
59-
}, []);
60-
61-
// Centralized Layout Configuration
62-
const layoutConfig = {
63-
header: { height: isDesktop ? '80px' : 'auto' },
64-
grid: { desktopHeight: 'calc(100vh - 120px)' },
65-
};
66-
67-
const panelStyle = {
68-
p: { xs: 2, md: 3 },
69-
height: '100%',
70-
display: 'flex',
71-
flexDirection: 'column',
72-
overflow: 'hidden'
73-
};
74-
7553
return (
76-
<Box sx={{
77-
height: isDesktop ? '100vh' : 'auto',
78-
minHeight: '100vh',
79-
width: '100%',
80-
background: 'var(--bg-deep)',
81-
overflow: isDesktop ? 'hidden' : 'auto',
82-
p: { xs: 1, sm: 2 },
83-
display: 'flex',
84-
flexDirection: 'column',
85-
boxSizing: 'border-box'
86-
}}>
54+
<Box className="car-page-container">
8755

8856
<SimulationAlert isMock={isMock} />
8957

@@ -100,75 +68,48 @@ export const CarPage: React.FC = () => {
10068
ledState={dashboardState.robot.ledState || false}
10169
onToggleLed={toggleLED}
10270
onPing={() => sendWSMessage("ping")}
103-
height={layoutConfig.header.height}
71+
height="80px" // Header height can be fixed or handled by CSS if component supports className
10472
/>
10573

10674
{/* Main Bento Grid */}
107-
<Box sx={{
108-
flexGrow: 1,
109-
display: 'grid',
110-
gridTemplateColumns: isDesktop ? 'minmax(0, 0.7fr) minmax(0, 0.3fr)' : '1fr',
111-
gap: 2,
112-
height: isDesktop ? layoutConfig.grid.desktopHeight : 'auto',
113-
overflow: isDesktop ? 'hidden' : 'visible',
114-
minHeight: 0
115-
}}>
75+
<Box className="car-page-grid">
11676

11777
{/* --- LEFT COLUMN (70%) --- */}
118-
<Box sx={{
119-
display: 'flex',
120-
flexDirection: 'column',
121-
gap: 2,
122-
height: isDesktop ? '100%' : 'auto',
123-
minHeight: 0,
124-
minWidth: 0,
125-
overflow: isDesktop ? 'hidden' : 'visible'
126-
}}>
78+
<Box className="left-column">
12779

12880
{/* TOP ROW: Telemetry + RGB */}
129-
<Box sx={{
130-
display: 'flex',
131-
flexDirection: isDesktop ? 'row' : 'column',
132-
gap: 2,
133-
height: isDesktop ? '45%' : 'auto',
134-
minHeight: 0,
135-
overflow: isDesktop ? 'hidden' : 'visible'
136-
}}>
81+
<Box className="top-row">
13782
{/* Telemetry */}
138-
<Box sx={{ flex: 1, minWidth: 0, overflow: isDesktop ? 'hidden' : 'visible' }}>
83+
<Box className="telemetry-wrapper">
13984
<TelemetryCard
14085
id="card-telemetry"
14186
robotStatus={dashboardState.robot}
14287
remoteStatus={dashboardState.remote}
14388
setOrientation={setOrientation}
144-
panelStyle={panelStyle}
89+
panelStyle={{}} // panelStyle handled by className inside card if applied, or wrapper CSS
14590
headlightColor={color}
14691
/>
14792
</Box>
14893

14994
{/* RGB Picker */}
150-
<Box sx={{
151-
height: isDesktop ? '100%' : 'auto',
152-
aspectRatio: isDesktop ? '1/1' : 'auto',
153-
minWidth: isDesktop ? '300px' : '100%'
154-
}}>
95+
<Box className="rgb-wrapper">
15596
<RgbCard
15697
id="card-rgb"
15798
color={color}
15899
handleColorChange={handleColorChange}
159-
panelStyle={panelStyle}
100+
panelStyle={{}}
160101
sx={{ height: '100%', width: '100%' }}
161102
/>
162103
</Box>
163104
</Box>
164105

165106
{/* BOTTOM ROW: Actuators */}
166-
<Box sx={{ height: isDesktop ? '55%' : 'auto', minHeight: 0 }}>
107+
<Box className="actuators-wrapper">
167108
<ActuatorsCard
168109
id="card-actuators"
169110
globalPwm={throttle}
170111
setGlobalPwm={setThrottle}
171-
panelStyle={panelStyle}
112+
panelStyle={{}}
172113
sx={{ height: '100%' }}
173114
outputs={outputs}
174115
onToggle={handleActuatorToggle}
@@ -178,20 +119,12 @@ export const CarPage: React.FC = () => {
178119
</Box>
179120

180121
{/* --- RIGHT COLUMN (30%) --- */}
181-
<Box sx={{
182-
display: 'flex',
183-
flexDirection: 'column',
184-
gap: 2,
185-
height: isDesktop ? '100%' : 'auto',
186-
minHeight: 0,
187-
minWidth: 0,
188-
overflow: isDesktop ? 'hidden' : 'visible'
189-
}}>
190-
<Box sx={{ flex: 1, minHeight: 0 }}>
122+
<Box className="right-column">
123+
<Box className="kinetic-wrapper">
191124
<KineticCard
192125
id="card-kinetic-control"
193126
remoteStatus={dashboardState.remote}
194-
panelStyle={panelStyle}
127+
panelStyle={{}}
195128
sx={{ height: '100%' }}
196129
onDirection={handleDirection}
197130
pulseDuration={pulseDuration}

0 commit comments

Comments
 (0)