#30 format frontend

fsinfopassau · Nov 25, 2024 · 1ff6261 · 1ff6261
1 parent 4bf7c2c
commit 1ff6261
Show file tree

Hide file tree

Showing 13 changed files with 290 additions and 295 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,4 @@ build/
 !**/src/test/**/build/
 
 ### VS Code ###
-.vscode/
+#.vscode/
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -1,7 +1,7 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "printWidth": 120,
-    "semi": true,
-    "singleQuote": false
-  }
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": false
+}
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/frontend/src/Components/App.tsx b/frontend/src/Components/App.tsx
@@ -17,7 +17,7 @@ import { UserSettings } from "./SettingsTab/UserSettings";
 import { PersonalInvoiceView } from "./PersonalView/PersonalInvoiceView";
 import { PersonalHistoryView } from "./PersonalView/PersonalHistoryView";
 import ScrollDialog from "./Util/ScrollDialog";
-import {BlendingModeIcon} from "@radix-ui/react-icons";
+import { BlendingModeIcon } from "@radix-ui/react-icons";
 
 const stylesAvailable = ["purple", "blue", "mc"];
 export const BASE_PATH = import.meta.env.VITE_BASE_PATH || "";
@@ -75,20 +75,20 @@ export function App() {
       <React.StrictMode>
         <div className="Main">
           <BrowserRouter basename={BASE_PATH}>
-            <Navbar/>
+            <Navbar />
             <ToastContainer
-                position="bottom-left"
-                autoClose={4000}
-                //limit={3}
-                hideProgressBar={false}
-                newestOnTop
-                closeOnClick
-                rtl={false}
-                pauseOnFocusLoss={false}
-                draggable
-                pauseOnHover
-                theme="light"
-                transition={Bounce}
+              position="bottom-left"
+              autoClose={4000}
+              //limit={3}
+              hideProgressBar={false}
+              newestOnTop
+              closeOnClick
+              rtl={false}
+              pauseOnFocusLoss={false}
+              draggable
+              pauseOnHover
+              theme="light"
+              transition={Bounce}
             />
             <div className="MainBody">
               <Routes>
@@ -110,17 +110,14 @@ export function App() {
           </BrowserRouter>
 
           <ScrollDialog
-              onSubmit={() => {
-              }}
-              title="Datenschutzhinweise der PRoST-Sotware"
-              trigger={<div id="site-data-info">Datenschutz</div>}
+            onSubmit={() => {}}
+            title="Datenschutzhinweise der PRoST-Sotware"
+            trigger={<div id="site-data-info">Datenschutz</div>}
           >
             {HTMLDataInfos()}
           </ScrollDialog>
-          <div
-              id="theme-switch"
-          onClick={switchTheme}>
-            <BlendingModeIcon/>
+          <div id="theme-switch" onClick={switchTheme}>
+            <BlendingModeIcon />
           </div>
         </div>
       </React.StrictMode>

diff --git a/frontend/src/Components/HistoryTab/ShopHistory.tsx b/frontend/src/Components/HistoryTab/ShopHistory.tsx
@@ -1,14 +1,9 @@
-import {useEffect, useState} from "react";
-import {ShopHistoryEntry} from "../../Types/ShopHistory";
-import {getHistory, getOwnHistory, getUserHistory} from "../../Queries";
-import {HistoryEntryDisplay} from "../StatisticsTab/HistoryEntryDisplay";
-import {
-  ScrollArea,
-  ScrollAreaScrollbar,
-  ScrollAreaThumb,
-  ScrollAreaViewport
-} from "@radix-ui/react-scroll-area";
-import {Separator} from "@radix-ui/react-separator";
+import { useEffect, useState } from "react";
+import { ShopHistoryEntry } from "../../Types/ShopHistory";
+import { getHistory, getOwnHistory, getUserHistory } from "../../Queries";
+import { HistoryEntryDisplay } from "../StatisticsTab/HistoryEntryDisplay";
+import { ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
+import { Separator } from "@radix-ui/react-separator";
 
 export function ShopHistory(props: { personal: boolean }) {
   const [selectedPage, setSelectedPage] = useState(0);
@@ -83,57 +78,57 @@ export function ShopHistory(props: { personal: boolean }) {
   }
 
   return (
-      <>
-        <ScrollArea className="DisplayCard">
-          <ScrollAreaViewport>
-            <h2>Historie</h2>
-            {props.personal ? (
-                <></>
-            ) : (
-                <div className="tableSearch">
-                  <input
-                      className="Input"
-                      type="text"
-                      onChange={(e) => setSearchValue(e.target.value)}
-                      onKeyDown={handleKeyDown}
-                      placeholder="Käufer Id"
-                  />
-                </div>
-            )}
+    <>
+      <ScrollArea className="DisplayCard">
+        <ScrollAreaViewport>
+          <h2>Historie</h2>
+          {props.personal ? (
+            <></>
+          ) : (
+            <div className="tableSearch">
+              <input
+                className="Input"
+                type="text"
+                onChange={(e) => setSearchValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Käufer Id"
+              />
+            </div>
+          )}
 
-            <table className="Table">
-              <tbody>
+          <table className="Table">
+            <tbody>
               {history.map((item) => (
-                  <HistoryEntryDisplay entry={item} key={item.id} showHidden={true}/>
+                <HistoryEntryDisplay entry={item} key={item.id} showHidden={true} />
               ))}
-              </tbody>
-            </table>
+            </tbody>
+          </table>
 
-            <Separator className="Separator"/>
+          <Separator className="Separator" />
 
-            <div className="PageBar">
-              {Array.from({length: totalPages - 1}, (_, index) => {
-                if (index >= minPage && index <= maxPage) {
-                  return (
-                      <div
-                          key={"p" + index}
-                          className={`PageButton ${selectedPage === index ? "Selected" : ""}`}
-                          onClick={() => selectPage(index)}
-                      >
-                        {index + 1}
-                      </div>
-                  );
-                }
-              }).filter(Boolean)}
-            </div>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
-            <ScrollAreaThumb className="ScrollbarThumb"/>
-          </ScrollAreaScrollbar>
-          <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
-            <ScrollAreaThumb className="ScrollbarThumb"/>
-          </ScrollAreaScrollbar>
-        </ScrollArea>
-      </>
+          <div className="PageBar">
+            {Array.from({ length: totalPages - 1 }, (_, index) => {
+              if (index >= minPage && index <= maxPage) {
+                return (
+                  <div
+                    key={"p" + index}
+                    className={`PageButton ${selectedPage === index ? "Selected" : ""}`}
+                    onClick={() => selectPage(index)}
+                  >
+                    {index + 1}
+                  </div>
+                );
+              }
+            }).filter(Boolean)}
+          </div>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
+          <ScrollAreaThumb className="ScrollbarThumb" />
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
+          <ScrollAreaThumb className="ScrollbarThumb" />
+        </ScrollAreaScrollbar>
+      </ScrollArea>
+    </>
   );
 }
diff --git a/frontend/src/Components/RootTab.tsx b/frontend/src/Components/RootTab.tsx
@@ -18,31 +18,26 @@ export function RootTab() {
       .catch(() => {
         setUser(undefined);
       });
-      console.log("load profile")
+    console.log("load profile");
   }, []);
 
-  function navigateGit(){
-    window.open('https://github.com/fsinfopassau/PRoST', '_blank');
+  function navigateGit() {
+    window.open("https://github.com/fsinfopassau/PRoST", "_blank");
   }
 
   return (
     <>
       <div>
         <h1>
-          <img
-            onClick={navigateGit}
-            src={`${BASE_PATH}/icons/happy-manje/happy beer.svg`}
-            id="MainIcon"
-            alt="Logo"
-          />
+          <img onClick={navigateGit} src={`${BASE_PATH}/icons/happy-manje/happy beer.svg`} id="MainIcon" alt="Logo" />
           PRoST
         </h1>
         {user === undefined ? (
           <></>
         ) : isOnlyKiosk() ? (
           <UserContainer />
         ) : isUser() ? (
-          <PersonalUserOverview user={user}/>
+          <PersonalUserOverview user={user} />
         ) : (
           <ErrorComponent />
         )}