Add frontend base components

ssa-frontend/secret_service_archive/package.json

@@ -12,7 +12,9 @@
     "@types/react-dom": "^18.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-widgets": "^5.8.4",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },

ssa-frontend/secret_service_archive/src/App.tsx

 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import { Header } from './components/Header';
-import { NavBar } from './components/Navbar';
 import { Main } from './components/Main';
 import { Footer } from './components/Footer';
 
@@ -10,7 +8,6 @@ function App() {
   return (
     <div className="App">
         <Header/>
-        <NavBar/>
         <Main/>
         <Footer/>
     </div>

ssa-frontend/secret_service_archive/src/components/Agent.tsx

+export function Agent() {
+    return(
+        <div>
+            <h2>Šakal šakalovič, český skaut a lámač ženských sŕdc</h2>
+            <h4>Missions</h4>
+            <ul>
+                <li>Bobrík červený</li>
+                <li>Bobrík hnedý</li>
+                <li>Bobrík nepamäti</li>
+            </ul>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/AgentsList.tsx

+export function AgentsList () {
+    return(
+        <div>
+            <ul>
+                <li>Janko</li>
+                <li>Vanko</li>
+                <li>KAko</li>
+                <li>Kapo</li>
+                <li>Šakal Šakalovič český skaut a lámač ženských sŕdc</li>
+            </ul>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Base.tsx

+export function Base () {
+    return(
+        <div>
+            <h2>Welcome to Secret Service Archive</h2>
+            <h5>Please Log In to continue</h5>
+            <p>
+                Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Curabitur bibendum justo non orci. Nunc tincidunt ante vitae massa. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Fusce nibh. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Fusce nibh. Nam quis nulla. Donec vitae arcu. Suspendisse nisl. Nunc tincidunt ante vitae massa. Mauris tincidunt sem sed arcu. Phasellus faucibus molestie nisl. Curabitur sagittis hendrerit ante. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+                Fusce consectetuer risus a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In rutrum. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Quisque porta. Aliquam erat volutpat. Quisque tincidunt scelerisque libero. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla non lectus sed nisl molestie malesuada. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nulla non arcu lacinia neque faucibus fringilla. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc tincidunt ante vitae massa. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Etiam neque.
+            </p>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Content.tsx

+export function Content(){
+    return(
+        <div></div>
+    )
+}// import { Home } from './Home';
+// import { Agent } from './Agent';
+// import { AgentList } from './AgentsList';
+// import { Mission } from './Mission';
+// import { MissionsList } from './MissionsList';
+// import { FindAgent } from './FindAvailableAgents';
+
+
+// interface IContentProps{
+//     whatToShow: string
+// }
+
+// export function Content(props: IContentProps) {
+
+//     switch (props.whatToShow) {
+//         case "Agent":
+//             return(
+//                 <div>
+//                     <Agent/>
+//                 </div>
+//             )
+//             break;
+//         case "AgentsList":
+//             return(
+//                 <div>
+//                     <AgentList/>
+//                 </div>
+//             )            
+//             break;
+//         case "Mission":
+//             return(
+//                 <div>
+//                     <Mission/>
+//                 </div>
+//             )            
+//             break;
+//         case "MissionsList":
+//             return(
+//                 <div>
+//                     <MissionsList/>
+//                 </div>
+//             )            
+//             break;
+//         case "FindAgent":
+//             return(
+//                 <div>
+//                     <FindAgent/>
+//                 </div>
+//             )            
+//             break;
+    
+//         default:
+//             return(
+//                 <div>
+//                     <Home/>
+//                 </div>
+//             )
+//             break;
+//     }
+// }
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/FindAvailableAgents.tsx

+import Combobox from "react-widgets/Combobox";
+
+export function FindAvailableAgents() {
+    return(
+        <div>
+            <input placeholder="napis sem nieco ty kekekt"></input>
+            <Combobox 
+                hideCaret
+                hideEmptyPopup
+                data={["Nigger", "Chad", "Belize", "Tramtaria", "Kekistan", "Bobri vrch", "Normandia"]}
+                placeholder="Choose a country"/>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Home.tsx

+interface IHomeProps{
+    userName: string
+}
+
+
+export function Home (props: IHomeProps) {
+    return(
+        <div>
+            <h4>Welcome { props.userName } to Secret Service Archive</h4>
+            <p>Pellentesque arcu. Suspendisse nisl. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Praesent dapibus. Maecenas sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Curabitur bibendum justo non orci. Ut tempus purus at lorem. Vestibulum fermentum tortor id mi. Nulla pulvinar eleifend sem. Praesent id justo in neque elementum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean id metus id velit ullamcorper pulvinar.
+                Morbi scelerisque luctus velit. Mauris metus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Mauris dictum facilisis augue. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nulla non arcu lacinia neque faucibus fringilla. Aliquam ornare wisi eu metus. Fusce nibh. Integer imperdiet lectus quis justo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Phasellus faucibus molestie nisl.
+               Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. In enim a arcu imperdiet malesuada. Nullam sit amet magna in magna gravida vehicula. Vivamus luctus egestas leo. Duis pulvinar. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Integer imperdiet lectus quis justo. Aenean vel massa quis mauris vehicula lacinia. Etiam egestas wisi a erat. Praesent id justo in neque elementum ultrices. Duis condimentum augue id magna semper rutrum. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.
+            </p>
+
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/LogIn.tsx

+import { Component } from 'react';
+import { Roles, Main } from "./Main";
+
+interface ILogInProps{
+    main: Main
+}
+
+interface ILogInState{
+    email: string,
+    password: string,
+}
+
+export class LogIn extends Component<ILogInProps, ILogInState>{
+    constructor(props: ILogInProps){
+        super(props);
+        this.state = {
+            email: "",
+            password: ""
+        }
+        this.onLogInClick = this.onLogInClick.bind(this)
+    }
+
+    onLogInClick() {
+        // TODO login function
+        this.props.main.setState( () => ({
+            userId: 0, userRole: Roles.Operator, loggedIn: true 
+        }));
+    }
+
+    render(){
+        // this.props.main.setState(() => ({userRole: Roles.Operator}));
+        // console.log(this.props.main.state.userRole)
+        return(
+            <div>
+                <h2>Pls LogIn dementore</h2>
+                <p>email:</p>
+                <input type="email"
+                onChange={ event => this.setState({ email: event.target.value })}/>
+                <p>password</p>
+                <input type="password"
+                onChange={ event => this.setState({ password: event.target.value })}/>
+                <button onClick={ this.onLogInClick }>Log In</button>
+            </div>
+        )
+    }
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Main.tsx

 import {Component} from 'react';
+import { NavBar } from "./Navbar"
+import { LogIn } from './LogIn';
+import { Home } from './Home';
+import { Base } from './Base';
+import { MissionsList } from'./MissionsList';
+import { AgentsList } from './AgentsList';
+import { FindAvailableAgents } from './FindAvailableAgents';
+import { Agent } from './Agent';
+import { Mission } from './Mission';
+
+import { Route, Routes } from "react-router-dom";
+
+export enum Roles{
+    User,
+    Operator
+
+}
+
+interface IMainState{
+    loggedIn: boolean;
+    userId?: number;
+    userRole?: Roles;
+}
+
+interface IMainProps{
+
+}
+
+export class Main extends Component<IMainProps, IMainState>{
+    constructor(props: IMainProps){
+        super(props);
+        this.state = {
+            loggedIn : false,
+            userId: undefined,
+            userRole: undefined
+        }
+    }
 
-export class Main extends Component{
     render(){
         return(
             <div>
-                <h6>First Paragraph</h6>
-                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam quis quam. Nulla est. Aliquam ante. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Aliquam erat volutpat. Curabitur bibendum justo non orci. Vivamus luctus egestas leo. In dapibus augue non sapien. Mauris tincidunt sem sed arcu. Etiam neque. Vivamus ac leo pretium faucibus. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Suspendisse nisl.
-
-                </p>
-                <h6>Second Paragraph</h6>
-                <p>In convallis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam bibendum elit eget erat. Nullam at arcu a est sollicitudin euismod. Aliquam id dolor. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Duis risus. Pellentesque ipsum. Integer in sapien. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas aliquet accumsan leo. In enim a arcu imperdiet malesuada. Donec vitae arcu. Nulla non arcu lacinia neque faucibus fringilla. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Donec quis nibh at felis congue commodo. Et harum quidem rerum facilis est et expedita distinctio. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.
-
-                </p>
+                <NavBar loggedIn={ false }/>
+                <Routes>
+                    <Route path="/login" element={ <LogIn main={ this }/> }/>
+                    <Route path="/" element={ <Base /> }/>
+                    <Route path="/home" element={ <Home userName="Jozin"/> }/>
+                    <Route path="/agents" element={ <AgentsList/> }/>
+                    <Route path="/missions" element={ <MissionsList/> }/>
+                    <Route path="/findAgent" element={ <FindAvailableAgents/> }/>
+                    <Route path="mission/:id" element={ <Mission />} />
+                    <Route path="agent/:id" element={ <Agent />} />
+                </Routes>
             </div>
         )
+        // if (!this.state.loggedIn) {
+        //     return(
+        //         <div>
+        //             <LogIn main={ this }/>
+        //         </div>
+        //     )
+        // } else {
+        //     return(
+        //         <div>
+        //             <NavBar main= { this }/>
+        //             <Content/>
+        //         </div>
+        //     )
+        // }
     }
 }
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Mission.tsx

+export function Mission() {
+    return(
+        <div>
+            <h2>Cleansing the country</h2>
+            <h4>Nigger</h4>
+            <ul>
+                <li>Johnz</li>
+                <li>Bony</li>
+                <li>Klajd</li>
+            </ul>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/MissionsList.tsx

+export function MissionsList () {
+    return(
+        <div>
+            <ul>
+                <li>Finish him</li>
+                <li>Dokonalé Éčko</li>
+                <li>Put it all the .... </li>
+                <li>Fake summer vacation</li>
+                <li>Bobrík z pripravovania táborov is beeter than no bobrík a dokončená java</li>
+            </ul>
+        </div>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Navbar.tsx

 import { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Main } from './Main';
+
+interface INavBarProps{
+    loggedIn: boolean
+}
+
+interface INavBarState{
+
+}
+
+export class NavBar extends Component<INavBarProps, INavBarState>{
+    constructor(props: INavBarProps){
+        super(props);
+        this.state = {
+        }
+        this.onLogOut = this.onLogOut.bind(this);
+    }
+
+    onLogOut(){
+    }
 
-export class NavBar extends Component{
     render(){
         return(
             <div className="navigationBar">
-                <button>Agents</button>
-                <button>Missions</button>
-                <button>Dalsie keky</button>
+                <Link to="/login">Login</Link>
+                    <Link to="/home">Home</Link>
+                    <Link to="/agents">Agents</Link>
+                    <Link to="/missions">Missions</Link>
+                    <Link to="/findAgent">Find Available Agent</Link>
             </div>
         )
     }

ssa-frontend/secret_service_archive/src/index.tsx

@@ -3,13 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from "react-router-dom";
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+      <BrowserRouter basename="pa165">
+        <App />
+      </BrowserRouter>
   </React.StrictMode>
 );