Skip to content

Convert application from Angular to React/Next.js with MUI #462

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

Draft
Copilot wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Convert application from Angular to React/Next.js with MUI #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0abbd9d
Initial plan
Copilot Dec 28, 2025
92d1712
Convert Angular application to React/NextJS with MUI
Copilot Dec 28, 2025
3434d41
Fix lint errors and SSR issues for static export
Copilot Dec 28, 2025
b801fcc
Add .gitignore to exclude Next.js build artifacts
Copilot Dec 28, 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
16 changes: 0 additions & 16 deletions src/.editorconfig
View file
Open in desktop

This file was deleted.

64 changes: 0 additions & 64 deletions src/.eslintrc.js
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions src/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Next.js build artifacts
.next/
out/
node_modules/

4 changes: 0 additions & 4 deletions src/.prettierignore
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions src/.prettierrc
View file
Open in desktop

This file was deleted.

122 changes: 0 additions & 122 deletions src/angular.json
View file
Open in desktop

This file was deleted.

64 changes: 64 additions & 0 deletions src/app/change-depth/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
'use client';

import React, { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { Box, Button, TextField, Typography, Paper } from '@mui/material';
import Link from 'next/link';
import CurrentStats from '../components/CurrentStats';
import NewDepthStats from '../components/NewDepthStats';
import { useDivePlanner, useAddChangeDepthSegment } from '../contexts/DivePlannerContext';

export default function ChangeDepthPage() {
const router = useRouter();
const { divePlanner } = useDivePlanner();
const addChangeDepthSegment = useAddChangeDepthSegment();

const initialDepth = useMemo(() => {
if (divePlanner && divePlanner.getDiveSegments().length > 0) {
return divePlanner.getCurrentDepth();
}
return 0;
}, [divePlanner]);

const [newDepth, setNewDepth] = useState<number>(initialDepth);

const handleNewDepthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = Math.max(0, parseInt(e.target.value) || 0);
setNewDepth(value);
};

const handleSave = () => {
addChangeDepthSegment(newDepth);
router.push('/dive-overview');
};

return (
<Box component="main" sx={{ p: 3 }}>
<Box sx={{ maxWidth: 600 }}>
<CurrentStats />
<Typography variant="h5" sx={{ my: 2 }}>Select new depth</Typography>
<Box sx={{ mb: 2 }}>
<Paper elevation={2} sx={{ p: 2 }}>
<TextField
label="New Depth (m)"
type="number"
value={newDepth}
onChange={handleNewDepthChange}
inputProps={{ min: 0 }}
fullWidth
/>
</Paper>
</Box>
<NewDepthStats newDepth={newDepth} />
<Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
<Button variant="contained" color="primary" onClick={handleSave}>
Save
</Button>
<Button variant="outlined" component={Link} href="/dive-overview">
Cancel
</Button>
</Box>
</Box>
</Box>
);
}
62 changes: 62 additions & 0 deletions src/app/change-gas/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
'use client';

import React, { useState, useCallback, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { Box, Button, Typography } from '@mui/material';
import Link from 'next/link';
import CurrentStats from '../components/CurrentStats';
import NewGasInput from '../components/NewGasInput';
import NewGasStats from '../components/NewGasStats';
import { BreathingGas } from '../dive-planner-service/BreathingGas';
import { useDivePlanner, useAddChangeGasSegment } from '../contexts/DivePlannerContext';

export default function ChangeGasPage() {
const router = useRouter();
const { divePlanner } = useDivePlanner();
const addChangeGasSegment = useAddChangeGasSegment();

const initialGas = useMemo(() => {
if (divePlanner && divePlanner.getDiveSegments().length > 0) {
return divePlanner.getCurrentGas();
}
return null;
}, [divePlanner]);

const [newGas, setNewGas] = useState<BreathingGas | null>(initialGas);

const handleNewGasSelected = useCallback((gas: BreathingGas) => {
setNewGas(gas);
}, []);

const handleSave = () => {
if (newGas) {
addChangeGasSegment(newGas);
router.push('/dive-overview');
}
};

if (!newGas) {
return <Box component="main" sx={{ p: 3 }}>Loading...</Box>;
}

return (
<Box component="main" sx={{ p: 3 }}>
<Box sx={{ maxWidth: 800 }}>
<CurrentStats />
<Typography variant="h5" sx={{ my: 2 }}>Select new gas</Typography>
<NewGasInput onNewGasSelected={handleNewGasSelected} />
<Box sx={{ mt: 2 }}>
<NewGasStats newGas={newGas} />
</Box>
<Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
<Button variant="contained" color="primary" onClick={handleSave}>
Save
</Button>
<Button variant="outlined" component={Link} href="/dive-overview">
Cancel
</Button>
</Box>
</Box>
</Box>
);
}
Loading
Loading