Merge branch 'JensvandeWiel:main' into main

August2211 · Oct 30, 2023 · 9148076 · 9148076
2 parents 102257d + 80ea595
commit 9148076
Show file tree

Hide file tree

Showing 18 changed files with 743 additions and 190 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,6 +6,7 @@
     <title>Vite + React + TS + Tailwind</title>
   </head>
   <body>
+
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.13",
+    "@mui/base": "^5.0.0-beta.21",
     "@mui/joy": "^5.0.0-beta.11",
     "@tabler/icons-react": "^2.39.0",
     "react": "^18.2.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import {
+    Alert,
     Button,
     Card,
     DialogActions,
@@ -15,7 +16,8 @@ import {Server} from "./pages/Server";
 import {IconArrowLeft, IconExternalLink, IconPlus, IconRefresh} from "@tabler/icons-react";
 import {CreateServer, GetAllServers, GetAllServersFromDir, GetServerDir} from "../wailsjs/go/server/ServerController";
 import {server} from "../wailsjs/go/models";
-import {BrowserOpenURL, EventsOff, EventsOn, LogDebug, LogError} from "../wailsjs/runtime";
+import {BrowserOpenURL, EventsOff, EventsOn, LogDebug} from "../wailsjs/runtime";
+import {AlertProvider} from "./components/AlertProvider";
 
 enum ServerListType {
     CARD,
@@ -27,6 +29,10 @@ function App() {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [servers, setServers] = useState<{[key: number]: server.Server}|null>(null);
 
+
+
+
+
     //This gets all the servers but if one server is changed manually it does not update it!
     function getServers() {
         GetAllServers()
@@ -61,6 +67,7 @@ function App() {
 
     useEffect(() => {
         getServers()
+
     }, []);
 
     //events
@@ -89,8 +96,8 @@ function App() {
                 <DialogActions>
                     <List>
                         <ListItem>
-                            <Tooltip title={'Reload servers from disk'}><IconButton  color={'danger'} variant={"solid"}  onClick={() => getServersFromDir()}><IconRefresh/></IconButton></Tooltip>
-                            <Tooltip title={'Refresh server list from cache'}><IconButton onClick={() => getServers()}><IconRefresh/></IconButton></Tooltip>
+                            <Tooltip title={'Reload servers from disk'}><IconButton  color={'danger'} variant={"solid"}  onClick={() => {getServersFromDir(); setActiveServer(undefined)}}><IconRefresh/></IconButton></Tooltip>
+                            <Tooltip title={'Refresh server list from cache'}><IconButton onClick={() => {getServers(); setActiveServer(undefined)}}><IconRefresh/></IconButton></Tooltip>
                             <Tooltip title={'Open servers folder'}><IconButton onClick={() => {GetServerDir().then((dir: string) => BrowserOpenURL("file:///" + dir))}}><IconExternalLink/></IconButton></Tooltip>
                         </ListItem>
                         <ListItem>
@@ -125,22 +132,27 @@ function App() {
         }
     }
 
+
+
+
     return (
-        <div className={'min-h-screen max-h-screen overflow-y-auto flex-col'}>
-            <div className={'h-16 flex'}>
-                <div className={'text-lg font-bold ml-8 my-auto'}>
-                    <Button color={'neutral'} variant={'soft'} onClick={() => setDrawerOpen(true)}>
-                        <IconArrowLeft/> Select server
-                    </Button>
-                </div>
-                <div className={'ml-auto my-auto mr-8 gap-2 flex'}>
-                    <ThemeSwitcher/>
-                    <HomeButton setServ={setActiveServer}/>
+        <div className={'min-h-screen max-h-screen overflow-y-auto flex-col flex'}>
+            <AlertProvider>
+                <div className={'h-16 flex'}>
+                    <div className={'text-lg font-bold ml-8 my-auto'}>
+                        <Button color={'neutral'} variant={'soft'} onClick={() => setDrawerOpen(true)}>
+                            <IconArrowLeft/> Select server
+                        </Button>
+                    </div>
+                    <div className={'ml-auto my-auto mr-8 gap-2 flex'}>
+                        <ThemeSwitcher/>
+                        <HomeButton setServ={setActiveServer}/>
+                    </div>
                 </div>
-            </div>
-            {mainUi}
+                {mainUi}
 
-            {ServerDrawer}
+                {ServerDrawer}
+            </AlertProvider>
         </div>
     )
 }

diff --git a/frontend/src/components/AlertProvider.tsx b/frontend/src/components/AlertProvider.tsx
@@ -0,0 +1,59 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { Alert } from '@mui/joy';
+import {IconX} from "@tabler/icons-react";
+
+type AlertContextType = {
+    addAlert: (message: string, severity: "success" | "warning" | "primary" | "neutral" | "danger" | undefined) => void;
+    alerts: Alert[];
+};
+
+const AlertContext = createContext<AlertContextType | undefined>(undefined);
+
+type AlertProviderProps = {
+    children: ReactNode;
+};
+
+type Alert = {
+    message: string;
+    severity: "success" | "warning" | "primary" | "neutral" | "danger" | undefined
+};
+
+export function AlertProvider({ children }: AlertProviderProps) {
+
+    const [alerts, setAlerts] = useState<Alert[]>([])
+
+    const addAlert = (message: string, severity: "success" | "warning" | "primary" | "neutral" | "danger" | undefined) => {
+        const newAlert = { message, severity };
+        setAlerts([...alerts, newAlert]);
+
+        console.log(alerts)
+    };
+
+    const removeAlert = (index: number) => {
+        const updatedAlerts = [...alerts];
+        updatedAlerts.splice(index, 1);
+        setAlerts(updatedAlerts);
+    };
+
+    return (
+        <AlertContext.Provider value={{ addAlert, alerts }}>
+            {children}
+
+            <div className={"m-4 absolute bottom-0 w-[80vw] left-1/2 -ml-[40vw]"}>
+                {alerts.map((alert, index) => (
+                    <Alert key={index} className={"m-4 "} color={alert.severity} endDecorator={<IconX onClick={() => removeAlert(index)}/>}>
+                        {alert.message}
+                    </Alert>
+                ))}
+            </div>
+        </AlertContext.Provider>
+    );
+}
+
+export function useAlert() {
+    const context = useContext(AlertContext);
+    if (!context) {
+        throw new Error('useAlert must be used within an AlertProvider');
+    }
+    return context;
+}
diff --git a/frontend/src/components/PasswordInput.tsx b/frontend/src/components/PasswordInput.tsx
@@ -6,15 +6,17 @@ type Props = {
     onChange: React.ChangeEventHandler<HTMLInputElement> | undefined
     value: string | ReadonlyArray<string> | number | undefined;
     children?: any
+    className?: string | undefined
 }
 
-export function PasswordInput({onChange, value, children}: Props) {
+export function PasswordInput({onChange, value, children, className}: Props) {
     const [textVisible, setTextVisible] = useState(false)
     return (
         <Input type={textVisible? 'text' : 'password'}
                endDecorator={<IconButton onClick={() => setTextVisible(!textVisible)}>{textVisible? <IconEye/> : <IconEyeClosed/>}</IconButton>}
                value={value}
                onChange={onChange}
+               className={className}
         >{children}</Input>
     );
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
-import ReactDOM, {createRoot} from 'react-dom/client'
+import {createRoot} from 'react-dom/client'
 import App from './App'
 import './index.css'
 import '@fontsource-variable/inter';
 import {
-    Button,
     CssBaseline,
     CssVarsProvider,
-    getInitColorSchemeScript,
     StyledEngineProvider,
-    useColorScheme
 } from "@mui/joy";
 
+
+
 const container = document.getElementById('root')
 
 const root = createRoot(container!)
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ @@
         <title>Vite + React + TS + Tailwind</title>
       </head>
       <body>
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
       </body>
@@ Expand Down @@