Add UI for paste (Transporter)
This commit is contained in:
parent
613369d9e9
commit
50497b83b0
|
|
@ -12,6 +12,7 @@ import { Cards } from './Cards.js';
|
|||
import { Training } from './Training.js';
|
||||
import { AdminReportedTransactions } from './AdminTransactions.js';
|
||||
import { Admin } from './Admin.js';
|
||||
import { Paste } from './Paste.js';
|
||||
import { Courses, CourseDetail } from './Courses.js';
|
||||
import { Classes, ClassDetail } from './Classes.js';
|
||||
import { Members, MemberDetail } from './Members.js';
|
||||
|
|
@ -135,6 +136,11 @@ function App() {
|
|||
as={Link}
|
||||
to='/classes'
|
||||
/>
|
||||
<Dropdown.Item
|
||||
content='Transporter'
|
||||
as={Link}
|
||||
to='/paste'
|
||||
/>
|
||||
|
||||
{user && isAdmin(user) && <Dropdown.Item
|
||||
content='Admin'
|
||||
|
|
@ -143,7 +149,7 @@ function App() {
|
|||
/>}
|
||||
|
||||
{user && isAdmin(user) && <Dropdown.Item
|
||||
content='Admin Trans.'
|
||||
content='Admin Txs'
|
||||
as={Link}
|
||||
to='/admintrans'
|
||||
/>}
|
||||
|
|
@ -166,69 +172,75 @@ function App() {
|
|||
</Route>
|
||||
|
||||
<div className='topPadding'>
|
||||
{user && user.member.set_details ?
|
||||
<Switch>
|
||||
<Route path='/account'>
|
||||
<Account token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
|
||||
<Route path='/transactions/:id'>
|
||||
<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
<Route path='/transactions'>
|
||||
<Transactions user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/cards'>
|
||||
<Cards user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/training'>
|
||||
<Training user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/courses/:id'>
|
||||
<CourseDetail token={token} user={user} />
|
||||
</Route>
|
||||
<Route path='/courses'>
|
||||
<Courses token={token} user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/classes/:id'>
|
||||
<ClassDetail token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
<Route path='/classes'>
|
||||
<Classes token={token} />
|
||||
</Route>
|
||||
|
||||
<Route path='/members/:id'>
|
||||
<MemberDetail token={token} user={user} />
|
||||
</Route>
|
||||
<Route path='/members'>
|
||||
<Members token={token} />
|
||||
</Route>
|
||||
|
||||
{user && isAdmin(user) &&
|
||||
<Route path='/admin'>
|
||||
<Admin token={token} user={user} />
|
||||
</Route>
|
||||
}
|
||||
|
||||
{user && isAdmin(user) &&
|
||||
<Route path='/admintrans'>
|
||||
<AdminReportedTransactions token={token} user={user} />
|
||||
</Route>
|
||||
}
|
||||
|
||||
<Route path='/:page'>
|
||||
<NotFound />
|
||||
</Route>
|
||||
</Switch>
|
||||
:
|
||||
<Route path='/:page'>
|
||||
<PleaseLogin />
|
||||
<Switch>
|
||||
<Route path='/paste'>
|
||||
<Paste token={token} />
|
||||
</Route>
|
||||
}
|
||||
|
||||
{user && user.member.set_details ?
|
||||
<Switch>
|
||||
<Route path='/account'>
|
||||
<Account token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
|
||||
<Route path='/transactions/:id'>
|
||||
<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
<Route path='/transactions'>
|
||||
<Transactions user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/cards'>
|
||||
<Cards user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/training'>
|
||||
<Training user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/courses/:id'>
|
||||
<CourseDetail token={token} user={user} />
|
||||
</Route>
|
||||
<Route path='/courses'>
|
||||
<Courses token={token} user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/classes/:id'>
|
||||
<ClassDetail token={token} user={user} refreshUser={refreshUser} />
|
||||
</Route>
|
||||
<Route path='/classes'>
|
||||
<Classes token={token} />
|
||||
</Route>
|
||||
|
||||
<Route path='/members/:id'>
|
||||
<MemberDetail token={token} user={user} />
|
||||
</Route>
|
||||
<Route path='/members'>
|
||||
<Members token={token} />
|
||||
</Route>
|
||||
|
||||
{user && isAdmin(user) &&
|
||||
<Route path='/admin'>
|
||||
<Admin token={token} user={user} />
|
||||
</Route>
|
||||
}
|
||||
|
||||
{user && isAdmin(user) &&
|
||||
<Route path='/admintrans'>
|
||||
<AdminReportedTransactions token={token} user={user} />
|
||||
</Route>
|
||||
}
|
||||
|
||||
<Route path='/:page'>
|
||||
<NotFound />
|
||||
</Route>
|
||||
</Switch>
|
||||
:
|
||||
<Route path='/:page'>
|
||||
<PleaseLogin />
|
||||
</Route>
|
||||
}
|
||||
</Switch>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
96
webclient/src/Paste.js
Normal file
96
webclient/src/Paste.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import React, { useState, useEffect, useReducer, useContext } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
|
||||
import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
|
||||
import { NotFound } from './Misc.js';
|
||||
|
||||
function PasteForm(props) {
|
||||
const { token, input, setInput } = props;
|
||||
const [error, setError] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
|
||||
const handleChange = (e) => handleValues(e, e.currentTarget);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
requester('/paste/', 'POST', token, input)
|
||||
.then(res => {
|
||||
setLoading(false);
|
||||
setSuccess(true);
|
||||
setError({});
|
||||
setInput(res);
|
||||
})
|
||||
.catch(err => {
|
||||
setLoading(false);
|
||||
console.log(err);
|
||||
setError(err.data);
|
||||
});
|
||||
};
|
||||
|
||||
const makeProps = (name) => ({
|
||||
name: name,
|
||||
onChange: handleChange,
|
||||
value: input[name] || '',
|
||||
error: error[name],
|
||||
});
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.TextArea
|
||||
rows={20}
|
||||
{...makeProps('paste')}
|
||||
/>
|
||||
|
||||
{!!token &&<Form.Button loading={loading} error={error.non_field_errors}>
|
||||
Submit
|
||||
</Form.Button>}
|
||||
{success && <div>Success!</div>}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
let pasteCache = 'Loading...';
|
||||
|
||||
export function Paste(props) {
|
||||
const { token } = props;
|
||||
const [input, setInput] = useState({ paste: pasteCache });
|
||||
const [refreshCount, refreshPaste] = useReducer(x => x + 1, 0);
|
||||
|
||||
useEffect(() => {
|
||||
requester('/paste/', 'GET', token)
|
||||
.then(res => {
|
||||
setInput({ paste: res.paste });
|
||||
pasteCache = res.paste;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}, [refreshCount]);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header size='large'>Transporter</Header>
|
||||
|
||||
<p>
|
||||
Use this to quickly share info with people across devices.
|
||||
For example: your LAN party server IP address, a config file,
|
||||
a public key, an Arduino sketch, or a URL.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Members can write, anyone can read. Everyone shares what's below.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Button onClick={refreshPaste}>
|
||||
Refresh
|
||||
</Button>
|
||||
</p>
|
||||
|
||||
<PasteForm {...props} input={input} setInput={setInput} />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user