Skip to content
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.

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

Webpack support and minor bug fixes. #431

Merged
merged 25 commits into from
Sep 20, 2023
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
01a6485
WiP webpack loading UI all locally
KeiranHines Sep 16, 2023
1a9e5a8
remove styling errors and warning on drawer menu
KeiranHines Sep 16, 2023
737ecb2
Fixed issues with 'home' progress
KeiranHines Sep 16, 2023
e81a530
Added basic ability to compile an 'online' site using a cdn or bundli…
KeiranHines Sep 16, 2023
dfb05ee
Added GZip support to reduce bundle size, partially fixed theming iss…
KeiranHines Sep 16, 2023
abb946f
Fixed issue with sideBar and padding, animation still broken on drawer
KeiranHines Sep 17, 2023
a3e818d
Finished cleanup
KeiranHines Sep 17, 2023
32f30ae
Final cleanup
KeiranHines Sep 17, 2023
f6ca930
Slightly improved webpack bundle size
KeiranHines Sep 17, 2023
1caea6c
Removed legacy "withStyles" from home
KeiranHines Sep 17, 2023
834cd21
Migrated more files from withStyles to sx
KeiranHines Sep 17, 2023
b04ee27
Removed need for @mui/styles TODO fix changes to styling as a result
KeiranHines Sep 17, 2023
4263fa4
Fixed styling issues after migration from legacy styles
KeiranHines Sep 18, 2023
63d9487
Fixed some transitions
KeiranHines Sep 18, 2023
1a8cb27
Updated readme and bake_site to include details for the requirement o…
KeiranHines Sep 18, 2023
a770818
Updated webserver check for file encoding to be more readable
KeiranHines Sep 18, 2023
a8dc868
Merge branch 'feature/webpack' of github.com:KeiranHines/NightDriverS…
KeiranHines Sep 18, 2023
ad75ce9
Finished work required to remove legacy styled dependency and be able…
KeiranHines Sep 18, 2023
ea4b9dc
Cleanup of work required for removing legacy styled dependency
KeiranHines Sep 19, 2023
da7144d
updated TTGO env to use the no ota partition scheme
KeiranHines Sep 19, 2023
c77b8b2
Reverted httpPrefix
KeiranHines Sep 19, 2023
873e224
fixed npm pacakge-lock verbosity
KeiranHines Sep 19, 2023
052bf2a
Reverted ttgo env to the old partition scheme
KeiranHines Sep 19, 2023
26f34df
Updated bake_site to use npm ci instead of install to maintain consis…
KeiranHines Sep 19, 2023
5f6da3e
Update comment
rbergen Sep 20, 2023
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
Prev Previous commit
Next Next commit
remove styling errors and warning on drawer menu
  • Loading branch information
KeiranHines committed Sep 16, 2023
commit 1a9e5a8cb05e291bac7ffc7e6afa74884ad5baed
3 changes: 2 additions & 1 deletion site/.eslintrc
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@
},
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
"react/react-in-jsx-scope": "off",
"indent": [2, 2]
}
}
173 changes: 87 additions & 86 deletions site/src/components/home/home.jsx
Original file line number Diff line number Diff line change
@@ -11,99 +11,100 @@ import StatsPanel from './statistics/stats';
import DesignerPanel from './designer/designer';

const MainApp = () => {
const [mode, setMode] = useState('dark');
const theme = useMemo(
() => getTheme(mode),[mode]);
return <ThemeProvider theme={theme}><CssBaseline /><AppPannel mode={mode} setMode={setMode} /></ThemeProvider>
const [mode, setMode] = useState('dark');
const theme = useMemo(
() => getTheme(mode),[mode]);
return <ThemeProvider theme={theme}><CssBaseline /><AppPannel mode={mode} setMode={setMode} /></ThemeProvider>
};

