If there is an error but videos were uploaded, show them. Added search Functionality.

public/tags/subjectTags.json

@@ -1,6 +1,9 @@
 { "subject_tags": [
     { "value": "unimpaired", "label": "Unimpaired" },
     { "value": "alzheimers", "label": "Alzheimers" },
+    { "value": "anterior_cruciate_ligament", "label": "Anterior Cruciate Ligament (ACL)"},
+    { "value": "anterior_cruciate_ligament_replacement_left", "label": "Anterior Cruciate Ligament Replacement (ACLR) - Left"},
+    { "value": "anterior_cruciate_ligament_replacement_right", "label": "Anterior Cruciate Ligament Replacement (ACLR) - Right"},
     { "value": "athlete", "label": "Athlete" },
     { "value": "blind", "label": "Blind" },
     { "value": "cerebral_palsy", "label": "Cerebral Palsy" },
@@ -31,6 +34,8 @@
     { "value": "post_partum", "label": "Postpartum" },
     { "value": "ptsd", "label": "Post-Traumatic Stress Disorder (PTSD)" },
     { "value": "pregnant", "label": "Pregnant" },
+    { "value": "slipped_capital_femoral_epiphysis", "label": "Slipped Capital Femoral Epiphysis" },
+    { "value": "spinal_cord_injury", "label": "Spinal Cord Injury (SCI)" },
     { "value": "spina_bifida", "label": "Spina Bifida" },
     { "value": "stroke", "label": "Stroke" },
     { "value": "stroke_left_hemiparesis", "label": "Stroke Left Hemiparesis" },

src/components/pages/Calibration.vue

@@ -2,11 +2,18 @@
   <MainLayout
     column
     leftButton="Back"
-    rightButton="Calibrate"
     :step="2"
     :rightDisabled="busy"
-    @left="$router.push(`/${session.id}/connect-devices`)"
-    @right="onNext">
+    @left="$router.push(`/${session.id}/connect-devices`)">
+
+    <!-- Custom right section with two buttons -->
+    <template v-slot:right>
+      <v-btn
+        :disabled="busy"
+        @click="onNext">
+        Calibrate
+      </v-btn>
+    </template>
 
     <v-card class="step-2-1">
       <v-card-text class="d-flex align-center">
@@ -239,6 +246,10 @@ export default {
         apiError(error);
       }
     },
+    skipToSession() {
+      // Redirect to session page
+      this.$router.push(`/session/${this.session.id}`);
+    },
   }
 }
 </script>

src/components/pages/ConnectDevices.vue

@@ -1,53 +1,67 @@
 <template>
   <MainLayout
-    rightButton="Next"
     column
     :step="1"
-    :rightDisabled="loading"
-    @right="onNext">
+    :fixedHeight="false"
+    :rightDisabled="loading">
 
-    <v-card class="flex-grow-1 d-flex flex-column justify-center">
-      <v-card-text class="d-flex flex-column align-center">
+    <!-- Custom right section with two buttons -->
+    <template v-slot:right>
+      <div class="d-none"><!-- Hiding default right buttons positioning --></div>
+    </template>
 
-        <div class="d-flex step-1 align-center flex-wrap">
-          <div class="d-flex flex-column flex-grow-1 justify-space-between my-1">
-            <h1 class="my-4">1. Open the OpenCap app on your phone</h1>
-            <h1 class="my-4">2. Scan the QR code</h1>
-            <h1 class="my-4">3. Mount your phone vertically or horizontally (unlock portrait orientation) on a tripod</h1>
-            <h1 class="my-4">4. Position the tripod and camera to capture the volume of interest</h1>
-            <h1 class="my-4">5. Repeat 1-4 for all phones you want to connect</h1>
-            <h1 class="my-4">6. Have the person practice the activity and verify that they are fully in view of at least 2 cameras</h1>
-          </div>
+    <div class="connect-devices-wrapper">
+      <v-card class="connect-devices-card">
+        <v-card-text class="d-flex flex-column align-center">
+          <div class="d-flex step-1 align-center flex-wrap">
+            <div class="d-flex flex-column flex-grow-1 justify-space-between my-1">
+              <h1 class="my-4">1. Open the OpenCap app on your phone</h1>
+              <h1 class="my-4">2. Scan the QR code</h1>
+              <h1 class="my-4">3. Mount your phone vertically or horizontally (unlock portrait orientation) on a tripod</h1>
+              <h1 class="my-4">4. Position the tripod and camera to capture the volume of interest</h1>
+              <h1 class="my-4">5. Repeat 1-4 for all phones you want to connect</h1>
+              <h1 class="my-4">6. Have the person practice the activity and verify that they are fully in view of at least 2 cameras</h1>
+            </div>
 
