diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx index 9d05fba..2ae18ed 100644 --- a/src/components/Visualizer.tsx +++ b/src/components/Visualizer.tsx @@ -129,8 +129,6 @@ export function VisualizerFrame({ courtType, }: VisualizerFrameProps) { - console.log(content, parentContent) - const courtRef = useRef(null) const courtBounds = useCallback( diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 063b120..7c7a76f 100644 --- a/src/pages/Editor.tsx +++ b/src/pages/Editor.tsx @@ -291,7 +291,6 @@ function EditorPageWrapper({ stepsVersions.set(stepId, versions) versions.insertAndCut(contentResult) - console.log(contentResult) setStepContent(contentResult, false) } @@ -716,7 +715,7 @@ function EditorPage({ const contentNode = (
-
+
+ navigate("/tactic/edit-guest")} /> ) } return ( - + navigate(`/tactic/${idStr}/edit`)} /> ) } interface VisualizerService { selectStep(step: number): Promise + + openEditor(): Promise +} + +interface ServedVisualizerPageProps { + service: TacticService + openEditor: () => void } -function ServedVisualizerPage({ service }: { service: TacticService }) { +function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps) { const [panicMessage, setPanicMessage] = useState() const [state, dispatch] = useReducer(visualizerStateReducer, null) + const [canEdit, setCanEdit] = useState(false) useEffect(() => { async function init() { @@ -45,7 +56,7 @@ function ServedVisualizerPage({ service }: { service: TacticService }) { if (typeof contextResult === "string") { setPanicMessage( "There has been an error retrieving the editor initial context : " + - contextResult, + contextResult, ) return } @@ -56,11 +67,13 @@ function ServedVisualizerPage({ service }: { service: TacticService }) { if (typeof contentResult === "string") { setPanicMessage( "There has been an error retrieving the tactic's root step content : " + - contentResult, + contentResult, ) return } + setCanEdit(await service.canBeEdited()) + dispatch({ type: VisualizerStateActionKind.INIT, state: { @@ -96,10 +109,14 @@ function ServedVisualizerPage({ service }: { service: TacticService }) { stepId: step, }) }, + async openEditor() { + openEditor() + }, }), - [service, state], + [openEditor, service, state], ) + if (panicMessage) { return

{panicMessage}

} @@ -108,18 +125,20 @@ function ServedVisualizerPage({ service }: { service: TacticService }) { return

Retrieving tactic context. Please wait...

} - return + return } interface VisualizerPageContentProps { state: VisualizerState service: VisualizerService + showEditButton: boolean } function VisualizerPageContent({ - state: { content, parentContent, stepId, stepsTree, courtType, tacticName }, - service, -}: VisualizerPageContentProps) { + state: { content, parentContent, stepId, stepsTree, courtType, tacticName }, + service, + showEditButton, + }: VisualizerPageContentProps) { const [isStepsTreeVisible, setStepsTreeVisible] = useState(false) const [editorContentCurtainWidth, setEditorContentCurtainWidth] = @@ -150,13 +169,20 @@ function VisualizerPageContent({ return (
-
+

{tacticName}

- +
+ + {showEditButton && } +
+
diff --git a/src/service/APITacticService.ts b/src/service/APITacticService.ts index ba11007..655bde2 100644 --- a/src/service/APITacticService.ts +++ b/src/service/APITacticService.ts @@ -13,6 +13,12 @@ export class APITacticService implements MutableTacticService { this.tacticId = tacticId } + async canBeEdited(): Promise { + const response = await fetchAPIGet(`tactics/${this.tacticId}/can-edit`) + const { canEdit } = await response.json() + return canEdit + } + async getContext(): Promise { const infoResponsePromise = fetchAPIGet(`tactics/${this.tacticId}`) const infoResponse = await infoResponsePromise diff --git a/src/service/LocalStorageTacticService.ts b/src/service/LocalStorageTacticService.ts index 7f5100b..7e2b009 100644 --- a/src/service/LocalStorageTacticService.ts +++ b/src/service/LocalStorageTacticService.ts @@ -17,6 +17,10 @@ const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title" export class LocalStorageTacticService implements MutableTacticService { private constructor() {} + canBeEdited(): Promise { + return Promise.resolve(true) + } + static init(): LocalStorageTacticService { const root = localStorage.getItem( GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY, diff --git a/src/service/MutableTacticService.ts b/src/service/MutableTacticService.ts index 2132c96..b680d6b 100644 --- a/src/service/MutableTacticService.ts +++ b/src/service/MutableTacticService.ts @@ -14,6 +14,7 @@ export enum ServiceError { export interface TacticService { getContext(): Promise getContent(step: number): Promise + canBeEdited(): Promise } export interface MutableTacticService extends TacticService { diff --git a/src/style/editor.css b/src/style/editor.css index bd93172..8c20276 100644 --- a/src/style/editor.css +++ b/src/style/editor.css @@ -39,6 +39,10 @@ justify-content: space-between; align-items: center; height: 25px; + z-index: 1; + + align-content: space-between; + width: 100%; } .title-input { @@ -63,13 +67,6 @@ flex-direction: column; } -#racks { - display: flex; - align-content: space-between; - justify-content: space-between; - width: 100%; -} - .curtain { width: 100%; } diff --git a/src/style/visualizer.css b/src/style/visualizer.css index 64e1cf0..e992ea8 100644 --- a/src/style/visualizer.css +++ b/src/style/visualizer.css @@ -31,16 +31,16 @@ height: 100%; } -#topbar-div { - position: relative; +#header-page { width: 100%; display: flex; background-color: var(--main-color); - align-content: flex-end; justify-content: flex-end; + align-content: flex-end; } -#show-steps-button { +#header-page-right { + display: flex; user-select: none; align-self: flex-end; height: 100%;