diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 1672318..13acd31 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -20,6 +20,7 @@ "react-apexcharts": "^1.4.1", "react-country-flag": "^3.1.0", "react-dom": "^18.2.0", + "react-helmet-async": "^2.0.5", "react-hot-toast": "^2.4.1", "react-i18next": "^15.0.2", "react-icons": "^4.10.1", diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 5503773..009e4af 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -2,11 +2,7 @@ import { useEffect, useState } from 'react'; import { Route, Routes, useLocation } from 'react-router-dom'; import { Loader } from './components/mini/loaders/PageLoader.tsx'; -import { PageTitle } from './components/mini/util/PageTitle.tsx'; -import Chart from './old/Chart.tsx'; import { Home } from './pages/Home'; -import Alerts from './old/UiElements/Alerts.tsx'; -import Buttons from './old/UiElements/Buttons.tsx'; import DefaultLayout from './layout/DefaultLayout'; import './i18n'; import { TrainLeaderboard } from './pages/leaderboard/TrainLeaderboard.tsx'; @@ -19,6 +15,8 @@ import { Log } from './pages/log/Log.tsx'; import 'react-toastify/dist/ReactToastify.css'; import { ToastContainer } from 'react-toastify'; import useColorMode from './hooks/useColorMode.tsx'; +import { HelmetProvider } from 'react-helmet-async'; +import { PageMeta } from './components/mini/util/PageMeta.tsx'; function App() { const [loading, setLoading] = useState(true); @@ -32,96 +30,107 @@ function App() { setTimeout(() => setLoading(false), 400); }, []); - return loading ? ( - - ) : ( - <> - - - - - - - - } - /> - - - - - } - /> + return - - - - - } - /> - - - - - } - /> + {loading ? ( + + ) : ( + <> + + + + + + + + } + /> + + + + + } + /> - - - - - } - /> + + + + + } + /> - - - {/* page title is modified after API response */} - - - } - /> + + + + + } + /> - - - {/* page title is modified after API response */} - - - } - /> - - - - ); + + + + + } + /> + + + + {/* page meta is modified in component! */} + + + } + /> + + + + {/* page title is modified after API response */} + + + } + /> + + + + )} + ; } export default App; diff --git a/packages/frontend/src/components/mini/util/CardDataStats.tsx b/packages/frontend/src/components/mini/util/CardDataStats.tsx new file mode 100644 index 0000000..7718d6d --- /dev/null +++ b/packages/frontend/src/components/mini/util/CardDataStats.tsx @@ -0,0 +1,70 @@ +import React from 'react'; + +interface CardDataStatsProps { + title: string; + total: string; + rate?: string; + levelUp?: boolean; + levelDown?: boolean; +} + +export const CardDataStats: React.FC = ({ + title, + total, + rate, + levelUp, + levelDown + }) => { + return ( +
+ +
+
+

+ {total} +

+ {title} +
+ + {rate && + {rate} + + {levelUp && ( + + + + )} + {levelDown && ( + + + + )} + } +
+
+ ); +}; \ No newline at end of file diff --git a/packages/frontend/src/components/mini/util/PageMeta.tsx b/packages/frontend/src/components/mini/util/PageMeta.tsx new file mode 100644 index 0000000..9601c9d --- /dev/null +++ b/packages/frontend/src/components/mini/util/PageMeta.tsx @@ -0,0 +1,29 @@ +import { Helmet } from 'react-helmet-async'; + +// https://dev.to/facubotta/meta-data-in-react-1p93 +export const PageMeta = ({ title = '', description = '', image = '', name = '' }) => { + return ( + + { /* Standard metadata tags */} + {title} + + + { /* Open Graph tags (OG) */} + + + + + {/* OG image tags */} + + + + + + { /* Twitter tags */} + {name && } + + + + + ); +}; \ No newline at end of file diff --git a/packages/frontend/src/components/mini/util/PageTitle.tsx b/packages/frontend/src/components/mini/util/PageTitle.tsx deleted file mode 100644 index 2e5ccac..0000000 --- a/packages/frontend/src/components/mini/util/PageTitle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; - -interface PageTitleProps { - title: string; -} - -export const PageTitle: React.FC = ({ title }) => { - const location = useLocation(); - - useEffect(() => { - document.title = title; - }, [location, title]); - - return null; // This component doesn't render anything -}; diff --git a/packages/frontend/src/components/pages/profile/Profile.tsx b/packages/frontend/src/components/pages/profile/Profile.tsx index 30798dd..6ce7a80 100644 --- a/packages/frontend/src/components/pages/profile/Profile.tsx +++ b/packages/frontend/src/components/pages/profile/Profile.tsx @@ -95,7 +95,7 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {

{train.score}

-
+

{Math.floor(train.time / 3600000)}h

