Fix bluetooth support

package.json

@@ -50,7 +50,7 @@
     "@types/node": "^20.17.11",
     "@types/web-bluetooth": "^0.0.20",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/eslint-plugin": "^1.1.23",
+    "@vitest/eslint-plugin": "^1.1.24",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.2.0",
     "@vue/test-utils": "^2.4.6",
@@ -63,7 +63,7 @@
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
     "rollup-plugin-visualizer": "^5.13.1",
-    "sass": "^1.83.0",
+    "sass": "^1.83.1",
     "typescript": "^5.7.2",
     "vite": "^6.0.7",
     "vite-plugin-pwa": "^0.21.1",

src/App.vue

@@ -9,10 +9,10 @@ import roboto400 from '@fontsource/roboto/files/roboto-latin-400-normal.woff2'
 import roboto500 from '@fontsource/roboto/files/roboto-latin-500-normal.woff2'
 import roboto700 from '@fontsource/roboto/files/roboto-latin-700-normal.woff2'
 
-import { useAppStore } from '@/stores/app'
+import { useAppStore } from '@/stores/app.store'
 
 import NewContentAvailable from '@/components/molecules/NewContentAvailable/NewContentAvailable.vue'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 import { Theme } from '@/enums/theme'
 
 // router

src/components/atoms/ExerciseHangboard/ExerciseHangboard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import InlineSvg from 'vue-inline-svg'
-import { useUserStore } from '@/stores/user'
+import { useUserStore } from '@/stores/user.store'
 import { IExercise } from '@/interfaces/workout.interface'
 
 const { getHangboardByIds } = useUserStore()

src/components/atoms/WorkoutBluetooth/WorkoutBluetooth.vue

