-
- Log
- setCollapsed((c) => !c)}
- />
-
+
+
setCollapsed((c) => !c)}/>
{!collapsed && (
-
- - 10:35:23 [PLAYBACK] Next
- -
- 10:32:10 [CLIENT] New socket client (total: 3)
-
- - 10:28:23 [PLAYBACK] Next
- - 10:25:23 [PLAYBACK] Play
- - 10:23:13 [SERVER] Server Reconnected
- - 10:23:10 [SERVER] Server Disconnected
-
+ <>
+
+
setShowUser((s) => !s)}
+ onAuxClick={() => disableOthers('USER')}
+ className={(showUser) ? style.active : null}>
+ USER
+
+
setShowClient((s) => !s)}
+ onAuxClick={() => disableOthers('CLIENT')}
+ className={(showClient) ? style.active : null}>
+ CLIENT
+
+
setShowServer((s) => !s)}
+ onAuxClick={() => disableOthers('SERVER')}
+ className={(showServer) ? style.active : null}>
+ SERVER
+
+
setShowPlayback((s) => !s)}
+ onAuxClick={() => disableOthers('PLAYBACK')}
+ className={(showPlayback) ? style.active : null}>
+ Playback
+
+
setShowRx((s) => !s)}
+ onAuxClick={() => disableOthers('RX')}
+ className={(showRx) ? style.active : null}>
+ RX
+
+
setShowTx((s) => !s)}
+ onAuxClick={() => disableOthers('TX')}
+ className={(showTx) ? style.active : null}>
+ TX
+
+
+ Clear
+
+
+ {data.map((d) => (
+ -
+
{d.time}
+ {d.origin}
+ {d.text}
+
+ ))}
+
+
)}
);
diff --git a/client/src/features/info/InfoLogger.module.scss b/client/src/features/info/InfoLogger.module.scss
new file mode 100644
index 000000000..51087c484
--- /dev/null
+++ b/client/src/features/info/InfoLogger.module.scss
@@ -0,0 +1,89 @@
+@use 'Info.module' as *;
+@use '../../main' as *;
+
+.container,
+.container__expanded{
+ @include container;
+ max-height: 80%;
+}
+
+.container__expanded {
+ min-height: 50%;
+ height: 100%
+}
+
+.log {
+ height: 100%;
+ overflow-y: scroll;
+ font-size: 0.8em;
+ user-select:text;
+ @include container-bg;
+
+ li {
+ display: flex;
+ margin-bottom: 2px;
+
+ .time {
+ width: 13%;
+ }
+ .origin {
+ width: 18%;
+ }
+ .msg {
+ width: 70%;
+ }
+ }
+
+ li.info {
+ color: #aaa;
+ }
+ li.warn {
+ color: #dd6b20;
+ }
+ li.error {
+ color: #f00;
+ }
+
+ .entry:hover {
+ color: #ddd;
+ }
+}
+
+
+.info {
+ color: #fff;
+}
+
+.error {
+ color: red;
+}
+
+.client {
+ color: lightblue;
+}
+
+.toggleBar {
+ display: flex;
+ font-size: 0.7em;
+ justify-content: flex-start;
+ gap: 1em;
+ padding: 0.5em 0;
+ font-weight: 600;
+
+ div {
+ padding: 2px 8px;
+ background: #0002;
+ border: 1px solid #fff1;
+ border-radius: 2px;
+ cursor: pointer;
+ }
+
+ div.active {
+ background: $ontime-accent;
+ color: darken($ontime-accent, 70%);
+ }
+
+ .clear {
+ border: 1px solid rgba($ontime-pink, 0.5);
+ }
+}
\ No newline at end of file
diff --git a/client/src/features/info/InfoNif.jsx b/client/src/features/info/InfoNif.jsx
index bf563de0d..647c35176 100644
--- a/client/src/features/info/InfoNif.jsx
+++ b/client/src/features/info/InfoNif.jsx
@@ -1,10 +1,9 @@
-import { Icon } from '@chakra-ui/react';
import { useState } from 'react';
-import { FiChevronUp } from 'react-icons/fi';
import { APP_TABLE } from 'app/api/apiConstants';
import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
import { useFetch } from 'app/hooks/useFetch';
import style from './Info.module.scss';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
export default function InfoNif() {
const { data, status } = useFetch(APP_TABLE, getInfo, {
@@ -22,16 +21,8 @@ export default function InfoNif() {
};
return (
-
-
- Network Info
- setCollapsed((c) => !c)}
- />
-
-
+
+
setCollapsed((c) => !c)}/>
{!collapsed && (
{status === 'success' && (
diff --git a/client/src/features/menu/MenuBar.jsx b/client/src/features/menu/MenuBar.jsx
index 4bfe0f7fd..b902bebff 100644
--- a/client/src/features/menu/MenuBar.jsx
+++ b/client/src/features/menu/MenuBar.jsx
@@ -9,10 +9,12 @@ import QuitIconBtn from './buttons/QuitIconBtn';
import style from './MenuBar.module.css';
import HelpIconBtn from './buttons/HelpIconBtn';
import UploadIconBtn from './buttons/UploadIconBtn';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
+import { LoggingContext } from '../../app/context/LoggingContext';
export default function MenuBar(props) {
const { onOpen } = props;
+ const { emitError } = useContext(LoggingContext);
const hiddenFileInput = useRef(null);
const queryClient = useQueryClient();
const uploaddb = useMutation(uploadEvents, {
@@ -34,28 +36,24 @@ export default function MenuBar(props) {
const handleUpload = (event) => {
const fileUploaded = event.target.files[0];
if (fileUploaded == null) return;
- console.log(fileUploaded);
// Limit file size to 1MB
if (fileUploaded.size > 1000000) {
- console.log('Error: File size limit (1MB) exceeded');
+ emitError('Error: File size limit (1MB) exceeded')
return;
}
// Check file extension
- if (fileUploaded.name.endsWith('.xlsx')) {
- console.log('excel file');
- } else if (fileUploaded.name.endsWith('.json')) {
- console.log('json file');
- } else {
- console.log('Error: File type unknown');
+ if (! fileUploaded.name.endsWith('.xlsx')
+ || !fileUploaded.name.endsWith('.json')) {
+ emitError('Error: File type unknown')
return;
}
try {
uploaddb.mutate(fileUploaded);
} catch (error) {
- console.log(error);
+ emitError(`Failed uploading file: ${error}`)
}
// reset input value
diff --git a/client/src/features/modals/AliasesModal.jsx b/client/src/features/modals/AliasesModal.jsx
index 08a9cc296..8a9663ee1 100644
--- a/client/src/features/modals/AliasesModal.jsx
+++ b/client/src/features/modals/AliasesModal.jsx
@@ -23,6 +23,7 @@ export default function AliasesModal() {
const smLink = 'http://localhost:4001/sm';
const publicLink = 'http://localhost:4001/public';
const pipLink = 'http://localhost:4001/pip';
+ const studioLink = 'http://localhost:4001/studio';
return (
<>
@@ -81,6 +82,17 @@ export default function AliasesModal() {
{pipLink}
+
+ Studio Clock
+
+ {studioLink}
+
+