const AppPannel = withStyles(mainAppStyle)(props => {
const { classes, mode, setMode } = props;
const [drawerOpened, setDrawerOpened] = useState(false);
const [stats, setStats] = useState(false);
const [designer, setDesigner] = useState(false);
const [statsRefreshRate, setStatsRefreshRate ] = useState(3);
const [maxSamples, setMaxSamples ] = useState(50);
const [animateChart, setAnimateChart ] = useState(false);
const [notifications, setNotifications] = useState([]);
const { classes, mode, setMode } = props;
const [drawerOpened, setDrawerOpened] = useState(false);
const [settingsOpened, setSettingsOpened] = useState(false);
const [stats, setStats] = useState(false);
const [designer, setDesigner] = useState(false);
const [statsRefreshRate, setStatsRefreshRate ] = useState(3);
const [maxSamples, setMaxSamples ] = useState(50);
const [animateChart, setAnimateChart ] = useState(false);
const [notifications, setNotifications] = useState([]);

const siteConfig = {
statsRefreshRate: {
name: "Refresh rate",
value: statsRefreshRate,
setter: setStatsRefreshRate,
type: "int"
},
statsAnimateChange: {
name: "Animate chart",
value: animateChart,
setter: setAnimateChart,
type: "boolean"
},
maxSamples: {
name: "Chart points",
value: maxSamples,
setter: setMaxSamples,
type: "int"
}
};
const siteConfig = {
statsRefreshRate: {
name: "Refresh rate",
value: statsRefreshRate,
setter: setStatsRefreshRate,
type: "int"
},
statsAnimateChange: {
name: "Animate chart",
value: animateChart,
setter: setAnimateChart,
type: "boolean"
},
maxSamples: {
name: "Chart points",
value: maxSamples,
setter: setMaxSamples,
type: "int"
}
};

const addNotification = (level,type,target,notification) => {
setNotifications(prevNotifs => {
const group = prevNotifs.find(notif=>(notif.level === level) && (notif.type == type) && (notif.target === target)) || {level,type,target,notifications:[]};
group.notifications.push({date:new Date(),notification});
return [...prevNotifs.filter(notif => notif !== group), group];
});
};

return <Box className={classes.root}>
<AppBar className={[classes.appbar,drawerOpened && classes.appbarOpened].join(" ")}>
<Toolbar>
<IconButton
aria-label="Open drawer"
onClick={()=>setDrawerOpened(!drawerOpened)}
className={drawerOpened && classes.drawerClosed}>
<Icon>{drawerOpened ? "chevron" : "menu"}</Icon>
</IconButton>
<Typography
className={classes.toolbarTitle}
component="h1"
variant="h6">
const addNotification = (level,type,target,notification) => {
setNotifications(prevNotifs => {
const group = prevNotifs.find(notif=>(notif.level === level) && (notif.type == type) && (notif.target === target)) || {level,type,target,notifications:[]};
group.notifications.push({date:new Date(),notification});
return [...prevNotifs.filter(notif => notif !== group), group];
});
};
return <Box className={classes.root}>
<AppBar className={[classes.appbar,drawerOpened && classes.appbarOpened].join(" ")}>
<Toolbar>
<IconButton
aria-label="Open drawer"
onClick={()=>setDrawerOpened(!drawerOpened)}
className={drawerOpened ? classes.drawerClosed : ""}>
<Icon>{drawerOpened ? "chevron" : "menu"}</Icon>
</IconButton>
<Typography
className={classes.toolbarTitle}
component="h1"
variant="h6">
NightDriverStrip
</Typography>
{(notifications.length > 0) && <NotificationPanel notifications={notifications} clearNotifications={()=>setNotifications([])}/>}
</Toolbar>
</AppBar>
<Drawer variant="permanent"
classes={{paper: [classes.drawer, !drawerOpened && classes.drawerClosed].join(" ")}}>
<Box className={classes.drawerHeader}>
<Box className={classes.displayMode}>
<IconButton onClick={()=>setMode(mode === "dark" ? "light" : "dark")} ><Icon>{mode === "dark" ? "dark_mode" : "light_mode"}</Icon></IconButton>
<ListItemText primary={(mode === "dark" ? "Dark" : "Light") + " mode"}/>
</Box>
<IconButton onClick={()=>setDrawerOpened(!drawerOpened)}>
<Icon>chevron_left</Icon>
</IconButton>
</Box>
<Divider/>
<List>{
[{caption:"Home", flag: designer, setter: setDesigner, icon: "home"},
{caption:"Statistics", flag: stats, setter: setStats, icon: "area_chart"},
{caption:"", flag: drawerOpened, icon: "settings", setter: setDrawerOpened}].map(item =>
<ListItem key={item.icon}>
<ListItemIcon><IconButton onClick={() => item.setter && item.setter(prevValue => !prevValue)}>
<Icon color="action" className={item.flag && classes.optionSelected}>{item.icon}</Icon>
</IconButton></ListItemIcon>
<ListItemText primary={item.caption}/>
{drawerOpened && (item.icon === "settings") && <ConfigPanel siteConfig={siteConfig} />}
</ListItem>)
}</List>
</Drawer>
<Box className={[classes.content, drawerOpened && classes.contentShrinked].join(" ")}>
<StatsPanel siteConfig={siteConfig} open={stats} addNotification={addNotification}/>
<DesignerPanel siteConfig={siteConfig} open={designer} addNotification={addNotification}/>
</Box>
</Typography>
{(notifications.length > 0) && <NotificationPanel notifications={notifications} clearNotifications={()=>setNotifications([])}/>}
</Toolbar>
</AppBar>
<Drawer
open={drawerOpened}
classes={{paper: [classes.drawer, !drawerOpened && classes.drawerClosed].join(" ")}}>
<Box className={classes.drawerHeader}>
<Box className={classes.displayMode}>
<IconButton onClick={()=>setMode(mode === "dark" ? "light" : "dark")} ><Icon>{mode === "dark" ? "dark_mode" : "light_mode"}</Icon></IconButton>
<ListItemText primary={(mode === "dark" ? "Dark" : "Light") + " mode"}/>
</Box>
<IconButton onClick={()=>setDrawerOpened(!drawerOpened)}>
<Icon>chevron_left</Icon>
</IconButton>
</Box>
<Divider/>
<List>{
[{caption:"Home", flag: designer, setter: setDesigner, icon: "home"},
{caption:"Statistics", flag: stats, setter: setStats, icon: "area_chart"},
{caption:"", flag: settingsOpened, icon: "settings", setter: setSettingsOpened}].map(item =>
<ListItem key={item.icon}>
<ListItemIcon><IconButton onClick={() => item.setter && item.setter(prevValue => !prevValue)}>
<Icon color="action" className={item.flag ? classes.optionSelected: ""}>{item.icon}</Icon>
</IconButton></ListItemIcon>
<ListItemText primary={item.caption}/>
{settingsOpened && (item.icon === "settings") && <ConfigPanel siteConfig={siteConfig} />}
</ListItem>)
}</List>
</Drawer>
<Box className={[classes.content, drawerOpened && classes.contentShrinked].join(" ")}>
<StatsPanel siteConfig={siteConfig} open={stats} addNotification={addNotification}/>
<DesignerPanel siteConfig={siteConfig} open={designer} addNotification={addNotification}/>
</Box>
</Box>
});

export default MainApp;
6 changes: 3 additions & 3 deletions site/src/main.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import MainApp from './components/home/home'
import { StrictMode } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.getElementById("root"))
.render(<StrictMode><MainApp/></StrictMode>);
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById("root"))
.render(<StrictMode><MainApp/></StrictMode>);