allow separate layouts for mobile and desktop

Author: AnthonyGress

backend/src/config/config.json

@@ -1 +1,6 @@
-{}
+{
+  "layout": {
+    "desktop": [],
+    "mobile": []
+  }
+}

backend/src/routes/layout.route.ts

@@ -1,4 +1,5 @@
 import { Request, Response, Router } from 'express';
+import fsSync from 'fs';
 import fs from 'fs/promises';
 import StatusCodes from 'http-status-codes';
 import path from 'path';
@@ -7,12 +8,20 @@ export const layoutRoute = Router();
 
 const CONFIG_FILE = path.join(__dirname, '../config/config.json');
 
+const loadConfig = () => {
+    if (fsSync.existsSync(CONFIG_FILE)) {
+        return JSON.parse(fsSync.readFileSync(CONFIG_FILE, 'utf-8'));
+    }
+    return { layout: { desktop: [], mobile: [] } };
+};
+
 // GET - Retrieve the saved layout JSON from disk
 layoutRoute.get('/', async (_req: Request, res: Response): Promise<void> => {
     try {
-        const data = await fs.readFile(CONFIG_FILE, 'utf-8');
-        const layout = JSON.parse(data);
-        res.status(StatusCodes.OK).json(layout.layout);
+        const config = loadConfig();
+        console.log('loading layout', config);
+
+        res.status(StatusCodes.OK).json(config.layout);
     } catch (error) {
         res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
             message: 'Error reading layout file',
@@ -24,14 +33,18 @@ layoutRoute.get('/', async (_req: Request, res: Response): Promise<void> => {
 // POST - Save the incoming JSON layout to disk
 layoutRoute.post('/', async (req: Request, res: Response): Promise<void> => {
     try {
-        const layout = req.body;
-
-        if (!layout || typeof layout !== 'object') {
-            res.status(StatusCodes.BAD_REQUEST).json({ message: 'Invalid layout data' });
-            return;
-        }
-        // TODO: write only layout section
-        await fs.writeFile(CONFIG_FILE, JSON.stringify({ layout: layout }, null, 2), 'utf-8');
+        console.log('saving layout body', req.body);
+
+        const { desktop, mobile } = req.body;
+        const config = loadConfig();
+
+        console.log('config', config);
+        config.layout.desktop = desktop && desktop.length > 0 ? desktop : config.layout.desktop;
+        config.layout.mobile = mobile && mobile.length > 0 ? mobile : desktop;
+        console.log('config2', config);
+
+
+        await fs.writeFile(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf-8');
         res.status(StatusCodes.OK).json({ message: 'Layout saved successfully' });
     } catch (error) {
         res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({

backend/tsconfig.json

@@ -12,6 +12,7 @@
   },
   "include": [
     "index.ts",
-    "./src/config/config.json"
+    "./src/config/config.json",
+    "../shared"
   ]
 }

frontend/src/api/dash-api.ts

@@ -1,8 +1,10 @@
 import axios from 'axios';
 import { StatusCodes } from 'http-status-codes';
 
+import { DashboardLayout } from '../../../shared/types/config';
+import { DashboardItem } from '../../../shared/types/dashboard-item';
 import { BACKEND_URL } from '../constants/constants';
-import { DashboardItem, Icon } from '../types';
+import { Icon } from '../types';
 
 
 export class DashApi {
@@ -18,16 +20,18 @@ export class DashApi {
         return res.data;
     }
 
-    public static async getLayout(): Promise<DashboardItem[]> {
+    public static async getLayout(): Promise<DashboardLayout> {
         const res = await axios.get(`${BACKEND_URL}/api/layout`);
 
         return res.data;
     }
 
-    public static async saveLayout(layout: DashboardItem[]): Promise<void> {
-        const res = await axios.post(`${BACKEND_URL}/api/layout`, layout);
-
-        return res.data;
+    public static async saveLayout(layout: { desktop: DashboardItem[], mobile: DashboardItem[] }): Promise<void> {
+        try {
+            await axios.post(`${BACKEND_URL}/api/layout`, layout);
+        } catch (error) {
+            console.error('Failed to save layout:', error);
+        }
     }
 
     public static async getSystemInformation(): Promise<any> {

frontend/src/components/dnd/DashboardGrid.tsx

@@ -19,8 +19,9 @@ import { SortableAppShortcut } from './SortableAppShortcut';
 import { SortableDateTimeWidget } from './SortableDateTime';
 import { SortableSystemMonitorWidget } from './SortableSystemMonitor';
 import { SortableWeatherWidget } from './SortableWeather';
+import { DashboardItem } from '../../../../shared/types/dashboard-item';
 import { useAppContext } from '../../context/useAppContext';
-import { DashboardItem, ITEM_TYPE } from '../../types';
+import { ITEM_TYPE } from '../../types';
 import { AddEditForm } from '../forms/AddEditForm';
 import { CenteredModal } from '../modals/CenteredModal';
 import { ConfirmationOptions, PopupManager } from '../modals/PopupManager';

frontend/src/components/forms/AddEditForm.tsx

@@ -3,12 +3,13 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import {  CheckboxElement, FormContainer, SelectElement, TextFieldElement } from 'react-hook-form-mui';
 
+import { DashboardItem } from '../../../../shared/types/dashboard-item';
 import { DashApi } from '../../api/dash-api';
 import { useAppContext } from '../../context/useAppContext';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { COLORS, styles } from '../../theme/styles';
 import { theme } from '../../theme/theme';
-import { DashboardItem, Icon, ITEM_TYPE, NewItem } from '../../types';
+import { Icon, ITEM_TYPE, NewItem } from '../../types';
 import { IconSearch } from '../IconSearch';
 
 type Props = {

frontend/src/context/AppContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
-import { DashboardItem, NewItem } from '../types';
+import { DashboardItem } from '../../../shared/types/dashboard-item';
+import { NewItem } from '../types';
 
 export interface IAppContext {
     dashboardLayout: DashboardItem[];

frontend/src/context/AppContextProvider.tsx

@@ -1,33 +1,46 @@
+import { useMediaQuery } from '@mui/material';
 import { ReactNode, useState } from 'react';
 import shortid from 'shortid';
 
 import { AppContext } from './AppContext';
+import { DashboardLayout } from '../../../shared/types/config';
+import { DashboardItem } from '../../../shared/types/dashboard-item';
 import { DashApi } from '../api/dash-api';
 import { initialItems } from '../constants/constants';
-import { DashboardItem, NewItem } from '../types';
+import { theme } from '../theme/theme';
+import { NewItem } from '../types';
 
 type Props = {
     children: ReactNode
 };
 
 export const AppContextProvider = ({ children }: Props) => {
     const [dashboardLayout, setDashboardLayout] = useState<DashboardItem[]>(initialItems);
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
     const getSavedLayout = async () => {
-        console.log('getSavedLayout');
+        console.log('Fetching saved layout');
 
-        const res = await DashApi.getLayout();
+        const res = await DashApi.getLayout(); // Retrieves { desktop: [], mobile: [] }
 
-        if (res && res.length > 0) {
-            setDashboardLayout(res);
-            return res;
+        if (res) {
+            const selectedLayout = isMobile ? res.mobile : res.desktop;
+            setDashboardLayout(selectedLayout);
+            return selectedLayout;
         }
         return [];
     };
 
     const saveLayout = async (items: DashboardItem[]) => {
-        const res = await DashApi.saveLayout(items);
-        console.log(res);
+        console.log('saving layout');
+
+        const res = await DashApi.getLayout();
+        const updatedLayout: DashboardLayout = isMobile
+            ? { ...res, mobile: items }
+            : { ...res, desktop: items };
+
+        console.log('Saving updated layout:', updatedLayout);
+        await DashApi.saveLayout(updatedLayout);
     };
 
     const refreshDashboard = async () => {
@@ -40,7 +53,6 @@ export const AppContextProvider = ({ children }: Props) => {
         }
     };
 
-
     const addItem = (itemToAdd: NewItem) => {
         console.log('add item');
 

frontend/src/types/index.ts

@@ -8,15 +8,6 @@ export enum ITEM_TYPE {
 
 }
 
-export type DashboardItem = {
-    id: string;
-    label: string;
-    type: string;
-    url?: string;
-    icon?: { path: string; name: string, source?: string };
-    showName?: boolean;
-}
-
 export type NewItem = {
     name?: string;
     icon?: { path: string; name: string };

frontend/tsconfig.app.json

@@ -25,6 +25,7 @@
     "noUncheckedSideEffectImports": true,
   },
   "include": [
-    "./src"
+    "./src",
+    "../shared"
   ]
 }