From 222cd00f7d5d8de34b882e697c399f36db7d771f Mon Sep 17 00:00:00 2001 From: OlehMaliuta <104268973+OlehMaliuta@users.noreply.github.com> Date: Mon, 4 Sep 2023 14:51:17 +0300 Subject: [PATCH] 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. --- client-app/src/App.tsx | 2 + .../src/components/AdminLayout/.module.css | 7 +- .../components/AdminLayout/AdminLayout.tsx | 59 +---- .../src/pages/ExtensionListPage/.module.css | 246 ++++++++++++++++++ .../ExtensionListPage/ExtensionListPage.tsx | 179 +++++++++++++ .../pages/ExtensionListPage/img/installed.png | Bin 0 -> 19884 bytes .../src/pages/ScriptListPage/.module.css | 4 +- .../pages/ScriptListPage/ScriptListPage.tsx | 5 +- client-app/src/pages/UserListPage/.module.css | 4 +- .../src/pages/UserListPage/UserListPage.tsx | 5 +- 10 files changed, 456 insertions(+), 55 deletions(-) create mode 100644 client-app/src/pages/ExtensionListPage/.module.css create mode 100644 client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx create mode 100644 client-app/src/pages/ExtensionListPage/img/installed.png diff --git a/client-app/src/App.tsx b/client-app/src/App.tsx index 8346ae3..bfdff1e 100644 --- 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 = () => { } /> } /> } /> + } /> } /> } /> diff --git a/client-app/src/components/AdminLayout/.module.css b/client-app/src/components/AdminLayout/.module.css index bcdd280..455ffa1 100644 --- 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 index 322b6e3..b4c6f41 100644 --- 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(undefined); - const [isInstalledExtMenuOpened, installedExtMenuState] = React.useState(false); const [isNavMenuOpened, setNavMenuState] = React.useState(false); const [isModWinVisible, setModWinVisibility] = React.useState(false); - const [extensionList, setExtensionList] = React.useState>([]); 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 = []; - - extensionList.map((el) => { - result.push( -
-

{ if (el.url) { window.location.href = el.url } }}>{el.name}

-
- ); - }); - - return result; - } - - React.useEffect(() => { - ApiExtensions.getExtensions().then((res) => { - setExtensionList([...res]); - }); - }); - return (
@@ -115,7 +83,8 @@ const AdminLayout = () => { System
-
MoveTo('/admin')} title="System info"> +
navigate('/admin')} title="System info"> system info System info
@@ -125,15 +94,15 @@ const AdminLayout = () => { Object
-
MoveTo('/admin/objects')} title="Objects"> +
navigate('/admin/objects')} title="Objects"> objects Objects
-
+
devices Devices
-
+
rooms Rooms
@@ -143,15 +112,15 @@ const AdminLayout = () => { Automation
-
+
schedules Schedules
-
MoveTo('/admin/scripts')} title="Scripts"> +
navigate('/admin/scripts')} title="Scripts"> scripts Scripts
-
+
triggers Triggers
@@ -161,7 +130,7 @@ const AdminLayout = () => { Extensions
-
+
navigate('/admin/extensions')} title="Extensions"> extensions Extensions
@@ -171,7 +140,7 @@ const AdminLayout = () => { Users
-
MoveTo('/admin/users')} title="Users"> +
navigate('/admin/users')} title="Users"> users Users
diff --git a/client-app/src/pages/ExtensionListPage/.module.css b/client-app/src/pages/ExtensionListPage/.module.css new file mode 100644 index 0000000..0014799 --- /dev/null +++ b/client-app/src/pages/ExtensionListPage/.module.css @@ -0,0 +1,246 @@ +.list_control_panel { + position: relative; + display: flex; + padding-left: 10px; +} + +.search_type_panel { + position: relative; + display: flex; + flex-wrap: wrap; + background-color: rgb(228, 255, 250); + border: 2px solid blue; + border-radius: 5px; +} + +.search_type_option_cont { + padding: 5px; +} + +.search_type_option { + cursor: pointer; + width: 100px; + background-color: #2828ff; + color: white; + padding-block: 5px; + border-radius: 5px; +} + +.search_type_option:not(.search_type_option_current):hover { + background-color: rgb(48, 145, 255); +} + +.search_type_option_current { + background-color: rgb(136, 0, 255); +} + +.search_type_option_text { + text-align: center; + font-size: 20px; +} + +.search_type_option_browse { + left: 1vw; +} + +.search_type_option_installed { + left: calc(100px + 2vw); +} + +.search_type_option_updates { + left: calc(200px + 3vw); +} + +.extension_record { + position: relative; + display: grid; + grid-template-columns: 80% 20%; + border: 3px solid rgb(0, 0, 178); + background-color: white; + width: calc(100% - 20px); + border-radius: 15px; + height: fit-content; + padding: 7px; +} + +@media (max-width: 385px) { + .extension_record { + display: block; + } +} + +@media (max-device-width: 385px) { + .extension_record { + display: block; + } +} + +.extension_info_part { + position: relative; +} + +.extension_main_info_cont { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.extension_img { + background-color: grey; + border: 1px solid black; + width: 60px; + height: 60px; +} + +.extension_name_and_author_cont { + display: grid; + grid-template-rows: 1.3fr 1fr; + padding-left: 7px; + width: fit-content; +} + +.extension_author { + font-size: 19px; +} + +.active_text_link:hover { + cursor: pointer; + color: blue; +} + +.extension_description_cont { + padding-top: 10px; + width: 100%; +} + +.extension_description { + text-align: justify; + white-space: normal; +} + +.tag_cont { + display: flex; + flex-wrap: wrap; +} + +.tag { + padding-top: 13px; +} + +.tag:not(:last-child) { + padding-right: 7px; +} + +.tag>span { + cursor: pointer; + border-radius: 8px; + background-color: #517fff; + color: white; + padding: 5px; +} + +.tag>span:hover { + background-color: rgb(54, 228, 255); +} + +.stat_cont { + position: relative; + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.installed_count_cont { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + width: fit-content; + margin-right: 30px; + margin-top: 10px; +} + +.installed_count_text { + font-weight: bold; +} + +.installed_count_img { + content: url(./img/installed.png); + width: 20px; + margin-left: 5px; +} + +.last_update_cont { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + width: fit-content; + margin-top: 10px; +} + +.last_update_text { + font-weight: bold; +} + +.extension_version_control_part { + position: relative; +} + +@media (max-width: 385px) { + .extension_version_control_part { + padding-top: 10px; + } +} + +@media (max-device-width: 385px) { + .extension_version_control_part { + padding-top: 10px; + } +} + +.extension_version_cont { + width: 100%; +} + +.extension_current_version { + text-align: right; + font-weight: bold; +} + +.extension_new_version { + text-align: right; + font-weight: bold; + color: goldenrod; + margin-top: 10px; +} + +.extension_actions { + position: relative; + width: 100%; + margin-top: 10px; +} + +.extension_install_button_cont { + display: flex; + justify-content: flex-end; + width: 100%; +} + +.extension_install_button { + cursor: pointer; + background-color: rgb(61, 74, 255); + width: fit-content; + padding: 5px; + border-radius: 5px; +} + +.extension_install_button:hover { + background-color: rgb(0, 208, 255); +} + +.extension_install_button_text { + color: white; + font-size: 20px; + font-weight: bold; +} \ No newline at end of file diff --git a/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx b/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx new file mode 100644 index 0000000..5bafff7 --- /dev/null +++ b/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx @@ -0,0 +1,179 @@ +import React from "react"; +import cl from "./.module.css"; +import { ApiExtensions } from "../../services/api/extensions"; +import Space from "../../components/Space/Space"; +import LoadingAnimation from "../../components/LoadingAnimation/LoadingAnimation"; +import CustomTextarea from "../../components/CustomTextarea/CustomTextarea"; + +type ExtensionData = { + id: string, + name: string, + author: string, + version: string, + description?: string, + url?: string, + authorUrl?: string +} + +enum ExtensionFilter { + Browse = 0, + Installed = 1, + Updates = 2 +} + +const ExtensionListPage = () => { + + const [isLoading, setLoadingState] = React.useState(false); + const [extensions, setExtensions] = React.useState>([]); + const [extensionFilter, setExtensionFilter] = React.useState(ExtensionFilter.Browse); + const [search, setSearch] = React.useState(''); + + async function UpdateExtensions() { + setLoadingState(true); + + await ApiExtensions.getExtensions().then(data => { + setExtensions(data); + }); + + setLoadingState(false); + } + + function RenderExtensions() { + if (isLoading) { + return ( +
+ + +
+ ); + } + + var result: Array = []; + var sortedExtensions: Array = [...extensions]; + + sortedExtensions.sort((a, b) => { + if (a.name.toLowerCase() < b.name.toLowerCase()) { + return -1; + } + if (a.name.toLowerCase() > b.name.toLowerCase()) { + return 1; + } + return 0; + }); + + sortedExtensions.map((extension) => { + if (search !== '' && + !extension.name.toLowerCase().includes(search.toLowerCase()) && + !extension.author.toLowerCase().includes(search.toLowerCase()) && + !extension.description?.toLowerCase().includes(search.toLowerCase())) { + return; + } + + result.push( +
+ +
+
+
+ +
+

{ + if (extension.url) { + window.location.href = (extension.url ?? ""); + } + }}>{extension.name}

+

{ + if (extension.authorUrl) { + window.location.href = (extension.authorUrl ?? ""); + } + }}>by {extension.author}

+
+
+
+

{extension.description}

+
+
+
logs
+
logs
+
logs
+
logs
+
logs
+
logs
+
logs
+
logs
+
+
+
+ 659.4k + +
+
+ Last update 2 days ago +
+
+
+
+
+

{extension.version}

+

1.0.1

+
+
+
+
+ Install +
+
+
+
+
+
+ ); + }); + + return result; + } + + React.useEffect(() => { + document.body.style.backgroundColor = 'whitesmoke'; + UpdateExtensions(); + }, []); + + return ( +
+ +
+ ) => setSearch(e.target.value)} /> +
+ +
+
+
+
+
setExtensionFilter(ExtensionFilter.Browse)}> +