; diff --git a/packages/frontend/src/i18n/languages/en.json b/packages/frontend/src/i18n/languages/en.json index 78e2150..09f46a1 100644 --- a/packages/frontend/src/i18n/languages/en.json +++ b/packages/frontend/src/i18n/languages/en.json @@ -13,7 +13,7 @@ "profiles": "Profiles" }, "title": "Simrail Stats", - "description": "The most complete SimRail logs and statistics site!", + "description": "Simrail Stats - The best SimRail logs and statistics site!", "buttons": { "project": "Project page", "forum": "Forum Page" diff --git a/packages/frontend/src/old/CardDataStats.tsx b/packages/frontend/src/old/CardDataStats.tsx deleted file mode 100644 index ef7afae..0000000 --- a/packages/frontend/src/old/CardDataStats.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from "react"; - -interface CardDataStatsProps -{ - title: string; - total: string; - rate?: string; - levelUp?: boolean; - levelDown?: boolean; -} - -const CardDataStats: React.FC = ({ - title, - total, - rate, - levelUp, - levelDown, - }) => -{ - return ( -
-
-
-

- { total } -

- { title } -
- - { rate && <> - - { rate } - - { levelUp && ( - - - - ) } - { levelDown && ( - - - - ) } - - } -
-
- ); -}; - -export default CardDataStats; diff --git a/packages/frontend/src/old/Chart.tsx b/packages/frontend/src/old/Chart.tsx deleted file mode 100644 index 9843f6d..0000000 --- a/packages/frontend/src/old/Chart.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -import ChartOne from "./Charts/ChartOne"; -import ChartThree from "./Charts/ChartThree"; -import ChartTwo from "./Charts/ChartTwo"; - -const Chart: React.FC = () => -{ - return ( - <> -
- - - -
- - ); -}; - -export default Chart; diff --git a/packages/frontend/src/old/Charts/ChartOne.tsx b/packages/frontend/src/old/Charts/ChartOne.tsx deleted file mode 100644 index 60ebccf..0000000 --- a/packages/frontend/src/old/Charts/ChartOne.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import { ApexOptions } from "apexcharts"; -import React, { useState } from "react"; -import ReactApexChart from "react-apexcharts"; - -const options: ApexOptions = { - legend: { - show: false, - position: "top", - horizontalAlign: "left", - }, - colors: [ "#3C50E0", "#80CAEE" ], - chart: { - fontFamily: "Satoshi, sans-serif", - height: 335, - type: "area", - dropShadow: { - enabled: true, - color: "#623CEA14", - top: 10, - blur: 4, - left: 0, - opacity: 0.1, - }, - - toolbar: { - show: false, - }, - }, - responsive: [ - { - breakpoint: 1024, - options: { - chart: { - height: 300, - }, - }, - }, - { - breakpoint: 1366, - options: { - chart: { - height: 350, - }, - }, - }, - ], - stroke: { - width: [ 2, 2 ], - curve: "straight", - }, - // labels: { - // show: false, - // position: "top", - // }, - grid: { - xaxis: { - lines: { - show: true, - }, - }, - yaxis: { - lines: { - show: true, - }, - }, - }, - dataLabels: { - enabled: false, - }, - markers: { - size: 4, - colors: "#fff", - strokeColors: [ "#3056D3", "#80CAEE" ], - strokeWidth: 3, - strokeOpacity: 0.9, - strokeDashArray: 0, - fillOpacity: 1, - discrete: [], - hover: { - size: undefined, - sizeOffset: 5, - }, - }, - xaxis: { - type: "category", - categories: [ - "Sep", - "Oct", - "Nov", - "Dec", - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - ], - axisBorder: { - show: false, - }, - axisTicks: { - show: false, - }, - }, - yaxis: { - title: { - style: { - fontSize: "0px", - }, - }, - min: 0, - max: 100, - }, -}; - -interface ChartOneState -{ - series: { - name: string; - data: number[]; - }[]; -} - -const ChartOne: React.FC = () => -{ - const [ state, setState ] = useState({ - series: [ - { - name: "Product One", - data: [ 23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45 ], - }, - - { - name: "Product Two", - data: [ 30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51 ], - }, - ], - }); - - const handleReset = () => - { - setState((prevState) => ({ - ...prevState, - })); - }; - handleReset; - - return ( -
-
-
-
- - - -
-

Total Revenue

-

12.04.2022 - 12.05.2022

-
-
-
- - - -
-

Total Sales

-

12.04.2022 - 12.05.2022

-
-
-
-
-
- - - -
-
-
- -
-
- -
-
-
- ); -}; - -export default ChartOne; diff --git a/packages/frontend/src/old/Charts/ChartThree.tsx b/packages/frontend/src/old/Charts/ChartThree.tsx deleted file mode 100644 index c7a3584..0000000 --- a/packages/frontend/src/old/Charts/ChartThree.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { ApexOptions } from "apexcharts"; -import React, { useState } from "react"; -import ReactApexChart from "react-apexcharts"; - -interface ChartThreeState -{ - series: number[]; -} - -const options: ApexOptions = { - chart: { - fontFamily: "Satoshi, sans-serif", - type: "donut", - }, - colors: [ "#3C50E0", "#6577F3", "#8FD0EF", "#0FADCF" ], - labels: [ "Desktop", "Tablet", "Mobile", "Unknown" ], - legend: { - show: false, - position: "bottom", - }, - - plotOptions: { - pie: { - donut: { - size: "65%", - background: "transparent", - }, - }, - }, - dataLabels: { - enabled: false, - }, - responsive: [ - { - breakpoint: 2600, - options: { - chart: { - width: 380, - }, - }, - }, - { - breakpoint: 640, - options: { - chart: { - width: 200, - }, - }, - }, - ], -}; - -const ChartThree: React.FC = () => -{ - const [ state, setState ] = useState({ - series: [ 65, 34, 12, 56 ], - }); - - const handleReset = () => - { - setState((prevState) => ({ - ...prevState, - series: [ 65, 34, 12, 56 ], - })); - }; - handleReset; - - return ( -
-
-
-
- Visitors Analytics -
-
-
-
- - - - - - - -
-
-
- -
-
- -
-
- -
-
-
- -

- Desktop - 65% -

-
-
-
-
- -

- Tablet - 34% -

-
-
-
-
- -

- Mobile - 45% -

-
-
-
-
- -

- Unknown - 12% -

-
-
-
-
- ); -}; - -export default ChartThree; diff --git a/packages/frontend/src/old/Charts/ChartTwo.tsx b/packages/frontend/src/old/Charts/ChartTwo.tsx deleted file mode 100644 index 5f3f0e4..0000000 --- a/packages/frontend/src/old/Charts/ChartTwo.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { ApexOptions } from "apexcharts"; -import React, { useState } from "react"; -import ReactApexChart from "react-apexcharts"; - -const options: ApexOptions = { - colors: [ "#3C50E0", "#80CAEE" ], - chart: { - fontFamily: "Satoshi, sans-serif", - type: "bar", - height: 335, - stacked: true, - toolbar: { - show: false, - }, - zoom: { - enabled: false, - }, - }, - - responsive: [ - { - breakpoint: 1536, - options: { - plotOptions: { - bar: { - borderRadius: 0, - columnWidth: "25%", - }, - }, - }, - }, - ], - plotOptions: { - bar: { - horizontal: false, - borderRadius: 0, - columnWidth: "25%", - borderRadiusApplication: "end", - borderRadiusWhenStacked: "last", - }, - }, - dataLabels: { - enabled: false, - }, - - xaxis: { - categories: [ "M", "T", "W", "T", "F", "S", "S" ], - }, - legend: { - position: "top", - horizontalAlign: "left", - fontFamily: "Satoshi", - fontWeight: 500, - fontSize: "14px", - - markers: { - radius: 99, - }, - }, - fill: { - opacity: 1, - }, -}; - -interface ChartTwoState -{ - series: { - name: string; - data: number[]; - }[]; -} - -const ChartTwo: React.FC = () => -{ - const [ state, setState ] = useState({ - series: [ - { - name: "Sales", - data: [ 44, 55, 41, 67, 22, 43, 65 ], - }, - { - name: "Revenue", - data: [ 13, 23, 20, 8, 13, 27, 15 ], - }, - ], - }); - - const handleReset = () => - { - setState((prevState) => ({ - ...prevState, - })); - }; - handleReset; - - return ( -
-
-
-

- Profit this week -

-
-
-
- - - - - - - -
-
-
- -
-
- -
-
-
- ); -}; - -export default ChartTwo; diff --git a/packages/frontend/src/old/Chat/ChatCard.tsx b/packages/frontend/src/old/Chat/ChatCard.tsx deleted file mode 100644 index cd63993..0000000 --- a/packages/frontend/src/old/Chat/ChatCard.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Link } from "react-router-dom"; -import { Chat } from "../../old/chat"; -import UserOne from "../../images/user/user-01.png"; -import UserTwo from "../../images/user/user-02.png"; -import UserThree from "../../images/user/user-03.png"; -import UserFour from "../../images/user/user-04.png"; -import UserFive from "../../images/user/user-05.png"; - -const chatData: Chat[] = [ - { - avatar: UserOne, - name: "Devid Heilo", - text: "How are you?", - time: 12, - textCount: 3, - color: "#10B981", - }, - { - avatar: UserTwo, - name: "Henry Fisher", - text: "Waiting for you!", - time: 12, - textCount: 0, - color: "#DC3545", - }, - { - avatar: UserFour, - name: "Jhon Doe", - text: "What's up?", - time: 32, - textCount: 0, - color: "#10B981", - }, - { - avatar: UserFive, - name: "Jane Doe", - text: "Great", - time: 32, - textCount: 2, - color: "#FFBA00", - }, - { - avatar: UserOne, - name: "Jhon Doe", - text: "How are you?", - time: 32, - textCount: 0, - color: "#10B981", - }, - { - avatar: UserThree, - name: "Jhon Doe", - text: "How are you?", - time: 32, - textCount: 3, - color: "#FFBA00", - }, -]; - -const ChatCard = () => -{ - return ( -
-

- Chats -

- -
- { chatData.map((chat, key) => ( - -
- User - -
- -
-
-
- { chat.name } -
-

- - { chat.text } - - . { chat.time } min -

-
- { chat.textCount !== 0 && ( -
- - { " " } - { chat.textCount } - -
- ) } -
- - )) } -
-
- ); -}; - -export default ChatCard; diff --git a/packages/frontend/src/old/Checkboxes/CheckboxFive.tsx b/packages/frontend/src/old/Checkboxes/CheckboxFive.tsx deleted file mode 100644 index fd4ff9f..0000000 --- a/packages/frontend/src/old/Checkboxes/CheckboxFive.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useState } from "react"; - -const CheckboxFive = () => -{ - const [ isChecked, setIsChecked ] = useState(false); - - return ( -
- -
- ); -}; - -export default CheckboxFive; diff --git a/packages/frontend/src/old/Checkboxes/CheckboxFour.tsx b/packages/frontend/src/old/Checkboxes/CheckboxFour.tsx deleted file mode 100644 index c1cfb80..0000000 --- a/packages/frontend/src/old/Checkboxes/CheckboxFour.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useState } from "react"; - -const CheckboxFour = () => -{ - const [ isChecked, setIsChecked ] = useState(false); - - return ( -
- -
- ); -}; - -export default CheckboxFour; diff --git a/packages/frontend/src/old/Checkboxes/CheckboxOne.tsx b/packages/frontend/src/old/Checkboxes/CheckboxOne.tsx deleted file mode 100644 index a018c83..0000000 --- a/packages/frontend/src/old/Checkboxes/CheckboxOne.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useState } from "react"; - -const CheckboxOne = () => -{ - const [ isChecked, setIsChecked ] = useState(false); - - return ( -
- -
- ); -}; - -export default CheckboxOne; diff --git a/packages/frontend/src/old/Checkboxes/CheckboxThree.tsx b/packages/frontend/src/old/Checkboxes/CheckboxThree.tsx deleted file mode 100644 index ba6a953..0000000 --- a/packages/frontend/src/old/Checkboxes/CheckboxThree.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { useState } from "react"; - -const CheckboxThree = () => -{ - const [ isChecked, setIsChecked ] = useState(false); - - return ( -
- -
- ); -}; - -export default CheckboxThree; diff --git a/packages/frontend/src/old/Checkboxes/CheckboxTwo.tsx b/packages/frontend/src/old/Checkboxes/CheckboxTwo.tsx deleted file mode 100644 index e081dae..0000000 --- a/packages/frontend/src/old/Checkboxes/CheckboxTwo.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useState } from "react"; - -const CheckboxTwo = () => -{ - const [ isChecked, setIsChecked ] = useState(false); - - return ( -
- -
- ); -}; - -export default CheckboxTwo; diff --git a/packages/frontend/src/old/ClickOutside.tsx b/packages/frontend/src/old/ClickOutside.tsx deleted file mode 100644 index fb74718..0000000 --- a/packages/frontend/src/old/ClickOutside.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useRef, useEffect } from "react"; - -interface Props -{ - children: React.ReactNode; - exceptionRef?: React.RefObject; - onClick: () => void; - className?: string; -} - -const ClickOutside: React.FC = ({ - children, - exceptionRef, - onClick, - className, - }) => -{ - const wrapperRef = useRef(null); - - useEffect(() => - { - const handleClickListener = (event: MouseEvent) => - { - let clickedInside: null | boolean = false; - if (exceptionRef) - { - clickedInside = - (wrapperRef.current && - wrapperRef.current.contains(event.target as Node)) || - (exceptionRef.current && exceptionRef.current === event.target) || - (exceptionRef.current && - exceptionRef.current.contains(event.target as Node)); - } - else - { - clickedInside = - wrapperRef.current && - wrapperRef.current.contains(event.target as Node); - } - - if (!clickedInside) - { - onClick(); - } - }; - - document.addEventListener("mousedown", handleClickListener); - - return () => - { - document.removeEventListener("mousedown", handleClickListener); - }; - }, [ exceptionRef, onClick ]); - - return ( -
- { children } -
- ); -}; - -export default ClickOutside; diff --git a/packages/frontend/src/old/Dropdowns/DropdownDefault.tsx b/packages/frontend/src/old/Dropdowns/DropdownDefault.tsx deleted file mode 100644 index f72e419..0000000 --- a/packages/frontend/src/old/Dropdowns/DropdownDefault.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { useEffect, useRef, useState } from "react"; - -const DropdownDefault = () => -{ - const [ dropdownOpen, setDropdownOpen ] = useState(false); - - const trigger = useRef(null); - const dropdown = useRef(null); - - // close on click outside - useEffect(() => - { - const clickHandler = ({ target }: MouseEvent) => - { - if (!dropdown.current) - { - return; - } - if ( - !dropdownOpen || - dropdown.current.contains(target) || - trigger.current.contains(target) - ) - { - return; - } - setDropdownOpen(false); - }; - document.addEventListener("click", clickHandler); - return () => document.removeEventListener("click", clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => - { - const keyHandler = ({ keyCode }: KeyboardEvent) => - { - if (!dropdownOpen || keyCode !== 27) - { - return; - } - setDropdownOpen(false); - }; - document.addEventListener("keydown", keyHandler); - return () => document.removeEventListener("keydown", keyHandler); - }); - - return ( -
- -
setDropdownOpen(true) } - onBlur={ () => setDropdownOpen(false) } - className={ `absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${ - dropdownOpen === true ? "block" : "hidden" - }` } - > - - -
-
- ); -}; - -export default DropdownDefault; diff --git a/packages/frontend/src/old/Forms/DatePicker/DatePickerOne.tsx b/packages/frontend/src/old/Forms/DatePicker/DatePickerOne.tsx deleted file mode 100644 index c6ef856..0000000 --- a/packages/frontend/src/old/Forms/DatePicker/DatePickerOne.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import flatpickr from "flatpickr"; -import { useEffect } from "react"; - -const DatePickerOne = () => -{ - useEffect(() => - { - // Init flatpickr - flatpickr(".form-datepicker", { - mode: "single", - static: true, - monthSelectorType: "static", - dateFormat: "M j, Y", - prevArrow: - "", - nextArrow: - "", - }); - - - }, []); - - return ( -
- -
- - -
- - - -
-
-
- ); -}; - -export default DatePickerOne; diff --git a/packages/frontend/src/old/Forms/DatePicker/DatePickerTwo.tsx b/packages/frontend/src/old/Forms/DatePicker/DatePickerTwo.tsx deleted file mode 100644 index b6c34f6..0000000 --- a/packages/frontend/src/old/Forms/DatePicker/DatePickerTwo.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import flatpickr from "flatpickr"; -import { useEffect } from "react"; - -const DatePickerTwo = () => -{ - useEffect(() => - { - // Init flatpickr - flatpickr(".form-datepicker", { - mode: "single", - static: true, - monthSelectorType: "static", - dateFormat: "M j, Y", - prevArrow: - "", - nextArrow: - "", - }); - - - }, []); - - return ( -
- -
- - -
- - - -
-
-
- ); -}; - -export default DatePickerTwo; diff --git a/packages/frontend/src/old/Forms/MultiSelect.tsx b/packages/frontend/src/old/Forms/MultiSelect.tsx deleted file mode 100644 index 33d6a1b..0000000 --- a/packages/frontend/src/old/Forms/MultiSelect.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; - -interface Option -{ - value: string; - text: string; - selected: boolean; - element?: HTMLElement; -} - -interface DropdownProps -{ - id: string; -} - -const MultiSelect: React.FC = ({ id }) => -{ - const [ options, setOptions ] = useState([]); - const [ selected, setSelected ] = useState([]); - const [ show, setShow ] = useState(false); - const dropdownRef = useRef(null); - const trigger = useRef(null); - - useEffect(() => - { - const loadOptions = () => - { - const select = document.getElementById(id) as HTMLSelectElement | null; - if (select) - { - const newOptions: Option[] = []; - for (let i = 0; i < select.options.length; i++) - { - newOptions.push({ - value: select.options[ i ].value, - text: select.options[ i ].innerText, - selected: select.options[ i ].hasAttribute("selected"), - }); - } - setOptions(newOptions); - } - }; - - loadOptions(); - }, [ id ]); - - const open = () => - { - setShow(true); - }; - - const isOpen = () => - { - return show === true; - }; - - const select = (index: number, event: React.MouseEvent) => - { - const newOptions = [ ...options ]; - - if (!newOptions[ index ].selected) - { - newOptions[ index ].selected = true; - newOptions[ index ].element = event.currentTarget as HTMLElement; - setSelected([ ...selected, index ]); - } - else - { - const selectedIndex = selected.indexOf(index); - if (selectedIndex !== -1) - { - newOptions[ index ].selected = false; - setSelected(selected.filter((i) => i !== index)); - } - } - - setOptions(newOptions); - }; - - const remove = (index: number) => - { - const newOptions = [ ...options ]; - const selectedIndex = selected.indexOf(index); - - if (selectedIndex !== -1) - { - newOptions[ index ].selected = false; - setSelected(selected.filter((i) => i !== index)); - setOptions(newOptions); - } - }; - - const selectedValues = () => - { - return selected.map((option) => options[ option ].value); - }; - - useEffect(() => - { - const clickHandler = ({ target }: MouseEvent) => - { - if (!dropdownRef.current) - { - return; - } - if ( - !show || - dropdownRef.current.contains(target) || - trigger.current.contains(target) - ) - { - return; - } - setShow(false); - }; - document.addEventListener("click", clickHandler); - return () => document.removeEventListener("click", clickHandler); - }); - - return ( -
- -
- - -
- -
-
-
-
-
- { selected.map((index) => ( -
-
- { options[ index ].text } -
-
-
remove(index) } - className="cursor-pointer pl-2 hover:text-danger" - > - - - -
-
-
- )) } - { selected.length === 0 && ( -
- -
- ) } -
-
- -
-
-
-
-
setShow(true) } - onBlur={ () => setShow(false) } - > -
- { options.map((option, index) => ( -
-
select(index, event) } - > -
-
-
- { option.text } -
-
-
-
-
- )) } -
-
-
-
-
-
-
-
- ); -}; - -export default MultiSelect; diff --git a/packages/frontend/src/old/Forms/SelectGroup/SelectGroupOne.tsx b/packages/frontend/src/old/Forms/SelectGroup/SelectGroupOne.tsx deleted file mode 100644 index acff67e..0000000 --- a/packages/frontend/src/old/Forms/SelectGroup/SelectGroupOne.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState } from "react"; - -const SelectGroupOne: React.FC = () => -{ - const [ selectedOption, setSelectedOption ] = useState(""); - const [ isOptionSelected, setIsOptionSelected ] = useState(false); - - const changeTextColor = () => - { - setIsOptionSelected(true); - }; - - return ( -
- - -
- - - - - - - - - -
-
- ); -}; - -export default SelectGroupOne; diff --git a/packages/frontend/src/old/Forms/SelectGroup/SelectGroupTwo.tsx b/packages/frontend/src/old/Forms/SelectGroup/SelectGroupTwo.tsx deleted file mode 100644 index 414f554..0000000 --- a/packages/frontend/src/old/Forms/SelectGroup/SelectGroupTwo.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useState } from "react"; - -const SelectGroupTwo: React.FC = () => -{ - const [ selectedOption, setSelectedOption ] = useState(""); - const [ isOptionSelected, setIsOptionSelected ] = useState(false); - - const changeTextColor = () => - { - setIsOptionSelected(true); - }; - - return ( -
- - -
- - - - - - - - - - - - - - - - - - - -
-
- ); -}; - -export default SelectGroupTwo; diff --git a/packages/frontend/src/old/ModalSettings.tsx b/packages/frontend/src/old/ModalSettings.tsx deleted file mode 100644 index c0fc5a6..0000000 --- a/packages/frontend/src/old/ModalSettings.tsx +++ /dev/null @@ -1,281 +0,0 @@ -import React, { useState } from "react"; -import dataJSON from "../../public/data.json"; - - -export const Modal = ({ closeModal, onSubmit, defaultValue }) => -{ - const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_"))); - - const [ formState, setFormState ] = useState( - defaultValue || { - id: "", - para: "price", - criterion: "0", - value: "", - type: "0", - - }, - ); - const [ errors, setErrors ] = useState([]); - - const validateForm = () => - { - if (formState.id && formState.value) - { - setErrors([]); - return true; - } - else - { - let errorFields = []; - for (const [ key, value ] of Object.entries(formState)) - { - console.log(key); - console.log(value); - if (!value) - { - errorFields.push(key == "id" ? "Bond ID" : key); - } - else - { - if (key == "id") - { - if (!(Object.keys(dataJSON).includes(value) || value == "ALL")) - { - errorFields.push("INVALID_ID_" + value); - } - } - } - } - console.log(errorFields); - setErrors(errorFields); - return false; - } - }; - - const handleChange = (e) => - { - console.log(formState.criterion); - console.log(e.target.name); - console.log(e.target.name == "para" && e.target.value == "rating"); - console.log(formState.criterion > 1 && formState.criterion < 4); - console.log(e.target.value); - console.log(e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4); - if (e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4) - { - setFormState({ ...formState, [ "criterion" ]: 0 }); - } - - console.log(formState.criterion); - setFormState({ ...formState, [ e.target.name ]: e.target.value }); - }; - - const handleSubmit = (e) => - { - e.preventDefault(); - - if (!validateForm()) - { - return; - } - - onSubmit(formState); - - closeModal(); - }; - - return ( -
- { - if (e.target.className === "modal-container") - { - closeModal(); - } - } } - > - -
-
-
- × -
-
-
-
- - -
- -
- -
-
- - { formState.para } - - - - - - - - - - - -
- -
- - -
- -
-
- - { formState.criterion == 0 ? "goes down by" : formState.criterion == 1 ? "goes up by" : formState.criterion == 2 ? "is smaller than" : formState.criterion == 3 ? "is greater than" : "is equal to" } - - - - - - - - - -
-
-
- - -
- -
- -
-
- - { formState.type == 0 ? "Info" : formState.type == 1 ? "Warning" : "Alert" } - - - - - - - - - - - -
-
-
- { errors.filter((item: string) => (item.startsWith("INVALID_ID"))).length > 0 && <>
-
{ errors.filter((item: string) => (item.startsWith("INVALID_ID")))[ 0 ].replace("INVALID_ID_", "") } is - not a valid bond -
- } - { errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).length > 0 && ( -
Please - input { errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).join(", ") }
) } - - -

