API & Client - minor fixes

This commit is contained in:
Sam 2020-05-03 11:30:40 +02:00
parent 5d7b63f7aa
commit 0c07ce172a
11 changed files with 117 additions and 59 deletions

View File

@ -133,7 +133,7 @@
<ul class="simple"> <ul class="simple">
<li><p>without parameters</p></li> <li><p>without parameters</p></li>
</ul> </ul>
<div class="highlight-http notranslate"><div class="highlight"><pre><span></span><span class="nf">GET</span> <span class="nn">/api/users/</span> <span class="kr">HTTP</span><span class="o">/</span><span class="m">1.1</span> <div class="highlight-http notranslate"><div class="highlight"><pre><span></span><span class="nf">GET</span> <span class="nn">/api/users</span> <span class="kr">HTTP</span><span class="o">/</span><span class="m">1.1</span>
<span class="na">Content-Type</span><span class="o">:</span> <span class="l">application/json</span> <span class="na">Content-Type</span><span class="o">:</span> <span class="l">application/json</span>
</pre></div> </pre></div>
</div> </div>

View File

@ -26,7 +26,7 @@ def get_users(auth_user_id):
.. sourcecode:: http .. sourcecode:: http
GET /api/users/ HTTP/1.1 GET /api/users HTTP/1.1
Content-Type: application/json Content-Type: application/json
- with some query parameters - with some query parameters

View File

@ -50,5 +50,14 @@
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script type="text/javascript">
$( document ).ready(function() {
$("li.nav-item").click(function(){
$("button.navbar-toggler").toggleClass("collapsed");
$("#navbarSupportedContent").toggleClass("show");
console.log('toto')
});
});
</script>
</body> </body>
</html> </html>

View File

