feat: trackers view enhancements

src/components/generics/icons/SpinnerIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <fa-icon class="spinner" icon="fa-circle-notch" size="xl" spin style="--fa-animation-duration: 1s" />
+</template>
+
+<style lang="scss" scoped>
+.spinner {
+  color: $color-base-c2c;
+}
+</style>

src/components/tracking/ApplicationCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card" :class="{ 'has-background-light': application.status === 'not-configured' }">
     <div class="card-content">
       <div class="media">
         <div class="media-left">

src/components/tracking/TrackingDeviceActivities.vue

@@ -9,7 +9,7 @@
               <button class="button" @click="fetch(activity.id)" v-if="!fetching">
                 <fa-icon icon="download"></fa-icon>&hairsp;<span v-translate>Use track</span>
               </button>
-              <span v-else-if="fetching === activity.id"><fa-icon icon="rotate" spin></fa-icon></span>
+              <spinner-icon v-else-if="fetching === activity.id" />
             </tracking-device-activity>
           </div>
         </div>

src/components/tracking/TrackingDeviceActivity.vue

@@ -66,21 +66,11 @@ export default {
     },
 
     heightDiffUp() {
-      if (!this.activity.heightDiffUp) {
-        return undefined;
-      }
-      return `${this.activity.heightDiffUp} ${this.$gettext('meters')}`;
+      return this.$documentUtils.heightDiffUpWithUnit(this.activity.heightDiffUp);
     },
 
     length() {
-      if (!this.activity.length) {
-        return undefined;
-      }
-      if (this.activity.length > 1000) {
-        const length = (this.activity.length / 1000.0).toFixed(1);
-        return `${length} ${this.$gettext('kilometers')}`;
-      }
-      return `${this.activity.length} ${this.$gettext('meters')}`;
+      return this.$documentUtils.lengthWithUnit(this.activity.length);
     },
 
     miniaturesBaseUrl() {

src/js/vue-plugins/document-utils.js

@@ -359,6 +359,24 @@ export default function install(Vue) {
 
         return [minX, minY, maxX, maxY].map(Math.round);
       },
+
+      lengthWithUnit(length) {
+        if (!length) {
+          return undefined;
+        }
+        if (length > 1000) {
+          const l = (length / 1000.0).toFixed(1);
+          return `${l} ${this.$gettext('kilometers')}`;
+        }
+        return `${length} ${this.$gettext('meters')}`;
+      },
+
+      heightDiffUpWithUnit(hdu) {
+        if (!hdu) {
+          return undefined;
+        }
+        return `${hdu} ${this.$gettext('meters')}`;
+      },
     },
   });
 }

src/js/vue-plugins/font-awesome-config.js

@@ -33,6 +33,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
 import { faCloud } from '@fortawesome/free-solid-svg-icons/faCloud';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
 import { faColumns } from '@fortawesome/free-solid-svg-icons/faColumns';
