Account info box ready

arthurfiorette · Mar 28, 2021 · a758e8e · a758e8e
1 parent b2d87b7
commit a758e8e
Show file tree

Hide file tree

Showing 16 changed files with 275 additions and 234 deletions.
diff --git a/web/public/index.html b/web/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Steam Trader</title>
+    <!-- Bootstrap -->
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -16,13 +17,21 @@
       integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
       crossorigin="anonymous"
     ></script>
+    <!-- React -->
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <!-- Socket.io -->
     <script
       src="https://cdn.socket.io/3.1.3/socket.io.min.js"
       integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh"
       crossorigin="anonymous"
     ></script>
+    <!-- Axios -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
+      integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/web/src/app/app.tsx b/web/src/app/app.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import './app.css';
 
-import Header from '../components/header';
+import Header from './header';
 import Main from './main';
 
 export default function () {

diff --git a/web/src/components/Header.css → web/src/app/header.css b/web/src/components/Header.css → web/src/app/header.css
diff --git a/web/src/components/Header.tsx → web/src/app/header.tsx b/web/src/components/Header.tsx → web/src/app/header.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import './header.css';
 
-import { Nav, NavBrand } from './bootstrap';
-
 export default function Header() {
   return (
     <header id="header" className="shadow">
-      <Nav>
-        <NavBrand>Steam Trader</NavBrand>
-      </Nav>
+      <nav className="justify-content-center navbar navbar-expand navbar-dark bg-dark">
+        <span className="navbar-brand">Steam Trader</span>
+      </nav>
     </header>
   );
 }
diff --git a/web/src/app/main.tsx b/web/src/app/main.tsx
@@ -2,36 +2,38 @@ import React from 'react';
 import './main.css';
 
 import InfoBox from '../components/infoBox';
-import { Row, Container } from '../components/bootstrap';
 import Logs from '../components/logs';
-import Account from '../components/accounts';
+import Account from '../components/accounts'
+import Trades from '../components/trades';
 
 export default function Main() {
   return (
     <main id="main" className="bg-light">
-      <Container>
+      <div className="container-fluid h-100 mt-3">
         <Row>
-          <ColSm title="Logs">
+          <Column size="sm-12 col-lg-6" title="Logs">
             <Logs />
-          </ColSm>
-          <ColSm title="Accounts">
+          </Column>
+          <Column size="sm-12 col-lg-6" title="Accounts">
             <Account />
-          </ColSm>
+          </Column>
+          <Column size="12" title="Trades">
+            <Trades />
+          </Column>
         </Row>
-        <Row>
-          <div className="col-12">
-            <InfoBox title="Trades"></InfoBox>
-          </div>
-        </Row>
-      </Container>
+      </div>
     </main>
   );
 }
 
-function ColSm({ title, children }: any) {
+function Column({ size, title, children }: any) {
   return (
-    <div className="col-sm-12 col-lg-6">
+    <div className={`col-${size}`}>
       <InfoBox title={title}>{children}</InfoBox>
     </div>
   );
 }
+
+function Row({ children }: any) {
+  return <div className="row mb-4">{children}</div>;
+}
diff --git a/web/src/components/accountForm.tsx b/web/src/components/accountForm.tsx
diff --git a/web/src/components/accounts.tsx b/web/src/components/accounts.tsx
diff --git a/web/src/components/accounts/account.tsx b/web/src/components/accounts/account.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { PencilFill, Power } from 'react-bootstrap-icons';
+import {login, logout} from '../../services/accounts'
+
+export default function Account({ account }:any) {
+  const name = account.login.username;
+  return (
+    <div className="d-flex my-1 p-1 justify-content-between align-items-center border border-2 border-secondary rounded">
+      <div className="user align-items-center">
+        <ProfilePhoto account={account} />
+        <span className="h3 lead ps-3 align-center text-muted">{name}</span>
+      </div>
+      <div>
+        <Button Icon={Power} color="success" onMouseDown={() => login(name)}/>
+        <Button Icon={Power} color="danger" onMouseDown={() => logout(name)} paddingLeft="4"/>
+        <Button Icon={PencilFill} color="info" onMouseDown={() => {}}/>
+      </div>
+    </div>
+  );
+}
+
+function Button({ Icon, color, paddingLeft, onMouseDown }: any) {
+  return (
+    <button type="button" onMouseDown={onMouseDown} className={`p-2 btn btn-${color} me-${paddingLeft ? paddingLeft : '2'}`}>
+      <Icon size="20px" />
+    </button>
+  );
+}
+
+function ProfilePhoto({ account }: any) {
+  return (
+    <img
+      className="shadow border rounded"
+      src={fetchSteamUserImage()}
+      alt={`${account.username}'s profile photo`}
+      height="40px"
+      width="40px"
+    />
+  );
+}
+
+// TODO: Fetch user profile photo correctly
+function fetchSteamUserImage(): string {
+  // Default steam profile photo
+  return 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/b5/b5bd56c1aa4644a474a2e4972be27ef9e82e517e_full.jpg';
+}
diff --git a/web/src/components/accounts/display.css b/web/src/components/accounts/display.css
@@ -0,0 +1,13 @@
+#accounts {
+  height: 50vh;
+  max-height: 50vh;
+}
+
+#accounts > #list {
+  height: 100%;
+  max-height: calc(50vh - 60px);
+}
+
+#accounts > #list:nth-child(even) {
+  background: hsla(0, 0%, 0%, 0.22);
+}