Skip to content

Commit

Permalink
bisschen styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Josef552
Josef552 committed Oct 4, 2024
1 parent 8f1347b commit 745d279
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 51 deletions.
19 changes: 16 additions & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,22 @@ function App() {

// calculate size of content elements so that content always fits the window size
const headerRef = useRef<HTMLHeadingElement>(null);
const toolRef = useRef<HTMLDivElement>(null);
const [contentHeight, setContentHeight] = useState(window.innerHeight);
const [toolbarHeight, setToolbarHeight] = useState(0);

useLayoutEffect(() => {
const updateContentHeight = () => {
const headerEl = headerRef.current;
const toolEl = toolRef.current;
if(toolEl){
const style = window.getComputedStyle(toolEl);
const marginTop = parseInt(style.marginTop, 10);
const marginBottom = parseInt(style.marginBottom, 10);
const totalToolBarHeight = toolEl.offsetHeight + marginTop + marginBottom;
setToolbarHeight(totalToolBarHeight);
}

if (headerEl) {
const style = window.getComputedStyle(headerEl);
const marginTop = parseInt(style.marginTop, 10);
Expand All @@ -43,9 +54,11 @@ function App() {
<h1 style={{ paddingLeft: '16px' }} ref={headerRef}>
⏰ {t('app.title')}
</h1>
<AutomatonDrawer viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
<ProcessSelection viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
<Box sx={{ display: 'flex', height: `${contentHeight - 1}px`, overflow: 'hidden' }}>
<Box ref={toolRef} sx={{ display: 'flex', alignItems: 'center'}}>
<AutomatonDrawer viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
<ProcessSelection viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
</Box>
<Box sx={{ display: 'flex', height: `${contentHeight - toolbarHeight - 1}px`, overflow: 'hidden' }}>
<Grid container sx={{ height: '100%' }}>
<Grid
item
Expand Down
6 changes: 3 additions & 3 deletions src/view/AutomationDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const AutomatonDrawer: React.FC<AutomatonDrawerProps> = (props) => {
};

return (
<Box sx={{ display: 'inline-flex' }}>
<Box sx={{ display: 'inline-flex', mb: 2 }}>
<CssBaseline />
<IconButton
color="inherit"
Expand Down Expand Up @@ -76,12 +76,12 @@ const AutomatonDrawer: React.FC<AutomatonDrawerProps> = (props) => {
</IconButton>
</DrawerHeader>
<Divider />
<Box sx={{ display: 'inline-flex', alignItems: 'center', mt: 1, mb: 1 }}>
<Box sx={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center', mt: 1, mb: 1 }}>
<UploadButton viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
<DownloadButton viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
</Box>
<Divider />
<Box sx={{ display: 'inline-flex', mt: 1, mb: 1 }}>
<Box sx={{ justifyContent: 'flex-start', display: 'inline-flex', mt: 1, mb: 1, ml: 2 }}>
<SystemSelection viewModel={viewModel} openedSystems={openedSystems} openedProcesses={openedProcesses} />
</Box>
</Drawer>
Expand Down
20 changes: 10 additions & 10 deletions src/view/ProcessSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ const ProcessSelection: React.FC<ProcessSelectionProps> = (props) => {
const validationError: boolean = useMemo(() => nameIsEmpty || nameIsDuplicate, [nameIsDuplicate, nameIsEmpty]);

return (
<Box sx={{ display: 'inline-flex' }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1, mr: 0.2 }}>
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
<Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
<TextField
sx={{ width: 200, mr: 0.2 }}
sx={{ width: 200, mr: 0.5 }}
margin="dense"
label={'Enter New Process'}
type="text"
Expand All @@ -83,17 +83,17 @@ const ProcessSelection: React.FC<ProcessSelectionProps> = (props) => {
value={newProcessName}
onChange={(e) => setNewProcessName(e.target.value)}
error={validationError}
helperText={validationError ? nameErrorMsg : ''}
helperText={validationError ? nameErrorMsg : ' '}
data-testid={'input-process-name'}
/>
<Button variant="contained" disabled={validationError} onClick={addProcess} sx={{ mb: 2 }}>
<AddIcon></AddIcon>
<Button variant="contained" disabled={validationError} onClick={addProcess} sx={{mb: 2}}>
<AddIcon/>
Add Process
</Button>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2.3 }}>
<Autocomplete
sx={{ width: 200, mr: 0.2 }}
sx={{ width: 200, mr: 0.5 }}
id="select-automaton"
freeSolo
selectOnFocus
Expand All @@ -116,9 +116,9 @@ const ProcessSelection: React.FC<ProcessSelectionProps> = (props) => {
}}
options={optionLabels}
renderInput={(params) => <TextField {...params} label="Select Process" />}
></Autocomplete>
/>
<Button variant="contained" disabled={options.length === 1} onClick={deleteProcess}>
<DeleteIcon></DeleteIcon>
<DeleteIcon/>
Discard Process
</Button>
</Box>
Expand Down
69 changes: 35 additions & 34 deletions src/view/SystemSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const SystemSelection: React.FC<SystemSelectionProps> = (props) => {

return (
<Box sx={{ ml: 0.2 }}>
<Box sx={{ alignItems: 'center', mb: 0.2 }}>
<Box sx={{ alignItems: 'center', mb: 3 }}>
<TextField
sx={{ width: 200, mr: 0.2 }}
margin="dense"
Expand All @@ -90,45 +90,46 @@ const SystemSelection: React.FC<SystemSelectionProps> = (props) => {
helperText={validationError ? nameErrorMsg : ''}
data-testid={'input-system-name'}
/>
<br/>
<Button variant="contained" disabled={validationError} onClick={addSystem} sx={{ mb: 1 }}>
<AddIcon></AddIcon>
<AddIcon/>
Add System
</Button>
</Box>
<Box sx={{ alignItems: 'center', mb: 1, mt: 2 }}>
<Box sx={{alignItems: 'center', mb: 1, mt: 2}}>
<Autocomplete
sx={{ width: 200, mr: 0.2 }}
id="select-automaton"
freeSolo
selectOnFocus
handleHomeEndKeys
disableClearable
value={value}
onChange={(event, newValue) => {
console.log(event);
console.log('Optionen:', options);
sx={{width: 200, mr: 0.2}}
id="select-automaton"
freeSolo
selectOnFocus
handleHomeEndKeys
disableClearable
value={value}

Check failure on line 107 in src/view/SystemSelection.tsx

View workflow job for this annotation

GitHub Actions / build 

Type 'SystemOptionType' is not assignable to type 'string'.
onChange={(event, newValue) => {
console.log(event);
console.log('Optionen:', options);

//set value and automaton to existing option
options.forEach((option) => {
if (option.label === newValue) {
openedProcesses.selectedOption.automaton = viewModel.ta;
console.log('processOptions:', openedProcesses.automatonOptions);
value.processes = openedProcesses.automatonOptions;
openedSystems.selectedSystem = option;
//setValue(option);
openedSystems.setSelectedSystem(option);
openedProcesses.setAutomatonOptions(openedProcesses, openedSystems.selectedSystem.processes);
viewModel.setAutomaton(viewModel, option.processes[0].automaton);
//console.log("openedSystems after change:",openedSystems);
//console.log("openedProcesses after change:", openedProcesses);
}
});
}}
options={optionLabels}
renderInput={(params) => <TextField {...params} label="Select System" />}
></Autocomplete>
<Button variant="contained" disabled={options.length === 1} onClick={deleteSystem} sx={{ mt: 0.2 }}>
<DeleteIcon></DeleteIcon>
//set value and automaton to existing option
options.forEach((option) => {
if (option.label === newValue) {
openedProcesses.selectedOption.automaton = viewModel.ta;
console.log('processOptions:', openedProcesses.automatonOptions);
value.processes = openedProcesses.automatonOptions;
openedSystems.selectedSystem = option;
//setValue(option);
openedSystems.setSelectedSystem(option);
openedProcesses.setAutomatonOptions(openedProcesses, openedSystems.selectedSystem.processes);
viewModel.setAutomaton(viewModel, option.processes[0].automaton);
//console.log("openedSystems after change:",openedSystems);
//console.log("openedProcesses after change:", openedProcesses);
}
});
}}
options={optionLabels}
renderInput={(params) => <TextField {...params} label="Select System"/>}
/>
<Button variant="contained" disabled={options.length === 1} onClick={deleteSystem} sx={{mt: 0.5}}>
<DeleteIcon/>
Discard System
</Button>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion src/view/UploadButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ const UploadButton: React.FC<OpenedDocs> = (props) => {
//TODO hier noch das "Upload file" in diese Localization file tun
return (
<label htmlFor="uploadFile">
<Button variant="contained" component="label" sx={{mr: 0.15, mb: 0.2}}>
<Button variant="contained" component="label" sx={{ml: 0.15, mr: 0.5, mb: 0.2}}>
Upload File
<input id="uploadFile" type="file" accept=".tck" onChange={handleClick}/>
</Button>
Expand Down

0 comments on commit 745d279

Please sign in to comment.