Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - minor style changes

Browse Source
This commit is contained in:
Sam 2020-05-01 18:06:05 +02:00
parent 8f48c34bed
commit d6615795ba
11 changed files with 238 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
fittrackee_client/src/components/Admin/AdminDashboard.jsx
View File

@ -1,23 +1,38 @@
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import AdminStats from './AdminStats' import AdminStats from './AdminStats'
import { capitalize } from '../../utils'
const menuItems = ['application', 'sports', 'users']
export default function AdminDashboard(props) { export default function AdminDashboard(props) {
const { t } = props const { t } = props
return ( return (
<div> <>
<Helmet> <Helmet>
<title>{t('administration:FitTrackee administration')}</title> <title>{t('administration:FitTrackee administration')}</title>
</Helmet> </Helmet>
<div className="card activity-card"> <div className="card activity-card">
<div className="card-header"> <div className="card-header">{t('administration:Administration')}</div>
<strong>{t('administration:FitTrackee administration')}</strong>
</div>
<div className="card-body"> <div className="card-body">
<AdminStats /> <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> </div>
</div> </>
) )
} }

27
fittrackee_client/src/components/Admin/AdminMenu.jsx
View File

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

108
fittrackee_client/src/components/Admin/Application/Config.jsx
View File

@ -14,61 +14,59 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
</title> </title>
</Helmet> </Helmet>
<Message message={message} t={t} /> <Message message={message} t={t} />
<div className="container"> <div className="row">
<div className="row"> <div className="col">
<div className="col-md-12"> <div className="card">
<div className="card"> <div className="card-header">
<div className="card-header"> {t('administration:Application configuration')}
{t('administration:Application configuration')} </div>
</div> <div className="card-body">
<div className="card-body"> <div className="row">
<div className="row"> <div className="col">
<div className="col"> <table className="table table-borderless">
<table className="table"> <tbody>
<tbody> <tr>
<tr> <th scope="row">
<th scope="row"> {t(
{t( // eslint-disable-next-line max-len
// eslint-disable-next-line max-len 'administration:Max. number of active users (if 0, no limitation)'
'administration:Max. number of active users (if 0, no limitation)' )}
)} :
: </th>
</th> <td>{appConfig.max_users}</td>
<td>{appConfig.max_users}</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> {t('administration:Max. size of uploaded files')}:
{t('administration:Max. size of uploaded files')}: </th>
</th> <td>{getFileSize(appConfig.max_single_file_size)}</td>
<td>{getFileSize(appConfig.max_single_file_size)}</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> {t('administration:Max. size of zip archive')}:
{t('administration:Max. size of zip archive')}: </th>
</th> <td>{getFileSize(appConfig.max_zip_file_size)}</td>
<td>{getFileSize(appConfig.max_zip_file_size)}</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> {t('administration:Max. files of zip archive')}:
{t('administration:Max. files of zip archive')}: </th>
</th> <td>{appConfig.gpx_limit_import}</td>
<td>{appConfig.gpx_limit_import}</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> <input
<input type="submit"
type="submit" className="btn btn-primary"
className="btn btn-primary btn-lg btn-block" onClick={() => updateIsInEdition()}
onClick={() => updateIsInEdition()} value={t('common:Edit')}
value={t('common:Edit')} />
/> <input
<input type="submit"
type="submit" className="btn btn-secondary"
className="btn btn-secondary btn-lg btn-block" onClick={() => history.push('/admin')}
onClick={() => history.push('/admin')} value={t('common:Back')}
value={t('common:Back')} />
/>
</div>
</div> </div>
</div> </div>
</div> </div>

203
fittrackee_client/src/components/Admin/Application/ConfigForm.jsx
View File

