Skip to content

Commit

Permalink
Add Console Window
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonrho
simonrho committed Sep 19, 2024
1 parent d7dd9b4 commit f6ccfd4
Show file tree
Hide file tree
Showing 5 changed files with 277 additions and 125 deletions.
128 changes: 128 additions & 0 deletions jccm/src/Frontend/AboutWindow.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React, { useState, useRef, useEffect } from 'react';
import {
Button,
Field,
Input,
SpinButton,
Divider,
Tooltip,
Text,
Dialog,
DialogSurface,
DialogTrigger,
DialogBody,
DialogActions,
DialogContent,
DialogTitle,
DialogFooter,
Toast,
ToastTitle,
ToastBody,
Switch,
TabList,
Tab,
tokens,
} from '@fluentui/react-components';
import {
EyeRegular,
EyeOffRegular,
DismissFilled,
DismissRegular,
SubtractCircleRegular,
SubtractCircleFilled,
bundleIcon,
} from '@fluentui/react-icons';

const { electronAPI } = window;

export const AboutWindow = ({ isOpen, onClose }) => {
const aboutWindowWidth = 300;
const aboutWindowHeight = 300;

const [appInfo, setAppInfo] = useState({});

useEffect(() => {
electronAPI.getAppInfo().then((info) => {
console.log('App Info: ', info);
setAppInfo(info);
});
}, []);

const handleOnOkay = () => {
onClose();
};

const handleOnCopy = async () => {
const appInfoText = JSON.stringify(appInfo, null, 4);
await navigator.clipboard.writeText(appInfoText);
onClose();
};

return (
<Dialog
open={isOpen}
onDismiss={onClose}
modalProps={{ isBlocking: true }}
>
<DialogSurface
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-evenly',
alignItems: 'center',
width: `${aboutWindowWidth}px`,
height: `${aboutWindowHeight}px`,
overflow: 'hidden',
}}
>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Text size={300} weight='semibold'>
{appInfo.name}
</Text>
</div>

<div>
<ul style={{ listStyleType: 'none', padding: 0 }}>
{Object.entries(appInfo)
.filter(
([key]) =>
!['name', 'electronBuildId'].includes(key)
)
.map(([key, value]) => (
<li key={key}>
<Text
style={{ fontSize: '12px' }}
>{`${key}: ${value} `}</Text>
</li>
))}
</ul>
</div>

<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: '20px',
}}
>
<Button
appearance='secondary'
onClick={handleOnOkay}
size='small'
>
OK
</Button>
<Button
appearance='primary'
onClick={handleOnCopy}
size='small'
>
Copy
</Button>
</div>
</DialogSurface>
</Dialog>
);
};
225 changes: 111 additions & 114 deletions jccm/src/Frontend/ConsoleWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,10 @@ export const ConsoleWindow = () => {
const [copyButtonName, setCopyButtonName] = useState('Copy');
const [isCopyButtonClicked, setIsCopyButtonClicked] = useState(false);


const handleConsoleWindowReset = () => {
console.log('Console window reset');
setConsoleWindowContents([]);
}
};

// Capture and display logs in the console window
useEffect(() => {
Expand Down Expand Up @@ -119,132 +118,130 @@ export const ConsoleWindow = () => {
};

return (
<>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
overflow: 'hidden',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%',
height: '100%',
// height: `${HeaderSpaceHeight+4}px`,
height: `${30}px`,
overflow: 'hidden',
backgroundColor: tokens.colorNeutralBackground1Selected,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%',
// height: `${HeaderSpaceHeight+4}px`,
height: `${30}px`,
overflow: 'hidden',
backgroundColor: tokens.colorNeutralBackground1Selected,
<Button
disabled={consoleWindowContents.length === 0}
icon={<EraserIcon fontSize='14px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => setConsoleWindowContents([])}
>
Erase
</Button>
<Button
disabled={consoleWindowContents.length === 0}
icon={<CopyIcon fontSize='16px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => {
copyConsoleWindowContents();
}}
>
<Button
disabled={consoleWindowContents.length === 0}
icon={<EraserIcon fontSize='14px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => setConsoleWindowContents([])}
<Text
size={200}
weight={isCopyButtonClicked ? 'bold' : 'regular'}
>
Erase
</Button>
<Button
disabled={consoleWindowContents.length === 0}
icon={<CopyIcon fontSize='16px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => {
copyConsoleWindowContents();
}}
>
<Text
size={200}
weight={isCopyButtonClicked ? 'bold' : 'regular'}
>
{copyButtonName}
</Text>
</Button>
<Button
icon={<DismissIcon fontSize='16px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => {
setConsoleWindowOpen(false);
}}
>
Close
</Button>
</div>
<div
ref={consoleWindowRef}
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
overflowX: 'hidden',
overflowY: 'auto',
whiteSpace: 'pre-wrap',
marginBottom: '20px',
paddingLeft: '5px',

fontSize: '12px',
lineHeight: '1.5',
{copyButtonName}
</Text>
</Button>
<Button
icon={<DismissIcon fontSize='16px' />}
size='small'
appearance='transparent'
shape='circular'
style={{ marginRight: '10px' }}
onClick={() => {
setConsoleWindowOpen(false);
}}
>
{consoleWindowContents.map((log, index) => (
<div key={index} style={{ marginBottom: '10px' }}>
{index > 0 && (
<div
Close
</Button>
</div>
<div
ref={consoleWindowRef}
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
overflowX: 'hidden',
overflowY: 'auto',
whiteSpace: 'pre-wrap',
marginBottom: '20px',
paddingLeft: '5px',

fontSize: '12px',
lineHeight: '1.5',
}}
>
{consoleWindowContents.map((log, index) => (
<div key={index} style={{ marginBottom: '10px' }}>
{index > 0 && (
<div
style={{
width: '100%',
marginBottom: '10px',
padding: 0,
}}
>
<Divider appearance='default' />
</div>
)}
<strong>{log.type}: </strong>

{log.args.map((arg, idx) =>
typeof arg === 'object' ? (
<ReactJson
key={idx}
src={arg}
name={false}
collapsed={true}
displayDataTypes={false}
quotesOnKeys={false}
enableClipboard={false}
theme={
currentActiveThemeName
.toLowerCase()
.includes('dark')
? 'chalk'
: 'rjv-default'
}
style={{
width: '100%',
marginBottom: '10px',
padding: 0,
fontSize: '11px',
}}
>
<Divider appearance='default' />
</div>
)}
<strong>{log.type}: </strong>

{log.args.map((arg, idx) =>
typeof arg === 'object' ? (
<ReactJson
key={idx}
src={arg}
name={false}
collapsed={true}
displayDataTypes={false}
quotesOnKeys={false}
enableClipboard={false}
theme={
currentActiveThemeName
.toLowerCase()
.includes('dark')
? 'chalk'
: 'rjv-default'
}
style={{
fontSize: '11px',
}}
/>
) : (
<span key={idx}>{String(arg)}</span>
)
)}
</div>
))}
</div>
/>
) : (
<span key={idx}>{String(arg)}</span>
)
)}
</div>
))}
</div>
</>
</div>
);
};
Loading

0 comments on commit f6ccfd4

Please sign in to comment.