Client - minor style changes
This commit is contained in:
Sam
parent
8f48c34bed
commit
d6615795ba
@ -1,23 +1,38 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
import AdminStats from './AdminStats'
|
||||
import { capitalize } from '../../utils'
|
||||
|
||||
const menuItems = ['application', 'sports', 'users']
|
||||
|
||||
export default function AdminDashboard(props) {
|
||||
const { t } = props
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('administration:FitTrackee administration')}</title>
|
||||
</Helmet>
|
||||
<div className="card activity-card">
|
||||
<div className="card-header">
|
||||
<strong>{t('administration:FitTrackee administration')}</strong>
|
||||
</div>
|
||||
<div className="card-header">{t('administration:Administration')}</div>
|
||||
<div className="card-body">
|
||||
<AdminStats />
|
||||
<ul className="admin-items">
|
||||
{menuItems.map(item => (
|
||||
<li key={item}>
|
||||
<Link
|
||||
to={{
|
||||
pathname: `/admin/${item}`,
|
||||
}}
|
||||
>
|
||||
{t(`administration:${capitalize(item)}`)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import { capitalize } from '../../utils/index'
|
||||
|
||||
const menuItems = ['application', 'sports', 'users']
|
||||
|
||||
export default function AdminMenu(props) {
|
||||
const { t } = props
|
||||
return (
|
||||
<div>
|
||||
<ul className="admin-items">
|
||||
{menuItems.map(item => (
|
||||
<li key={item}>
|
||||
<Link
|
||||
to={{
|
||||
pathname: `/admin/${item}`,
|
||||
}}
|
||||
>
|
||||
{t(`administration:${capitalize(item)}`)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -14,61 +14,59 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
|
||||
</title>
|
||||
</Helmet>
|
||||
<Message message={message} t={t} />
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
{t('administration:Application configuration')}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t(
|
||||
// eslint-disable-next-line max-len
|
||||
'administration:Max. number of active users (if 0, no limitation)'
|
||||
)}
|
||||
:
|
||||
</th>
|
||||
<td>{appConfig.max_users}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of uploaded files')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_single_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of zip archive')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_zip_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. files of zip archive')}:
|
||||
</th>
|
||||
<td>{appConfig.gpx_limit_import}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Edit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
onClick={() => history.push('/admin')}
|
||||
value={t('common:Back')}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
{t('administration:Application configuration')}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<table className="table table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t(
|
||||
// eslint-disable-next-line max-len
|
||||
'administration:Max. number of active users (if 0, no limitation)'
|
||||
)}
|
||||
:
|
||||
</th>
|
||||
<td>{appConfig.max_users}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of uploaded files')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_single_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. size of zip archive')}:
|
||||
</th>
|
||||
<td>{getFileSize(appConfig.max_zip_file_size)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
{t('administration:Max. files of zip archive')}:
|
||||
</th>
|
||||
<td>{appConfig.gpx_limit_import}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Edit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/admin')}
|
||||
value={t('common:Back')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -57,113 +57,110 @@ class AdminApplication extends React.Component {
|
||||
</Helmet>
|
||||
{message && <Message message={message} t={t} />}
|
||||
{Object.keys(formData).length > 0 && (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
{t('administration:Application configuration')}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<form
|
||||
className="app-config-form"
|
||||
onSubmit={event => {
|
||||
event.preventDefault()
|
||||
onHandleConfigFormSubmit(formData)
|
||||
updateIsInEdition()
|
||||
}}
|
||||
>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_users"
|
||||
>
|
||||
{t(
|
||||
// eslint-disable-next-line max-len
|
||||
'administration:Max. number of active users (if 0, no limitation)'
|
||||
)}
|
||||
:
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="max_users"
|
||||
name="max_users"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.max_users}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_single_file_size"
|
||||
>
|
||||
{t(
|
||||
'administration:Max. size of uploaded files (in Mb)'
|
||||
)}
|
||||
:
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="max_single_file_size"
|
||||
name="max_single_file_size"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={formData.max_single_file_size}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_zip_file_size"
|
||||
>
|
||||
{t('administration:Max. size of zip archive (in Mb)')}
|
||||
:
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="max_zip_file_size"
|
||||
name="max_zip_file_size"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={formData.max_zip_file_size}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="gpx_limit_import"
|
||||
>
|
||||
{t('administration:Max. files of zip archive')}
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="gpx_limit_import"
|
||||
name="gpx_limit_import"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.gpx_limit_import}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
{t('administration:Application configuration')}
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<form
|
||||
className="app-config-form"
|
||||
onSubmit={event => {
|
||||
event.preventDefault()
|
||||
onHandleConfigFormSubmit(formData)
|
||||
updateIsInEdition()
|
||||
}}
|
||||
>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_users"
|
||||
>
|
||||
{t(
|
||||
// eslint-disable-next-line max-len
|
||||
'administration:Max. number of active users (if 0, no limitation)'
|
||||
)}
|
||||
:
|
||||
</label>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
value={t('common:Submit')}
|
||||
className="col-sm-5"
|
||||
id="max_users"
|
||||
name="max_users"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.max_users}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_single_file_size"
|
||||
>
|
||||
{t(
|
||||
'administration:Max. size of uploaded files (in Mb)'
|
||||
)}
|
||||
:
|
||||
</label>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Cancel')}
|
||||
className="col-sm-5"
|
||||
id="max_single_file_size"
|
||||
name="max_single_file_size"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={formData.max_single_file_size}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="max_zip_file_size"
|
||||
>
|
||||
{t('administration:Max. size of zip archive (in Mb)')}:
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="max_zip_file_size"
|
||||
name="max_zip_file_size"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={formData.max_zip_file_size}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="gpx_limit_import"
|
||||
>
|
||||
{t('administration:Max. files of zip archive')}
|
||||
</label>
|
||||
<input
|
||||
className="col-sm-5"
|
||||
id="gpx_limit_import"
|
||||
name="gpx_limit_import"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.gpx_limit_import}
|
||||
onChange={e => this.handleFormChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
value={t('common:Submit')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => updateIsInEdition()}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,12 +19,13 @@ class AdminSports extends React.Component {
|
||||
<title>FitTrackee - {t('administration:Administration')}</title>
|
||||
</Helmet>
|
||||
{message && <Message message={message} t={t} />}
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col card">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-header">{t('administration:Sports')}</div>
|
||||
<div className="card-body">
|
||||
{sports.length > 0 && (
|
||||
<table className="table">
|
||||
<table className="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('administration:id')}</th>
|
||||
@ -93,7 +94,7 @@ class AdminSports extends React.Component {
|
||||
)}
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/admin/')}
|
||||
value={t('administration:Back')}
|
||||
/>
|
||||
|
||||
@ -26,7 +26,7 @@ class AdminUsers extends React.Component {
|
||||
<div className="row">
|
||||
<div className="col card">
|
||||
<div className="card-body">
|
||||
<table className="table user-table">
|
||||
<table className="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -103,7 +103,7 @@ class AdminUsers extends React.Component {
|
||||
</table>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/admin/')}
|
||||
value={t('administration:Back')}
|
||||
/>
|
||||
|
||||
@ -2,11 +2,10 @@ import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { withTranslation } from 'react-i18next'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link, Route, Switch } from 'react-router-dom'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
|
||||
import AdminApplication from './Application'
|
||||
import AdminDashboard from './AdminDashboard'
|
||||
import AdminMenu from './AdminMenu'
|
||||
import AdminSports from './Sports'
|
||||
import AdminUsers from './Users'
|
||||
import NotFound from './../Others/NotFound'
|
||||
@ -14,60 +13,40 @@ import NotFound from './../Others/NotFound'
|
||||
function Admin(props) {
|
||||
const { t, user } = props
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>FitTrackee - {t('administration:Administration')}</title>
|
||||
</Helmet>
|
||||
<div className="container dashboard">
|
||||
{user.admin ? (
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="card activity-card">
|
||||
<div className="card-header">
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/admin/',
|
||||
}}
|
||||
>
|
||||
{t('administration:Administration')}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<AdminMenu t={t} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path="/admin"
|
||||
render={() => <AdminDashboard t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/application"
|
||||
render={() => <AdminApplication t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/sports"
|
||||
render={() => <AdminSports t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/users"
|
||||
render={() => <AdminUsers t={t} />}
|
||||
/>
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path="/admin"
|
||||
render={() => <AdminDashboard t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/application"
|
||||
render={() => <AdminApplication t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/sports"
|
||||
render={() => <AdminSports t={t} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/admin/users"
|
||||
render={() => <AdminUsers t={t} />}
|
||||
/>
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
) : (
|
||||
<NotFound />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -187,6 +187,10 @@ label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
text-align: left;
|
||||
}
|
||||
@ -286,6 +290,9 @@ label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
height: 100%;
|
||||
}
|
||||
.dashboard, .history {
|
||||
margin-top: 30px;
|
||||
}
|
||||
@ -316,6 +323,10 @@ label {
|
||||
content: " ✔";
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fa-as-link {
|
||||
cursor:pointer;
|
||||
color: #40578a;
|
||||
|
||||
@ -12,7 +12,7 @@ export default class Message extends React.PureComponent {
|
||||
)}`
|
||||
: t(`messages:${message}`)
|
||||
return (
|
||||
<>
|
||||
<div className="error-message">
|
||||
{singleMessage !== '' && <code>{singleMessage}</code>}
|
||||
{messages && messages.length > 0 && (
|
||||
<code>
|
||||
@ -23,7 +23,7 @@ export default class Message extends React.PureComponent {
|
||||
</ul>
|
||||
</code>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,6 @@ export default function Form(props) {
|
||||
<div className="row">
|
||||
<div className="col-md-3" />
|
||||
<div className="col-md-6">
|
||||
<hr />
|
||||
<br />
|
||||
{props.formType === 'register' && !props.isRegistrationAllowed ? (
|
||||
<div className="card">
|
||||
|
||||
@ -74,7 +74,6 @@ class ProfileEdit extends React.Component {
|
||||
<Helmet>
|
||||
<title>FitTrackee - {t('user:Profile Edition')}</title>
|
||||
</Helmet>
|
||||
<Message message={message} t={t} />
|
||||
{formData.isAuthenticated && (
|
||||
<div className="container">
|
||||
{displayModal && (
|
||||
@ -266,23 +265,27 @@ class ProfileEdit extends React.Component {
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t('common:Submit')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={event => {
|
||||
event.preventDefault()
|
||||
this.displayModal(true)
|
||||
}}
|
||||
>
|
||||
{t('user:Delete my account')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg btn-block"
|
||||
value={t('common:Submit')}
|
||||
/>
|
||||
<input
|
||||
className="btn btn-danger btn-lg btn-block"
|
||||
onClick={() => this.displayModal(true)}
|
||||
defaultValue={t('user:Delete my account')}
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
className="btn btn-secondary btn-lg btn-block"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => history.push('/profile')}
|
||||
value={t('common:Cancel')}
|
||||
/>
|
||||
>
|
||||
{t('common:Cancel')}
|
||||
</button>
|
||||
</form>
|
||||
<Message message={message} t={t} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user