weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Error in admin panel inputs fixed, plus improvements to modal panels

Browse Source
This commit is contained in:
Davide Passoni
2025-03-19 17:23:17 +01:00
parent f058958c13
commit 2d26862b6c
7 changed files with 55 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/react/src/ui/modals/adminmodal.tsx
View File

@@ -76,11 +76,11 @@ export function AdminModal(props: { open: boolean }) {
return ( return (
<Modal open={props.open}> <Modal open={props.open} size={"full"}>
<div className="flex w-full gap-4"> <div className="flex flex-col lg:flex-row w-full gap-4">
<div className="w-[40%]"> <div className="lg:w-[40%]">
<div className="text-white">Groups:</div> <div className="text-white">Groups:</div>
<div className="flex max-h-[300px] flex-col gap-1 overflow-auto p-2"> <div className="flex max-h-[calc(100vh-280px)] flex-col gap-1 overflow-auto p-2">
{configs.groups && {configs.groups &&
Object.keys(configs.groups).map((group: any) => { Object.keys(configs.groups).map((group: any) => {
return ( return (
@@ -142,7 +142,7 @@ export function AdminModal(props: { open: boolean }) {
type="text" type="text"
autoComplete="new-password" autoComplete="new-password"
onChange={(ev) => { onChange={(ev) => {
setNewUserName(ev.currentTarget.value); setNewGroupName(ev.currentTarget.value);
}} }}
className={` className={`
rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm
@@ -173,9 +173,9 @@ export function AdminModal(props: { open: boolean }) {
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-[58%] flex-col gap-2"> <div className="flex lg:w-[58%] flex-col gap-2">
<div className="text-white">Users:</div> <div className="text-white">Users:</div>
<div className={`flex max-h-[300px] flex-col gap-1 overflow-auto p-2`}> <div className={`flex max-h-[calc(100vh-280px)] flex-col gap-1 overflow-auto p-2`}>
{configs.users && {configs.users &&
Object.keys(configs.users).map((user: any) => { Object.keys(configs.users).map((user: any) => {
return ( return (

23
frontend/react/src/ui/modals/components/modal.tsx
View File

@@ -4,7 +4,7 @@ import { FaXmark } from "react-icons/fa6";
import { getApp, OlympusApp } from "../../../olympusapp"; import { getApp, OlympusApp } from "../../../olympusapp";
import { OlympusState } from "../../../constants/constants"; import { OlympusState } from "../../../constants/constants";
export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Element[]; className?: string }) { export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Element[]; className?: string; size?: "sm" | "md" | "lg" | "full" }) {
const [splash, setSplash] = useState(Math.ceil(Math.random() * 7)); const [splash, setSplash] = useState(Math.ceil(Math.random() * 7));
useEffect(() => { useEffect(() => {
@@ -18,19 +18,18 @@ export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Eleme
<div className={`fixed left-0 top-0 z-30 h-full w-full bg-[#111111]/95`}></div> <div className={`fixed left-0 top-0 z-30 h-full w-full bg-[#111111]/95`}></div>
<div <div
className={` className={`
fixed left-[50%] top-[50%] z-40 inline-flex h-[75%] max-h-[600px] fixed left-[50%] top-[50%] z-40 inline-flex translate-x-[-50%] translate-y-[-50%]
w-[80%] max-w-[1100px] translate-x-[-50%] translate-y-[-50%] overflow-y-auto scroll-smooth
overflow-y-auto scroll-smooth rounded-xl border-[1px] border-solid bg-olympus-800
border-gray-700 bg-white drop-shadow-md max-md:rounded-none
dark:bg-olympus-800 max-md:border-none rounded-xl border-[1px] border-solid border-gray-700 drop-shadow-md
max-md:h-full max-md:max-h-full max-md:w-full max-md:rounded-none ${props.size === "lg" ? "h-[600px] w-[1100px] max-md:h-full max-md:w-full" : ""}
max-md:border-none ${props.size === "md" ? "h-[600px] w-[950px] max-md:h-full max-md:w-full" : ""}
${props.size === "sm" ? "h-[500px] w-[800px] max-md:h-full max-md:w-full" : ""}
${props.size === "full" ? "h-full w-full" : ""}
`} `}
> >
<img <img src={`images/splash/${splash}.jpg`} className={`contents-center w-full object-cover opacity-[4%]`}></img>
src={`images/splash/${splash}.jpg`}
className={`contents-center w-full object-cover opacity-[7%]`}
></img>
<div className="fixed left-0 top-0 h-full w-full"> <div className="fixed left-0 top-0 h-full w-full">
<div <div
className={` className={`

2
frontend/react/src/ui/modals/importexportmodal.tsx
View File

@@ -96,6 +96,7 @@ export function ImportExportModal(props: { open: boolean }) {
return ( return (
<Modal open={props.open} className={``}> <Modal open={props.open} className={``}>
<div className="flex h-full w-full flex-col justify-between">
<div className={`flex flex-col justify-between gap-2`}> <div className={`flex flex-col justify-between gap-2`}>
<span <span
className={` className={`
@@ -353,6 +354,7 @@ export function ImportExportModal(props: { open: boolean }) {
Back Back
</button> </button>
</div> </div>
</div>
</Modal> </Modal>
); );
} }

6
frontend/react/src/ui/modals/keybindmodal.tsx
View File

@@ -61,7 +61,8 @@ export function KeybindModal(props: { open: boolean }) {
} }
return ( return (
<Modal open={props.open}> <Modal open={props.open} size={"sm"}>
<div className="flex flex-col gap-4 h-full w-full">
<div className={`flex flex-col gap-2`}> <div className={`flex flex-col gap-2`}>
<span <span
className={` className={`
@@ -104,7 +105,7 @@ export function KeybindModal(props: { open: boolean }) {
</div> </div>
)} )}
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end mt-auto ">
{shortcut && ( {shortcut && (
<button <button
type="button" type="button"
@@ -147,6 +148,7 @@ export function KeybindModal(props: { open: boolean }) {
Back Back
</button> </button>
</div> </div>
</div>
</Modal> </Modal>
); );
} }

1
frontend/react/src/ui/modals/protectionpromptmodal.tsx
View File

@@ -10,6 +10,7 @@ export function ProtectionPromptModal(props: { open: boolean }) {
return ( return (
<Modal <Modal
open={props.open} open={props.open}
size={"sm"}
> >
<div className="flex h-full w-full flex-col justify-between gap-12"> <div className="flex h-full w-full flex-col justify-between gap-12">
<div className={`flex flex-col items-start gap-2`}> <div className={`flex flex-col items-start gap-2`}>

30
frontend/react/src/ui/modals/warningmodal.tsx
View File

@@ -46,19 +46,12 @@ export function WarningModal(props: { open: boolean }) {
); );
break; break;
case WarningSubstate.NOT_SECURE: case WarningSubstate.NOT_SECURE:
case WarningSubstate.NOT_CHROME:
warningText = ( warningText = (
<div className="flex flex-col gap-2 text-gray-400"> <div className="flex flex-col gap-2 text-gray-400">
<span>Your connection to DCS Olympus is not secure.</span> <span>Your connection to DCS Olympus is not secure.</span>
<span>To protect your personal data some advanced DCS Olympus features like the camera plugin or the audio backend have been disabled.</span> <span>To protect your personal data some advanced DCS Olympus features like the camera plugin or the audio backend have been disabled.</span>
<span> <span>
To solve this issue, DCS Olympus should be served using the{" "} To solve this issue, DCS Olympus should be served using the <span className={`italic`}>https</span> protocol.
<span
className={`italic`}
>
https
</span>{" "}
protocol.
</span> </span>
<span>To do so, we suggest using a dedicated server and a reverse proxy with SSL enabled.</span> <span>To do so, we suggest using a dedicated server and a reverse proxy with SSL enabled.</span>
<div className="mt-5 flex gap-4"> <div className="mt-5 flex gap-4">
@@ -73,27 +66,26 @@ export function WarningModal(props: { open: boolean }) {
</div> </div>
); );
break; break;
case WarningSubstate.ERROR_UPLOADING_CONFIG: case WarningSubstate.ERROR_UPLOADING_CONFIG:
warningText = ( warningText = (
<div className="flex flex-col gap-2 text-gray-400"> <div className="flex flex-col gap-2 text-gray-400">
<span>An error has occurred uploading the admin configuration.</span> <span>An error has occurred uploading the admin configuration.</span>
<span></span> <span></span>
</div>
</div> );
); break;
break;
default: default:
break; break;
} }
} }
return ( return (
<Modal open={props.open}> <Modal open={props.open} size={"sm"}>
<div className="flex gap-2 text-xl text-white"> <div className="flex gap-2 text-xl text-white">
<FaExclamationTriangle className={`my-auto text-4xl text-yellow-300`} /> <FaExclamationTriangle className={`my-auto text-4xl text-yellow-300`} />
<div className="my-auto">Warning</div> <div className="my-auto">Warning</div>
</div> </div>
<div className="mt-10 text-white">{warningText}</div> <div className="text-white">{warningText}</div>
<div className="ml-auto mt-auto flex"> <div className="ml-auto mt-auto flex">
<button <button
type="button" type="button"

32
frontend/react/src/ui/panels/header.tsx
View File

@@ -106,6 +106,12 @@ export function Header() {
align-center align-center
dark:border-gray-800 dark:bg-olympus-900 dark:border-gray-800 dark:bg-olympus-900
`} `}
onWheel={(e) => {
if (scrollRef.current) {
if (e.deltaY > 0) (scrollRef.current as HTMLElement).scrollLeft += 100;
else (scrollRef.current as HTMLElement).scrollLeft -= 100;
}
}}
> >
<img src="images/icon.png" className={`my-auto h-10 w-10 rounded-md p-0`}></img> <img src="images/icon.png" className={`my-auto h-10 w-10 rounded-md p-0`}></img>
{!scrolledLeft && ( {!scrolledLeft && (
@@ -149,21 +155,21 @@ export function Header() {
</div> </div>
</div> </div>
<div className="w-8"> <div className="w-8">
{savingSessionData ? ( {savingSessionData ? (
<div className="text-white"> <div className="text-white">
<FaSpinner className={`animate-spin text-2xl`} /> <FaSpinner className={`animate-spin text-2xl`} />
</div> </div>
) : ( ) : (
<div className={`relative text-white`}> <div className={`relative text-white`}>
<FaFloppyDisk className={`absolute -top-3 text-2xl`} /> <FaFloppyDisk className={`absolute -top-3 text-2xl`} />
<FaCheck <FaCheck
className={` className={`
absolute left-[9px] top-[-6px] text-2xl text-olympus-900 absolute left-[9px] top-[-6px] text-2xl text-olympus-900
`} `}
/> />
<FaCheck className={`absolute left-3 top-0 text-green-500`} /> <FaCheck className={`absolute left-3 top-0 text-green-500`} />
</div> </div>
)} )}
</div> </div>
</div> </div>