- -
-
-
-
- - ); -}; \ No newline at end of file diff --git a/packages/frontend/src/old/Profile.tsx b/packages/frontend/src/old/Profile.tsx deleted file mode 100644 index 35c8f06..0000000 --- a/packages/frontend/src/old/Profile.tsx +++ /dev/null @@ -1,290 +0,0 @@ -import CoverOne from "../images/cover/cover-01.png"; -import userSix from "../images/user/user-06.png"; -import { Link } from "react-router-dom"; - -const Profile = () => -{ - return ( - <> -
-
- profile cover -
- -
-
-
-
-
- profile - -
-
-
-

- Danish Heilium -

-

Ui/Ux Designer

-
-
- - 259 - - Posts -
-
- - 129K - - Followers -
-
- - 2K - - Following -
-
- -
-

- About Me -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Pellentesque posuere fermentum urna, eu condimentum mauris - tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus - ultricies. Sed vel aliquet libero. Nunc a augue fermentum, - pharetra ligula sed, aliquam lacus. -

-
- -
-

- Follow me on -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
- - ); -}; - -export default Profile; diff --git a/packages/frontend/src/old/Settings.tsx b/packages/frontend/src/old/Settings.tsx deleted file mode 100644 index 2e4dc17..0000000 --- a/packages/frontend/src/old/Settings.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import userThree from "../images/user/user-03.png"; - -const Settings = () => -{ - return ( - <> -
-
-
-
-
-

- Personal Information -

-
-
-
-
-
- -
- - - - - - - - - -
-
- -
- - -
-
- -
- -
- - - - - - - - - -
-
- -
- - -
- -
- -
- - - - - - - - - - - - - - - -
-
- -
- - -
-
-
-
-
-
-
-
-

- Your Photo -

-
-
-
-
-
- User -
-
- - Edit your photo - - - - - -
-
- -
- -
- - - - - - - -

- Click to upload or - drag and drop -

-

SVG, PNG, JPG or GIF

-

(max, 800 X 800px)

-
-
- -
- - -
-
-
-
-
-
-
- - ); -}; - -export default Settings; diff --git a/packages/frontend/src/old/Switchers/SwitcherFour.tsx b/packages/frontend/src/old/Switchers/SwitcherFour.tsx deleted file mode 100644 index 7c03e54..0000000 --- a/packages/frontend/src/old/Switchers/SwitcherFour.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from "react"; - -const SwitcherFour = () => -{ - const [ enabled, setEnabled ] = useState(false); - - return ( -
- -
- ); -}; - -export default SwitcherFour; diff --git a/packages/frontend/src/old/Switchers/SwitcherOne.tsx b/packages/frontend/src/old/Switchers/SwitcherOne.tsx deleted file mode 100644 index 6acff9b..0000000 --- a/packages/frontend/src/old/Switchers/SwitcherOne.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from "react"; - -const SwitcherOne = () => -{ - const [ enabled, setEnabled ] = useState(false); - - return ( -
- -
- ); -}; - -export default SwitcherOne; diff --git a/packages/frontend/src/old/Switchers/SwitcherThree.tsx b/packages/frontend/src/old/Switchers/SwitcherThree.tsx deleted file mode 100644 index 3240efe..0000000 --- a/packages/frontend/src/old/Switchers/SwitcherThree.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useState } from "react"; - -const SwitcherThree = () => -{ - const [ enabled, setEnabled ] = useState(false); - - return ( -
- -
- ); -}; - -export default SwitcherThree; diff --git a/packages/frontend/src/old/Switchers/SwitcherTwo.tsx b/packages/frontend/src/old/Switchers/SwitcherTwo.tsx deleted file mode 100644 index 9131210..0000000 --- a/packages/frontend/src/old/Switchers/SwitcherTwo.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from "react"; - -const SwitcherTwo = () => -{ - const [ enabled, setEnabled ] = useState(false); - - return ( -
- -
- ); -}; - -export default SwitcherTwo; diff --git a/packages/frontend/src/old/TableSettings.tsx b/packages/frontend/src/old/TableSettings.tsx deleted file mode 100644 index 59b4466..0000000 --- a/packages/frontend/src/old/TableSettings.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react"; -import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs"; -import dataJSON from "../../public/data.json"; - -export const Table = ({ rows, deleteRow, editRow }) => -{ - const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_"))); - - return ( - -
- - - - - - - - - - - - - { rows.map((row: any, idx: number) => - { - - - return ( - - - - - - - - - - - ); - }) } - -
BondParamterCriterionValue to give alertAlert typeActions
{ row.id } - - { row.para } - - - - { row.criterion == 0 ? "goes down by" : row.criterion == 1 ? "goes up by" : row.criterion == 2 ? "is smaller than" : row.criterion == 3 ? "is greater than" : "is equal to" } - - { row.value } - - { row.type == 0 ? "Info" : row.type == 1 ? "Warning" : "Alert" } - - - - deleteRow(idx) }/> - - editRow(idx) }/> - - -
-
- - - ); -}; \ No newline at end of file diff --git a/packages/frontend/src/old/Tables.tsx b/packages/frontend/src/old/Tables.tsx deleted file mode 100644 index 6494094..0000000 --- a/packages/frontend/src/old/Tables.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// import TableOne from '../components/Tables/TableOne'; -// import TableThree from '../components/Tables/TableThree'; -// import TableTwo from '../components/Tables/TableTwo'; - -const Tables = () => -{ - return ( - <> -
- {/* - - */ } -
- - ); -}; - -export default Tables; diff --git a/packages/frontend/src/old/Tables/TableThree.tsx b/packages/frontend/src/old/Tables/TableThree.tsx deleted file mode 100644 index b420d1a..0000000 --- a/packages/frontend/src/old/Tables/TableThree.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { Package } from "../package"; - -const packageData: Package[] = [ - { - name: "Free package", - price: 0.0, - invoiceDate: `Jan 13,2023`, - status: "Paid", - }, - { - name: "Standard Package", - price: 59.0, - invoiceDate: `Jan 13,2023`, - status: "Paid", - }, - { - name: "Business Package", - price: 99.0, - invoiceDate: `Jan 13,2023`, - status: "Unpaid", - }, - { - name: "Standard Package", - price: 59.0, - invoiceDate: `Jan 13,2023`, - status: "Pending", - }, -]; - -const TableThree = () => -{ - return ( -
-
- - - - - - - - - - - - { packageData.map((packageItem, key) => ( - - - - - - - )) } - -
- Package - - Invoice date - - Status - - Actions -
-
- { packageItem.name } -
-

${ packageItem.price }

- 		-

- { packageItem.invoiceDate } -

- 		-

- { packageItem.status } -

- 		-
- - - -
-
-
-
- ); -}; - -export default TableThree; diff --git a/packages/frontend/src/old/Tables/TableTwo.tsx b/packages/frontend/src/old/Tables/TableTwo.tsx deleted file mode 100644 index 978ad2d..0000000 --- a/packages/frontend/src/old/Tables/TableTwo.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Product } from "../product"; -import ProductOne from "../../images/product/product-01.png"; -import ProductTwo from "../../images/product/product-02.png"; -import ProductThree from "../../images/product/product-03.png"; -import ProductFour from "../../images/product/product-04.png"; - -const productData: Product[] = [ - { - image: ProductOne, - name: "Apple Watch Series 7", - category: "Electronics", - price: 296, - sold: 22, - profit: 45, - }, - { - image: ProductTwo, - name: "Macbook Pro M1", - category: "Electronics", - price: 546, - sold: 12, - profit: 125, - }, - { - image: ProductThree, - name: "Dell Inspiron 15", - category: "Electronics", - price: 443, - sold: 64, - profit: 247, - }, - { - image: ProductFour, - name: "HP Probook 450", - category: "Electronics", - price: 499, - sold: 72, - profit: 103, - }, -]; - -const TableTwo = () => -{ - return ( -
-
-

- Top Products -

-
- -
-
-

Product Name

-
-
-

Category

-
-
-

Price

-
-
-

Sold

-
-
-

Profit

-
-
- - { productData.map((product, key) => ( -
-
-
-
- Product -
-

- { product.name } -

-
-
-
-

- { product.category } -

-
-
-

- ${ product.price } -

-
-
-

{ product.sold }

-
-
-

${ product.profit }

-
-
- )) } -
- ); -}; - -export default TableTwo; diff --git a/packages/frontend/src/old/UiElements/Alerts.tsx b/packages/frontend/src/old/UiElements/Alerts.tsx deleted file mode 100644 index ec4178e..0000000 --- a/packages/frontend/src/old/UiElements/Alerts.tsx +++ /dev/null @@ -1,102 +0,0 @@ -const Alerts = () => -{ - return ( - <> -
-
- {/* */ } -
-
- - - -
-
-
- Attention needed -
-

- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy - text ever since the 1500s, when -

-
-
- {/* */ } -
-
- - - -
-
-
- Message Sent Successfully -
-

- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. -

-
-
- {/* */ } -
-
- - - -
-
-
- There were 1 errors with your submission -
-
    -
  • - Lorem Ipsum is simply dummy text of the printing -
    • -
-
-
-
-
- - ); -}; - -export default Alerts; diff --git a/packages/frontend/src/old/UiElements/Buttons.tsx b/packages/frontend/src/old/UiElements/Buttons.tsx deleted file mode 100644 index f97c9ca..0000000 --- a/packages/frontend/src/old/UiElements/Buttons.tsx +++ /dev/null @@ -1,471 +0,0 @@ -import { Link } from "react-router-dom"; - - -const Buttons = () => -{ - return ( - <> - {/* */ } -
-
-

- Normal Button -

-
- -
-
- - Button - - - - Button - - - - Button - - - - Button - -
- -
- - Button - - - - Button - - - - Button - - - - Button - -
- -
- - Button - - - - Button - - - - Button - - - - Button - -
-
-
- - {/* */ } -
-
-

- Button With Icon -

-
- -
-
- - - - - - - - Button With Icon - - - - - - - - - - Button With Icon - - - - - - - - - - Button With Icon - - - - - - - - - - Button With Icon - -
- -
- - - - - - - - - Button With Icon - - - - - - - - - - - Button With Icon - - - - - - - - - - - Button With Icon - - - - - - - - - - - Button With Icon - -
- -
- - - - - - - - - - - - - - Button With Icon - - - - - - - - - - - - - - - - Button With Icon - - - - - - - - - - - - - - - - Button With Icon - - - - - - - - - - - - - - - - Button With Icon - -
-
-
- - ); -}; - -export default Buttons; diff --git a/packages/frontend/src/old/brand.ts b/packages/frontend/src/old/brand.ts deleted file mode 100644 index 498cfab..0000000 --- a/packages/frontend/src/old/brand.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type BRAND = { - logo: string; - name: string; - visitors: number; - revenues: string; - sales: number; - conversion: number; -}; diff --git a/packages/frontend/src/old/chat.ts b/packages/frontend/src/old/chat.ts deleted file mode 100644 index 3225cb3..0000000 --- a/packages/frontend/src/old/chat.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type Chat = { - avatar: string; - name: string; - text: string; - time: number; - textCount: number; - color: string; -}; diff --git a/packages/frontend/src/old/fireToast.tsx b/packages/frontend/src/old/fireToast.tsx deleted file mode 100644 index 1e9f6d9..0000000 --- a/packages/frontend/src/old/fireToast.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import toast from "react-hot-toast"; -import dataJSON from "../../public/data.json"; - -//TODO: rewrite -const createToast = (title: string, msg: string, type: number) => -{ - toast.custom((t) => ( - -
-
-
- -
-

