reedu-reengineering-education · felixerdy · Oct 10, 2023 · Oct 6, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -1,12 +1,17 @@
 import { CapacitorConfig } from '@capacitor/cli'
+import { execSync } from 'child_process'
+
+const ipAddress = execSync(`ipconfig getifaddr en0`, {
+  encoding: 'utf-8',
+}).trim()
 
 const config: CapacitorConfig = {
   appId: 'com.example.app',
   appName: 'senseBox:Bike X SIMPORT',
   webDir: 'out',
-  // server: {
-  //   url: 'http://192.168.0.220:3000',
-  // },
+  server: {
+    url: `http://${ipAddress}:3000`,
+  },
 }
 
 export default config
diff --git a/ios/App/App/capacitor.config.json b/ios/App/App/capacitor.config.json
@@ -1,8 +1,8 @@
 {
-  "appId": "com.example.app",
-  "appName": "senseBox:Bike X SIMPORT",
-  "webDir": "out",
-  "server": {
-    "url": "http://192.168.0.220:3000"
-  }
+	"appId": "com.example.app",
+	"appName": "senseBox:Bike X SIMPORT",
+	"webDir": "out",
+	"server": {
+		"url": "http://192.168.2.135:3000"
+	}
 }
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -1,15 +1,4 @@
-def assertDeploymentTarget(installer)
-  installer.pods_project.targets.each do |target|
-    target.build_configurations.each do |config|
-      # ensure IPHONEOS_DEPLOYMENT_TARGET is at least 13.0
-      deployment_target = config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'].to_f
-      should_upgrade = deployment_target < 13.0 && deployment_target != 0.0
-      if should_upgrade
-        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
-      end
-    end
-  end
-end
+require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
 
 platform :ios, '13.0'
 use_frameworks!

diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
@@ -1,11 +1,11 @@
 PODS:
-  - Capacitor (5.3.0):
+  - Capacitor (5.4.2):
     - CapacitorCordova
   - CapacitorCommunityBackgroundGeolocation (0.0.1):
     - Capacitor
-  - CapacitorCommunityBluetoothLe (3.0.1):
+  - CapacitorCommunityBluetoothLe (3.0.2):
     - Capacitor
-  - CapacitorCordova (5.3.0)
+  - CapacitorCordova (5.4.2)
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
@@ -24,11 +24,11 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/ios"
 
 SPEC CHECKSUMS:
-  Capacitor: 1ac9165943bc4f2137642d218c5ba05df811de69
+  Capacitor: 8a9db42d105f55843cd8ed2a3cb54e2b78e7f102
   CapacitorCommunityBackgroundGeolocation: 6f26f4290377dbd1d6dec21e62cb66f008f61ec7
-  CapacitorCommunityBluetoothLe: 308770c1ee9499c216776159326bc2b9a49076b4
-  CapacitorCordova: b9374d68e63ce29e96ab5db994cf14fbefd722c9
+  CapacitorCommunityBluetoothLe: 83b0de348b2ec461e0f9fa0e48c9e79c8378ddb0
+  CapacitorCordova: cfcc06b698481da655415985eeb2b8da363f8451
 
-PODFILE CHECKSUM: 6e41747aee00f59e1e4a8249f9aa31ede26dcdf5
+PODFILE CHECKSUM: 12d4cb362d5c8d4fe865a752ab1c768fe69eac2d
 
 COCOAPODS: 1.11.3
diff --git a/ios/capacitor-cordova-ios-plugins/CordovaPlugins.podspec b/ios/capacitor-cordova-ios-plugins/CordovaPlugins.podspec
@@ -1,12 +1,12 @@
 
   Pod::Spec.new do |s|
     s.name = 'CordovaPlugins'
-    s.version = '5.3.0'
+    s.version = '5.4.2'
     s.summary = 'Autogenerated spec'
     s.license = 'Unknown'
     s.homepage = 'https://example.com'
     s.authors = { 'Capacitor Generator' => '[email protected]' }
-    s.source = { :git => 'https://github.com/ionic-team/does-not-exist.git', :tag => '5.3.0' }
+    s.source = { :git => 'https://github.com/ionic-team/does-not-exist.git', :tag => '5.4.2' }
     s.source_files = 'sources/**/*.{swift,h,m,c,cc,mm,cpp}'
     s.ios.deployment_target  = '13.0'
     s.xcconfig = {'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) COCOAPODS=1 WK_WEB_VIEW_ONLY=1' }

