Add a section to Admin page for downloading Usage reports

webclient/package.json

@@ -9,6 +9,7 @@
 		"abort-controller": "^3.0.0",
 		"blueimp-load-image": "^5.13.0",
 		"darkmode-js": "~1.5.5",
+		"downloadjs": "^1.4.7",
 		"lodash": "^4.17.19",
 		"moment": "~2.24.0",
 		"moment-timezone": "~0.5.28",

webclient/src/Admin.js

@@ -2,7 +2,9 @@ import React, { useState, useEffect, useReducer } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
 import './light.css';
 import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import * as Datetime from 'react-datetime';
 import moment from 'moment-timezone';
+import download from 'downloadjs';
 import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound } from './Misc.js';
 
@@ -270,6 +272,67 @@ export function AdminBackups(props) {
 	);
 };
 
+export function AdminUsage(props) {
+	const { token, user } = props;
+	const [input, setInput] = useState({ month: moment() });
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(false);
+
+	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>
+		</div>
+	);
+};
+
 export function Admin(props) {
 	return (
 		<Container>
@@ -279,12 +342,19 @@ export function Admin(props) {
 			<p>Members who are Current or Due, and past their probationary period.</p>
 			<AdminVetting {...props} />
 
+
 			<Header size='medium'>Member Data Backup</Header>
 			<p>Spaceport backups are created daily. 14 days are kept on the server.</p>
 
 			<Header size='small'>Backup Downloads</Header>
 			<AdminBackups />
 
+
+			<Header size='medium'>Trotec Device Usage</Header>
+			<p>All times are in Mountain time.</p>
+			<AdminUsage {...props} />
+
+
 			<Header size='medium'>History</Header>
 			<p>Last 50 database changes:</p>
 

webclient/yarn.lock

@@ -3969,6 +3969,11 @@ dotenv@8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+downloadjs@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=
+
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"