Some more stuff
This commit is contained in:
parent
7124038b5b
commit
32df152ca7
124
admin/dist/main.js
vendored
124
admin/dist/main.js
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,30 @@
|
||||
import * as React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import Icon from "./elements/icon";
|
||||
|
||||
export default class View404 extends React.Component {
|
||||
render() {
|
||||
return <b>404 Not found</b>
|
||||
return <div className={"error-page"}>
|
||||
<h2 className={"headline text-warning"}>404</h2>
|
||||
<div className={"error-content"}>
|
||||
<h3>
|
||||
<Icon icon={"exclamation-triangle"} classes={"text-warning"}/> Oops! Page not found.
|
||||
</h3>
|
||||
<p>
|
||||
We could not find the page you were looking for.
|
||||
Meanwhile, you may <Link to={"/admin/dashboard"}>return to dashboard</Link> or try using the search form.
|
||||
</p>
|
||||
<form className={"search-form"} onSubmit={(e) => e.preventDefault()}>
|
||||
<div className={"input-group"}>
|
||||
<input type={"text"} name={"search"} className={"form-control"} placeholder={"Search"} />
|
||||
<div className={"input-group-append"}>
|
||||
<button type="submit" name="submit" className={"btn btn-warning"}>
|
||||
<Icon icon={"search"}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
18
admin/src/elements/alert.js
Normal file
18
admin/src/elements/alert.js
Normal file
@ -0,0 +1,18 @@
|
||||
import Icon from "./icon";
|
||||
import React from "react";
|
||||
|
||||
|
||||
export default function Alert(props) {
|
||||
|
||||
const onClose = props.onClose || function() { };
|
||||
const title = props.title || "Untitled Alert";
|
||||
const message = props.message || "Alert message";
|
||||
|
||||
return (
|
||||
<div className={"alert alert-danger alert-dismissible"}>
|
||||
<button type="button" className={"close"} data-dismiss={"alert"} aria-hidden={"true"} onClick={onClose}>×</button>
|
||||
<h5><Icon icon={"ban"} classes={"icon"} /> {title}</h5>
|
||||
{message}
|
||||
</div>
|
||||
)
|
||||
}
|
@ -14,7 +14,12 @@ export default function Icon(props) {
|
||||
classes.push("fa-spin");
|
||||
}
|
||||
|
||||
let newProps = {...props, className: classes.join(" ") };
|
||||
delete newProps["classes"];
|
||||
delete newProps["type"];
|
||||
delete newProps["icon"];
|
||||
|
||||
return (
|
||||
<i className={classes.join(" ")} />
|
||||
<i {...newProps} />
|
||||
);
|
||||
}
|
@ -1,19 +1,15 @@
|
||||
import * as React from "react";
|
||||
import Icon from "./icon";
|
||||
import Icon from "./elements/icon";
|
||||
import {useState} from "react";
|
||||
import {getPeriodString} from "./global";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
export default function Header(props) {
|
||||
|
||||
const parent = {
|
||||
onChangeView: props.onChangeView || function() {},
|
||||
notifications: props.notifications || { },
|
||||
};
|
||||
|
||||
function onChangeView(view) {
|
||||
parent.onChangeView(view);
|
||||
}
|
||||
|
||||
const [dropdownVisible, showDropdown] = useState(false);
|
||||
const mailIcon = <Icon icon={"envelope"} type={"fas"} />;
|
||||
|
||||
@ -31,11 +27,11 @@ export default function Header(props) {
|
||||
const notification = parent.notifications[uid];
|
||||
const createdAt = getPeriodString(notification.created_at);
|
||||
notificationItems.push(
|
||||
<a href="#" className={"dropdown-item"} key={"notification-" + uid}>
|
||||
<Link to={"/admin/logs?notification=" + uid} className={"dropdown-item"} key={"notification-" + uid}>
|
||||
{mailIcon}
|
||||
<span className={"ml-2"}>{notification.title}</span>
|
||||
<span className={"float-right text-muted text-sm"}>{createdAt}</span>
|
||||
</a>);
|
||||
</Link>);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -49,9 +45,9 @@ export default function Header(props) {
|
||||
</a>
|
||||
</li>
|
||||
<li className={"nav-item d-none d-sm-inline-block"}>
|
||||
<a href={"#"} onClick={() => onChangeView("dashboard")} className={"nav-link"}>
|
||||
<Link to={"/admin/dashboard"} className={"nav-link"}>
|
||||
Home
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -84,7 +80,7 @@ export default function Header(props) {
|
||||
</span>
|
||||
{notificationItems}
|
||||
<div className={"dropdown-divider"} />
|
||||
<a href={"#"} onClick={() => onChangeView("dashboard")} className={"dropdown-item dropdown-footer"}>See All Notifications</a>
|
||||
<Link to={"/admin/logs"} className={"dropdown-item dropdown-footer"}>See All Notifications</Link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -5,13 +5,13 @@ import './include/index.css';
|
||||
import API from './api.js';
|
||||
import Header from './header.js';
|
||||
import Sidebar from './sidebar.js';
|
||||
import UserOverview from './users.js';
|
||||
import Overview from './overview.js'
|
||||
import Icon from "./icon";
|
||||
import Dialog from "./dialog";
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom'
|
||||
import UserOverview from './views/users.js';
|
||||
import Overview from './views/overview.js'
|
||||
import Icon from "./elements/icon";
|
||||
import Dialog from "./elements/dialog";
|
||||
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
|
||||
import View404 from "./404";
|
||||
import Switch from "react-router-dom/es/Switch";
|
||||
import Logs from "./views/logs";
|
||||
|
||||
class AdminDashboard extends React.Component {
|
||||
|
||||
@ -78,6 +78,7 @@ class AdminDashboard extends React.Component {
|
||||
<Switch>
|
||||
<Route path={"/admin/dashboard"}><Overview {...this.controlObj} /></Route>
|
||||
<Route path={"/admin/users"}><UserOverview {...this.controlObj} /></Route>
|
||||
<Route path={"/admin/logs"}><Logs {...this.controlObj} /></Route>
|
||||
<Route path={"*"}><View404 /></Route>
|
||||
</Switch>
|
||||
<Dialog {...this.state.dialog}/>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import Icon from "./icon";
|
||||
import Icon from "./elements/icon";
|
||||
import {Link, NavLink} from "react-router-dom";
|
||||
|
||||
export default function Sidebar(props) {
|
||||
@ -32,6 +32,10 @@ export default function Sidebar(props) {
|
||||
"name": "Settings",
|
||||
"icon": "tools"
|
||||
},
|
||||
"logs": {
|
||||
"name": "Logs & Notifications",
|
||||
"icon": "file-medical-alt"
|
||||
},
|
||||
"help": {
|
||||
"name": "Help",
|
||||
"icon": "question-circle"
|
||||
@ -41,7 +45,7 @@ export default function Sidebar(props) {
|
||||
let numNotifications = Object.keys(props.notifications).length;
|
||||
if (numNotifications > 0) {
|
||||
if (numNotifications > 9) numNotifications = "9+";
|
||||
menuItems["dashboard"]["badge"] = { type: "warning", value: numNotifications };
|
||||
menuItems["logs"]["badge"] = { type: "warning", value: numNotifications };
|
||||
}
|
||||
|
||||
let li = [];
|
||||
|
41
admin/src/views/logs.js
Normal file
41
admin/src/views/logs.js
Normal file
@ -0,0 +1,41 @@
|
||||
import * as React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
export default class Logs extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<div className="content-header">
|
||||
<div className="container-fluid">
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<h1 className="m-0 text-dark">Logs & Notifications</h1>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<ol className="breadcrumb float-sm-right">
|
||||
<li className="breadcrumb-item"><Link to={"/admin/dashboard"}>Home</Link></li>
|
||||
<li className="breadcrumb-item active">Logs</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"content"}>
|
||||
<div className={"content-fluid"}>
|
||||
<div className={"row"}>
|
||||
<div className={"col-lg-6"}>
|
||||
|
||||
</div>
|
||||
<div className={"col-lg-6"}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
}
|
@ -1,14 +1,16 @@
|
||||
import * as React from "react";
|
||||
import Icon from "./icon";
|
||||
import Icon from "../elements/icon";
|
||||
import {Link} from "react-router-dom";
|
||||
import {getPeriodString} from "./global";
|
||||
import {getPeriodString} from "../global";
|
||||
import Alert from "../elements/alert";
|
||||
|
||||
export default class UserOverview extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.parent = {
|
||||
showDialog: props.showDialog || function() {},
|
||||
showDialog: props.showDialog || function () {
|
||||
},
|
||||
api: props.api,
|
||||
};
|
||||
this.state = {
|
||||
@ -16,12 +18,14 @@ export default class UserOverview extends React.Component {
|
||||
users: {
|
||||
data: {},
|
||||
page: 1,
|
||||
pageCount: 1
|
||||
pageCount: 1,
|
||||
totalCount: 0,
|
||||
},
|
||||
groups: {
|
||||
data: {},
|
||||
page: 1,
|
||||
pageCount: 1
|
||||
pageCount: 1,
|
||||
totalCount: 0,
|
||||
},
|
||||
errors: []
|
||||
};
|
||||
@ -29,7 +33,7 @@ export default class UserOverview extends React.Component {
|
||||
|
||||
fetchGroups(page) {
|
||||
page = page || this.state.groups.page;
|
||||
this.setState({ ...this.state, groups: { ...this.state.groups, data: { }, page: 1 } });
|
||||
this.setState({...this.state, groups: {...this.state.groups, data: {}, page: 1, totalCount: 0}});
|
||||
this.parent.api.fetchGroups(page).then((res) => {
|
||||
if (res.success) {
|
||||
this.setState({
|
||||
@ -37,13 +41,16 @@ export default class UserOverview extends React.Component {
|
||||
groups: {
|
||||
data: res.groups,
|
||||
pageCount: res.pageCount,
|
||||
page: page
|
||||
page: page,
|
||||
totalCount: res.totalCount,
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let errors = this.state.errors.slice();
|
||||
errors.push({title: "Error fetching groups", message: res.msg});
|
||||
this.setState({
|
||||
...this.state,
|
||||
errors: this.state.errors.slice().push(res.msg)
|
||||
errors: errors
|
||||
});
|
||||
}
|
||||
if (!this.state.loaded) {
|
||||
@ -54,7 +61,7 @@ export default class UserOverview extends React.Component {
|
||||
|
||||
fetchUsers(page) {
|
||||
page = page || this.state.users.page;
|
||||
this.setState({ ...this.state, users: { ...this.state.users, data: { }, pageCount: 1 } });
|
||||
this.setState({...this.state, users: {...this.state.users, data: {}, pageCount: 1, totalCount: 0}});
|
||||
this.parent.api.fetchUsers(page).then((res) => {
|
||||
if (res.success) {
|
||||
this.setState({
|
||||
@ -63,24 +70,35 @@ export default class UserOverview extends React.Component {
|
||||
users: {
|
||||
data: res.users,
|
||||
pageCount: res.pageCount,
|
||||
page: page
|
||||
page: page,
|
||||
totalCount: res.totalCount,
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let errors = this.state.errors.slice();
|
||||
errors.push({title: "Error fetching users", message: res.msg});
|
||||
this.setState({
|
||||
...this.state,
|
||||
loaded: true,
|
||||
errors: this.state.errors.slice().push(res.msg)
|
||||
errors: errors
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ ...this.state, loaded: false });
|
||||
this.setState({...this.state, loaded: false});
|
||||
this.fetchGroups(1);
|
||||
}
|
||||
|
||||
removeError(i) {
|
||||
if (i >= 0 && i < this.state.errors.length) {
|
||||
let errors = this.state.errors.slice();
|
||||
errors.splice(i, 1);
|
||||
this.setState({...this.state, errors: errors});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
if (!this.state.loaded) {
|
||||
@ -89,6 +107,11 @@ export default class UserOverview extends React.Component {
|
||||
</div>
|
||||
}
|
||||
|
||||
let errors = [];
|
||||
for (let i = 0; i < this.state.errors.length; i++) {
|
||||
errors.push(<Alert key={"error-" + i} onClose={() => this.removeError(i)} {...this.state.errors[i]}/>)
|
||||
}
|
||||
|
||||
return <>
|
||||
<div className="content-header">
|
||||
<div className="container-fluid">
|
||||
@ -106,13 +129,14 @@ export default class UserOverview extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
<div className={"content"}>
|
||||
{errors}
|
||||
<div className={"content-fluid"}>
|
||||
<div className={"row"}>
|
||||
<div className={"col-lg-6"}>
|
||||
{ this.createUserCard() }
|
||||
{this.createUserCard()}
|
||||
</div>
|
||||
<div className={"col-lg-6"}>
|
||||
{ this.createGroupCard() }
|
||||
{this.createGroupCard()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -135,7 +159,8 @@ export default class UserOverview extends React.Component {
|
||||
if (user.groups.hasOwnProperty(groupId)) {
|
||||
let groupName = user.groups[groupId];
|
||||
let color = (groupId === "1" ? "danger" : "secondary");
|
||||
groups.push(<span key={"group-" + groupId} className={"mr-1 badge badge-" + color}>{groupName}</span>);
|
||||
groups.push(<span key={"group-" + groupId}
|
||||
className={"mr-1 badge badge-" + color}>{groupName}</span>);
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,11 +181,11 @@ export default class UserOverview extends React.Component {
|
||||
for (let i = 1; i <= this.state.users.pageCount; i++) {
|
||||
let active = (this.state.users.page === i ? " active" : "");
|
||||
pages.push(
|
||||
<li key={"page-" + i} className={"page-item" + active}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchUsers(i)}>
|
||||
{i}
|
||||
</a>
|
||||
</li>
|
||||
<li key={"page-" + i} className={"page-item" + active}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchUsers(i)}>
|
||||
{i}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@ -176,31 +201,38 @@ export default class UserOverview extends React.Component {
|
||||
<div className={"card-body table-responsive p-0"}>
|
||||
<table className={"table table-striped table-valign-middle"}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Groups</th>
|
||||
<th>Registered</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Groups</th>
|
||||
<th>Registered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ userRows }
|
||||
{userRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<nav aria-label={""}>
|
||||
<ul className={"pagination p-2 m-0 justify-content-end"}>
|
||||
<li className={"page-item" + previousDisabled}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchUsers(this.state.users.page - 1)}>
|
||||
Previous
|
||||
</a>
|
||||
</li>
|
||||
{ pages }
|
||||
<li className={"page-item" + nextDisabled}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchUsers(this.state.users.page + 1)}>
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav className={"row m-0"}>
|
||||
<div className={"col-6 pl-3 pt-3 pb-3 text-muted"}>
|
||||
Total: {this.state.users.totalCount}
|
||||
</div>
|
||||
<div className={"col-6 p-0"}>
|
||||
<ul className={"pagination p-2 m-0 justify-content-end"}>
|
||||
<li className={"page-item" + previousDisabled}>
|
||||
<a className={"page-link"} href={"#"}
|
||||
onClick={() => this.fetchUsers(this.state.users.page - 1)}>
|
||||
Previous
|
||||
</a>
|
||||
</li>
|
||||
{pages}
|
||||
<li className={"page-item" + nextDisabled}>
|
||||
<a className={"page-link"} href={"#"}
|
||||
onClick={() => this.fetchUsers(this.state.users.page + 1)}>
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>;
|
||||
@ -256,23 +288,30 @@ export default class UserOverview extends React.Component {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ groupRows }
|
||||
{groupRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<nav aria-label={""}>
|
||||
<ul className={"pagination p-2 m-0 justify-content-end"}>
|
||||
<li className={"page-item" + previousDisabled}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchGroups(this.state.groups.page - 1)}>
|
||||
Previous
|
||||
</a>
|
||||
</li>
|
||||
{ pages }
|
||||
<li className={"page-item" + nextDisabled}>
|
||||
<a className={"page-link"} href={"#"} onClick={() => this.fetchGroups(this.state.groups.page + 1)}>
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav className={"row m-0"}>
|
||||
<div className={"col-6 pl-3 pt-3 pb-3 text-muted"}>
|
||||
Total: {this.state.groups.totalCount}
|
||||
</div>
|
||||
<div className={"col-6 p-0"}>
|
||||
<ul className={"pagination p-2 m-0 justify-content-end"}>
|
||||
<li className={"page-item" + previousDisabled}>
|
||||
<a className={"page-link"} href={"#"}
|
||||
onClick={() => this.fetchGroups(this.state.groups.page - 1)}>
|
||||
Previous
|
||||
</a>
|
||||
</li>
|
||||
{pages}
|
||||
<li className={"page-item" + nextDisabled}>
|
||||
<a className={"page-link"} href={"#"}
|
||||
onClick={() => this.fetchGroups(this.state.groups.page + 1)}>
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>;
|
@ -76,6 +76,7 @@ class Fetch extends Request {
|
||||
);
|
||||
}
|
||||
$this->result["pageCount"] = intval(ceil($this->groupCount / Fetch::SELECT_SIZE));
|
||||
$this->result["totalCount"] = $this->groupCount;
|
||||
}
|
||||
|
||||
return $this->success;
|
||||
|
@ -87,6 +87,7 @@ class Fetch extends Request {
|
||||
}
|
||||
}
|
||||
$this->result["pageCount"] = intval(ceil($this->userCount / Fetch::SELECT_SIZE));
|
||||
$this->result["totalCount"] = $this->userCount;
|
||||
}
|
||||
|
||||
return $this->success;
|
||||
|
124
js/admin.min.js
vendored
124
js/admin.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user