Schedule display

package.json

@@ -7,6 +7,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.87",
     "@mui/material": "^5.6.2",
     "@mui/x-date-pickers": "^5.0.0-alpha.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -20,7 +21,7 @@
     "react": "^17.0.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -6,6 +6,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Todos } from './components/Todos';
 import { Dinos } from './components/Dinos';
+import { Schedule } from './components/Schedule';
 
 const theme = createTheme({
   palette: {
@@ -33,7 +34,7 @@ function Overview(){
           <Paper sx={{overflowY: "auto", width: "100%", padding: 2, height: "calc(100% - 32px)"}}><Todos/></Paper>
         <Box sx={{width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-evenly"}}>
           <Calendar/>
-          <Calendar/>
+          <Schedule/>
         </Box>
       </Box>
 </div>

src/components/Schedule.tsx

@@ -0,0 +1,36 @@
+import React, {useState } from 'react';
+import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItem, Switch, TextField, Tooltip, Typography } from '@mui/material';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator, TimelineOppositeContent } from '@mui/lab';
+
+/* 
+    definition of events
+    events have IDs, names, a time (usually start-time) and can be variable in timing
+*/
+type Eve = {
+    id: string,
+    name: string,
+    time: string,
+    var: boolean
+}
+
+export function Schedule(){
+    const [eve, setEve] = useState<Eve[]>([{id: "2", name: "Testtermin 1425", time: "12:00", var: true},{id: "1", name: "Testtermin", time: "12:00", var: false},{id: "3", name: "Testtermin früh", time: "8:00", var:false}])
+    return(
+    <div>
+        <Typography variant="h3">Schedule</Typography>
+        <Timeline position="alternate">
+            {eve.map((e ,i) =>
+            <TimelineItem>
+            {!e.var && <TimelineOppositeContent  color="primary">{e.time}</TimelineOppositeContent>}
+            <TimelineSeparator>
+                <TimelineDot color="primary" />
+                {((i+1) < eve.length) && <TimelineConnector />}
+            </TimelineSeparator>
+            <TimelineContent>{e.name}</TimelineContent>
+            </TimelineItem>
+            )}
+    </Timeline>
+    </div>
+)
+}

src/components/Todos.tsx

@@ -1,5 +1,5 @@
 import React, {useState } from 'react';
-import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItem, TextField, Tooltip, Typography } from '@mui/material';
+import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItem, Switch, TextField, Tooltip, Typography } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
@@ -228,12 +228,20 @@ const editSubtodo= (todo: Subtodo) => {
     ...todos.slice(editI+1)]);
 }
 
+  const [showChecked, setShowChecked] = useState(false);
+  const handleShowChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setShowChecked(event.target.checked);
+  };
+
   return (
     <div style={{...style, textAlign: "left"}}>
       <Typography variant="h3">ToDo's</Typography>
       <Button onClick={handleClickOpen}>Add Todo</Button>
+      {/*  This should be done with a FormControlLabel or sth...*/}
+      Show Done
+      <Switch checked={showChecked} onChange={handleShowChecked}/>
     <List>
-      {todos.map((todo, i) => 
+      {todos.filter((td) => !td.done || showChecked).map((todo, i) =>
       <div key={todo.id}>
           <Box sx={{display: "flex", flexDirection: "columns"}}>
             <TodoItem key={todo.id} todo={todo}/>
@@ -248,10 +256,10 @@ const editSubtodo= (todo: Subtodo) => {
                 <Button onClick={() => deleteTodo(i)}><DeleteOutlineRoundedIcon/></Button>
             </Tooltip>
           </Box>
-            {(todo.subs && todo.subs.length > 0) &&
+            {(todo.subs && todo.subs.filter((td) => !td.done || showChecked).length > 0) &&
             <List sx={{marginLeft: "20px"}}>
             <Divider/>
-            {todo.subs.map((stodo, j) => 
+            {todo.subs.filter((td) => !td.done || showChecked).map((stodo, j) =>
             <div key={stodo.id}>
                 <Box sx={{display: "flex", flexDirection: "columns"}}>
                     <TodoItem key={todo.id} todo={stodo}/>
@@ -263,11 +271,11 @@ const editSubtodo= (todo: Subtodo) => {
                         <Button onClick={() => deleteSubtodo(i,j)}><DeleteOutlineRoundedIcon/></Button>
                     </Tooltip>
                 </Box>
-                {(j + 1) < todo.subs!.length && <Divider/>}
+                {(j + 1) < todo.subs!.filter((td) => !td.done || showChecked).length && <Divider/>}
             </div>
             )}
             </List>}
-          {(i + 1) < todos.length && <Divider/>}
+          {(i + 1) < todos.filter((td) => !td.done || showChecked).length && <Divider/>}
       </div>
       )}
     </List>

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"