Browse

+
+
+
+
setExtensionFilter(ExtensionFilter.Installed)}> +

Installed

+
+
+
+
setExtensionFilter(ExtensionFilter.Updates)}> +

Updates

+
+
+
+ {RenderExtensions()} + +
+
+
+ ); +} + +export default ExtensionListPage; \ No newline at end of file diff --git a/client-app/src/pages/ExtensionListPage/img/installed.png b/client-app/src/pages/ExtensionListPage/img/installed.png new file mode 100644 index 0000000000000000000000000000000000000000..e8b06abd8cff9686cd8ca082567338d833928d20 GIT binary patch literal 19884 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 a&hdwQ-521m5e9F(p);p+PNto(@c$pPn;}8~ literal 0 HcmV?d00001 diff --git a/client-app/src/pages/ScriptListPage/.module.css b/client-app/src/pages/ScriptListPage/.module.css index f8b7a81..0ddd06c 100644 --- a/client-app/src/pages/ScriptListPage/.module.css +++ b/client-app/src/pages/ScriptListPage/.module.css @@ -106,7 +106,7 @@ .list_control_panel { position: relative; display: flex; - padding-left: 2%; + padding-left: 10px; } .add_script_button { @@ -128,7 +128,7 @@ .script_record { border: 3px solid rgb(0, 0, 178); - width: 100%; + width: calc(100% - 6px); background-color: white; color: rgb(57, 75, 108); padding-block: 15px; diff --git a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx index 9cbbd5a..913e69d 100644 --- a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx +++ b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx @@ -117,13 +117,14 @@ const ScriptListPage = () => { } function RenderScriptList() { - if (!isListLoaded) + if (!isListLoaded) { return (
); + } var res = []; var fixedScripts: Array = [...scripts]; @@ -217,7 +218,7 @@ const ScriptListPage = () => {
-
+
{ } function RenderUserList() { - if (!isListLoaded) + if (!isListLoaded) { return (
); + } var res = []; var fixedUsers: Array = [...users]; @@ -228,7 +229,7 @@ const UserListPage = () => {
-
+