general ui fixes

2026-01-18 16:27:20 +01:00 · 2025-02-16 16:43:45 +02:00
parent 4218e19052
commit 0ba77f4861
8 changed files with 81 additions and 44 deletions
--- a/src/pages/components/libraryOverview.jsx
+++ b/src/pages/components/libraryOverview.jsx
@@ -5,7 +5,6 @@ import Loading from "./general/loading";

 import LibraryStatComponent from "./libraryStatCard/library-stat-component";

-
 import TvLineIcon from "remixicon-react/TvLineIcon";
 import FilmLineIcon from "remixicon-react/FilmLineIcon";
 import FileMusicLineIcon from "remixicon-react/FileMusicLineIcon";
@@ -14,14 +13,13 @@ import { Trans } from "react-i18next";
 import i18next from "i18next";

 export default function LibraryOverView() {
-  const token = localStorage.getItem('token');
-  const SeriesIcon=<TvLineIcon size={"100%"} /> ;
-  const MovieIcon=<FilmLineIcon size={"100%"} /> ;
-  const MusicIcon=<FileMusicLineIcon size={"100%"} /> ;
-  const MixedIcon=<CheckboxMultipleBlankLineIcon size={"100%"} /> ;
+  const token = localStorage.getItem("token");
+  const SeriesIcon = <TvLineIcon size={"100%"} />;
+  const MovieIcon = <FilmLineIcon size={"100%"} />;
+  const MusicIcon = <FileMusicLineIcon size={"100%"} />;
+  const MixedIcon = <CheckboxMultipleBlankLineIcon size={"100%"} />;
  const [data, setData] = useState();

-
  useEffect(() => {
    const fetchData = () => {
      const url = `/stats/getLibraryOverview`;
@@ -36,10 +34,10 @@ export default function LibraryOverView() {
        .catch((error) => console.log(error));
    };

-    if (!data || data.length === 0) {
+    if (!data) {
      fetchData();
    }
-  }, [data,token]);
+  }, [data, token]);

  if (!data) {
    return <Loading />;
@@ -47,15 +45,35 @@ export default function LibraryOverView() {

  return (
    <div>
-      <h1 className="my-3"><Trans i18nKey="HOME_PAGE.LIBRARY_OVERVIEW" /></h1>
+      <h1 className="my-3">
+        <Trans i18nKey="HOME_PAGE.LIBRARY_OVERVIEW" />
+      </h1>
      <div className="overview-container">
-
-        <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "movies")} heading={<Trans i18nKey="LIBRARY_OVERVIEW.MOVIE_LIBRARIES" />} units={<Trans i18nKey="MOVIES" />} icon={MovieIcon}/>
-        <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "tvshows")} heading={<Trans i18nKey="LIBRARY_OVERVIEW.SHOW_LIBRARIES" />} units={`${i18next.t("SERIES")} / ${i18next.t("SEASONS")} / ${i18next.t("EPISODES")}`} icon={SeriesIcon}/>
-        <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "music")} heading={<Trans i18nKey="LIBRARY_OVERVIEW.MUSIC_LIBRARIES" />} units={<Trans i18nKey="SONGS" />} icon={MusicIcon}/>
-        <LibraryStatComponent data={data.filter((stat) => stat.CollectionType === "mixed")} heading={<Trans i18nKey="LIBRARY_OVERVIEW.MIXED_LIBRARIES" />} units={<Trans i18nKey="UNITS.ITEMS" />} icon={MixedIcon}/>
-
-    </div>
+        <LibraryStatComponent
+          data={data.filter((stat) => stat.CollectionType === "movies")}
+          heading={<Trans i18nKey="LIBRARY_OVERVIEW.MOVIE_LIBRARIES" />}
+          units={<Trans i18nKey="MOVIES" />}
+          icon={MovieIcon}
+        />
+        <LibraryStatComponent
+          data={data.filter((stat) => stat.CollectionType === "tvshows")}
+          heading={<Trans i18nKey="LIBRARY_OVERVIEW.SHOW_LIBRARIES" />}
+          units={`${i18next.t("SERIES")} / ${i18next.t("SEASONS")} / ${i18next.t("EPISODES")}`}
+          icon={SeriesIcon}
+        />
+        <LibraryStatComponent
+          data={data.filter((stat) => stat.CollectionType === "music")}
+          heading={<Trans i18nKey="LIBRARY_OVERVIEW.MUSIC_LIBRARIES" />}
+          units={<Trans i18nKey="SONGS" />}
+          icon={MusicIcon}
+        />
+        <LibraryStatComponent
+          data={data.filter((stat) => stat.CollectionType === "mixed")}
+          heading={<Trans i18nKey="LIBRARY_OVERVIEW.MIXED_LIBRARIES" />}
+          units={<Trans i18nKey="UNITS.ITEMS" />}
+          icon={MixedIcon}
+        />
+      </div>
    </div>
  );
 }
