From fadcbaffb0a4a4885adb29bc4b855bd805f75525 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 2 Jun 2023 14:49:47 +0200
Subject: [PATCH] Added the error area to the InstallSoftware.jsx if the
 backend is not available

---
 .../tools/linux/InstallSoftware/InstallSoftware.jsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx b/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx
index e5554eb..a2fcea5 100644
--- a/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx
+++ b/client/src/pages/tools/linux/InstallSoftware/InstallSoftware.jsx
@@ -1,14 +1,17 @@
 import InfoArea from "@/common/components/InfoArea";
 import Button from "@/common/components/Button";
 import {faGear} from "@fortawesome/free-solid-svg-icons";
-import {useState} from "react";
+import {useContext, useState} from "react";
 import Software from "./software.jsx";
 import SoftwareGrid from "@/pages/tools/linux/InstallSoftware/components/SoftwareGrid";
 import ConfigurationArea from "@/pages/tools/linux/InstallSoftware/components/ConfigurationArea";
 import "./styles.sass";
+import ErrorArea from "@/common/components/ErrorArea/index.js";
+import {StatusContext} from "@/common/contexts/Status/index.js";
 
 export const InstallSoftware = () => {
     const [currentItem, setCurrentItem] = useState(Software[0].name);
+    const backendAvailable = !(useContext(StatusContext));
 
     return (
         <>
@@ -17,7 +20,9 @@ export const InstallSoftware = () => {
                 <Button icon={faGear} text="Konfigurieren" onClick={() => {}}/>
             </InfoArea>
 
-            <div className="install-area">
+            {!backendAvailable && <ErrorArea error="Es konnte keine Verbindung zum Backend-Server hergestellt werden."/>}
+
+            <div className={"install-area" + (!backendAvailable ? " not-available" : "")}>
                 <SoftwareGrid currentItem={currentItem} setCurrentItem={setCurrentItem} />
 
                 {Software.map((s) => {if (s.name === currentItem) return <ConfigurationArea current={s} key={s.name} />})}