Skip to content

Commit 4048d94

Browse files
KCarrettoKCarretto
authored
Merge pull request #155 from KCarretto/fileview
Adds XMultiFileView and XFileCard
2 parents 500e9de + edfbb41 commit 4048d94

File tree

8 files changed

+207
-76
lines changed

8 files changed

+207
-76
lines changed

‎www/assets.gen.go‎

Lines changed: 70 additions & 70 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎www/src/App.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import React from 'react';
22
import { Route } from 'react-router-dom';
33
import 'semantic-ui-css/semantic.min.css';
44
import './App.css';
5-
import { XFileUploadModal } from './components/file';
65
import { XLayout, XUnimplemented } from './components/layout/';
76
import Routes from './config/routes';
87
import { XGraphProvider } from './graphql';
9-
import { XJobView, XMultiJobView, XMultiTagView, XMultiTargetView, XTargetView, XTaskView } from './views';
8+
import { XJobView, XMultiFileView, XMultiJobView, XMultiTagView, XMultiTargetView, XTargetView, XTaskView } from './views';
109

1110
const App = () => (
1211
<XGraphProvider>
@@ -18,7 +17,7 @@ const App = () => (
1817
<Route exact path='/targets' component={XMultiTargetView} />
1918
<Route exact path='/jobs' component={XMultiJobView} />
2019
<Route exact path='/tags' component={XMultiTagView} />
21-
<Route exact path='/payloads' component={XFileUploadModal} />
20+
<Route exact path='/files' component={XMultiFileView} />
2221

2322
<Route path='/targets/:id' component={XTargetView} />
2423
<Route path='/tasks/:id' component={XTaskView} />

‎www/src/components/file/XFileCard.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import moment from 'moment';
2+
import React from 'react';
3+
import { Button, Card, Feed, Header, Icon, List } from 'semantic-ui-react';
4+
5+
const XFileCard = ({ id, name, size, contentType, links, creationTime, lastModifiedTime }) => {
6+
let colors = [
7+
'olive',
8+
'green',
9+
'teal',
10+
'blue',
11+
'violet',
12+
'purple',
13+
'pink',
14+
];
15+
16+
return (
17+
<Card fluid>
18+
<Card.Content>
19+
<Button.Group floated='right'>
20+
<Button basic color='blue' icon='linkify' /> {/* TODO: Implement */}
21+
<Button basic color='blue' icon='cloud upload' /> {/* TODO: Implement */}
22+
<Button basic color='blue' icon='cloud download' href={'/cdn/download/' + name} />
23+
</Button.Group>
24+
<Card.Header>{name}</Card.Header>
25+
<Card.Meta>{size} bytes</Card.Meta>
26+
<Card.Description>
27+
<Header sub disabled={!links || links.length < 1} style={{ marginTop: '5px' }}>
28+
<Header.Content>
29+
{links && links.length > 0 ? 'Links (' + links.length + ' total)' : 'No Active Links'}
30+
</Header.Content>
31+
</Header>
32+
<Feed style={{ maxHeight: '25vh', overflowY: 'auto' }}>
33+
{links && links.length > 0 ? links
34+
.map((link, index) => (
35+
<Feed.Event key={index}>
36+
<Feed.Label>
37+
<Icon fitted name='linkify' color={
38+
colors[Math.floor(Math.random() * colors.length)]
39+
} />
40+
</Feed.Label>
41+
<Feed.Content>
42+
<Feed.Summary>
43+
<List.Header>{link.alias}</List.Header>
44+
<Feed.Date>{link.expirationTime ? 'Expires in ' + moment().to(link.expirationTime) : 'Never expires'}</Feed.Date>
45+
</Feed.Summary>
46+
<Feed.Meta>
47+
{link.clicks && link.clicks >= 0 ? link.clicks + ' Clicks left' : 'Unlimited clicks'}
48+
</Feed.Meta>
49+
</Feed.Content>
50+
</Feed.Event>
51+
)) : <span />}
52+
</Feed>
53+
</Card.Description>
54+
</Card.Content>
55+
<Card.Content extra>
56+
Created: {moment(creationTime).fromNow()}<br />
57+
Last Modified: {moment(lastModifiedTime).fromNow()}
58+
</Card.Content>
59+
</Card>
60+
);
61+
}
62+
63+
64+
65+
export default XFileCard

‎www/src/components/file/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export { default as XFileCard } from './XFileCard';
12
export { default as XFileUploadModal } from './XFileUploadModal';
23

‎www/src/components/form/XScriptEditor.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ControlledEditor, monaco } from "@monaco-editor/react";
22
import React from 'react';
3-
import { renegade_autocomplete, renegade_conf, renegade_language } from '../../config/renegade';
3+
import { renegade_autocomplete, renegade_conf, renegade_language } from '../../config/Renegade';
44
import { XLoadingMessage } from '../messages';
55

66

‎www/src/config/routes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const routes = [
2323
icon: <Icon name='tags' />,
2424
},
2525
{
26-
title: 'Payloads',
27-
link: '/payloads',
26+
title: 'Files',
27+
link: '/files',
2828
icon: <Icon name='gift' />,
2929
},
3030
{

‎www/src/views/XMultiFileView.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { useQuery } from '@apollo/react-hooks';
2+
import gql from 'graphql-tag';
3+
import React from 'react';
4+
import { Card, Container, Loader, Menu } from 'semantic-ui-react';
5+
import { XFileCard, XFileUploadModal } from '../components/file';
6+
import { XErrorMessage } from '../components/messages';
7+
export const MULTI_FILE_QUERY = gql`
8+
{
9+
files {
10+
id
11+
name
12+
contentType
13+
size
14+
creationTime
15+
lastModifiedTime
16+
17+
links {
18+
id
19+
alias
20+
clicks
21+
expirationTime
22+
}
23+
}
24+
}`
25+
26+
const XMultiFileView = () => {
27+
const { called, loading, error, data } = useQuery(MULTI_FILE_QUERY, {
28+
pollInterval: 5000,
29+
});
30+
31+
const showCards = () => {
32+
if (!data || !data.files || data.files.length < 1) {
33+
return (
34+
// TODO: Better styling
35+
<h1>No files found!</h1>
36+
);
37+
}
38+
return (<Card.Group centered itemsPerRow={4}>
39+
{data.files.map(file => (<XFileCard key={file.id} {...file} />))}
40+
</Card.Group>);
41+
};
42+
43+
return (
44+
<Container style={{ padding: '10px' }}>
45+
<Menu secondary>
46+
<Menu.Item position='right'><XFileUploadModal /></Menu.Item>
47+
</Menu>
48+
<Container fluid style={{ padding: '20px' }}>
49+
<Loader disabled={!called || !loading} />
50+
<XErrorMessage title='Error Loading Files' err={error} />
51+
{showCards()}
52+
</Container>
53+
</Container>
54+
);
55+
}
56+
57+
// XTargetCardGroup.propTypes = {
58+
// targets: PropTypes.arrayOf(PropTypes.shape({
59+
// id: PropTypes.number.isRequired,
60+
// name: PropTypes.string.isRequired,
61+
// tags: PropTypes.arrayOf(PropTypes.string),
62+
// })).isRequired,
63+
// };
64+
65+
export default XMultiFileView

‎www/src/views/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as XJobView } from './XJobView';
2+
export { default as XMultiFileView } from './XMultiFileView';
23
export { default as XMultiJobView, MULTI_JOB_QUERY } from './XMultiJobView';
34
export { default as XMultiTagView, MULTI_TAG_QUERY } from './XMultiTagView';
45
export { default as XMultiTargetView, MULTI_TARGET_QUERY } from './XMultiTargetView';

0 commit comments

Comments
 (0)