- { title } -

-

- { msg } -

-
-
-
-
- - - -
-
- )); -}; -// let dataJSON: any; -// let headers = new Headers(); -// headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8000'); -// headers.append("Access-Control-Allow-Methods", 'POST'); -// headers.append("Access-Control-Allow-Headers", 'Content-Type, Authorization'); -// fetch("http://127.0.0.1:8000/data",{method:'POST',headers:headers}) -// .then(response => { -// return response -// }) -// .then(data => { -// console.log(data); -// dataJSON=data; -// }) -const fireToast = () => -{ - const alertSettings = localStorage.getItem("alertSettings"); - if (alertSettings) - { - for (const alertSetting of JSON.parse(alertSettings)) - { - console.log(alertSetting); - - const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value); - const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para; - if (alertSetting.id == "ALL") - { - Object.keys(dataJSON).map((id: string) => - { - const condition = alertSetting.criterion == "0" ? value <= -1 * dataJSON[ id ][ para ] : - alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] : - alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] : - value == dataJSON[ id ][ para ]; - const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ]; - if (condition) - { - const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`; - createToast(id, msg, alertSetting.type); - } - - - }, - ); - } - else - { - const id = alertSetting.id; - - const condition = alertSetting.criterion == "0" ? value >= -1 * dataJSON[ id ][ para ] : - alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] : - alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] : - value == dataJSON[ id ][ para ]; - const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ]; - - if (condition) - { - const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`; - createToast(id, msg, alertSetting.type); - } - } - } - - } -}; - -export default fireToast; diff --git a/packages/frontend/src/old/package.ts b/packages/frontend/src/old/package.ts deleted file mode 100644 index 6e2d922..0000000 --- a/packages/frontend/src/old/package.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type Package = { - name: string; - price: number; - invoiceDate: string; - status: string; -}; diff --git a/packages/frontend/src/old/product.ts b/packages/frontend/src/old/product.ts deleted file mode 100644 index c0b270c..0000000 --- a/packages/frontend/src/old/product.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type Product = { - image: string; - name: string; - category: string; - price: number; - sold: number; - profit: number; -}; diff --git a/packages/frontend/src/old/readme b/packages/frontend/src/old/readme deleted file mode 100644 index f8e5d21..0000000 --- a/packages/frontend/src/old/readme +++ /dev/null @@ -1 +0,0 @@ -this folder contains old unused files. remove before release! \ No newline at end of file diff --git a/packages/frontend/src/pages/Home.tsx b/packages/frontend/src/pages/Home.tsx index 7eabbe8..5deb29e 100644 --- a/packages/frontend/src/pages/Home.tsx +++ b/packages/frontend/src/pages/Home.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from 'react'; -import CardDataStats from '../old/CardDataStats'; import { useTranslation, Trans } from 'react-i18next'; import { Link } from 'react-router-dom'; import { TStatsResponse } from '../types/stats.ts'; import { WarningAlert } from '../components/mini/alerts/Warning.tsx'; +import { CardDataStats } from '../components/mini/util/CardDataStats.tsx'; export const Home: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/frontend/src/pages/log/Log.tsx b/packages/frontend/src/pages/log/Log.tsx index 2a22967..a39c4a0 100644 --- a/packages/frontend/src/pages/log/Log.tsx +++ b/packages/frontend/src/pages/log/Log.tsx @@ -3,10 +3,10 @@ import { useParams } from 'react-router-dom'; import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx'; import { WarningAlert } from '../../components/mini/alerts/Warning.tsx'; import { useTranslation } from 'react-i18next'; -import { PageTitle } from '../../components/mini/util/PageTitle.tsx'; import { TLogResponse, TLogStationData, TLogTrainData } from '../../types/log.ts'; import { StationLog } from '../../components/pages/log/StationLog.tsx'; import { TrainLog } from '../../components/pages/log/TrainLog.tsx'; +import { PageMeta } from '../../components/mini/util/PageMeta.tsx'; export const Log = () => { const { id } = useParams(); @@ -41,20 +41,26 @@ export const Log = () => { {/* LOADING */} {error === 0 && } {/* NOT FOUND */} - {error === 2 && } + {error === 2 && } {error === 2 && } - {/* BLACKLISTED PROFILE */} - {error === 3 && } + {/* BLACKLISTED LOG */} + {error === 3 && } {error === 3 && } {/* SUCCESS */} - {error === 1 && stationData && } + {error === 1 && stationData && } {error === 1 && stationData && < StationLog data={stationData} />} - {error === 1 && trainData && } + {error === 1 && trainData && } {error === 1 && trainData && < TrainLog data={trainData} />} ); diff --git a/packages/frontend/src/pages/profile/Profile.tsx b/packages/frontend/src/pages/profile/Profile.tsx index d9a9778..a2ee699 100644 --- a/packages/frontend/src/pages/profile/Profile.tsx +++ b/packages/frontend/src/pages/profile/Profile.tsx @@ -1,26 +1,22 @@ -import { useEffect, useState } from "react"; -import { useParams } from "react-router-dom"; -import { TProfileData, TProfileResponse } from "../../types/profile.ts"; -import { ContentLoader } from "../../components/mini/loaders/ContentLoader.tsx"; -import { WarningAlert } from "../../components/mini/alerts/Warning.tsx"; -import { ProfileCard } from "../../components/pages/profile/Profile.tsx"; -import { useTranslation } from "react-i18next"; -import { PageTitle } from "../../components/mini/util/PageTitle.tsx"; +import { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { TProfileData, TProfileResponse } from '../../types/profile.ts'; +import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx'; +import { WarningAlert } from '../../components/mini/alerts/Warning.tsx'; +import { ProfileCard } from '../../components/pages/profile/Profile.tsx'; +import { useTranslation } from 'react-i18next'; +import { PageMeta } from '../../components/mini/util/PageMeta.tsx'; -export const Profile = () => -{ +export const Profile = () => { const { id } = useParams(); - const [ error, setError ] = useState<0 | 1 | 2 | 3>(0); - const [ data, setData ] = useState(undefined!); + const [error, setError] = useState<0 | 1 | 2 | 3>(0); + const [data, setData] = useState(undefined!); - useEffect(() => - { - fetch(`${ import.meta.env.VITE_API_URL }/profiles/${ id }`).then(x => x.json()).then((data: TProfileResponse) => - { - switch (data.code) - { + useEffect(() => { + fetch(`${import.meta.env.VITE_API_URL}/profiles/${id}`).then(x => x.json()).then((data: TProfileResponse) => { + switch (data.code) { case 404: setError(2); break; @@ -38,21 +34,26 @@ export const Profile = () => const { t } = useTranslation(); return ( - <> - {/* LOADING */ } - { error === 0 && } - {/* NOT FOUND */ } - { error === 2 && } - { error === 2 && } - {/* BLACKLISTED PROFILE */ } - { error === 3 && } - { error === 3 && } - {/* SUCCESS */ } - { error === 1 && } - { error === 1 && } - + <> + {/* LOADING */} + {error === 0 && } + {/* NOT FOUND */} + {error === 2 && } + {error === 2 && } + {/* BLACKLISTED PROFILE */} + {error === 3 && } + {error === 3 && } + {/* SUCCESS */} + {error === 1 && } + {error === 1 && } + ); }; diff --git a/src/http/views/leaderboard/index.ejs b/src/http/views/leaderboard/index.ejs deleted file mode 100644 index fa5596b..0000000 --- a/src/http/views/leaderboard/index.ejs +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'leaderboard' }) %> - -

