Skip to content

Add layout toggle feature to Dashboard #528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sartoric wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add layout toggle feature to Dashboard #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac505e7
Add layout toggle feature to Dashboard
Sartoric Dec 18, 2025
ee76cb0
Add persistent up/down layout toggle for Dashboard
Sartoric Dec 18, 2025
4e7e310
Update Dashboard layout management utilities
Sartoric Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 47 additions & 22 deletions web/src/pages/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,23 @@ import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
import { OverviewChart } from '../../components/OverviewChart.jsx';
import Card from '../../components/Card.jsx';
import ProcessControls from './ProcessControls.jsx';
import { getDashboardLayout, DASHBOARD_LAYOUTS } from '../../utils/dashboardManager.js';
import {
getDashboardLayout,
DASHBOARD_LAYOUTS,
setDashboardUpDownLayout,
getDashboardUpDownLayout,
} from '../../utils/dashboardManager.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowsLeftRight } from '@fortawesome/free-solid-svg-icons/faArrowsLeftRight';
import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';

Chart.register(LineController, TimeScale, LinearScale, PointElement, LineElement, Filler, Legend);

export function Home() {
const [dashboardLayout, setDashboardLayout] = useState(DASHBOARD_LAYOUTS.ORDER_FIRST);
const apiService = useContext(ApiServiceContext);
const [upDownLayout, setUpDownLayout] = useState(getDashboardUpDownLayout());
const gridUpDownClass = upDownLayout ? 'grid-cols-1' : 'grid-cols-10';

useEffect(() => {
setDashboardLayout(getDashboardLayout());
Expand Down Expand Up @@ -51,29 +61,44 @@ export function Home() {

return (
<>
<div className='mb-4 flex flex-row items-center gap-2 landscape:hidden landscape:lg:block'>
<h1 className='flex-grow text-2xl font-bold sm:text-3xl'>Dashboard</h1>
</div>
<div className='relative'>
<div className='mb-4 flex flex-row items-center gap-2 landscape:hidden landscape:lg:block'>
<h1 className='flex-grow text-2xl font-bold sm:text-3xl'>Dashboard</h1>
</div>

<div className='absolute top-3 right-0 z-50 sm:top-[-1rem] md:top-9'>
<button
aria-label={upDownLayout ? 'Switch to horizontal layout' : 'Switch to vertical layout'}
className='btn-lg btn-circle bg-base-content/10 text-base-content/60 sm:border-base-content/20 hover:text-base-content sm:hover:bg-base-content/10 hover:border-base-content/40 text-md cursor-pointer transition-all duration-200'
onClick={() => {
const newLayout = !upDownLayout;
setUpDownLayout(newLayout);
setDashboardUpDownLayout(newLayout);
}}
>
<FontAwesomeIcon
icon={upDownLayout ? faArrowsLeftRight : faArrowsUpDown}
className='h-3 w-3'
/>
</button>
</div>

<div className='grid grid-cols-1 gap-4 lg:grid-cols-10 lg:items-stretch landscape:sm:grid-cols-10'>
<Card
sm={10}
lg={4}
className={`landscape:sm:col-span-5 ${dashboardLayout === DASHBOARD_LAYOUTS.ORDER_FIRST ? 'order-first' : 'order-last'}`}
title='Process Controls'
>
<ProcessControls brew={mode === 1} mode={mode} changeMode={changeMode} />
</Card>
<div className={`grid ${gridUpDownClass} gap-4`}>
<Card
className={`${upDownLayout ? '' : 'col-span-4'} ${dashboardLayout === DASHBOARD_LAYOUTS.ORDER_FIRST ? 'order-first' : 'order-last'}`}
title='Process Controls'
>
<ProcessControls brew={mode === 1} mode={mode} changeMode={changeMode} />
</Card>

<Card
sm={10}
lg={6}
className={`landscape:sm:col-span-5 ${dashboardLayout === DASHBOARD_LAYOUTS.ORDER_FIRST ? 'order-last' : 'order-first'}`}
title='Temperature & Pressure Chart'
fullHeight={true}
>
<OverviewChart />
</Card>
<Card
className={`${upDownLayout ? '' : 'col-span-6'} ${dashboardLayout === DASHBOARD_LAYOUTS.ORDER_FIRST ? 'order-last' : 'order-first'}`}
title='Temperature & Pressure Chart'
fullHeight={true}
>
<OverviewChart />
</Card>
</div>
</div>
</>
);
Expand Down
29 changes: 29 additions & 0 deletions web/src/utils/dashboardManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const DASHBOARD_LAYOUT_KEY = 'dashboardLayout';
const DASHBOARD_UPDOWN_LAYOUT_KEY = 'upDownLayout';

export const getDashboardLayout = () => {
if (typeof window === 'undefined' || !window.localStorage) {
Expand Down Expand Up @@ -28,6 +29,34 @@ export const setDashboardLayout = layout => {
}
};

export const getDashboardUpDownLayout = () => {
if (typeof window === 'undefined' || !window.localStorage) {
return false;
}

try {
return localStorage.getItem(DASHBOARD_UPDOWN_LAYOUT_KEY) === 'true';
} catch (error) {
console.warn('getDashboardUpDownLayout: localStorage access failed:', error);
return false;
}
};

export const setDashboardUpDownLayout = layout => {
if (layout === null || layout === undefined || typeof layout !== 'boolean') {
console.error('setDashboardUpDownLayout: Layout must be a boolean value');
return false;
}

try {
localStorage.setItem(DASHBOARD_UPDOWN_LAYOUT_KEY, layout);
return true;
} catch (error) {
console.error('setDashboardUpDownLayout: Failed to store layout in localStorage:', error);
return false;
}
}

export const DASHBOARD_LAYOUTS = {
ORDER_FIRST: 'order-first',
ORDER_LAST: 'order-last',
Expand Down
Loading