use api response object properly

ref #11

src/components/Profile.vue

@@ -139,8 +139,12 @@
                       </thead>
                       <tbody class="text-gray-900 dark:text-gray-50">
                         <tr v-for="s in state.scans" :key="s.id">
-                          <td class="px-4 py-3">s.distance</td>
-                          <td class="px-4 py-3">s.time</td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.distance"></span>m
+                          </td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.lapTime"></span>s
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -198,6 +202,7 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
 axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
   .then(({ data }) => {
     state.scans = data;
+    // TODO: filter for valid=true scans only
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })