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">
<li><p>without parameters</p></li>
</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>
</pre></div>
</div>

View File

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

View File

@ -50,5 +50,14 @@
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></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>
</html>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -27,36 +27,46 @@ export default function RecordsCard(props) {
: Object.keys(recordsBySport)
.sort()
.map(sportLabel => (
<table
className="table table-borderless table-sm record-table"
key={sportLabel}
>
<thead>
<tr>
<th colSpan="3">
<img
alt={`${sportLabel} logo`}
className="record-logo"
src={recordsBySport[sportLabel].img}
/>
{sportLabel}
</th>
</tr>
</thead>
<tbody>
{recordsBySport[sportLabel].records.map(rec => (
<tr key={rec.id}>
<td>{t(`activities:${rec.record_type}`)}</td>
<td className="text-right">{rec.value}</td>
<td className="text-right">
<Link to={`/activities/${rec.activity_id}`}>
{rec.activity_date}
</Link>
</td>
<div key={sportLabel}>
<span className="heading-span">
<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>
<tr>
<th colSpan="3">
<img
alt={`${sportLabel} logo`}
className="record-logo"
src={recordsBySport[sportLabel].img}
/>
{sportLabel}
</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{recordsBySport[sportLabel].records.map(rec => (
<tr className="record-tr" key={rec.id}>
<td className="record-td">
{t(`activities:${rec.record_type}`)}
</td>
<td className="record-td text-right">{rec.value}</td>
<td className="record-td text-right">
<Link to={`/activities/${rec.activity_id}`}>
{rec.activity_date}
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
))}
</div>
</div>

View File

@ -3,7 +3,7 @@
"Active": "Active",
"activities exist": "activities exist",
"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",
"Application": "Application",
"Application configuration": "Application configuration",

View File

@ -2,7 +2,7 @@
"Actions": "Actions",
"Active": "Active",
"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",
"activities exist": "des activités existent",
"Application": "Application",
@ -22,8 +22,8 @@
"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 (in Mb)": "Taille max. des archives zip (en Mo)",
"Registration is currently disabled.": "Les inscriptions sont actuellement désactivées",
"Registration is currently enabled.": "Les inscriptions sont actuellement activées",
"Registration is currently disabled.": "Les inscriptions sont actuellement désactivées.",
"Registration is currently enabled.": "Les inscriptions sont actuellement activées.",
"Remove admin rights": "Retirer des droits d'admin",
"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).",