Tablica wyników

-
- - - - - -

Użyj przecinka, aby wyszukać wiele wartości: pl2,Łazy

- -
-
-
    - <% records.forEach(record=> { %> -
  • - <%- type === 'train' ? include('train.ejs', { record, msToTime }) : include('station.ejs', { record, msToTime }) %> -
    • - <% }) %> -
- - <% if (!records.length) { %> -

Nie znaleziono wyników dla twojego zapytania.

- <% } %> - - - -
- -

Dane do rankingu zbierane są od dnia 19.08.2024.

- - <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - \ No newline at end of file diff --git a/src/http/views/profiles/index.ejs b/src/http/views/profiles/index.ejs deleted file mode 100644 index d30718e..0000000 --- a/src/http/views/profiles/index.ejs +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'profiles' }) %> - -
-

<%= steam.personaname %>

- - - <%if (steamStats.stats) {%> -
- Statystyki Steam -

Zdobyte punkty: <%= steamStats.stats.find(x => x.name === 'SCORE')?.value ?? "0" %>

-

Przejechane kilometry: <%= (steamStats.stats.find(x => x.name === 'DISTANCE_M')?.value / 1000) ?? "0" %>

-

Czas spędzony jako dyżurny ruchu: <%= msToTime((steamStats.stats.find(x => x.name === 'DISPATCHER_TIME')?.value ?? 0)*1_000_000, true) || 'Nigdy nie wszedł w tryb dyżurnego ruchu.' %>

-
-

UWAGA: powyższe statystyki udostępnia platforma STEAM, mogą one być z łatwością manipulowane.

- -
- <%}%> - - -

