extension page and improvements

* added extension list page where are displayed all extensions and their info in HomiumCloud, installed and extensions that are needed to update; * admin menu small improvements and changes; * style improvements on the user list page and script list page.
VoDACode · Sep 4, 2023 · 222cd00 · 222cd00
1 parent 18aa240
commit 222cd00
Show file tree

Hide file tree

Showing 10 changed files with 456 additions and 55 deletions.
diff --git a/client-app/src/App.tsx b/client-app/src/App.tsx
@@ -11,6 +11,7 @@ import UserEditPage from "./pages/UserEditPage/UserEditPage";
 import ScriptListPage from "./pages/ScriptListPage/ScriptListPage";
 import ScriptEditPage from "./pages/ScriptEditPage/ScriptEditPage";
 import ObjectEditPage from "./pages/ObjectEditPage/ObjectEditPage";
+import ExtensionListPage from "./pages/ExtensionListPage/ExtensionListPage";
 
 const App: React.FC = () => {
 
@@ -35,6 +36,7 @@ const App: React.FC = () => {
           <Route path="objects/:id" element={<ObjectEditPage />} />
           <Route path="scripts" element={<ScriptListPage />} />
           <Route path="scripts/:id" element={<ScriptEditPage />} />
+          <Route path="extensions" element={<ExtensionListPage />} />
           <Route path="users" element={<UserListPage />} />
           <Route path="users/:username" element={<UserEditPage />} />
         </Route>

diff --git a/client-app/src/components/AdminLayout/.module.css b/client-app/src/components/AdminLayout/.module.css
@@ -6,7 +6,6 @@
     bottom: 0;
     display: grid;
     grid-template-columns: 73px 1fr;
-    transition: 0.5s;
 }
 
 .log_out_panel {
@@ -168,10 +167,14 @@
     height: 70px;
 }
 
-.page:hover {
+.page:not(.current_page):hover {
     background-color: rgb(0, 51, 255);
 }
 
+.current_page {
+    background-color: rgb(162, 32, 255);
+}
+
 .page_img {
     position: absolute;
     left: 16px;

diff --git a/client-app/src/components/AdminLayout/AdminLayout.tsx b/client-app/src/components/AdminLayout/AdminLayout.tsx
@@ -1,24 +1,13 @@
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { ApiExtensions } from "../../services/api/extensions";
 import { ApiAuth } from "../../services/api/auth";
 import cl from './.module.css';
 import Space from "../Space/Space";
 import ModalWindow from "../ModalWindow/ModalWindow";
 
-type ShortExtensionInfo = {
-    id: string,
-    name: string,
-    url: string
-}
-
 const AdminLayout = () => {
-
-    const [chosenMenu, openMenu] = React.useState<string | undefined>(undefined);
-    const [isInstalledExtMenuOpened, installedExtMenuState] = React.useState<boolean>(false);
     const [isNavMenuOpened, setNavMenuState] = React.useState<boolean>(false);
     const [isModWinVisible, setModWinVisibility] = React.useState<boolean>(false);
-    const [extensionList, setExtensionList] = React.useState<Array<ShortExtensionInfo>>([]);
 
     const navigate = useNavigate();
 
@@ -28,11 +17,6 @@ const AdminLayout = () => {
         });
     }
 
-    function MoveTo(path: string) {
-        openMenu(undefined);
-        navigate(path);
-    }
-
     function GetTitle() {
         var path = window.location.pathname;
 
@@ -64,6 +48,10 @@ const AdminLayout = () => {
             }
         }
 
+        if (path === "/admin/extensions") {
+            return "Extensions";
+        }
+
         if (path === "/admin/users") {
             return "Users";
         }
@@ -79,26 +67,6 @@ const AdminLayout = () => {
         return "UNDEFINED LOCATION";
     }
 
-    function RenderInstalledExtensions() {
-        var result: Array<React.ReactNode> = [];
-
-        extensionList.map((el) => {
-            result.push(
-                <div className={cl.comp} key={el.id}>
-                    <p onClick={() => { if (el.url) { window.location.href = el.url } }}>{el.name}</p>
-                </div>
-            );
-        });
-
-        return result;
-    }
-
-    React.useEffect(() => {
-        ApiExtensions.getExtensions().then((res) => {
-            setExtensionList([...res]);
-        });
-    });
-
     return (
         <div className={cl.admin_space}>
             <div className={cl.nav_space}>
@@ -115,7 +83,8 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.system_sep_theme_line}>System</span>
                         </div>
                         <div className={cl.pages + " " + cl.system_pages}>
-                            <div className={cl.page + " " + cl.sys_info_page} onClick={() => MoveTo('/admin')} title="System info">
+                            <div className={`${cl.page} ${cl.sys_info_page} ${window.location.pathname === "/admin" ? cl.current_page : ''}`}
+                                onClick={() => navigate('/admin')} title="System info">
                                 <img className={cl.page_img + " " + cl.sys_info_img} alt="system info" />
                                 <span className={`${cl.page_name} ${cl.sys_info_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>System info</span>
                             </div>
@@ -125,15 +94,15 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.object_sep_theme_line}>Object</span>
                         </div>
                         <div className={cl.pages + " " + cl.object_pages}>
-                            <div className={cl.page + " " + cl.objects_page} onClick={() => MoveTo('/admin/objects')} title="Objects">
+                            <div className={`${cl.page} ${cl.objects_page} ${window.location.pathname.includes("/admin/objects") ? cl.current_page : ''}`} onClick={() => navigate('/admin/objects')} title="Objects">
                                 <img className={cl.page_img + " " + cl.objects_img} alt="objects" />
                                 <span className={`${cl.page_name} ${cl.objects_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Objects</span>
                             </div>
-                            <div className={cl.page + " " + cl.devices_page} title="Devices">
+                            <div className={`${cl.page} ${cl.devices_page} ${window.location.pathname.includes("/admin/devices") ? cl.current_page : ''}`} title="Devices">
                                 <img className={cl.page_img + " " + cl.devices_img} alt="devices" />
                                 <span className={`${cl.page_name} ${cl.devices_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Devices</span>
                             </div>
-                            <div className={cl.page + " " + cl.rooms_page} title="Rooms">
+                            <div className={`${cl.page} ${cl.rooms_page} ${window.location.pathname.includes("/admin/rooms") ? cl.current_page : ''}`} title="Rooms">
                                 <img className={cl.page_img + " " + cl.rooms_img} alt="rooms" />
                                 <span className={`${cl.page_name} ${cl.rooms_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Rooms</span>
                             </div>
@@ -143,15 +112,15 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.automation_sep_theme_line}>Automation</span>
                         </div>
                         <div className={cl.pages + " " + cl.automation_pages}>
-                            <div className={cl.page + " " + cl.schedules_page} title="Schedules">
+                            <div className={`${cl.page} ${cl.schedules_page} ${window.location.pathname.includes("/admin/schedules") ? cl.current_page : ''}`} title="Schedules">
                                 <img className={cl.page_img + " " + cl.schedules_img} alt="schedules" />
                                 <span className={`${cl.page_name} ${cl.schedules_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Schedules</span>
                             </div>
-                            <div className={cl.page + " " + cl.scripts_page} onClick={() => MoveTo('/admin/scripts')} title="Scripts">
+                            <div className={`${cl.page} ${cl.scripts_page} ${window.location.pathname.includes("/admin/scripts") ? cl.current_page : ''}`} onClick={() => navigate('/admin/scripts')} title="Scripts">
                                 <img className={cl.page_img + " " + cl.scripts_img} alt="scripts" />
                                 <span className={`${cl.page_name} ${cl.scripts_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Scripts</span>
                             </div>
-                            <div className={cl.page + " " + cl.triggers_page} title="Triggers">
+                            <div className={`${cl.page} ${cl.triggers_page} ${window.location.pathname.includes("/admin/triggers") ? cl.current_page : ''}`} title="Triggers">
                                 <img className={cl.page_img + " " + cl.triggers_img} alt="triggers" />
                                 <span className={`${cl.page_name} ${cl.triggers_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Triggers</span>
                             </div>
@@ -161,7 +130,7 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.extension_sep_theme_line}>Extensions</span>
                         </div>
                         <div className={cl.pages + " " + cl.extension_pages}>
-                            <div className={cl.page + " " + cl.extensions_page} title="Extensions">
+                            <div className={`${cl.page} ${cl.extensions_page} ${window.location.pathname.includes("/admin/extensions") ? cl.current_page : ''}`} onClick={() => navigate('/admin/extensions')} title="Extensions">
                                 <img className={cl.page_img + " " + cl.extensions_img} alt="extensions" />
                                 <span className={`${cl.page_name} ${cl.extensions_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Extensions</span>
                             </div>
@@ -171,7 +140,7 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.users_sep_theme_line}>Users</span>
                         </div>
                         <div className={cl.pages + " " + cl.user_pages}>
-                            <div className={cl.page + " " + cl.users_page} onClick={() => MoveTo('/admin/users')} title="Users">
+                            <div className={`${cl.page} ${cl.users_page} ${window.location.pathname.includes("/admin/users") ? cl.current_page : ''}`} onClick={() => navigate('/admin/users')} title="Users">
                                 <img className={cl.page_img + " " + cl.users_img} alt="users" />
                                 <span className={`${cl.page_name} ${cl.users_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Users</span>
                             </div>