Add (way) more settings in the frontend

frontend/src/components/Slider.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {server} from "../../wailsjs/go/models";
+import {Input, Slider as Sl} from "@mui/joy";
+type Props = {
+    value: number;
+    onChange: (value: number) => void;
+    className?: string;
+    sliderMax?: number;
+    sliderStep?: number;
+    sliderMin?: number;
+    disabled?: boolean;
+
+}
+
+export function Slider({value, onChange, className, sliderMax, sliderStep, sliderMin, disabled}:Props) {
+    return (
+        <div className={className}>
+            <div className={"flex space-x-4"}>
+                <Sl valueLabelDisplay="auto" className={""} max={sliderMax} step={sliderStep} disabled={disabled} min={sliderMin} value={value} onChange={(e, v) => {
+                    let val = v as number
+                    onChange(val);
+                }} ></Sl>
+                <Input type={"number"} required className={"w-32"}  value={value} disabled={disabled} onChange={(e) => {
+                    let val = parseInt(e.target.value);
+                    onChange(val);
+                }}></Input>
+            </div>
+        </div>
+    );
+}

frontend/src/pages/Server.tsx

@@ -31,7 +31,8 @@ import {Console} from "./server/Console";
 import {UpdaterModal} from "./UpdaterModal";
 import {InstallUpdateVerify} from "../../wailsjs/go/installer/InstallerController";
 import {SendRconCommand} from "../../wailsjs/go/helpers/HelpersController";
-import {Settings} from "./server/Settings";
+import {Mods} from "./server/Mods";
+import {Multipliers} from "./server/Multipliers";
 
 
 type Props = {
@@ -217,12 +218,14 @@ export const Server = ({id, className}: Props) => {
                     <TabList className={'w-full'}>
                         <Tab variant="plain" indicatorInset color="neutral">Console</Tab>
                         <Tab variant="plain" indicatorInset color="neutral">General Settings</Tab>
-                        <Tab variant="plain" indicatorInset color="neutral">Server Settings</Tab>
+                        <Tab variant="plain" indicatorInset color="neutral">Mods</Tab>
+                        <Tab variant="plain" indicatorInset color="neutral">Multipliers</Tab>
                         <Tab variant="plain" indicatorInset color="neutral">Administration</Tab>
                     </TabList>
                     <Console serv={serv} setServ={setServ} serverStatus={serverStatus}/>
                     <General serv={serv} setServ={setServ}/>
-                    <Settings setServ={setServ} serv={serv}></Settings>
+                    <Mods setServ={setServ} serv={serv}></Mods>
+                    <Multipliers setServ={setServ} serv={serv}/>
                     <Administration serv={serv} setServ={setServ} onServerFilesDeleted={() => CheckServerInstalled(serv.id).then((val) => setIsInstalled(val)).catch((reason) => console.error(reason))}/>
                 </Tabs>) : (<InstallUpdater serv={serv} setServ={setServ} onInstalled={() => setIsInstalled(true)}/>)}
             </Card>

frontend/src/pages/server/Administration.tsx