--- a/src/pages/components/settings/apiKeys.jsx
+++ b/src/pages/components/settings/apiKeys.jsx
@@ -191,7 +191,7 @@ async function handleFormSubmit(event) {
                          .map((apikey,index) => (
                            <CustomRow key={index} data={apikey} handleRowActionMessage={handleRowActionMessage}/>
                          ))}
-                          {keys.length===0 ? <tr><td colSpan="3" style={{ textAlign: "center", fontStyle: "italic" ,color:"grey"}}  className='py-2'><Trans i18nKey={"ERROR_MESSAGES.NO_API_KEYS"}/></td></tr> :''}
+                          {keys.length===0 ? <tr><td colSpan="3" style={{ textAlign: "center", fontStyle: "italic" ,color:"grey", height:"200px"}}  className='py-2'><Trans i18nKey={"ERROR_MESSAGES.NO_API_KEYS"}/></td></tr> :''}

                      </TableBody>
                    </Table>
--- a/src/pages/components/settings/backupfiles.jsx
+++ b/src/pages/components/settings/backupfiles.jsx
@@ -179,25 +179,33 @@ export default function BackupFiles() {
    if (event.target.files[0]) {
      uploadFile(event.target.files[0], (progressEvent) => {
        setProgress(Math.round((progressEvent.loaded / progressEvent.total) * 100));
+      })
+        .then(() => {
+          setshowAlert({ visible: true, title: "Success", type: "success", message: "Upload complete!" });
+          fetchData(); // Refresh the file list after upload
+          setProgress(0);
+        })
+        .catch((error) => {
+          setshowAlert({ visible: true, title: "Error", type: "danger", message: error.response.data });
+        });
+    }
+  };
+
+  const fetchData = async () => {
+    try {
+      const backupFiles = await axios.get(`/backup/files`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
      });
+      setFiles(backupFiles.data);
+    } catch (error) {
+      console.log(error);
    }
  };

  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const backupFiles = await axios.get(`/backup/files`, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
-          },
-        });
-        setFiles(backupFiles.data);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-
    fetchData();

    const intervalId = setInterval(fetchData, 60000 * 5);
@@ -213,7 +221,9 @@ export default function BackupFiles() {
  };

  const handleRowActionMessage = (alertState) => {
-    setshowAlert({ visible: alertState.visible, title: alertState.title, type: alertState.type, message: alertState.message });
+    fetchData().then(() => {
+      setshowAlert({ visible: alertState.visible, title: alertState.title, type: alertState.type, message: alertState.message });
+    });
  };

  return (
@@ -228,7 +238,7 @@ export default function BackupFiles() {
        </Alert>
      )}

-      <TableContainer className="rounded-2">
+      <TableContainer className="rounded-2 h-100">
        <Table aria-label="collapsible table">
          <TableHead>
            <TableRow>
