steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +00:00
Code Activity

✨ Create NotebookDescriptionBox

Browse source
This commit is contained in:
Steffo 2021-10-15 17:22:11 +02:00 committed by Stefano Pigozzi
parent 9ecd6dfaec
commit bf7e15bd2f
2 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.tsx
View file

@ -17,6 +17,7 @@ import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionB
import {InstanceFormBox} from "./components/instance/InstanceFormBox"
import {InstanceRouter} from "./components/instance/InstanceRouter"
import {NotebookCreateBox} from "./components/notebook/NotebookCreateBox"
import {NotebookDescriptionBox} from "./components/notebook/NotebookDescriptionBox"
import {NotebookListBox} from "./components/notebook/NotebookListBox"
import {NotebookRouter} from "./components/notebook/NotebookRouter"
import {DebugBox} from "./components/placeholder/DebugBox"
@ -81,6 +82,7 @@ function App({..._}: RouteComponentProps) {
</>}
selectedRoute={({selection}) => <>
<NotebookProvider resource={selection}>
<NotebookDescriptionBox/>
<NotebookCreateBox resource={selection}/>
<DebugBox {...selection}/>
</NotebookProvider>

45
frontend/src/components/notebook/NotebookDescriptionBox.tsx Normal file
View file

@ -0,0 +1,45 @@
import {faBook} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {Box, BringAttention as B, Code, Heading, Idiomatic as I} from "@steffo/bluelib-react"
import * as React from "react"
import {useCacheContext} from "../../contexts/cache"
import {useNotebookContext} from "../../contexts/notebook"
export function NotebookDescriptionBox(): JSX.Element | null {
const cache = useCacheContext()
const notebook = useNotebookContext()
if(notebook) {
var locked_by = cache?.getUserById(notebook.value.locked_by)?.value.username
}
const locked_text =
React.useMemo(
() => {
if(!locked_by) {
return null
}
return (
<>, currently <B>locked by {locked_by}</B></>
)
},
[locked_by],
)
if(!notebook) {
return null
}
return (
<Box>
<Heading level={3}>
<FontAwesomeIcon icon={faBook}/>&nbsp;About <I>{notebook.value.name}</I>
</Heading>
<p>
A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
</p>
</Box>
)
}