@@ -263,6 +264,7 @@ export default function install(Vue) {
     faChevronUp,
     faChevronDown,
     faCircle,
+    faCircleNotch,
     faCloud,
     faCode,
     faColumns,

src/views/user/TrackersExchangeTokenView.vue

@@ -1,5 +1,5 @@
 <template>
-  <p v-translate>Please wait. Requesting authorization...</p>
+  <p class="m-4" v-translate><spinner-icon /> Please wait. Requesting authorization...</p>
 </template>
 
 <script>

src/views/user/TrackersView.vue

@@ -50,10 +50,21 @@
       <div v-for="activity in activities" :key="activity.id">
         {{ $dateUtils.toTechnicalString(activity.date) }}&hairsp;&bull;&hairsp;<template v-if="activity.name"
           >{{ activity.name }}&hairsp;&bull;&hairsp;</template
-        >{{ activity.type[$user.lang] }}&hairsp;&bull;&hairsp;{{ $gettext(activity.vendor) }}
+        >{{ activity.type[$user.lang] }}&hairsp;&bull;&hairsp;{{ $gettext(activity.vendor)
+        }}<template v-if="activity.duration"
+          >&hairsp;&bull;&hairsp;<fa-icon :icon="['far', 'clock']" :title="$gettext('Duration')"></fa-icon>&hairsp;<span
+            v-html="activity.duration"
+          ></span></template
+        ><template v-if="activity.length">
+          &hairsp;&bull;&hairsp;<fa-icon icon="ruler" :title="$gettext('length')"></fa-icon>&hairsp;<span
+            v-html="activity.length"
+          ></span></template
+        ><template v-if="activity.heightDiffUp"
+          >&hairsp;&bull;&hairsp;<icon-height-diff-up />&hairsp;<span v-html="activity.heightDiffUp"></span
+        ></template>
       </div>
     </template>
-    <div v-else-if="activitiesLoading"><span v-translate>Loading...</span></div>
+    <div v-else-if="activitiesLoading"><spinner-icon /></div>
     <div v-else-if="activitiesError">
       <span v-translate>An error occurred, could not retrieve activities</span>
     </div>
@@ -100,6 +111,13 @@ export default {
         connect: `${config.urls.stravaConnectAuthUrl}?client_id=${config.urls.stravaClientId}&response_type=code&approval_prompt=force&scope=activity:read,activity:read_all&redirect_uri=${this.baseUrl}/trackers/strava/exchange-token`,
         status: 'disabled',
       },
+      {
+        // $gettext('coros')
+        name: 'coros',
+        website: 'https://coros.com/traininghub',
+        connect: `${config.urls.corosConnectAuthUrl}?client_id=${config.urls.corosClientId}&redirect_uri=${this.baseUrl}/trackers/coros/exchange-token&response_type=code`,
+        status: 'disabled',
+      },
       {
         // $gettext('decathlon')
         name: 'decathlon',
@@ -113,13 +131,6 @@ export default {
         website: 'https://www.garmin.com/',
         status: 'disabled',
       },
-      {
-        // $gettext('suunto')
-        name: 'suunto',
-        website: 'https://app.suunto.com/',
-        connect: `${config.urls.suuntoConnectAuthUrl}?client_id=${config.urls.suuntoClientId}&response_type=code&redirect_uri=${this.baseUrl}/trackers/suunto/exchange-token&state=c2c`,
-        status: 'disabled',
-      },
       {
         // $gettext('polar')
         name: 'polar',
@@ -128,10 +139,10 @@ export default {
         status: 'disabled',
       },
       {
-        // $gettext('coros')
-        name: 'coros',
-        website: 'https://coros.com/traininghub',
-        connect: `${config.urls.corosConnectAuthUrl}?client_id=${config.urls.corosClientId}&redirect_uri=${this.baseUrl}/trackers/coros/exchange-token&response_type=code`,
+        // $gettext('suunto')
+        name: 'suunto',
+        website: 'https://app.suunto.com/',
+        connect: `${config.urls.suuntoConnectAuthUrl}?client_id=${config.urls.suuntoClientId}&response_type=code&redirect_uri=${this.baseUrl}/trackers/suunto/exchange-token&state=c2c`,
         status: 'disabled',
       },
     ];
@@ -166,7 +177,14 @@ export default {
           this.trackingService.getActivities(this.$user.id, this.$user.lang).then(
             ({ data }) => {
               this.activitiesLoading = false;
-              this.activities = data.slice(0, 5);
+              this.activities = data.slice(0, 5).map((activity) => ({
+                ...activity,
+                ...(activity.duration && { duration: this.$dateUtils.durationToTimeString(activity.duration) }),
+                ...(activity.heightDiffUp && {
+                  heightDiffUp: this.$documentUtils.heightDiffUpWithUnit(activity.heightDiffUp),
+                }),
+                ...(activity.length && { length: this.$documentUtils.lengthWithUnit(activity.length) }),
+              }));
             },
             () => {
               this.activitiesLoading = false;