Statystyki pociągów

- <% if (player.trainTime) {%> -

Spędzony czas: <%= msToTime(player.trainTime) %>

-

Przejechane kilometry: <%= player.trainDistance / 1000 %>km

-

Zdobyte punkty: <%= player.trainPoints %>

-

Średnia prędkość: <%= ((player.trainDistance / (player.trainTime / 1000)) * 3.6).toFixed(2) %> km/h

- <%}%> - <% if (player.trainStats && Object.keys(player.trainStats).length) {%> -
    - <% Object.keys(player.trainStats).forEach(name => {%> -
  • -
    - <%= name %> -

    Przejechany dystans: <%= player.trainStats[name].distance / 1000 %>km

    -

    Spędzony czas: <%= msToTime(player.trainStats[name].time, true) %>

    -

    Zdobyte punkty: <%= player.trainStats[name].score %>

    -

    Średnia prędkość: <%= ((player.trainStats[name].distance / (player.trainStats[name].time / 1000)) * 3.6).toFixed(2) %> km/h

    -
    -
    • - - <% }) %> -
- <%} else {%> -

Brak danych

- <%}%> - -

Statystyki posterunków

- <% if (player.dispatcherTime) {%> -

Spędzony czas: <%= msToTime(player.dispatcherTime) %>

- <%}%> - <% if (player.dispatcherStats && Object.keys(player.dispatcherStats).length) {%> -
    - <% Object.keys(player.dispatcherStats).forEach(name => {%> -
  • -
    - <%= name %> -

    Spędzony czas: <%= msToTime(player.dispatcherStats[name].time, true) %>

    -
    -
    • - - <% }) %> -
- <%} else {%> -

Brak danych

- <%}%> - -
-

