API & Client - display uploaded files size in admin + minor changes

fittrackee_client/src/components/Admin/AdminDashboard.jsx

@@ -3,9 +3,6 @@ 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
@@ -18,19 +15,51 @@ export default function AdminDashboard(props) {
         <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>
+          <br />
+          <dl className="admin-items">
+            <dt>
+              <Link
+                to={{
+                  pathname: '/admin/application',
+                }}
+              >
+                {t('administration:Application')}
+              </Link>
+            </dt>
+            <dd>
+              {t(
+                'administration:Update application configuration ' +
+                  '(maximum number of registered users, maximum files size).'
+              )}{' '}
+            </dd>
+            <br />
+            <dt>
+              <Link
+                to={{
+                  pathname: '/admin/sports',
+                }}
+              >
+                {t('administration:Sports')}
+              </Link>
+            </dt>
+            <dd>{t('administration:Enable/disable sports.')}</dd>
+            <br />
+            <dt>
+              <Link
+                to={{
+                  pathname: '/admin/users',
+                }}
+              >
+                {t('administration:Users')}
+              </Link>
+            </dt>
+            <dd>
+              {t(
+                'administration:Add/remove admin rigths, ' +
+                  'delete user account.'
+              )}
+            </dd>
+          </dl>
         </div>
       </div>
     </>

fittrackee_client/src/components/Admin/AdminStats.jsx

@@ -3,6 +3,7 @@ import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
 import { getAppData } from '../../actions/application'
+import { getFileSize } from '../../utils'
 
 class AdminStats extends React.Component {
   componentDidMount() {
@@ -11,9 +12,10 @@ class AdminStats extends React.Component {
 
   render() {
     const { appStats, t } = this.props
+    const uploadDirSize = getFileSize(appStats.uploads_dir_size, false)
     return (
       <div className="row">
-        <div className="col-md-4">
+        <div className="col-lg-3 col-md-6 col-sm-6">
           <div className="card activity-card">
             <div className="card-body row">
               <div className="col-3">
@@ -32,7 +34,7 @@ class AdminStats extends React.Component {
             </div>
           </div>
         </div>
-        <div className="col-md-4">
+        <div className="col-lg-3 col-md-6 col-sm-6">
           <div className="card activity-card">
             <div className="card-body row">
               <div className="col-3">
@@ -49,7 +51,7 @@ class AdminStats extends React.Component {
             </div>
           </div>
         </div>
-        <div className="col-md-4">
+        <div className="col-lg-3 col-md-6 col-sm-6">
           <div className="card activity-card">
             <div className="card-body row">
               <div className="col-3">
@@ -68,6 +70,21 @@ class AdminStats extends React.Component {
             </div>
           </div>
         </div>
+        <div className="col-lg-3 col-md-6 col-sm-6">
+          <div className="card activity-card">
+            <div className="card-body row">
+              <div className="col-3">
+                <i className="fa fa-folder-open fa-3x fa-color" />
+              </div>
+              <div className="col-9 text-right">
+                <div className="huge">{uploadDirSize.size}</div>
+                <div>
+                  {uploadDirSize.suffix} ({t('administration:uploads')})
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

fittrackee_client/src/components/Admin/Sports/index.jsx

@@ -96,7 +96,7 @@ class AdminSports extends React.Component {
                   type="submit"
                   className="btn btn-secondary"
                   onClick={() => history.push('/admin/')}
-                  value={t('administration:Back')}
+                  value={t('common:Back')}
                 />
               </div>
             </div>

fittrackee_client/src/components/Admin/Users/index.jsx

@@ -89,8 +89,8 @@ class AdminUsers extends React.Component {
                             disabled={user.username === authUser.username}
                             value={
                               user.admin
-                                ? t('administration:Remove')
-                                : t('administration:Add')
+                                ? t('administration:Remove admin rights')
+                                : t('administration:Add admin rights')
                             }
                             onClick={() =>
                               updateUser(user.username, !user.admin)
@@ -105,7 +105,7 @@ class AdminUsers extends React.Component {
                   type="submit"
                   className="btn btn-secondary"
                   onClick={() => history.push('/admin/')}
-                  value={t('administration:Back')}
+                  value={t('common:Back')}
                 />
               </div>
             </div>

fittrackee_client/src/components/Dashboard/UserStatistics.jsx

@@ -13,7 +13,7 @@ export default function UserStatistics(props) {
   duration = `${duration.split(':')[0]}h ${duration.split(':')[1]}min`
   return (
     <div className="row">
-      <div className="col-md-3">
+      <div className="col-lg-3 col-md-6 col-sm-6">
         <div className="card activity-card">
           <div className="card-body row">
             <div className="col-3">
@@ -30,7 +30,7 @@ export default function UserStatistics(props) {
           </div>
         </div>
       </div>
-      <div className="col-md-3">
+      <div className="col-lg-3 col-md-6 col-sm-6">
         <div className="card activity-card">
           <div className="card-body row">
             <div className="col-3">
@@ -45,7 +45,7 @@ export default function UserStatistics(props) {
           </div>
         </div>
       </div>
-      <div className="col-md-3">
+      <div className="col-lg-3 col-md-6 col-sm-6">
         <div className="card activity-card">
           <div className="card-body row">
             <div className="col-3">
@@ -58,7 +58,7 @@ export default function UserStatistics(props) {
           </div>
         </div>
       </div>
-      <div className="col-md-3">
+      <div className="col-lg-3 col-md-6 col-sm-6">
         <div className="card activity-card">
           <div className="card-body row">
             <div className="col-3">

fittrackee_client/src/components/User/ProfileDetail.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom'
 import Message from '../Common/Message'
 import { deletePicture, uploadPicture } from '../../actions/user'
 import { apiUrl, getFileSize } from '../../utils'
+import { history } from '../../index'
 
 function ProfileDetail({
   appConfig,
@@ -135,6 +136,12 @@ function ProfileDetail({
                     )}{' '}
                   </div>
                 </div>
+                <input
+                  type="submit"
+                  className="btn btn-secondary"
+                  onClick={() => history.go(-1)}
+                  value={t('common:Back')}
+                />
               </div>
             </div>
           </div>