diff --git a/web/public/index.html b/web/public/index.html index 30b7702..5dfdf29 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -5,6 +5,7 @@ Steam Trader + + + + +
diff --git a/web/src/app/app.tsx b/web/src/app/app.tsx index edcdf80..3196e4d 100644 --- 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 b/web/src/app/header.css similarity index 100% rename from web/src/components/Header.css rename to web/src/app/header.css diff --git a/web/src/components/Header.tsx b/web/src/app/header.tsx similarity index 50% rename from web/src/components/Header.tsx rename to web/src/app/header.tsx index 698b151..083e1c7 100644 --- a/web/src/components/Header.tsx +++ b/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 ( ); } diff --git a/web/src/app/main.tsx b/web/src/app/main.tsx index efc7f74..7080109 100644 --- 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 (
- +
- + - - + + - + + + + - -
- -
- - +
); } -function ColSm({ title, children }: any) { +function Column({ size, title, children }: any) { return ( -
+
{children}
); } + +function Row({ children }: any) { + return
{children}
; +} diff --git a/web/src/components/accountForm.tsx b/web/src/components/accountForm.tsx deleted file mode 100644 index 953981e..0000000 --- a/web/src/components/accountForm.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { Component } from 'react'; -import { AccountOptions, createAccount } from '../services/accounts'; - -interface FormState { - username: string; - password: string; - sharedSecret: string; - identity: string; - gameId: number; - trashLimit: number; - owners: string[]; - tradeWith0Profit: boolean; - [x: string]: string | boolean | number | string[]; -} - -export default class Form extends Component { - constructor(props: any) { - super(props); - - this.handleInputChange = this.handleInputChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - this.setState({}); - } - - render() { - return ( -
- - - - - - - - - - - ); - } - - handleInputChange(event: React.ChangeEvent) { - const target = event.target; - const value = target.type === 'checkbox' ? target.checked : target.value; - const name = target.name; - - this.setState({ - [name]: value - }); - } - - handleSubmit(event: React.FormEvent) { - event.preventDefault(); - console.log(this.state); - - const { username, password, sharedSecret, identity, gameId, owners, trashLimit, tradeWith0Profit } = this.state; - - const options: AccountOptions = { - login: { - username, - password, - sharedSecret, - identity - }, - status: { - gameId - }, - trading: { - owners, - trashLimit, - tradeWith0Profit - } - }; - - createAccount(options).then((r) => console.log(r.data)); - } - - TextInput = ({ type, name, help, title }: any) => { - return ( -
- - -
- {help} -
-
- ); - }; - - SwitchInput = ({ name, title, help }: any) => { - return ( -
- this.handleInputChange(e)} - /> - -
- {help} -
-
- ); - }; -} diff --git a/web/src/components/accounts.tsx b/web/src/components/accounts.tsx deleted file mode 100644 index a67b2ff..0000000 --- a/web/src/components/accounts.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { Component } from 'react'; -import { PencilFill, Power } from 'react-bootstrap-icons'; -import { AccountOptions } from '../services/accounts'; -import RegisterAccount from './registerAccount'; - -interface AccountState { - accounts: AccountOptions[]; -} - -export default class Account extends Component { - renderAccount(acc?: AccountOptions): any { - return ( -
-
- - {'Hazork'} -
-
- - -
-
- ); - } - - // TODO: Fetch user image - getUserImage(acc?: AccountOptions): string { - return 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/b5/b5bd56c1aa4644a474a2e4972be27ef9e82e517e_full.jpg'; - } - - renderAccounts() { - return this.state.accounts.map((acc) => this.renderAccount(acc)); - } - - render() { - return ( -
-
- {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} - {this.renderAccount()} -
-
- - -
-
- ); - } -} diff --git a/web/src/components/accounts/account.tsx b/web/src/components/accounts/account.tsx new file mode 100644 index 0000000..c8a2a27 --- /dev/null +++ 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 ( +
+
+ + {name} +
+
+
+
+ ); +} + +function Button({ Icon, color, paddingLeft, onMouseDown }: any) { + return ( + + ); +} + +function ProfilePhoto({ account }: any) { + return ( + {`${account.username}'s + ); +} + +// 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 new file mode 100644 index 0000000..72a5bdc --- /dev/null +++ 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); +} diff --git a/web/src/components/accounts/form.tsx b/web/src/components/accounts/form.tsx new file mode 100644 index 0000000..5c7640a --- /dev/null +++ b/web/src/components/accounts/form.tsx @@ -0,0 +1,100 @@ +import React, { Component } from 'react'; +import { AccountOptions, createAccount } from '../../services/accounts'; + +interface FormInputs { + username: string; + password: string; + sharedSecret: string; + identity: string; + gameId: number; + trashLimit: number; + owners: string[]; + tradeWith0Profit: boolean; + [x: string]: string | boolean | number | string[]; +} + +interface FormProps { + onFormEntry: (acc: AccountOptions) => void; +} + +export default class Form extends Component { + private TextInput = ({ type, name, help, title }: any) => ( +
+ + +
+ {help} +
+
+ ); + + private SwitchInput = ({ name, title, help }: any) => ( +
+ + +
+ {help} +
+
+ ); + + private handleInputChange = (event: React.ChangeEvent) => { + const target = event.target; + this.setState({ [target.name]: target.type === 'checkbox' ? target.checked : target.value }); + }; + + private handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + const { username, password, sharedSecret, identity, gameId, owners, trashLimit, tradeWith0Profit } = this.state; + const options = { + login: { username, password, sharedSecret, identity }, + status: { gameId }, + trading: { owners, trashLimit, tradeWith0Profit } + }; + createAccount(options) + .then((r) => { + if(r.data.status === 'Success') { + this.props.onFormEntry(options) + } else { + alert(r.data.response) + } + }) + }; + + render() { + return ( +
+ + + + + + + + + + + ); + } +} diff --git a/web/src/components/accounts/index.tsx b/web/src/components/accounts/index.tsx new file mode 100644 index 0000000..f11af4f --- /dev/null +++ b/web/src/components/accounts/index.tsx @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import AccountDisplay from './account'; +import { Offcanvas, Button } from './offcanvas'; +import { AccountOptions, getAccounts } from '../../services/accounts'; +import './display.css' + +interface DisplayState { + accounts: AccountOptions[]; +} + +export default class Display extends Component { + id = 'displayOffcanvas'; + + constructor(props: any) { + super(props); + + getAccounts() + .then((resp) => resp.data.response) + .then((accounts: AccountOptions[]) => this.setState({ accounts })); + } + + private renderAccounts() { + if (this.state == null) { + return 'Loading...'; + } else { + return this.state.accounts.map((acc) => ); + } + } + + private addAccount = (account: AccountOptions) => { + this.setState({ accounts: [...this.state.accounts, account] }); + } + + render() { + return ( +
+
+ {this.renderAccounts()} +
+
+
+
+ ); + } +} diff --git a/web/src/components/accounts/offcanvas.tsx b/web/src/components/accounts/offcanvas.tsx new file mode 100644 index 0000000..40b37a2 --- /dev/null +++ b/web/src/components/accounts/offcanvas.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import OffcanvasTemplate from '../offcanvas'; +import Form from './form'; + +export function Button({ id, message }: any) { + return ( + + ); +} + +export function Offcanvas({ id, onFormEntry }: any) { + return ( + +
+ You can get help{' '} + + here + +
+
+ + ); +} diff --git a/web/src/components/bootstrap.tsx b/web/src/components/bootstrap.tsx deleted file mode 100644 index 69afd04..0000000 --- a/web/src/components/bootstrap.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -export function Container({ children }: any) { - return
{children}
; -} - -export function Row({ children }: any) { - return
{children}
; -} - -export function Nav({ children }: any) { - return ; -} - -export function NavBrand({ children }: any) { - return {children}; -} diff --git a/web/src/components/registerAccount.tsx b/web/src/components/registerAccount.tsx index 2c69f19..84cebfc 100644 --- a/web/src/components/registerAccount.tsx +++ b/web/src/components/registerAccount.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Offcanvas from './offCanvas'; +import Offcanvas from './offcanvas'; import AccountForm from './accountForm'; export default function AccountRegistration({ id }: any) { diff --git a/web/src/services/accounts.ts b/web/src/services/accounts.ts index fad51f1..c686825 100644 --- a/web/src/services/accounts.ts +++ b/web/src/services/accounts.ts @@ -40,3 +40,7 @@ export function editAccount(options: AccountOptions) { export function login(name: string) { return axios({ method: 'POST', url: url(`${name}/login`) }); } + +export function logout(name: string) { + return axios({ method: 'POST', url: url(`${name}/logout`) }); +} diff --git a/web/webpack.config.ts b/web/webpack.config.ts index d9fd17a..c1ccc9f 100644 --- a/web/webpack.config.ts +++ b/web/webpack.config.ts @@ -64,7 +64,10 @@ const config: Configuration = { externals: { bootstrap: 'bootstrap', react: 'React', - 'react-dom': 'ReactDOM' + 'react-dom': 'ReactDOM', + 'socket.io-client': 'io', + axios:'axios', + 'reactBootstrapIcons':'react-bootstrap-icons' } };