From 6c18cc6336490ce9db20e9da24ab72ee7a223980 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Wed, 7 Dec 2022 00:31:33 +0100 Subject: [PATCH] react-sidebar-v1-master --- package-lock.json | 76 +++++++++++++++++++ package.json | 2 + src/App.css | 20 +++++ src/App.test.tsx | 9 --- src/App.tsx | 39 ++++------ src/components/Data.tsx | 20 +++++ src/components/{Navbar.ts => Navbar.tsx} | 6 +- src/components/SidebarData.ts | 43 ----------- src/components/SidebarData.tsx | 25 ++++++ src/pages/Flights.tsx | 9 +++ src/pages/Home.js | 11 --- src/pages/Home.tsx | 9 +++ src/pages/Products.js | 11 --- src/pages/Reports.js | 11 --- src/pages/Seasons.tsx | 9 +++ .../src/components/Navbar.css | 72 ------------------ .../src/components/Navbar.js | 46 ----------- .../src/components/SidebarData.js | 43 ----------- .../react-sidebar-v1-master/src/pages/Home.js | 11 --- .../src/pages/Products.js | 11 --- .../src/pages/Reports.js | 11 --- 21 files changed, 187 insertions(+), 307 deletions(-) delete mode 100644 src/App.test.tsx create mode 100644 src/components/Data.tsx rename src/components/{Navbar.ts => Navbar.tsx} (96%) delete mode 100644 src/components/SidebarData.ts create mode 100644 src/components/SidebarData.tsx create mode 100644 src/pages/Flights.tsx delete mode 100644 src/pages/Home.js delete mode 100644 src/pages/Products.js delete mode 100644 src/pages/Reports.js create mode 100644 src/pages/Seasons.tsx delete mode 100644 thirdParty/react-sidebar-v1-master/src/components/Navbar.css delete mode 100644 thirdParty/react-sidebar-v1-master/src/components/Navbar.js delete mode 100644 thirdParty/react-sidebar-v1-master/src/components/SidebarData.js delete mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Home.js delete mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Products.js delete mode 100644 thirdParty/react-sidebar-v1-master/src/pages/Reports.js diff --git a/package-lock.json b/package-lock.json index 5231166..01d1a59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ "natural-orderby": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", + "react-router-dom": "^6.4.4", "react-scripts": "^5.0.1", "react-table": "^7.8.0", "typescript": "^4.9.3", @@ -3028,6 +3030,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz", + "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13956,6 +13966,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -13969,6 +13987,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz", + "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==", + "dependencies": { + "@remix-run/router": "1.0.4" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz", + "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==", + "dependencies": { + "@remix-run/router": "1.0.4", + "react-router": "6.4.4" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -18821,6 +18869,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz", + "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26594,6 +26647,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26604,6 +26663,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz", + "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==", + "requires": { + "@remix-run/router": "1.0.4" + } + }, + "react-router-dom": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz", + "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==", + "requires": { + "@remix-run/router": "1.0.4", + "react-router": "6.4.4" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index b2d88f8..526ab42 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "natural-orderby": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", + "react-router-dom": "^6.4.4", "react-scripts": "^5.0.1", "react-table": "^7.8.0", "typescript": "^4.9.3", diff --git a/src/App.css b/src/App.css index 4c9169e..b3072e1 100644 --- a/src/App.css +++ b/src/App.css @@ -37,6 +37,26 @@ } } +@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Lato', sans-serif; +} + +.home, +.flights, +.seasons { + display: flex; + height: 90vh; + align-items: center; + justify-content: center; + font-size: 3rem; +} + + .sort-button { background-color: transparent; border: none; diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index 1e37044..3645e0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,25 @@ import React from "react"; import "./App.css"; -import FlightsTable from "./components/FlightsTable"; -import SeasonTable from "./components/SeasonTable"; -import {groupByMap} from './global/tools'; -import flights from './data/HoPe_all_flights.json'; -import {CFlight} from './classes/CFlight'; -import {CSeason} from './classes/CSeason'; +import Navbar from './components/Navbar'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import Home from './pages/Home'; +import Flights from './pages/Flights'; +import Seasons from './pages/Seasons'; -const data_raw = flights.data; -const data: CFlight[] = []; -const seasondata: CSeason[] = []; -for (let fl of data_raw) -{ - data.push(new CFlight(fl)); -} - -const seasondata_raw = groupByMap(data, i => i.FKSeason); - -for (let [key, value] of seasondata_raw) -{ - seasondata.push(new CSeason(key, value)); -} export default function App() { return( -
- - -
+ <> + + + + } /> + } /> + } /> + + + ); } diff --git a/src/components/Data.tsx b/src/components/Data.tsx new file mode 100644 index 0000000..84edd14 --- /dev/null +++ b/src/components/Data.tsx @@ -0,0 +1,20 @@ +import flights from '../data/HoPe_all_flights.json'; +import {CFlight} from '../classes/CFlight'; +import {CSeason} from '../classes/CSeason'; +import {groupByMap} from '../global/tools'; + +const data_raw = flights.data; +export const g_data: CFlight[] = []; +export const g_seasondata: CSeason[] = []; + +for (let fl of data_raw) +{ + g_data.push(new CFlight(fl)); +} + +const seasondata_raw = groupByMap(g_data, i => i.FKSeason); + +for (let [key, value] of seasondata_raw) +{ + g_seasondata.push(new CSeason(key, value)); +} diff --git a/src/components/Navbar.ts b/src/components/Navbar.tsx similarity index 96% rename from src/components/Navbar.ts rename to src/components/Navbar.tsx index b8a3e08..1e8eced 100644 --- a/src/components/Navbar.ts +++ b/src/components/Navbar.tsx @@ -6,7 +6,7 @@ import { SidebarData } from './SidebarData'; import './Navbar.css'; import { IconContext } from 'react-icons'; -function Navbar() +export default function Navbar() { const [sidebar, setSidebar] = useState(false); @@ -42,6 +42,4 @@ function Navbar() ); -} - -export default Navbar; +} \ No newline at end of file diff --git a/src/components/SidebarData.ts b/src/components/SidebarData.ts deleted file mode 100644 index 3a29732..0000000 --- a/src/components/SidebarData.ts +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import * as FaIcons from 'react-icons/fa'; -import * as AiIcons from 'react-icons/ai'; -import * as IoIcons from 'react-icons/io'; - -export const SidebarData = [ - { - title: 'Home', - path: '/', - icon: , - cName: 'nav-text' - }, - { - title: 'Reports', - path: '/reports', - icon: , - cName: 'nav-text' - }, - { - title: 'Products', - path: '/products', - icon: , - cName: 'nav-text' - }, - { - title: 'Team', - path: '/team', - icon: , - cName: 'nav-text' - }, - { - title: 'Messages', - path: '/messages', - icon: , - cName: 'nav-text' - }, - { - title: 'Support', - path: '/support', - icon: , - cName: 'nav-text' - } -]; diff --git a/src/components/SidebarData.tsx b/src/components/SidebarData.tsx new file mode 100644 index 0000000..573fd3e --- /dev/null +++ b/src/components/SidebarData.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import * as FaIcons from 'react-icons/fa'; +import * as AiIcons from 'react-icons/ai'; +import * as IoIcons from 'react-icons/io'; + +export const SidebarData = [ + { + title: 'Home', + path: '/', + icon: , + cName: 'nav-text' + }, + { + title: 'Flights', + path: '/flights', + icon: , + cName: 'nav-text' + }, + { + title: 'Seasons', + path: '/seasons', + icon: , + cName: 'nav-text' + } +]; diff --git a/src/pages/Flights.tsx b/src/pages/Flights.tsx new file mode 100644 index 0000000..dfd6fa5 --- /dev/null +++ b/src/pages/Flights.tsx @@ -0,0 +1,9 @@ +import React from "react"; +import {g_data} from '../components/Data'; +import FlightsTable from "../components/FlightsTable"; + +export default function Flights() { + return ( + + ); +} diff --git a/src/pages/Home.js b/src/pages/Home.js deleted file mode 100644 index 24222d3..0000000 --- a/src/pages/Home.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Home() { - return ( -
-

Home

-
- ); -} - -export default Home; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e69de29..5a1a6b2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function Home() { + return ( +
+

HOME

+
+ ); +} diff --git a/src/pages/Products.js b/src/pages/Products.js deleted file mode 100644 index 4a4467b..0000000 --- a/src/pages/Products.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Products() { - return ( -
-

Products

-
- ); -} - -export default Products; diff --git a/src/pages/Reports.js b/src/pages/Reports.js deleted file mode 100644 index 8c61abc..0000000 --- a/src/pages/Reports.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Reports() { - return ( -
-

Reports

-
- ); -} - -export default Reports; diff --git a/src/pages/Seasons.tsx b/src/pages/Seasons.tsx new file mode 100644 index 0000000..fa58621 --- /dev/null +++ b/src/pages/Seasons.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import {g_seasondata} from '../components/Data'; +import SeasonTable from "../components/SeasonTable"; + +export default function Seasons() { + return ( + + ); +} \ No newline at end of file diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.css b/thirdParty/react-sidebar-v1-master/src/components/Navbar.css deleted file mode 100644 index 2876737..0000000 --- a/thirdParty/react-sidebar-v1-master/src/components/Navbar.css +++ /dev/null @@ -1,72 +0,0 @@ -.navbar { - background-color: #060b26; - height: 80px; - display: flex; - justify-content: start; - align-items: center; -} - -.menu-bars { - margin-left: 2rem; - font-size: 2rem; - background: none; -} - -.nav-menu { - background-color: #060b26; - width: 250px; - height: 100vh; - display: flex; - justify-content: center; - position: fixed; - top: 0; - left: -100%; - transition: 850ms; -} - -.nav-menu.active { - left: 0; - transition: 350ms; -} - -.nav-text { - display: flex; - justify-content: start; - align-items: center; - padding: 8px 0px 8px 16px; - list-style: none; - height: 60px; -} - -.nav-text a { - text-decoration: none; - color: #f5f5f5; - font-size: 18px; - width: 95%; - height: 100%; - display: flex; - align-items: center; - padding: 0 16px; - border-radius: 4px; -} - -.nav-text a:hover { - background-color: #1a83ff; -} - -.nav-menu-items { - width: 100%; -} - -.navbar-toggle { - background-color: #060b26; - width: 100%; - height: 80px; - display: flex; - justify-content: start; - align-items: center; -} - -span { - margin-left: 16px; -} diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.js b/thirdParty/react-sidebar-v1-master/src/components/Navbar.js deleted file mode 100644 index 525ccc7..0000000 --- a/thirdParty/react-sidebar-v1-master/src/components/Navbar.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useState } from 'react'; -import * as FaIcons from 'react-icons/fa'; -import * as AiIcons from 'react-icons/ai'; -import { Link } from 'react-router-dom'; -import { SidebarData } from './SidebarData'; -import './Navbar.css'; -import { IconContext } from 'react-icons'; - -function Navbar() { - const [sidebar, setSidebar] = useState(false); - - const showSidebar = () => setSidebar(!sidebar); - - return ( - <> - -
- - - -
- - - - ); -} - -export default Navbar; diff --git a/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js b/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js deleted file mode 100644 index 3a29732..0000000 --- a/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import * as FaIcons from 'react-icons/fa'; -import * as AiIcons from 'react-icons/ai'; -import * as IoIcons from 'react-icons/io'; - -export const SidebarData = [ - { - title: 'Home', - path: '/', - icon: , - cName: 'nav-text' - }, - { - title: 'Reports', - path: '/reports', - icon: , - cName: 'nav-text' - }, - { - title: 'Products', - path: '/products', - icon: , - cName: 'nav-text' - }, - { - title: 'Team', - path: '/team', - icon: , - cName: 'nav-text' - }, - { - title: 'Messages', - path: '/messages', - icon: , - cName: 'nav-text' - }, - { - title: 'Support', - path: '/support', - icon: , - cName: 'nav-text' - } -]; diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Home.js b/thirdParty/react-sidebar-v1-master/src/pages/Home.js deleted file mode 100644 index 24222d3..0000000 --- a/thirdParty/react-sidebar-v1-master/src/pages/Home.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Home() { - return ( -
-

Home

-
- ); -} - -export default Home; diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Products.js b/thirdParty/react-sidebar-v1-master/src/pages/Products.js deleted file mode 100644 index 4a4467b..0000000 --- a/thirdParty/react-sidebar-v1-master/src/pages/Products.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Products() { - return ( -
-

Products

-
- ); -} - -export default Products; diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Reports.js b/thirdParty/react-sidebar-v1-master/src/pages/Reports.js deleted file mode 100644 index 8c61abc..0000000 --- a/thirdParty/react-sidebar-v1-master/src/pages/Reports.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function Reports() { - return ( -
-

Reports

-
- ); -} - -export default Reports;