glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-18 22:33:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Warning icon if API not connected

Browse Source
This commit is contained in:
glax 2025-04-01 18:16:57 +02:00
parent 44755675e5
commit d480f62e51
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tranga-website/src/App.tsx
View File

@ -2,7 +2,7 @@ import Sheet from '@mui/joy/Sheet';
import './App.css' import './App.css'
import Settings from "./Settings.tsx"; import Settings from "./Settings.tsx";
import Header from "./Header.tsx"; import Header from "./Header.tsx";
import {Button} from "@mui/joy"; import {Badge, Button} from "@mui/joy";
import {useState} from "react"; import {useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx"; import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx'; import Search from './Components/Search.tsx';
@ -11,6 +11,7 @@ export default function App () {
const [showSettings, setShowSettings] = useState<boolean>(false); const [showSettings, setShowSettings] = useState<boolean>(false);
const [showSearch, setShowSearch] = useState<boolean>(false); const [showSearch, setShowSearch] = useState<boolean>(false);
const [apiConnected, setApiConnected] = useState<boolean>(false);
const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/"))); const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/")));
@ -18,10 +19,12 @@ export default function App () {
<ApiUriContext.Provider value={apiUri}> <ApiUriContext.Provider value={apiUri}>
<Sheet className={"app"}> <Sheet className={"app"}>
<Header> <Header>
<Button onClick={() => setShowSettings(true)}>Settings</Button> <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
<Button onClick={() => setShowSettings(true)}>Settings</Button>
</Badge>
<Button onClick={() => setShowSearch(true)}>Search</Button> <Button onClick={() => setShowSearch(true)}>Search</Button>
</Header> </Header>
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri}/> <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Sheet className={"app-content"}> <Sheet className={"app-content"}>
<Search open={showSearch} setOpen={setShowSearch} /> <Search open={showSearch} setOpen={setShowSearch} />
</Sheet> </Sheet>

3
tranga-website/src/Settings.tsx
View File

@ -28,7 +28,7 @@ const checkConnection = async (apiUri: string): Promise<boolean> =>{
}); });
} }
export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>}) { export default function Settings({open, setOpen, setApiUri, setConnected}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>, setConnected:React.Dispatch<React.SetStateAction<boolean>>}) {
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
@ -53,6 +53,7 @@ export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOp
setChecking(true); setChecking(true);
checkConnection(uri) checkConnection(uri)
.then((result) => { .then((result) => {
setConnected(result);
setApiUriAccordionOpen(!result); setApiUriAccordionOpen(!result);
setApiUriColor(result ? "success" : "danger"); setApiUriColor(result ? "success" : "danger");
if(result) if(result)