Добавил рабочий прогресс бар

codEnjoyer · Dec 12, 2023 · 087f64d · 087f64d
1 parent 2f9bd86
commit 087f64d
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 47 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,7 +17,6 @@
     "mobx": "^6.11.0",
     "mobx-react-lite": "^4.0.5",
     "mobx-state-tree": "^5.3.0",
-    "progressbar.js": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.0",

diff --git a/frontend/src/UIComponents/CustomProgressBar/CustomProgressBar.tsx b/frontend/src/UIComponents/CustomProgressBar/CustomProgressBar.tsx
@@ -1,31 +1,34 @@
-import React, {useEffect} from 'react';
-import ProgressBar from "progressbar.js";
+import React, {useEffect, useState} from 'react';
+import "./customProgressBar.scss"
 
 interface IPropTypes {
-    containerName: string;
+    progress: number;
 }
 
-const CustomProgressBar: React.FC<IPropTypes> = ({containerName}) => {
+const CustomProgressBar: React.FC<IPropTypes> = ({progress}) => {
 
+    const [filled, setFilled] = useState(0);
     useEffect(() => {
-        const container = document.querySelector(`#${containerName}`);
-        console.log(container)
-
-        if (container && container.children.length === 0) {
-            new ProgressBar.Line(`#${containerName}`, {
-                strokeWidth: 4,
-                easing: 'easeInOut',
-                duration: 1400,
-                color: '#FFEA82',
-                trailColor: '#eee',
-                trailWidth: 1,
-                svgStyle: {width: '100%', height: '100%'}
-            });
+        if (filled < progress) {
+            if (filled > progress - 5) {
+                setFilled(progress);
+            } else setTimeout(() => setFilled(prev => prev + 5), 10)
         }
-    }, [containerName])
+    }, [filled, progress])
 
     return (
-        <div id={`#${containerName}`}></div>
+        <div>
+            <div className="progressbar">
+                <div style=
+                         {{
+                             height: "100%",
+                             width: `${filled}%`,
+                             backgroundColor: "#00D29D",
+                             transition: "width 0.5s"
+                         }}></div>
+                <span className="progressPercent">{filled}%</span>
+            </div>
+        </div>
     );
 };
 

diff --git a/frontend/src/UIComponents/CustomProgressBar/customProgressBar.scss b/frontend/src/UIComponents/CustomProgressBar/customProgressBar.scss
@@ -0,0 +1,19 @@
+.progressbar {
+  position: relative;
+  overflow: hidden;
+  width: 350px;
+  height: 30px;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+.progressPercent {
+  font-weight: 600;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  font-size: 24px;
+  transform: translate(-50%, -50%);
+  color: #eee;
+  text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
+}
diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -11,7 +11,6 @@ import {observer} from "mobx-react-lite";
 import authStore from "../../store/authStore.ts";
 import auth from "../../utils/auth.ts";
 import Starfield from "react-starfield";
-import CustomProgressBar from "../../UIComponents/CustomProgressBar/CustomProgressBar.tsx";
 
 export type FormValues = {
     login: string,
@@ -75,9 +74,6 @@ const AuthForm: React.FC = observer(() => {
                 />
 
                 <input type="submit" className="auth__btn" value="ВОЙТИ"/>
-                <div id="user-progress">
-                    <CustomProgressBar containerName="user-progress"/>
-                </div>
             </form>
         </div>
     );

diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx
@@ -1,12 +1,16 @@
 import React, {useEffect} from 'react';
+
 import Coins from "../UIMapMenu/Coins.tsx";
 import ChooseModuleWindow from "../UIMapMenu/ChooseModuleWindow.tsx";
-import mapMenuStore from "../../../store/mapMenuStore.ts";
 import UserProfile from "../UIMapMenu/UserProfile/UserProfile.tsx";
+import CustomProgressBar from "../../../UIComponents/CustomProgressBar/CustomProgressBar.tsx";
 import Level from "../UIMapMenu/Level/Level.tsx";
-import {IUserType} from "../../../types/UserType.ts";
-import {observer} from "mobx-react-lite";
+
+import mapMenuStore from "../../../store/mapMenuStore.ts";
 import moduleMenuStore from "../../../store/moduleMenuStore.ts";
+import {observer} from "mobx-react-lite";
+
+import {IUserType} from "../../../types/UserType.ts";
 
 interface IEmployeeMap {
     user?: IUserType,
@@ -33,6 +37,7 @@ const EmployeeMap: React.FC<IEmployeeMap> = observer(({user, formattedDate}) =>
             <Coins coins={100} additionalClassname="coins"/>
             <ChooseModuleWindow moduleName={moduleMenuStore.currentModule?.title}/>
             <UserProfile user={user} formattedDate={formattedDate}/>
+            <div className="progress-bar-wrapper"><CustomProgressBar progress={54}/></div>
             <div className="geolocations">
                 <div className="geolocations__wrapper">
                     {mapMenuStore.availableLevels.map((level, index) => {

diff --git a/frontend/src/components/welcomePage/WelcomePage.tsx b/frontend/src/components/welcomePage/WelcomePage.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {useNavigate} from "react-router-dom";
-import './../../styles/welcomePage.scss'
 import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 
+import './../../styles/welcomePage.scss'
+
 import Starfield from "react-starfield";
 
 const WelcomePage: React.FC = () => {

diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -151,3 +151,9 @@
 .achievement-image {
   margin-top: 10px;
 }
+
+.progress-bar-wrapper {
+  position: absolute;
+  right: 10%;
+  top: 5%;
+}