2020-07-12 03:10:23 +00:00
|
|
|
import React, { useState, useEffect, useReducer } from 'react';
|
2022-07-13 06:51:28 +00:00
|
|
|
import { Link } from 'react-router-dom';
|
2020-01-13 08:01:42 +00:00
|
|
|
import './light.css';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { Button, Container, Checkbox, Form, Header, Icon, Table } from 'semantic-ui-react';
|
2022-04-25 01:15:49 +00:00
|
|
|
import * as Datetime from 'react-datetime';
|
2020-03-08 01:11:31 +00:00
|
|
|
import moment from 'moment-timezone';
|
2022-04-25 01:15:49 +00:00
|
|
|
import download from 'downloadjs';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { apiUrl, statusColor, requester } from './utils.js';
|
2020-01-18 04:47:54 +00:00
|
|
|
|
2020-07-12 03:10:23 +00:00
|
|
|
let vettingCache = false;
|
2020-02-28 01:24:38 +00:00
|
|
|
let historyCache = false;
|
2020-05-08 04:54:28 +00:00
|
|
|
let excludeSystemCache = true;
|
|
|
|
let focusCache = false;
|
2020-02-28 01:24:38 +00:00
|
|
|
|
2020-07-12 03:10:23 +00:00
|
|
|
|
|
|
|
export function AdminVet(props) {
|
2022-07-13 03:14:23 +00:00
|
|
|
const { token, member, refreshVetting } = props;
|
2020-07-12 03:10:23 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [yousure, setYousure] = useState(false);
|
|
|
|
|
|
|
|
const handleVet = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (yousure) {
|
|
|
|
setLoading(true);
|
|
|
|
const data = {vetted_date: moment.utc().tz('America/Edmonton').format('YYYY-MM-DD')}
|
|
|
|
requester('/members/' + member.id + '/', 'PATCH', token, data)
|
|
|
|
.then(res => {
|
|
|
|
refreshVetting();
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
setYousure(true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
color='green'
|
|
|
|
onClick={handleVet}
|
|
|
|
loading={loading}
|
|
|
|
>
|
2022-08-25 02:16:28 +00:00
|
|
|
{yousure ? 'You Sure?' : 'Vet ' + member.preferred_name}
|
2020-07-12 03:10:23 +00:00
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function AdminVetting(props) {
|
2022-07-13 03:14:23 +00:00
|
|
|
const { token } = props;
|
2020-07-12 03:10:23 +00:00
|
|
|
const [vetting, setVetting] = useState(vettingCache);
|
|
|
|
const [refreshCount, refreshVetting] = useReducer(x => x + 1, 0);
|
2022-07-14 19:58:15 +00:00
|
|
|
const [error, setError] = useState(false);
|
2022-04-24 22:58:16 +00:00
|
|
|
const [showAll, setShowAll] = useState(false);
|
2020-07-12 03:10:23 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
requester('/vetting/', 'GET', token)
|
|
|
|
.then(res => {
|
|
|
|
setVetting(res.results);
|
|
|
|
vettingCache = res.results;
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
2022-07-14 19:58:15 +00:00
|
|
|
setError(true);
|
2020-07-12 03:10:23 +00:00
|
|
|
});
|
|
|
|
}, [refreshCount]);
|
|
|
|
|
2022-04-24 22:58:16 +00:00
|
|
|
const displayAll = (vetting && vetting.length <= 5) || showAll;
|
|
|
|
|
2020-07-12 03:10:23 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{!error ?
|
|
|
|
vetting ?
|
|
|
|
<>
|
|
|
|
<Table collapsing basic='very'>
|
|
|
|
<Table.Header>
|
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Name</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Status</Table.HeaderCell>
|
2023-05-06 23:32:47 +00:00
|
|
|
<Table.HeaderCell>NMO</Table.HeaderCell>
|
2020-07-12 03:10:23 +00:00
|
|
|
<Table.HeaderCell>Start Date</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell></Table.HeaderCell>
|
|
|
|
</Table.Row>
|
|
|
|
</Table.Header>
|
|
|
|
|
|
|
|
<Table.Body>
|
2022-04-24 22:58:16 +00:00
|
|
|
{(displayAll ? vetting : vetting.slice(0,5)).map(x =>
|
2020-07-12 03:10:23 +00:00
|
|
|
<Table.Row key={x.id}>
|
2022-08-25 02:16:28 +00:00
|
|
|
<Table.Cell><Link to={'/members/'+x.id}>{x.preferred_name} {x.last_name}</Link></Table.Cell>
|
2020-07-12 03:10:23 +00:00
|
|
|
<Table.Cell>
|
|
|
|
<Icon name='circle' color={statusColor[x.status]} />
|
|
|
|
{x.status || 'Unknown'}
|
|
|
|
</Table.Cell>
|
2023-05-06 23:32:47 +00:00
|
|
|
<Table.Cell>{x.orientation_date ? '✅' : '❌'}</Table.Cell>
|
2020-07-12 03:10:23 +00:00
|
|
|
<Table.Cell>{x.current_start_date}</Table.Cell>
|
|
|
|
<Table.Cell><AdminVet {...props} member={x} refreshVetting={refreshVetting} /></Table.Cell>
|
|
|
|
</Table.Row>
|
|
|
|
)}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
|
2022-04-24 22:58:16 +00:00
|
|
|
<p>{displayAll ? '' : '5 / '}{vetting.length} members</p>
|
|
|
|
|
2020-07-12 03:10:23 +00:00
|
|
|
<p>
|
2022-04-24 22:58:16 +00:00
|
|
|
{displayAll ?
|
|
|
|
<>
|
|
|
|
↳ <a href={'mailto:'+vetting.map(x => x.email).join(',')}>Email All</a>
|
|
|
|
</>
|
|
|
|
:
|
|
|
|
<Button onClick={() => setShowAll(true)}>Show All</Button>
|
|
|
|
}
|
2020-07-12 03:10:23 +00:00
|
|
|
</p>
|
|
|
|
</>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
:
|
|
|
|
<p>Error loading.</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-02-28 01:24:38 +00:00
|
|
|
export function AdminHistory(props) {
|
2022-07-13 06:51:28 +00:00
|
|
|
const { token } = props;
|
2020-02-28 01:24:38 +00:00
|
|
|
const [history, setHistory] = useState(historyCache);
|
2020-05-08 04:54:28 +00:00
|
|
|
const [excludeSystem, setExcludeSystem] = useState(excludeSystemCache);
|
|
|
|
const [focus, setFocus] = useState(focusCache);
|
2022-07-14 19:58:15 +00:00
|
|
|
const [error, setError] = useState(false);
|
2020-02-28 01:24:38 +00:00
|
|
|
|
2020-05-08 04:54:28 +00:00
|
|
|
const handleExcludeSystem = (e, v) => {
|
|
|
|
setExcludeSystem(v.checked);
|
|
|
|
excludeSystemCache = v.checked;
|
|
|
|
};
|
|
|
|
|
2020-02-28 01:24:38 +00:00
|
|
|
useEffect(() => {
|
2020-05-08 04:54:28 +00:00
|
|
|
const extra = excludeSystem ? '?exclude_system' : '';
|
|
|
|
requester('/history/'+extra, 'GET', token)
|
2020-02-28 01:24:38 +00:00
|
|
|
.then(res => {
|
|
|
|
setHistory(res.results);
|
|
|
|
historyCache = res.results;
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
2022-07-14 19:58:15 +00:00
|
|
|
setError(true);
|
2020-02-28 01:24:38 +00:00
|
|
|
});
|
2020-05-08 04:54:28 +00:00
|
|
|
}, [excludeSystem]);
|
2020-02-28 01:24:38 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{!error ?
|
|
|
|
history ?
|
2020-05-08 04:54:28 +00:00
|
|
|
<>
|
|
|
|
<Checkbox
|
|
|
|
label='Exclude System'
|
|
|
|
onChange={handleExcludeSystem}
|
|
|
|
checked={excludeSystem}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Table basic='very'>
|
|
|
|
<Table.Header>
|
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Date</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Username</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Type</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Owner</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Object</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Changed Fields</Table.HeaderCell>
|
2020-02-28 01:24:38 +00:00
|
|
|
</Table.Row>
|
2020-05-08 04:54:28 +00:00
|
|
|
</Table.Header>
|
|
|
|
|
|
|
|
<Table.Body>
|
|
|
|
{history.map(x =>
|
|
|
|
<React.Fragment key={x.id}>
|
|
|
|
<Table.Row>
|
|
|
|
<Table.Cell>
|
|
|
|
<a href='javascript:;' onClick={() => setFocus(x.id)}>
|
2020-06-26 03:13:29 +00:00
|
|
|
{moment.utc(x.history_date).tz('America/Edmonton').format('YYYY-MM-DD')}
|
2020-05-08 04:54:28 +00:00
|
|
|
</a>
|
|
|
|
</Table.Cell>
|
|
|
|
<Table.Cell>{x.is_system ? 'System' : (x.history_user || 'Deleted User')}</Table.Cell>
|
|
|
|
<Table.Cell>{x.history_type}</Table.Cell>
|
|
|
|
<Table.Cell>{x.owner_name}</Table.Cell>
|
|
|
|
<Table.Cell>{x.object_name}</Table.Cell>
|
|
|
|
<Table.Cell>{x.changes.map(x => x.field).join(', ')}</Table.Cell>
|
|
|
|
</Table.Row>
|
|
|
|
|
2022-07-13 06:51:28 +00:00
|
|
|
{focus === x.id &&
|
2020-05-08 04:54:28 +00:00
|
|
|
<tr><td colSpan={6}>
|
|
|
|
<p>Object ID: {x.object_id}, <a href={apiUrl+x.revert_url} target='_blank'>Database Revert</a></p>
|
|
|
|
{!!x.changes.length &&
|
|
|
|
<Table basic='very'>
|
|
|
|
<Table.Header>
|
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Change</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Before</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>After</Table.HeaderCell>
|
|
|
|
</Table.Row>
|
|
|
|
</Table.Header>
|
|
|
|
<Table.Body>
|
|
|
|
{x.changes.map(y =>
|
|
|
|
<Table.Row key={y.field}>
|
|
|
|
<Table.Cell>{y.field}</Table.Cell>
|
|
|
|
<Table.Cell>{y.old}</Table.Cell>
|
|
|
|
<Table.Cell>{y.new}</Table.Cell>
|
|
|
|
</Table.Row>
|
|
|
|
)}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
}
|
|
|
|
</td></tr>
|
|
|
|
}
|
|
|
|
</React.Fragment>
|
|
|
|
)}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
</>
|
2020-02-28 01:24:38 +00:00
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
:
|
|
|
|
<p>Error loading.</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-03-08 01:11:31 +00:00
|
|
|
let backupsCache = false;
|
|
|
|
|
|
|
|
export function AdminBackups(props) {
|
|
|
|
const [backups, setBackups] = useState(backupsCache);
|
2022-07-14 19:58:15 +00:00
|
|
|
const [error, setError] = useState(false);
|
2020-03-08 01:11:31 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
requester('/backup/', 'GET')
|
|
|
|
.then(res => {
|
|
|
|
setBackups(res);
|
|
|
|
backupsCache = res;
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
2022-07-14 19:58:15 +00:00
|
|
|
setError(true);
|
2020-03-08 01:11:31 +00:00
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{!error ?
|
|
|
|
backups ?
|
|
|
|
<Table collapsing basic='very'>
|
|
|
|
<Table.Header>
|
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Username</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Last Downloaded</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Less than 24 hours ago?</Table.HeaderCell>
|
|
|
|
</Table.Row>
|
|
|
|
</Table.Header>
|
|
|
|
|
|
|
|
<Table.Body>
|
|
|
|
{backups.filter(x => x.download_time).map(x =>
|
|
|
|
<Table.Row key={x.backup_user}>
|
|
|
|
<Table.Cell>{x.backup_user}</Table.Cell>
|
|
|
|
<Table.Cell>{moment.utc(x.download_time).tz('America/Edmonton').format('LLLL')}</Table.Cell>
|
|
|
|
<Table.Cell>{x.less_than_24h ? 'Yes' : 'No - please investigate'}</Table.Cell>
|
|
|
|
</Table.Row>
|
|
|
|
)}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
:
|
|
|
|
<p>Error loading.</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-04-25 01:15:49 +00:00
|
|
|
export function AdminUsage(props) {
|
2022-07-13 06:51:28 +00:00
|
|
|
const { token } = props;
|
2022-04-25 01:15:49 +00:00
|
|
|
const [input, setInput] = useState({ month: moment() });
|
|
|
|
const [loading, setLoading] = useState(false);
|
2022-07-14 19:58:15 +00:00
|
|
|
const [error, setError] = useState(false);
|
2022-04-25 01:15:49 +00:00
|
|
|
|
|
|
|
const handleDatetime = (v) => setInput({ ...input, month: v });
|
|
|
|
|
|
|
|
const handleDownload = (month) => {
|
|
|
|
if (loading) return;
|
|
|
|
setLoading(true);
|
|
|
|
const query = month ? '?month=' + month : '';
|
|
|
|
requester('/usage/csv/' + query, 'GET', token)
|
|
|
|
.then(res => {
|
|
|
|
setLoading(false);
|
|
|
|
setError(false);
|
|
|
|
return res.blob();
|
|
|
|
})
|
|
|
|
.then(blob => {
|
|
|
|
download(blob, 'usage-'+(month || 'all')+'.csv');
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
setLoading(false);
|
|
|
|
console.log(err);
|
|
|
|
setError(true);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
|
|
|
const month = input.month.format('YYYY-MM');
|
|
|
|
handleDownload(month)
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Form onSubmit={handleSubmit}>
|
|
|
|
<label>Month</label>
|
|
|
|
<Form.Group>
|
|
|
|
<Form.Field>
|
|
|
|
<Datetime
|
|
|
|
dateFormat='YYYY-MM'
|
|
|
|
timeFormat={false}
|
|
|
|
value={input.month}
|
|
|
|
onChange={handleDatetime}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
|
|
|
|
<Form.Button loading={loading}>
|
|
|
|
Download
|
|
|
|
</Form.Button>
|
|
|
|
</Form.Group>
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
<Form.Button loading={loading} onClick={() => handleDownload(null)}>
|
|
|
|
Download All
|
|
|
|
</Form.Button>
|
2022-07-14 19:58:15 +00:00
|
|
|
|
|
|
|
{error && <p>Error.</p>}
|
2022-04-25 01:15:49 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-02-16 04:57:55 +00:00
|
|
|
export function Admin(props) {
|
2020-01-31 23:47:52 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
2020-02-16 04:57:55 +00:00
|
|
|
<Header size='large'>Portal Admin</Header>
|
2020-01-31 23:47:52 +00:00
|
|
|
|
2020-07-12 03:10:23 +00:00
|
|
|
<Header size='medium'>Ready to Vet</Header>
|
|
|
|
<p>Members who are Current or Due, and past their probationary period.</p>
|
|
|
|
<AdminVetting {...props} />
|
|
|
|
|
2022-04-25 01:15:49 +00:00
|
|
|
|
2020-02-20 05:51:06 +00:00
|
|
|
<Header size='medium'>Member Data Backup</Header>
|
2020-02-16 04:57:55 +00:00
|
|
|
<p>Spaceport backups are created daily. 14 days are kept on the server.</p>
|
2020-03-08 01:11:31 +00:00
|
|
|
|
|
|
|
<Header size='small'>Backup Downloads</Header>
|
|
|
|
<AdminBackups />
|
2020-01-26 22:17:24 +00:00
|
|
|
|
2022-04-25 01:15:49 +00:00
|
|
|
|
|
|
|
<Header size='medium'>Trotec Device Usage</Header>
|
|
|
|
<p>All times are in Mountain time.</p>
|
|
|
|
<AdminUsage {...props} />
|
|
|
|
|
|
|
|
|
2020-05-08 04:54:28 +00:00
|
|
|
<Header size='medium'>History</Header>
|
|
|
|
<p>Last 50 database changes:</p>
|
2020-02-28 01:24:38 +00:00
|
|
|
|
|
|
|
<AdminHistory {...props} />
|
|
|
|
|
2020-02-16 04:57:55 +00:00
|
|
|
</Container>
|
2020-01-13 08:01:42 +00:00
|
|
|
);
|
|
|
|
};
|