diff --git a/ios/capacitor-cordova-ios-plugins/CordovaPluginsStatic.podspec b/ios/capacitor-cordova-ios-plugins/CordovaPluginsStatic.podspec
@@ -1,12 +1,12 @@
 
   Pod::Spec.new do |s|
     s.name = 'CordovaPluginsStatic'
-    s.version = '5.3.0'
+    s.version = '5.4.2'
     s.summary = 'Autogenerated spec'
     s.license = 'Unknown'
     s.homepage = 'https://example.com'
     s.authors = { 'Capacitor Generator' => '[email protected]' }
-    s.source = { :git => 'https://github.com/ionic-team/does-not-exist.git', :tag => '5.3.0' }
+    s.source = { :git => 'https://github.com/ionic-team/does-not-exist.git', :tag => '5.4.2' }
     s.source_files = 'sourcesstatic/**/*.{swift,h,m,c,cc,mm,cpp}'
     s.ios.deployment_target  = '13.0'
     s.xcconfig = {'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) COCOAPODS=1 WK_WEB_VIEW_ONLY=1' }

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "static": "next build && next export"
   },
   "dependencies": {
-    "@capacitor-community/background-geolocation": "felixerdy/background-geolocation",
+    "@capacitor-community/background-geolocation": "felixerdy/background-geolocation#feat/process-external-location",
     "@capacitor-community/bluetooth-le": "^3.0.1",
     "@capacitor/android": "^5.3.0",
     "@capacitor/core": "^5.3.0",
@@ -27,6 +27,7 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@turf/circle": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

diff --git a/src/app/device/page.tsx b/src/app/device/page.tsx
@@ -5,37 +5,18 @@ import { useEffect, useState } from 'react'
 import MeasurementsOverview from '@/components/Map/MeasurementsOverview'
 import ControlBar from '@/components/Map/ControlBar'
 import useSenseBox from '@/lib/useSenseBox'
-import { Source, Layer } from 'react-map-gl/maplibre'
 import LocationMarker from '@/components/Map/LocationMarker'
+import LocationHistory from '@/components/Map/LocationHistory'
 
 export default function Home() {
-  const [recording, setRecording] = useState(false)
-
-  const { values, connect, isConnected, disconnect } = useSenseBox()
-
-  useEffect(() => {
-    if (recording && !isConnected) {
-      connect()
-      return
-    }
-    if (!recording && isConnected) {
-      disconnect()
-      return
-    }
-  })
+  const { values, isConnected } = useSenseBox()
 
   return (
     <div className="relative h-full w-full">
-      <MapComponent
-        initialViewState={{
-          longitude: 7.629040078544051,
-          latitude: 51.95991276754322,
-          zoom: 14,
-          pitch: 45,
-        }}
-      >
+      <MapComponent>
         {values && values.length > 0 && (
           <>
+            <LocationHistory values={values} />
             <LocationMarker
               location={{
                 latitude: values.at(-1)?.gps_lat || 0,
@@ -49,23 +30,6 @@ export default function Home() {
                 time: null,
               }}
             />
-            <Source
-              id="location-history"
-              type="geojson"
-              data={{
-                features: values.map(v => ({
-                  type: 'Feature',
-                  properties: {},
-                  geometry: {
-                    type: 'Point',
-                    coordinates: [v.gps_lat || 0, v.gps_lng || 0],
-                  },
-                })),
-                type: 'FeatureCollection',
-              }}
-            >
-              <Layer id="point" type="line" />
-            </Source>
           </>
         )}
       </MapComponent>
@@ -76,10 +40,7 @@ export default function Home() {
             isConnected={isConnected}
           />
         )}
-        <ControlBar
-          recording={recording}
-          toggleRecording={() => setRecording(!recording)}
-        />
+        <ControlBar />
       </div>
     </div>
   )

diff --git a/src/components/Map/ControlBar.tsx b/src/components/Map/ControlBar.tsx
@@ -1,20 +1,17 @@
 import { PauseIcon, PlayIcon } from '@heroicons/react/24/outline'
 import SettingsModal from './Settings'
 import { Card } from '../ui/card'
+import useSenseBox from '@/lib/useSenseBox'
+
+export default function ControlBar() {
+  const { connect, isConnected, disconnect } = useSenseBox()
 
-export default function ControlBar({
-  recording,
-  toggleRecording,
-}: {
-  recording: boolean
-  toggleRecording: () => void
-}) {
   return (
     <Card className="pointer-events-auto flex w-fit items-center gap-2 rounded-lg bg-white p-2">
-      {recording ? (
-        <PauseIcon className="h-8 w-8" onClick={() => toggleRecording()} />
+      {isConnected ? (
+        <PauseIcon className="h-8 w-8" onClick={() => disconnect()} />
       ) : (
-        <PlayIcon className="h-8 w-8" onClick={() => toggleRecording()} />
+        <PlayIcon className="h-8 w-8" onClick={() => connect()} />
       )}
       <div className="h-10 border-l-2 border-gray-200"></div>
       <SettingsModal />

diff --git a/src/components/Map/LocationHistory.tsx b/src/components/Map/LocationHistory.tsx
@@ -0,0 +1,30 @@
+import { Source, Layer } from 'react-map-gl/maplibre'
+import { senseBoxDataRecord } from '@/lib/useSenseBox'
+
+export default function LocationHistory({
+  values,
+}: {
+  values: senseBoxDataRecord[]
+}) {
+  return (
+    <>
+      <Source
+        id="location-history"
+        type="geojson"
+        data={{
+          type: 'LineString',
+          coordinates: values.map(value => [value.gps_lng, value.gps_lat]),
+        }}
+      >
+        <Layer
+          id="history"
+          type="line"
+          paint={{
+            'line-color': '#007cbf',
+            'line-width': 2,
+          }}
+        />
+      </Source>
+    </>
+  )
+}
diff --git a/src/components/Map/Settings.tsx b/src/components/Map/Settings.tsx
@@ -24,6 +24,14 @@ import { Switch } from '../ui/switch'
 import { useSettingsStore } from '@/lib/store/useSettingsStore'
 import { Button } from '../ui/button'
 import { DialogClose } from '@radix-ui/react-dialog'
+import useSenseBox from '@/lib/useSenseBox'
+import { numbersToDataView } from '@capacitor-community/bluetooth-le'
+import { registerPlugin } from '@capacitor/core'
+import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation'
+
+const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
+  'BackgroundGeolocation',
+)
 
 const formSchema = z.object({
   uploadInterval: z.number().min(1).max(60),
@@ -34,6 +42,7 @@ const formSchema = z.object({
 export default function SettingsModal() {
   const uploadInterval = useSettingsStore(state => state.uploadInterval)
   const useDeviceGPS = useSettingsStore(state => state.useDeviceGPS)
+  const { send } = useSenseBox()
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -45,6 +54,14 @@ export default function SettingsModal() {
   })
 
   const handleSubmit = (values: z.infer<typeof formSchema>) => {
+    send(
+      '29BD0A85-51E4-4D3C-914E-126541EB2A5E',
+      '60B1D5CE-3539-44D2-BB35-FF2DAABE17FF',
+      numbersToDataView([
+        values.uploadInterval,
+        values.switchUseDeviceGPS ? 1 : 0,
+      ]),
+    )
     useSettingsStore.setState({
       uploadInterval: values.uploadInterval,
       useDeviceGPS: values.switchUseDeviceGPS,
@@ -60,6 +77,9 @@ export default function SettingsModal() {
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
+        <Button onClick={() => BackgroundGeolocation.openSettings()}>
+          Geolocation Settings
+        </Button>
         <div className="flex flex-col justify-end gap-2 py-4">
           <Form {...form}>
             <form
@@ -78,12 +98,18 @@ export default function SettingsModal() {
                           Upload Interval (in Sekunden) bestimmen
                         </FormDescription>
                         <FormControl>
-                          <Slider
-                            onValueChange={e => field.onChange(e[0])}
-                            defaultValue={[field.value]}
-                            min={1}
-                            max={60}
-                          />
+                          <div className="flex items-center gap-2">
+                            <Slider
+                              onValueChange={e => field.onChange(e[0])}
+                              defaultValue={[field.value]}
+                              min={10}
+                              max={60}
+                              step={10}
+                            />
+                            <span className="whitespace-nowrap text-xs">
+                              {form.watch('uploadInterval')} s
+                            </span>
+                          </div>
                         </FormControl>
                       </FormItem>
                     )}

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -10,11 +10,8 @@ const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal {...props} />
 )
 DialogPortal.displayName = DialogPrimitive.Portal.displayName
 

diff --git a/src/lib/store/useBLEStore.ts b/src/lib/store/useBLEStore.ts
@@ -0,0 +1,16 @@
+import { BleDevice } from '@capacitor-community/bluetooth-le'
+import { create } from 'zustand'
+
+interface BLEStoreInterface {
+  device: BleDevice | undefined
+  setDevice: (device: BleDevice | undefined) => void
+  connected: boolean
+  setConnected: (connected: boolean) => void
+}
+
+export const useBLEStore = create<BLEStoreInterface>(set => ({
+  device: undefined,
+  setDevice: device => set({ device }),
+  connected: false,
+  setConnected: connected => set({ connected }),
+}))