-          <div class="image-container qr-container d-flex align-center justify-center my-1">
-            <v-progress-circular
-              v-if="loading"
-              indeterminate 
-              color="grey" 
-              size="32" 
-              width="5"/>
+            <div class="image-container qr-container d-flex align-center justify-center my-1">
+              <v-progress-circular
+                v-if="loading"
+                indeterminate 
+                color="grey" 
+                size="32" 
+                width="5"/>
 
-            <img
-              v-else
-              class="w-100 h-100"
-              :src="session.qrcode">
+              <img
+                v-else
+                class="w-100 h-100"
+                :src="session.qrcode">
+            </div>
           </div>
-        </div>
-
-        <!--div class="cameras d-flex align-center justify-center mt-5">
-          <v-text-field
-            v-model="cameras"
-            label="Connected cameras"
-            class="cameras"/>
-        </div-->
-      </v-card-text>
-    </v-card>
+        </v-card-text>
+      </v-card>
+
+      <!-- Custom navigation buttons positioned below the card -->
+      <div class="custom-navigation d-flex justify-end mt-4">
+        <v-btn
+          v-if="hasMonoAccess"
+          class="mr-2"
+          :disabled="loading"
+          @click="skipToSession">
+          Next to monocular
+        </v-btn>
+        <v-btn
+          :disabled="loading"
+          @click="onNext">
+          Next
+        </v-btn>
+      </div>
+    </div>
   </MainLayout>
 </template>
 
 <script>
 import { mapMutations, mapActions, mapState } from 'vuex'
-import { apiInfo, clearToastMessages} from "@/util/ErrorMessage.js";
+import { apiInfo, clearToastMessages, apiError } from "@/util/ErrorMessage.js";
 import MainLayout from '@/layout/MainLayout'
 
 export default {
@@ -63,7 +77,7 @@ export default {
   },
   async mounted () {
     apiInfo("The iOS app is now available on the App Store. Please upgrade.", 20000, {text : "Go to App Store", onClick : () => {window.open("https://apps.apple.com/us/app/opencap/id1630513242", "_blank");}});
-    if (this.$router.params != undefined) {
+    if (this.$route.params && this.$route.params.id) {
         await this.loadSession(this.$route.params.id)
     } else {
       try {
@@ -76,28 +90,55 @@ export default {
   },
   computed: {
     ...mapState({ 
-      session: state => state.data.session
-    })
+      session: state => state.data.session,
+      username: state => state.auth.username,
+    }),
+    hasMonoAccess() {
+      const allowedUsers = ['selimgilon', 'suhlrich', 'antoine', 'dev_user'];
+      const currentUser = this.username || localStorage.getItem('auth_user');
+      return allowedUsers.includes(currentUser);
+    },
   },
   methods: {
     ...mapMutations('data', ['clearAll', 'setConnectDevices']),
-    ...mapActions('data', ['initSession']),
+    ...mapActions('data', ['initSession', 'loadSession']),
     onNext () {
-
       clearToastMessages();
       this.setConnectDevices({
         cameras: this.cameras
       })
-
       this.$router.push(`/${this.session.id}/calibration`)
+    },
+    skipToSession() {
+      if (!this.hasMonoAccess) {
+        apiError("This feature is restricted.");
+        return;
+      }
+      clearToastMessages();
+      this.setConnectDevices({
+        cameras: this.cameras
+      })
+      this.$router.push({ path: `/${this.session.id}/neutral`, query: { isMono: 'true' } });
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.connect-devices-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.connect-devices-card {
+  flex: 1;
+  overflow-y: auto;
+}
+
 .step-1 {
-  width:100%;
+  width: 100%;
 
   .qr-container {
     width: 200px;
@@ -109,4 +150,12 @@ export default {
 .cameras {
   width: 120px;
 }
+
+.custom-navigation {
+  width: 100%;
+  margin-top: 16px;
+  padding-bottom: 16px;
+  position: sticky;
+  bottom: 0;
+}
 </style>