@ -57,113 +57,110 @@ class AdminApplication extends React.Component {
</Helmet> </Helmet>
{message && <Message message={message} t={t} />} {message && <Message message={message} t={t} />}
{Object.keys(formData).length > 0 && ( {Object.keys(formData).length > 0 && (
<div className="container"> <div className="row">
<div className="row"> <div className="col-md-12">
<div className="col-md-12"> <div className="card">
<div className="card"> <div className="card-header">
<div className="card-header"> {t('administration:Application configuration')}
{t('administration:Application configuration')} </div>
</div> <div className="card-body">
<div className="card-body"> <form
<form className="app-config-form"
className="app-config-form" onSubmit={event => {
onSubmit={event => { event.preventDefault()
event.preventDefault() onHandleConfigFormSubmit(formData)
onHandleConfigFormSubmit(formData) updateIsInEdition()
updateIsInEdition() }}
}} >
> <div className="form-group row">
<div className="form-group row"> <label
<label className="col-sm-6 col-form-label"
className="col-sm-6 col-form-label" htmlFor="max_users"
htmlFor="max_users" >
> {t(
{t( // eslint-disable-next-line max-len
// eslint-disable-next-line max-len 'administration:Max. number of active users (if 0, no limitation)'
'administration:Max. number of active users (if 0, no limitation)' )}
)} :
: </label>
</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>
<input <input
type="submit" className="col-sm-5"
className="btn btn-primary btn-lg btn-block" id="max_users"
value={t('common:Submit')} 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 <input
type="submit" className="col-sm-5"
className="btn btn-secondary btn-lg btn-block" id="max_single_file_size"
onClick={() => updateIsInEdition()} name="max_single_file_size"
value={t('common:Cancel')} 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> </div>
</div> </div>

11
fittrackee_client/src/components/Admin/Sports/index.jsx
View File

@ -19,12 +19,13 @@ class AdminSports extends React.Component {
<title>FitTrackee - {t('administration:Administration')}</title> <title>FitTrackee - {t('administration:Administration')}</title>
</Helmet> </Helmet>
{message && <Message message={message} t={t} />} {message && <Message message={message} t={t} />}
<div className="container"> <div className="row">
<div className="row"> <div className="col">
<div className="col card"> <div className="card">
<div className="card-header">{t('administration:Sports')}</div>
<div className="card-body"> <div className="card-body">
{sports.length > 0 && ( {sports.length > 0 && (
<table className="table"> <table className="table table-borderless">
<thead> <thead>
<tr> <tr>
<th>{t('administration:id')}</th> <th>{t('administration:id')}</th>
@ -93,7 +94,7 @@ class AdminSports extends React.Component {
)} )}
<input <input
type="submit" type="submit"
className="btn btn-secondary btn-lg btn-block" className="btn btn-secondary"
onClick={() => history.push('/admin/')} onClick={() => history.push('/admin/')}
value={t('administration:Back')} value={t('administration:Back')}
/> />

4
fittrackee_client/src/components/Admin/Users/index.jsx
View File

@ -26,7 +26,7 @@ class AdminUsers extends React.Component {
<div className="row"> <div className="row">
<div className="col card"> <div className="col card">
<div className="card-body"> <div className="card-body">
<table className="table user-table"> <table className="table table-borderless">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -103,7 +103,7 @@ class AdminUsers extends React.Component {
</table> </table>
<input <input
type="submit" type="submit"
className="btn btn-secondary btn-lg btn-block" className="btn btn-secondary"
onClick={() => history.push('/admin/')} onClick={() => history.push('/admin/')}
value={t('administration:Back')} value={t('administration:Back')}
/> />

73
fittrackee_client/src/components/Admin/index.jsx
View File

@ -2,11 +2,10 @@ import React from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next' import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux' 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 AdminApplication from './Application'
import AdminDashboard from './AdminDashboard' import AdminDashboard from './AdminDashboard'
import AdminMenu from './AdminMenu'
import AdminSports from './Sports' import AdminSports from './Sports'
import AdminUsers from './Users' import AdminUsers from './Users'
import NotFound from './../Others/NotFound' import NotFound from './../Others/NotFound'
@ -14,60 +13,40 @@ import NotFound from './../Others/NotFound'
function Admin(props) { function Admin(props) {
const { t, user } = props const { t, user } = props
return ( return (
<div> <>
<Helmet> <Helmet>
<title>FitTrackee - {t('administration:Administration')}</title> <title>FitTrackee - {t('administration:Administration')}</title>
</Helmet> </Helmet>
<div className="container dashboard"> <div className="container dashboard">
{user.admin ? ( {user.admin ? (
<div className="row"> <Switch>
<div className="col-md-3"> <Route
<div className="card activity-card"> exact
<div className="card-header"> path="/admin"
<Link render={() => <AdminDashboard t={t} />}
to={{ />
pathname: '/admin/', <Route
}} exact
> path="/admin/application"
{t('administration:Administration')} render={() => <AdminApplication t={t} />}
</Link> />
</div> <Route
<div className="card-body"> exact
<AdminMenu t={t} /> path="/admin/sports"
</div> render={() => <AdminSports t={t} />}
</div> />
</div> <Route
<div className="col-md-9"> exact
<Switch> path="/admin/users"
<Route render={() => <AdminUsers t={t} />}
exact />
path="/admin" <Route component={NotFound} />
render={() => <AdminDashboard t={t} />} </Switch>
/>
<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>
) : ( ) : (
<NotFound /> <NotFound />
)} )}
</div> </div>
</div> </>
) )
} }

11
fittrackee_client/src/components/App.css
View File

@ -187,6 +187,10 @@ label {
font-weight: bold; font-weight: bold;
} }
.btn {
margin-right: 10px;
}
.card { .card {
text-align: left; text-align: left;
} }
@ -286,6 +290,9 @@ label {
font-weight: bold; font-weight: bold;
} }
.dashboard {
height: 100%;
}
.dashboard, .history { .dashboard, .history {
margin-top: 30px; margin-top: 30px;
} }
@ -316,6 +323,10 @@ label {
content: " ✔"; content: " ✔";
} }
.error-message {
margin-top: 10px;
}
.fa-as-link { .fa-as-link {
cursor:pointer; cursor:pointer;
color: #40578a; color: #40578a;

4
fittrackee_client/src/components/Common/Message.jsx
View File

@ -12,7 +12,7 @@ export default class Message extends React.PureComponent {
)}` )}`
: t(`messages:${message}`) : t(`messages:${message}`)
return ( return (
<> <div className="error-message">
{singleMessage !== '' && <code>{singleMessage}</code>} {singleMessage !== '' && <code>{singleMessage}</code>}
{messages && messages.length > 0 && ( {messages && messages.length > 0 && (
<code> <code>
@ -23,7 +23,7 @@ export default class Message extends React.PureComponent {
</ul> </ul>
</code> </code>
)} )}
</> </div>
) )
} }
} }

1
fittrackee_client/src/components/User/Form.jsx
View File

@ -19,7 +19,6 @@ export default function Form(props) {
<div className="row"> <div className="row">
<div className="col-md-3" /> <div className="col-md-3" />
<div className="col-md-6"> <div className="col-md-6">
<hr />
<br /> <br />
{props.formType === 'register' && !props.isRegistrationAllowed ? ( {props.formType === 'register' && !props.isRegistrationAllowed ? (
<div className="card"> <div className="card">

33
fittrackee_client/src/components/User/ProfileEdit.jsx
View File

@ -74,7 +74,6 @@ class ProfileEdit extends React.Component {
<Helmet> <Helmet>
<title>FitTrackee - {t('user:Profile Edition')}</title> <title>FitTrackee - {t('user:Profile Edition')}</title>
</Helmet> </Helmet>
<Message message={message} t={t} />
{formData.isAuthenticated && ( {formData.isAuthenticated && (
<div className="container"> <div className="container">
{displayModal && ( {displayModal && (
@ -266,23 +265,27 @@ class ProfileEdit extends React.Component {
</select> </select>
</label> </label>
</div> </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" type="submit"
className="btn btn-primary btn-lg btn-block" className="btn btn-secondary"
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"
onClick={() => history.push('/profile')} onClick={() => history.push('/profile')}
value={t('common:Cancel')} >
/> {t('common:Cancel')}
</button>
</form> </form>
<Message message={message} t={t} />
</div> </div>
</div> </div>
</div> </div>