-
-
-

Dane do rankingu zbierane są od dnia 19.08.2024.

- <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - - \ No newline at end of file diff --git a/src/http/views/stations/details.ejs b/src/http/views/stations/details.ejs deleted file mode 100644 index 4c0a163..0000000 --- a/src/http/views/stations/details.ejs +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'stations' }) %> - -
- -

Użytkownik: - <%= record.userUsername %> -

-

Stacja: <%= record.stationName %> -

-

Serwer: <%= record.server.toUpperCase() %> -

-

Data wejścia: <%= record.joinedDate ? dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') : '--:-- --/--/--' - %> (<%= record.joinedDate ? dayjs(record.joinedDate).fromNow() : '--' %>)

-

Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= dayjs(record.leftDate).fromNow() - %>)

-

Spędzony czas: <%= record.joinedDate ? msToTime(record.leftDate - record.joinedDate, true) : '--' %> -

- -
- ;station: <%= record.stationName %> - ;steam: <%= record.userSteamId %> - ;server: <%= record.server %> - ;name: <%= record.userUsername %> - ;joined: <%=record.joinedDate ? dayjs(record.joinedDate).format() : 'no-data'%> - ;left: <%=dayjs(record.leftDate).format()%> - ;url: https://simrail.alekswilc.dev/stations/details/<%= record.id %>/ - -
-