@ -30,6 +30,9 @@ export default class ActivitiesList extends React.PureComponent {
// eslint-disable-next-line react/no-array-index-key // eslint-disable-next-line react/no-array-index-key
<tr key={idx}> <tr key={idx}>
<td> <td>
<span className="heading-span-absolute">
{t('common:Sport')}
</span>
<img <img
className="activity-sport" className="activity-sport"
src={sports src={sports
@ -39,6 +42,9 @@ export default class ActivitiesList extends React.PureComponent {
/> />
</td> </td>
<td className="activity-title"> <td className="activity-title">
<span className="heading-span-absolute">
{t('common:Workout')}
</span>
<Link to={`/activities/${activity.id}`}> <Link to={`/activities/${activity.id}`}>
{activity.title} {activity.title}
</Link> </Link>
@ -47,17 +53,38 @@ export default class ActivitiesList extends React.PureComponent {
)} )}
</td> </td>
<td> <td>
<span className="heading-span-absolute">
{t('activities:Date')}
</span>
{format( {format(
getDateWithTZ(activity.activity_date, user.timezone), getDateWithTZ(activity.activity_date, user.timezone),
'dd/MM/yyyy HH:mm' 'dd/MM/yyyy HH:mm'
)} )}
</td> </td>
<td className="text-right"> <td className="text-right">
<span className="heading-span-absolute">
{t('activities:Distance')}
</span>
{Number(activity.distance).toFixed(2)} km {Number(activity.distance).toFixed(2)} km
</td> </td>
<td className="text-right">{activity.moving}</td> <td className="text-right">
<td className="text-right">{activity.ave_speed} km/h</td> <span className="heading-span-absolute">
<td className="text-right">{activity.max_speed} km/h</td> {t('activities:Duration')}
</span>
{activity.moving}
</td>
<td className="text-right">
<span className="heading-span-absolute">
{t('activities:Ave. speed')}
</span>
{activity.ave_speed} km/h
</td>
<td className="text-right">
<span className="heading-span-absolute">
{t('activities:Max. speed')}
</span>
{activity.max_speed} km/h
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

View File

@ -60,7 +60,7 @@ export default function AdminDashboard(props) {
</dt> </dt>
<dd> <dd>
{t( {t(
'administration:Add/remove admin rigths, ' + 'administration:Add/remove admin rights, ' +
'delete user account.' 'delete user account.'
)} )}
</dd> </dd>

View File

@ -37,13 +37,13 @@ class AdminSports extends React.Component {
{sports.map(sport => ( {sports.map(sport => (
<tr key={sport.id}> <tr key={sport.id}>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:id')} {t('administration:id')}
</span> </span>
{sport.id} {sport.id}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:Image')} {t('administration:Image')}
</span> </span>
<img <img
@ -53,13 +53,13 @@ class AdminSports extends React.Component {
/> />
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:Label')} {t('administration:Label')}
</span> </span>
{t(`sports:${sport.label}`)} {t(`sports:${sport.label}`)}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:Active')} {t('administration:Active')}
</span> </span>
{sport.is_active ? ( {sport.is_active ? (
@ -77,7 +77,7 @@ class AdminSports extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:Actions')} {t('administration:Actions')}
</span> </span>
<input <input

View File

@ -27,8 +27,7 @@ class AdminUsers extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.initState() this.props.loadUsers(this.initState())
this.props.loadUsers(this.props.location.query)
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
@ -39,12 +38,14 @@ class AdminUsers extends React.Component {
initState() { initState() {
const { query } = this.props.location const { query } = this.props.location
this.setState({ const newQuery = {
page: query.page, page: query.page,
per_page: query.per_page, per_page: query.per_page,
order_by: query.order_by ? query.order_by : 'created_at', order_by: query.order_by ? query.order_by : 'created_at',
order: query.order ? query.order : 'asc', order: query.order ? query.order : 'asc',
}) }
this.setState(newQuery)
return newQuery
} }
updatePage(key, value) { updatePage(key, value) {
@ -134,7 +135,7 @@ class AdminUsers extends React.Component {
{users.map(user => ( {users.map(user => (
<tr key={user.username}> <tr key={user.username}>
<td> <td>
<span className="heading-span">#</span> <span className="heading-span-absolute">#</span>
{user.picture === true ? ( {user.picture === true ? (
<img <img
alt="Avatar" alt="Avatar"
@ -151,7 +152,7 @@ class AdminUsers extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('user:Username')} {t('user:Username')}
</span> </span>
<Link to={`/users/${user.username}`}> <Link to={`/users/${user.username}`}>
@ -159,13 +160,13 @@ class AdminUsers extends React.Component {
</Link> </Link>
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('user:Email')} {t('user:Email')}
</span> </span>
{user.email} {user.email}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('user:Registration Date')} {t('user:Registration Date')}
</span> </span>
{format( {format(
@ -174,13 +175,13 @@ class AdminUsers extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('activities:Activities')} {t('activities:Activities')}
</span> </span>
{user.nb_activities} {user.nb_activities}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('user:Admin')} {t('user:Admin')}
</span> </span>
{user.admin ? ( {user.admin ? (
@ -198,7 +199,7 @@ class AdminUsers extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span"> <span className="heading-span-absolute">
{t('administration:Actions')} {t('administration:Actions')}
</span> </span>
<input <input

View File

@ -552,19 +552,24 @@ label {
/* responsive table */ /* responsive table */
/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */ /* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
.heading-span { .heading-span,
.heading-span-absolute {
background: #eee; background: #eee;
color: dimgrey; color: dimgrey;
display: none; display: none;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
position: absolute;
text-transform: uppercase; text-transform: uppercase;
top: 0; top: 0;
left: 0; left: 0;
} }
.heading-span-absolute {
position: absolute;
display: none;
}
@media(max-width: 1024px) { @media(max-width: 1024px) {
table thead { table thead {
left: -9999px; left: -9999px;
@ -581,12 +586,18 @@ label {
table td { table td {
border: 1px solid lightgrey; border: 1px solid lightgrey;
margin: 0 -1px -1px 0; margin: 0 -1px -1px 0;
padding-top: 35px !important; padding-top: 30px !important;
position: relative; position: relative;
text-align: center; text-align: center;
width: 50%; width: 50%;
} }
.heading-span { .record-tr {
margin-bottom: 0;
}
.record-td {
padding-top: 0 !important;
}
.heading-span, .heading-span-absolute {
display: block; display: block;
} }
} }

View File

@ -27,10 +27,17 @@ export default function RecordsCard(props) {
: Object.keys(recordsBySport) : Object.keys(recordsBySport)
.sort() .sort()
.map(sportLabel => ( .map(sportLabel => (
<table <div key={sportLabel}>
className="table table-borderless table-sm record-table" <span className="heading-span">
key={sportLabel} <img
> alt={`${sportLabel} logo`}
className="record-logo"
src={recordsBySport[sportLabel].img}
/>
{sportLabel}
</span>
{/* eslint-disable-next-line max-len */}
<table className="table table-borderless table-sm record-table">
<thead> <thead>
<tr> <tr>
<th colSpan="3"> <th colSpan="3">
@ -45,10 +52,12 @@ export default function RecordsCard(props) {
</thead> </thead>
<tbody> <tbody>
{recordsBySport[sportLabel].records.map(rec => ( {recordsBySport[sportLabel].records.map(rec => (
<tr key={rec.id}> <tr className="record-tr" key={rec.id}>
<td>{t(`activities:${rec.record_type}`)}</td> <td className="record-td">
<td className="text-right">{rec.value}</td> {t(`activities:${rec.record_type}`)}
<td className="text-right"> </td>
<td className="record-td text-right">{rec.value}</td>
<td className="record-td text-right">
<Link to={`/activities/${rec.activity_id}`}> <Link to={`/activities/${rec.activity_id}`}>
{rec.activity_date} {rec.activity_date}
</Link> </Link>
@ -57,6 +66,7 @@ export default function RecordsCard(props) {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
))} ))}
</div> </div>
</div> </div>

View File

@ -3,7 +3,7 @@
"Active": "Active", "Active": "Active",
"activities exist": "activities exist", "activities exist": "activities exist",
"Add admin rights": "Add admin rights", "Add admin rights": "Add admin rights",
"Add/remove admin rigths, delete user account.": "Add/remove admin rigths, delete user account.", "Add/remove admin rights, delete user account.": "Add/remove admin rights, delete user account.",
"Administration": "Administration", "Administration": "Administration",
"Application": "Application", "Application": "Application",
"Application configuration": "Application configuration", "Application configuration": "Application configuration",

View File

@ -2,7 +2,7 @@
"Actions": "Actions", "Actions": "Actions",
"Active": "Active", "Active": "Active",
"Add admin rights": "Ajouter des droits d'admin", "Add admin rights": "Ajouter des droits d'admin",
"Add/remove admin rigths, delete user account.": "Ajouter/retirer des droits d'adminsitration, supprimer des comptes utilisateurs.", "Add/remove admin rights, delete user account.": "Ajouter/retirer des droits d'adminsitration, supprimer des comptes utilisateurs.",
"Administration": "Administration", "Administration": "Administration",
"activities exist": "des activités existent", "activities exist": "des activités existent",
"Application": "Application", "Application": "Application",
@ -22,8 +22,8 @@
"Max. size of uploaded files (in Mb)": "Taille max. des fichiers (en Mo)", "Max. size of uploaded files (in Mb)": "Taille max. des fichiers (en Mo)",
"Max. size of zip archive": "Taille max. des archives zip", "Max. size of zip archive": "Taille max. des archives zip",
"Max. size of zip archive (in Mb)": "Taille max. des archives zip (en Mo)", "Max. size of zip archive (in Mb)": "Taille max. des archives zip (en Mo)",
"Registration is currently disabled.": "Les inscriptions sont actuellement désactivées", "Registration is currently disabled.": "Les inscriptions sont actuellement désactivées.",
"Registration is currently enabled.": "Les inscriptions sont actuellement activées", "Registration is currently enabled.": "Les inscriptions sont actuellement activées.",
"Remove admin rights": "Retirer des droits d'admin", "Remove admin rights": "Retirer des droits d'admin",
"Sports": "Sports", "Sports": "Sports",
"Update application configuration (maximum number of registered users, maximum files size).": "Configurer l'application (nombre maximum d'utilisateurs inscrits, taille maximale des fichers).", "Update application configuration (maximum number of registered users, maximum files size).": "Configurer l'application (nombre maximum d'utilisateurs inscrits, taille maximale des fichers).",