@@ -252,7 +262,11 @@ export default function BackupFiles() {
                .map((file, index) => <Row key={index} data={file} handleRowActionMessage={handleRowActionMessage} />)}
            {files.length === 0 ? (
              <tr>
-                <td colSpan="5" style={{ textAlign: "center", fontStyle: "italic", color: "grey" }} className="py-2">
+                <td
+                  colSpan="5"
+                  style={{ textAlign: "center", fontStyle: "italic", color: "grey", height: "200px" }}
+                  className="py-2"
+                >
                  <Trans i18nKey={"ERROR_MESSAGES.NO_BACKUPS"} />
                </td>
              </tr>
--- a/src/pages/components/statistics/daily-play-count.jsx
+++ b/src/pages/components/statistics/daily-play-count.jsx
@@ -60,7 +60,7 @@ function DailyPlayStats(props) {
      <div className="main-widget">
        <h1><Trans i18nKey={"STAT_PAGE.DAILY_PLAY_PER_LIBRARY"}/> - {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h1>

-        <h1><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h1>
+        <h5><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h5>
      </div>
    );
  }
--- a/src/pages/components/statistics/play-stats-by-day.jsx
+++ b/src/pages/components/statistics/play-stats-by-day.jsx
@@ -56,7 +56,7 @@ function PlayStatsByDay(props) {
      <div className="statistics-widget small">
        <h1><Trans i18nKey={"STAT_PAGE.PLAY_COUNT_BY"}/> <Trans i18nKey={"UNITS.DAY"}/> - <Trans i18nKey={"LAST"}/> {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h1>

-        <h1><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h1>
+        <h5><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h5>
      </div>
    );
  }
--- a/src/pages/components/statistics/play-stats-by-hour.jsx
+++ b/src/pages/components/statistics/play-stats-by-hour.jsx
@@ -55,7 +55,7 @@ function PlayStatsByHour(props) {
      <div className="statistics-widget small">
        <h1><Trans i18nKey={"STAT_PAGE.PLAY_COUNT_BY"}/> <Trans i18nKey={"UNITS.HOUR"}/>  - <Trans i18nKey={"LAST"}/> {days} <Trans i18nKey={`UNITS.DAY${days>1 ? 'S':''}`}/></h1>

-        <h1>No Stats to display</h1>
+        <h5><Trans i18nKey={"ERROR_MESSAGES.NO_STATS"}/></h5>
      </div>
    );
  }
--- a/src/pages/components/statistics/playbackMethodStats.jsx
+++ b/src/pages/components/statistics/playbackMethodStats.jsx
@@ -61,9 +61,9 @@ function PlayMethodStats(props) {
          <Trans i18nKey={"STAT_PAGE.DAILY_PLAY_PER_LIBRARY"} /> - {hours} <Trans i18nKey={`UNITS.HOUR${hours > 1 ? "S" : ""}`} />
        </h1>

-        <h1>
+        <h5>
          <Trans i18nKey={"ERROR_MESSAGES.NO_STATS"} />
-        </h1>
+        </h5>
      </div>
    );
  }
--- a/src/pages/users.jsx
+++ b/src/pages/users.jsx
@@ -295,7 +295,7 @@ function Users() {
    return () => clearInterval(intervalId);
  }, [config]);

-  if (!data || data.length === 0) {
+  if (!data) {
    return <Loading />;
  }

@@ -419,7 +419,7 @@ function Users() {
          <Trans i18nKey="USERS_PAGE.ALL_USERS" />
        </h1>

-        <div className="d-flex flex-column flex-md-row" style={{whiteSpace: "nowrap"}}>
+        <div className="d-flex flex-column flex-md-row" style={{ whiteSpace: "nowrap" }}>
          <div className="d-flex flex-row w-100">
            <div className="d-flex flex-col my-md-3 rounded-0 rounded-start  align-items-center px-2 bg-primary-1">
              <Trans i18nKey="UNITS.ITEMS" />
@@ -454,11 +454,16 @@ function Users() {
          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} rowCount={rowsPerPage} />
          <TableBody>
            {filteredData.map((row) => (
-              <Row key={row.UserId} data={row} updateTrackedState={updateTrackedState} hostUrl={config.settings?.EXTERNAL_URL ?? config.hostUrl} />
+              <Row
+                key={row.UserId}
+                data={row}
+                updateTrackedState={updateTrackedState}
+                hostUrl={config.settings?.EXTERNAL_URL ?? config.hostUrl}
+              />
            ))}
            {data.length === 0 ? (
              <tr>
-                <td colSpan="5" style={{ textAlign: "center", fontStyle: "italic", color: "grey" }}>
+                <td colSpan="8" style={{ textAlign: "center", fontStyle: "italic", color: "grey", height: "200px" }}>
                  No Users Found
                </td>
              </tr>