- - - -
-
- <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - - \ No newline at end of file diff --git a/src/http/views/stations/index.ejs b/src/http/views/stations/index.ejs deleted file mode 100644 index 56af4d1..0000000 --- a/src/http/views/stations/index.ejs +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'stations' }) %> - -

Wyszukaj posterunek, osobe lub serwer

- -
- - - - -

Użyj przecinka, aby wyszukać wiele wartości: pl2,Łazy

-
- -
    - <% records.forEach(record=> { %> -
  • -
    - [ - <%= record.server.toUpperCase() %> - ] - <%= record.stationName %> - - - <%= record.userUsername %> - -

    - <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> -

    -     -

    Data dołączenia: <%= record.joinedDate ? dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') - : '--:-- --/--/--' %> (<%= record.joinedDate ? dayjs(record.joinedDate).fromNow() : '--' %>) -

    -

    Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= - dayjs(record.leftDate).fromNow() %>)

    -

    Spędzony czas: <%= record.joinedDate ? msToTime(record.leftDate - record.joinedDate) : '--' %> -

    - - - - -
    -
    • - <% }) %> -
- - <% if (!records.length) { %> -

Nie znaleziono wyników dla twojego zapytania.

- <% } %> - -
- <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - - - - \ No newline at end of file diff --git a/src/http/views/trains/details.ejs b/src/http/views/trains/details.ejs deleted file mode 100644 index 3811f7b..0000000 --- a/src/http/views/trains/details.ejs +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'trains' }) %> - -
- -

Użytkownik: - <%= record.userUsername %> -

- -

Pociąg: <%= record.trainName %> <%= record.trainNumber %> -

-

Data wejścia: <%= record.joinedDate ? dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') : '--:-- --/--/--' - %> (<%= record.joinedDate ? dayjs(record.joinedDate).fromNow() : '--' %>)

-

Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= dayjs(record.leftDate).fromNow() - %>)

-

Spędzony czas: <%= record.joinedDate ? msToTime(record.leftDate - record.joinedDate, true) : '--' %> -

- <% if (record.distance) { %> -

Przejechane kilometry: <%= record.distance / 1000 %>

-

Zdobyte punkty: <%= record.points %>

-

Średnia prędkość: <%= ((record.distance / ((record.leftDate - record.joinedDate) / 1000)) * 3.6).toFixed(2) %> km/h

- <% } %> -

- -
- ;train: <%= record.trainNumber %> - ;steam: <%= record.userSteamId %> - ;server: <%= record.server %> - ;name: <%= record.userUsername %> - ;joined: <%=record.joinedDate ? dayjs(record.joinedDate).format() : 'no-data'%> - ;left: <%=dayjs(record.leftDate).format()%><%if (record.distance) {%> - ;distance: <%= record.distance / 1000 %> - ;points: <%= record.points %><%}%> - ;url: https://simrail.alekswilc.dev/trains/details/<%= record.id %>/ - -
-

- - - -
-
- <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - - \ No newline at end of file diff --git a/src/http/views/trains/index.ejs b/src/http/views/trains/index.ejs deleted file mode 100644 index f868d64..0000000 --- a/src/http/views/trains/index.ejs +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - simrail.alekswilc.dev - - - - - - - - - - - - - <%- include('../_modules/header.ejs', { section: 'trains' }) %> - -

Wyszukaj pociąg, osobe lub serwer

- -
- - - - -

Użyj przecinka, aby wyszukać wiele wartości: pl2,1413

-
- -
    - <% records.forEach(record=> { %> -
  • -
    - [ - <%= record.server.toUpperCase() %> - ] - <%= record.trainName %> - - - <%= record.trainNumber %> - - - <%= record.userUsername %> - -

    - <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> -

    -     -

    Data dołączenia: <%= record.joinedDate ? dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') - : '--:-- --/--/--' %> (<%= record.joinedDate ? dayjs(record.joinedDate).fromNow() : '--' %>) -

    -

    Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= - dayjs(record.leftDate).fromNow() %>)

    -

    Spędzony czas: <%= record.joinedDate ? msToTime(record.leftDate - record.joinedDate) : '--' %> - <% if (record.distance) { %> -

    Przejechane kilometry: <%= record.distance / 1000 %>

    -

    Zdobyte punkty: <%= record.points %>

    - <% } %> -

    - - - - -
    -
    • - <% }) %> -
- - <% if (!records.length) { %> -

Nie znaleziono wyników dla twojego zapytania.

- <% } %> - -
- <%- include('../_modules/footer.ejs', { thanks: false, version, commit }) %> - - - - - - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 545c040..05fd991 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1722,6 +1722,13 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@~2.0.1, inherits@~2.0.3: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + ipaddr.js@1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3" @@ -1875,7 +1882,7 @@ lodash@^4.17.21: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -2318,6 +2325,20 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.2" +react-fast-compare@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" + integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== + +react-helmet-async@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec" + integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg== + dependencies: + invariant "^2.2.4" + react-fast-compare "^3.2.2" + shallowequal "^1.1.0" + react-hot-toast@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994" @@ -2565,6 +2586,11 @@ setprototypeof@1.2.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"