Projekte/web-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some more stuff

Browse Source
This commit is contained in:
Roman Hergenreder 2020-06-15 23:10:14 +02:00
parent 7124038b5b
commit 32df152ca7
14 changed files with 330 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
admin/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

25
admin/src/404.js
View File

@ -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
View 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>
)
}

0
admin/src/dialog.js → admin/src/elements/dialog.js
View File

7
admin/src/icon.js → admin/src/elements/icon.js
View File

@ -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} />
);
}

18
admin/src/header.js
View File

@ -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>

13
admin/src/index.js
View File

@ -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}/>

8
admin/src/sidebar.js
View File

@ -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
View 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>
</>;
}
}

0
admin/src/overview.js → admin/src/views/overview.js
View File

151
admin/src/users.js → admin/src/views/users.js
View File

@ -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>;

1
core/Api/Groups/Fetch.class.php
View File

@ -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;

1
core/Api/User/Fetch.class.php
View File

@ -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
View File

File diff suppressed because one or more lines are too long