From 1acb7d6762e72c45dd9a08295a43d139ecf835f6 Mon Sep 17 00:00:00 2001 From: Davide Passoni Date: Mon, 1 Jul 2024 15:51:43 +0200 Subject: [PATCH] Work on reactive design --- frontend/react/.vscode/launch.json | 2 +- frontend/react/index.html | 2 +- .../react/src/ui/components/olstatebutton.tsx | 6 +-- frontend/react/src/ui/modals/login.tsx | 2 +- frontend/react/src/ui/panels/header.tsx | 50 ++++++++++--------- frontend/react/vite.config.js | 2 +- frontend/server/app.js | 1 + frontend/server/demo.js | 1 - 8 files changed, 35 insertions(+), 31 deletions(-) diff --git a/frontend/react/.vscode/launch.json b/frontend/react/.vscode/launch.json index d0e64675..1f07e0f0 100644 --- a/frontend/react/.vscode/launch.json +++ b/frontend/react/.vscode/launch.json @@ -8,7 +8,7 @@ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", - "url": "http://localhost:8080", + "url": "http://localhost:3000/vite/", "webRoot": "${workspaceFolder}", "preLaunchTask": "npm: dev" } diff --git a/frontend/react/index.html b/frontend/react/index.html index f9de80fe..0f31b32f 100644 --- a/frontend/react/index.html +++ b/frontend/react/index.html @@ -8,7 +8,7 @@ - Vite + React + Olympus v2 diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx index c9014d99..cd554314 100644 --- a/frontend/react/src/ui/components/olstatebutton.tsx +++ b/frontend/react/src/ui/components/olstatebutton.tsx @@ -16,7 +16,7 @@ export function OlStateButton(props: { const className = (props.className ?? '') + ` h-[40px] w-[40px] flex-none font-medium rounded-md text-lg dark:bg-olympus-600 dark:hover:bg-olympus-300 dark:data-[checked='true']:bg-blue-500 dark:data-[checked='true']:text-white dark:text-gray-300 dark:border-gray-600 `; - return <> {hover && } @@ -35,7 +35,7 @@ export function OlRoundStateButton(props: { const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-2 border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-gray-400 dark:data-[checked='true']:text-gray-900 dark:data-[checked='true']:border-white dark:border-gray-400 dark:data-[checked='true']:hover:bg-gray-200 dark:data-[checked='true']:hover:border-gray-200 dark:hover:bg-gray-800`; - return <> { hover && } @@ -53,7 +53,7 @@ export function OlLockStateButton(props: { const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-gray-900 font-medium rounded-full text-sm dark:bg-red-500 dark:data-[checked='true']:bg-green-500 dark:text-olympus-900 dark:data-[checked='true']:text-green-900 dark:data-[checked='true']:hover:bg-green-400 dark:hover:bg-red-400`; - return <> { hover && } diff --git a/frontend/react/src/ui/modals/login.tsx b/frontend/react/src/ui/modals/login.tsx index 35e44cf6..59286f24 100644 --- a/frontend/react/src/ui/modals/login.tsx +++ b/frontend/react/src/ui/modals/login.tsx @@ -34,7 +34,7 @@ export function LoginModal(props: {
{window.location.toString()}
- +

DCS Olympus

Version {VERSION}
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx index b36a7f60..59a70c09 100644 --- a/frontend/react/src/ui/panels/header.tsx +++ b/frontend/react/src/ui/panels/header.tsx @@ -1,6 +1,6 @@ -import React from 'react' +import React, { useState } from 'react' import { OlRoundStateButton, OlStateButton, OlLockStateButton } from '../components/olstatebutton'; -import { faSkull, faCamera, faFlag, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons'; +import { faSkull, faCamera, faFlag, faLink, faUnlink, faBars } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { EventsConsumer } from '../../eventscontext'; import { StateConsumer } from '../../statecontext'; @@ -10,20 +10,23 @@ import { getApp, IP, connectedToServer } from '../../olympusapp'; import { olButtonsVisibilityAirbase, olButtonsVisibilityAircraft, olButtonsVisibilityDcs, olButtonsVisibilityGroundunit, olButtonsVisibilityGroundunitSam, olButtonsVisibilityHelicopter, olButtonsVisibilityHuman, olButtonsVisibilityNavyunit, olButtonsVisibilityOlympus } from '../components/olicons'; export function Header() { + const [collapsed, setCollapsed] = useState(true); + return {(appState) => {(events) => -