@@ -306,7 +306,7 @@ function ExtraSettingsCard({setServ, serv}: {setServ: React.Dispatch<React.SetSt
 
 export function Administration({setServ, serv, onServerFilesDeleted}: Props) {
     return (
-        <TabPanel value={3} className={'space-y-8'}>
+        <TabPanel value={4} className={'space-y-8'}>
             <ServerAdministrationCard serv={serv} setServ={setServ} onServerFilesDeleted={onServerFilesDeleted}/>
             <ServerStartupCard serv={serv} setServ={setServ} />
             <AutoSaveSettingsCard setServ={setServ} serv={serv}/>

frontend/src/pages/server/General.tsx

@@ -6,42 +6,162 @@ import {
     Select,
     TabPanel,
     Typography,
-    Option,
+    Option, Autocomplete, Textarea, Tooltip, Checkbox,
 } from "@mui/joy";
 
 import {server} from "../../../wailsjs/go/models";
 import React, {useEffect, useState} from "react";
 import {GetNetworkInterfacesIp} from "../../../wailsjs/go/server/ServerController";
 import {PasswordInput} from "../../components/PasswordInput";
+import {Slider} from "../../components/Slider";
 
 type Props = {
     setServ: React.Dispatch<React.SetStateAction<server.Server>>
     serv: server.Server;
 
 }
 
-function ServerNameAndPasswordsCard({ setServ, serv }: {setServ: React.Dispatch<React.SetStateAction<server.Server>>, serv: server.Server}) {
+function GeneralSettings({ setServ, serv }: {setServ: React.Dispatch<React.SetStateAction<server.Server>>, serv: server.Server}) {
     return (
         <Card variant="soft"  className={''}>
             <Typography level="title-md">
-                Server Name and Passwords
+            Server Name and Passwords
             </Typography>
             <Divider className={'mx-2'}/>
-
-            <FormLabel>Server Name:</FormLabel>
-            <Input className={'w-2/3'} required value={serv?.serverName} onChange={(e) => setServ((p) => ({ ...p, serverName: e.target.value, convertValues: p.convertValues }))}  ></Input>
-            <div className={'space-x-4 w-full flex'}>
-                <div className={'inline-block'}>
+            <div className={'w-[100%] space-y-4'}>
+                <div className={''}>
+                    <FormLabel>Server Name:</FormLabel>
+                    <Input value={serv?.serverName} onChange={(e) => setServ((p) => ({ ...p, serverName: e.target.value, convertValues: p.convertValues }))} ></Input>
+                </div>
+                <div className={''}>
                     <FormLabel>Server Password:</FormLabel>
-                    <PasswordInput value={serv?.serverPassword} disabled={true} onChange={(e) => setServ((p) => ({ ...p, serverPassword: e.target.value, convertValues: p.convertValues }))} ></PasswordInput>
+                    <PasswordInput value={serv?.serverPassword} onChange={(e) => setServ((p) => ({ ...p, serverPassword: e.target.value, convertValues: p.convertValues }))} ></PasswordInput>
                 </div>
-                <div className={'inline-block'}>
+                <div className={''}>
                     <FormLabel>Admin Password:</FormLabel>
                     <PasswordInput value={serv?.adminPassword} onChange={(e) => setServ((p) => ({ ...p, adminPassword: e.target.value, convertValues: p.convertValues }))} ></PasswordInput>
                 </div>
-                <div className={'inline-block'}>
+                <div className={''}>
                     <FormLabel>Spectator Password:</FormLabel>
-                    <PasswordInput value={serv?.spectatorPassword} disabled={true} onChange={(e) => setServ((p) => ({ ...p, spectatorPassword: e.target.value, convertValues: p.convertValues }))} ></PasswordInput>
+                    <PasswordInput value={serv?.spectatorPassword} onChange={(e) => setServ((p) => ({ ...p, spectatorPassword: e.target.value, convertValues: p.convertValues }))} ></PasswordInput>
+                </div>
+            </div>
+            <Typography level="title-md">
+                Server Map
+            </Typography>
+            <Divider className={'mx-2'}/>
+            <div className={'w-[100%] space-y-4'}>
+                <div className={''}>
+                    <FormLabel>Map Name of Mod Map path:</FormLabel>
+                    <Autocomplete freeSolo disableClearable inputValue={serv?.serverMap} options={["TheIsland_WP"]} onChange={(e, v) => setServ((p) => ({ ...p, serverMap: v, convertValues: p.convertValues }))} ></Autocomplete>
+                </div>
+            </div>
+            <Typography level="title-md">
+                Auto Save
+            </Typography>
+            <Divider className={'mx-2'}/>
+            <div className={'w-[100%] space-y-4'}>
+                <div className={''}>
+                    <FormLabel>Auto Save interval:</FormLabel>
+                    <Tooltip title={"Duration that the message is visible in seconds"}>
+                        <Slider
+                            value={serv?.gameUserSettings.serverSettings.autoSavePeriodMinutes}
+                            onChange={(v) => {
+                                if (v >= 0) {
+                                    setServ((p) => {
+                                        const newState = {...p, convertValues: p.convertValues};
+                                        newState.gameUserSettings.serverSettings.autoSavePeriodMinutes = v;
+                                        return newState;
+                                    })
+                                }
+                            }}
+                        />
+                    </Tooltip>
+
+                </div>
+            </div>
+            <Typography level="title-md">
+                Message of the Day
+            </Typography>
+            <Divider className={'mx-2'}/>
+            <div className={'w-[100%] space-y-4'}>
+                <div className={''}>
+                    <FormLabel>Message</FormLabel>
+                    <Textarea minRows={5} value={serv?.gameUserSettings.messageOfTheDay.message} onChange={(e) => {
+                        setServ((p) => {
+                            const newState = {...p, convertValues: p.convertValues};
+                            newState.gameUserSettings.messageOfTheDay.message = e.target.value;
+                            return newState;
+                        })
+                    }}></Textarea>
+                </div>
+                <div className={''}>
+                    <FormLabel>Duration:</FormLabel>
+                    <Tooltip title={"Duration that the message is visible in seconds"}>
+                        <Slider
+                            sliderStep={1}
+                            sliderMax={240}
+                            value={serv?.gameUserSettings.messageOfTheDay.duration}
+                            onChange={(v) => {
+                                if (v >= 0) {
+                                    setServ((p) => {
+                                        const newState = {...p, convertValues: p.convertValues};
+                                        newState.gameUserSettings.messageOfTheDay.duration = v;
+                                        return newState;
+                                    })
+                                }
+                            }}
+                        />
+                    </Tooltip>
+
+                </div>
+            </div>
+            <Typography level="title-md">
+                Server Settings
+            </Typography>
+            <Divider className={'mx-2'}/>
+            <div className={'w-[100%] space-y-4'}>
+                <div className={'flex space-x-2'}>
+                    <div className={"flex-grow"}>
+                        <FormLabel>Max Players:</FormLabel>
+                        <Slider
+                            className={""}
+                            sliderStep={1}
+                            sliderMax={240}
+                            value={serv?.maxPlayers}
+                            onChange={(v) => {
+                                if (v >= 0) {
+                                    setServ((p) => {
+                                        const newState = {...p, convertValues: p.convertValues};
+                                        newState.maxPlayers = v;
+                                        return newState;
+                                    })
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className={"flex-grow"}>
+                        <Tooltip title={"The duration before an idle player gets kicked in seconds"}>
+                            <FormLabel> <Checkbox className={"mr-2"} checked={serv?.kickIdlePlayers} onChange={(e) => setServ((p) => ({ ...p, kickIdlePlayers: e.target.checked, convertValues: p.convertValues }))}/> Kick Idle Players Period:</FormLabel>
+                        </Tooltip>
+                        <Slider
+                            className={""}
+                            disabled={!(serv?.kickIdlePlayers)}
+                            sliderStep={1}
+                            sliderMax={3600}
+                            value={serv?.gameUserSettings.serverSettings.kickIdlePlayersPeriod}
+                            onChange={(v) => {
+                                if (v >= 0) {
+                                    setServ((p) => {
+                                        const newState = {...p, convertValues: p.convertValues};
+                                        newState.gameUserSettings.serverSettings.kickIdlePlayersPeriod = v;
+                                        return newState;
+                                    })
+                                }
+                            }}
+                        />
+
+                    </div>
                 </div>
             </div>
         </Card>
@@ -120,7 +240,7 @@ function NetworkingCard({ setServ, serv }: {setServ: React.Dispatch<React.SetSta
 export function General({serv, setServ}: Props) {
     return (
         <TabPanel value={1} className={'space-y-8'}>
-            <ServerNameAndPasswordsCard setServ={setServ} serv={serv} />
+            <GeneralSettings setServ={setServ} serv={serv} />
             <NetworkingCard setServ={setServ} serv={serv} />
         </TabPanel>
     );

frontend/src/pages/server/Settings.tsx → frontend/src/pages/server/Mods.tsx

@@ -15,27 +15,17 @@ type Props = {
 function GeneralServerSettingsCard({ setServ, serv }: {setServ: React.Dispatch<React.SetStateAction<server.Server>>, serv: server.Server}) {
     return (
         <Card variant="soft"  className={''}>
-            <Typography level="title-md">
-                General Server Settings
-            </Typography>
-            <Divider className={'mx-2'}/>
-
             <div className={'space-x-4 w-full flex'}>
                 <div className={'inline-block'}>
                     <FormLabel>Mods (e.g.: modid1,modid2,modid3) (for now you need to set "ACTIVEMODS" to ini manually)</FormLabel>
                     <Input className={"w-[60vw]"} value={serv?.mods} onChange={(e) => setServ((p) => ({ ...p, mods: e.target.value, convertValues: p.convertValues }))}></Input>
-                    <FormLabel>Player limit</FormLabel>
-                    <Input className={"w-3/12"} value={serv?.maxPlayers} type={"number"} onChange={(e) => {
-                        if (parseInt(e.target.value) > 0) {
-                            setServ((p) => ({...p, maxPlayers: parseInt(e.target.value), convertValues: p.convertValues}))
-                        }}}></Input>
                 </div>
             </div>
         </Card>
     )
 }
 
-export function Settings({setServ, serv}: Props) {
+export function Mods({setServ, serv}: Props) {
     return (
         <TabPanel value={2} className={'space-y-8'}>
             <GeneralServerSettingsCard setServ={setServ} serv={serv}/>