@@ -3,6 +3,8 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { IWorkout } from '@/interfaces/workout.interface'
+import { useBluetooth } from '@/composables/useBluetooth'
+import { useBluetoothStore } from '@/stores/bluetooth.store'
 
 import {
   Climbro,
@@ -14,19 +16,21 @@ import {
   Progressor
 } from '@hangtime/grip-connect'
 
-import { useBluetoothStore } from '@/stores/bluetooth'
+const bluetoothStore = useBluetoothStore()
 
-const { device } = storeToRefs(useBluetoothStore())
+const { connect } = useBluetoothStore()
+
+const { bluetoothDevice, bluetoothError } = storeToRefs(bluetoothStore)
+
+const { isBluetoothSupported, isBluetoothAvailable } = useBluetooth()
 
 const workout = defineModel<IWorkout>()
 
 const { size = 'default' } = defineProps<{
   size?: string
 }>()
 
-const emit = defineEmits(['notify', 'active', 'start'])
-
-const dialog = ref(false)
+const emit = defineEmits(['start'])
 
 const devices = [
   {
@@ -62,26 +66,7 @@ const devices = [
   }
 ]
 const dropdown = ref(workout.value?.company === 1 ? 'Motherboard' : 'Progressor')
-const output = ref()
-const errorElm = ref<Error | undefined>()
-const isBluetoothAvailable = ref(false)
-
-// check if the browser supports bluetooth
-const isBluetoothSupported = () => {
-  return 'bluetooth' in navigator
-}
-
-// check if the device has a Bluetooth adapter
-if (isBluetoothSupported()) {
-  navigator.bluetooth.getAvailability().then((isAvailable) => {
-    isBluetoothAvailable.value = !!isAvailable
-  })
-}
-
-const reset = () => {
-  device.value?.disconnect()
-  device.value = null
-}
+const dialog = ref(false)
 
 const setup = () => {
   const selectedDeviceClass = {
@@ -98,32 +83,19 @@ const setup = () => {
 
   const selectedDevice = new selectedDeviceClass()
 
-  selectedDevice.connect(
-    async () => {
-      device.value = selectedDevice
-
-      // Listen for notifications
-      selectedDevice.notify((data) => {
-        emit('notify', data)
-        // output.value = JSON.stringify(data)
-      })
-
-      selectedDevice.active(
-        (isActive: boolean) => {
-          emit('active', isActive)
-        },
-        { threshold: 2.5, duration: 1000 }
-      )
-
-      // Close Dialog
-      dialog.value = false
-      // Start workout
-      emit('start')
-    },
-    (error: Error) => {
-      errorElm.value = error
-    }
-  )
+  bluetoothDevice.value = selectedDevice
+
+  connect(() => {
+    // Close Dialog
+    dialog.value = false
+    // Start workout
+    emit('start')
+  })
+}
+
+const reset = () => {
+  bluetoothDevice.value?.disconnect()
+  bluetoothDevice.value = null
 }
 </script>
 
@@ -134,7 +106,7 @@ const setup = () => {
       :disabled="!isBluetoothAvailable"
       :size="size"
       color="text"
-      :icon="!device ? '$bluetooth' : '$bluetoothOff'"
+      :icon="!bluetoothDevice ? '$bluetooth' : '$bluetoothOff'"
       variant="text"
       @click="dialog = true"
     ></v-btn>
@@ -192,17 +164,22 @@ const setup = () => {
                     for greater efficiency and progress.
                   </p>
                   <v-select v-model="dropdown" :items="devices" :item-props="true"></v-select>
-                  <v-alert v-if="errorElm" closable type="error" :text="errorElm.message"></v-alert>
+                  <v-alert
+                    v-if="bluetoothError"
+                    closable
+                    type="error"
+                    :text="bluetoothError.message"
+                  ></v-alert>
                 </v-card-text>
                 <v-card-actions>
                   <v-btn
                     :disabled="!isBluetoothAvailable"
-                    :prepend-icon="!device ? '$bluetooth' : '$bluetoothOff'"
+                    :prepend-icon="!bluetoothDevice ? '$bluetooth' : '$bluetoothOff'"
                     color="text"
                     variant="text"
-                    @click="!device ? setup() : reset()"
+                    @click="!bluetoothDevice ? setup() : reset()"
                   >
-                    {{ !device ? 'Connect' : 'Disconnect' }}
+                    {{ !bluetoothDevice ? 'Connect' : 'Disconnect' }}
                   </v-btn>
                   <v-btn
                     href="https://github.com/Stevie-Ray/hangtime-grip-connect"
@@ -216,11 +193,6 @@ const setup = () => {
                   </v-btn>
                 </v-card-actions>
               </v-card>
-              <v-card v-if="output">
-                <v-card-text>
-                  {{ output }}
-                </v-card-text>
-              </v-card>
             </v-col>
           </v-row>
         </v-container>

src/components/atoms/WorkoutShare/WorkoutShare.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
-import { useAppStore } from '@/stores/app'
-import { useUserStore } from '@/stores/user'
+import { useAppStore } from '@/stores/app.store'
+import { useUserStore } from '@/stores/user.store'
 import { IWorkout } from '@/interfaces/workout.interface'
 
 const router = useRouter()

src/components/atoms/WorkoutSubscribe/WorkoutSubscribe.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useWorkoutsStore } from '@/stores/workouts'
-import { useAuthenticationStore } from '@/stores/authentication'
-import { useAppStore } from '@/stores/app'
+import { useWorkoutsStore } from '@/stores/workouts.store'
+import { useAuthenticationStore } from '@/stores/authentication.store'
+import { useAppStore } from '@/stores/app.store'
 import { IWorkout } from '@/interfaces/workout.interface'
 
 const { updateWorkout } = useWorkoutsStore()

src/components/molecules/HangboardSelect/HangboardSelect.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ExerciseHangboard from '@/components/atoms/ExerciseHangboard/ExerciseHangboard.vue'
-import { useUserStore } from '@/stores/user'
+import { useUserStore } from '@/stores/user.store'
 import countries from '@/helpers/countries'
 
 const { t } = useI18n()

src/components/molecules/NewsCards/NewsCards.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRandomImage } from '@/helpers'
-import { useUserStore } from '@/stores/user'
+import { useUserStore } from '@/stores/user.store'
 import countries from '@/helpers/countries'
 
 const { getCompanies } = useUserStore()

src/components/molecules/WorkoutSummary/WorkoutSummary.vue

@@ -4,7 +4,7 @@ import { ref, Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { time, useRandomImage } from '@/helpers'
-import { useUserStore } from '@/stores/user'
+import { useUserStore } from '@/stores/user.store'
 import ExerciseName from '@/components/atoms/ExerciseName/ExerciseName.vue'
 import { IWorkout } from '@/interfaces/workout.interface'
 

src/components/molecules/dialog/ExerciseEdit/ExerciseEdit.vue

@@ -6,7 +6,7 @@ import { useExercises, useGrip, weightConverter } from '@/helpers'
 import ExerciseCard from '@/components/molecules/ExerciseCard/ExerciseCard.vue'
 import ExerciseHand from '@/components/atoms/ExerciseHand/ExerciseHand.vue'
 import ExerciseCounter from '@/components/molecules/ExerciseCounter/ExerciseCounter.vue'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 import { Workout } from '@/models/workout.model'
 
 const { user } = storeToRefs(useAuthenticationStore())

src/components/molecules/dialog/HangboardAdd/HangboardAdd.vue

@@ -4,10 +4,10 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { event } from 'vue-gtag'
 import HangboardSelect from '@/components/molecules/HangboardSelect/HangboardSelect.vue'
-import { useAppStore } from '@/stores/app'
-import { useUserStore } from '@/stores/user'
-import { useAuthenticationStore } from '@/stores/authentication'
-import { useWorkoutsStore } from '@/stores/workouts'
+import { useAppStore } from '@/stores/app.store'
+import { useUserStore } from '@/stores/user.store'
+import { useAuthenticationStore } from '@/stores/authentication.store'
+import { useWorkoutsStore } from '@/stores/workouts.store'
 
 const { t } = useI18n()
 

src/components/molecules/dialog/MissingHangboard/MissingHangboard.vue

@@ -4,8 +4,8 @@ import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { ref } from 'vue'
-import { useUserStore } from '@/stores/user'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useUserStore } from '@/stores/user.store'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 
 const { getHangboardNameByIds } = useUserStore()
 

src/components/molecules/dialog/SubscribeToApp/SubscribeToApp.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 import { usePlayBilling } from '@/composables/usePlayBilling'
 import { time } from '@/helpers'
 

src/components/molecules/dialog/WalkthroughApp/WalkthroughApp.vue

@@ -6,10 +6,10 @@ import { useI18n } from 'vue-i18n'
 import { event } from 'vue-gtag'
 import IRCRA from 'ircra'
 import HangboardSelect from '@/components/molecules/HangboardSelect/HangboardSelect.vue'
-import { useAppStore } from '@/stores/app'
-import { useUserStore } from '@/stores/user'
-import { useWorkoutsStore } from '@/stores/workouts'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAppStore } from '@/stores/app.store'
+import { useUserStore } from '@/stores/user.store'
+import { useWorkoutsStore } from '@/stores/workouts.store'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 import { loadLanguageAsync } from '@/plugins/i18n'
 
 const ircra = new IRCRA()

src/components/molecules/dialog/WorkoutCommunityFilter/WorkoutCommunityFilter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useWorkoutsStore } from '@/stores/workouts'
+import { useWorkoutsStore } from '@/stores/workouts.store'
 import { useI18n } from 'vue-i18n'
 
 const { workoutsCommunity, workoutsCommunityFilter, workoutsCommunityFilterDirection } =

src/components/molecules/dialog/WorkoutComplete/WorkoutComplete.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import router from '@/router'
 import { time, useRandomImage } from '@/helpers'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 import { IWorkout } from '@/interfaces/workout.interface'
 
 const { t } = useI18n()

src/components/molecules/dialog/WorkoutSave/WorkoutSave.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useWorkoutsStore } from '@/stores/workouts'
+import { useWorkoutsStore } from '@/stores/workouts.store'
 import { IWorkout } from '@/interfaces/workout.interface'
 
 const { createUserWorkout, updateUserWorkout } = useWorkoutsStore()

src/components/organisms/AppContainer/AppContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
-import { useAuthenticationStore } from '@/stores/authentication'
+import { useAuthenticationStore } from '@/stores/authentication.store'
 
 const { t } = useI18n()
 const { user } = storeToRefs(useAuthenticationStore())

src/components/organisms/ExerciseList/ExerciseList.vue

@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ExerciseCard from '@/components/molecules/ExerciseCard/ExerciseCard.vue'
-import { useAppStore } from '@/stores/app'
+import { useAppStore } from '@/stores/app.store'
 import ExerciseEdit from '@/components/molecules/dialog/ExerciseEdit/ExerciseEdit.vue'
 import { Workout } from '@/models/workout.model'