Skip to content

Commit

Permalink
feat: update a bunch of stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
felixerdy committed Sep 12, 2023
1 parent 6008fbb commit e56c262
Show file tree
Hide file tree
Showing 18 changed files with 463 additions and 243 deletions.
8 changes: 8 additions & 0 deletions ios/App/App/Info.plist
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,13 @@
<array>
<string>bluetooth-central</string>
</array>
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need to track your location</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need to track your location while your device is locked.</string>
<key>UIBackgroundModes</key>
<array>
<string>location</string>
</array>
</dict>
</plist>
12 changes: 6 additions & 6 deletions ios/App/App/capacitor.config.json
Original file line number Diff line number Diff line change
@@ -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.0.220:3000"
}
}
1 change: 1 addition & 0 deletions ios/App/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCommunityBackgroundGeolocation', :path => '../../node_modules/@capacitor-community/background-geolocation'
pod 'CapacitorCommunityBluetoothLe', :path => '../../node_modules/@capacitor-community/bluetooth-le'
end

Expand Down
8 changes: 7 additions & 1 deletion ios/App/Podfile.lock
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
PODS:
- Capacitor (5.3.0):
- CapacitorCordova
- CapacitorCommunityBackgroundGeolocation (0.0.1):
- Capacitor
- CapacitorCommunityBluetoothLe (3.0.1):
- Capacitor
- CapacitorCordova (5.3.0)

DEPENDENCIES:
- "Capacitor (from `../../node_modules/@capacitor/ios`)"
- "CapacitorCommunityBackgroundGeolocation (from `../../node_modules/@capacitor-community/background-geolocation`)"
- "CapacitorCommunityBluetoothLe (from `../../node_modules/@capacitor-community/bluetooth-le`)"
- "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"

EXTERNAL SOURCES:
Capacitor:
:path: "../../node_modules/@capacitor/ios"
CapacitorCommunityBackgroundGeolocation:
:path: "../../node_modules/@capacitor-community/background-geolocation"
CapacitorCommunityBluetoothLe:
:path: "../../node_modules/@capacitor-community/bluetooth-le"
CapacitorCordova:
:path: "../../node_modules/@capacitor/ios"

SPEC CHECKSUMS:
Capacitor: 1ac9165943bc4f2137642d218c5ba05df811de69
CapacitorCommunityBackgroundGeolocation: 6f26f4290377dbd1d6dec21e62cb66f008f61ec7
CapacitorCommunityBluetoothLe: 308770c1ee9499c216776159326bc2b9a49076b4
CapacitorCordova: b9374d68e63ce29e96ab5db994cf14fbefd722c9

PODFILE CHECKSUM: 209b88b5339b30dc7f4dfccad65ac57cc69b251e
PODFILE CHECKSUM: 6e41747aee00f59e1e4a8249f9aa31ede26dcdf5

COCOAPODS: 1.11.3
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"static": "next build && next export"
},
"dependencies": {
"@capacitor-community/background-geolocation": "^1.2.14",
"@capacitor-community/bluetooth-le": "^3.0.1",
"@capacitor/android": "^5.3.0",
"@capacitor/core": "^5.3.0",
Expand Down
17 changes: 6 additions & 11 deletions src/app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import { Navbar } from '@/components/ui/Navbar'
import { TopBar } from '@/components/ui/TopBar'
import { Button } from '@/components/ui/button'
import {
AcademicCapIcon,
BellIcon,
ExclamationTriangleIcon,
} from '@heroicons/react/24/outline'
import Image from 'next/image'
import Logo from '../../public/bike.png'
import Geolocation from '@/components/Geolocation'

export default function Home() {
return <div className="flex h-full w-full flex-col">des</div>
return (
<div className="flex h-full w-full flex-col">
<Geolocation />
</div>
)
}
124 changes: 67 additions & 57 deletions src/app/device/page.tsx
Original file line number Diff line number Diff line change
@@ -1,67 +1,77 @@
"use client";
import MapComponent from "@/components/Map/Map";
import {
BeakerIcon,
ChartBarIcon,
CloudIcon,
PauseIcon,
PlayIcon,
RssIcon,
SignalIcon,
SunIcon,
TruckIcon,
} from "@heroicons/react/24/outline";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { cx } from "class-variance-authority";
import { Settings2Icon, SettingsIcon } from "lucide-react";
import { useState } from "react";
import { DialogTrigger } from "@radix-ui/react-dialog";
import SettingsModal from "@/components/Map/Settings";
import RecordButton from "@/components/Map/RecordButton";
import MeasurementsOverview from "@/components/Map/MeasurementsOverview";
import ControlBar from "@/components/Map/ControlBar";
'use client'

import MapComponent from '@/components/Map/Map'
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'

export default function Home() {
const [recording, setRecording] = useState(false);
const [recording, setRecording] = useState(false)

const [data, setData] = useState({
temperature: 0,
humidity: 0,
pm1: 0,
pm25: 0,
pm4: 0,
pm10: 0,
accelerationX: 0,
accelerationY: 0,
accelerationZ: 0,
speed: 0,
});
const toggleRecording = () => {
setRecording(!recording);
};
const { values, connect, isConnected, disconnect } = useSenseBox()

useEffect(() => {
if (recording && !isConnected) {
connect()
return
}
if (!recording && isConnected) {
disconnect()
return
}
})

return (
<div className="h-full w-full">
<MapComponent />
<div className="flex flex-col">
<div className="absolute left-5 top-20">
<MeasurementsOverview data={data} />
</div>
<div className="absolute top-20 right-5 ">
<RecordButton recording={recording} />
</div>
<div className="absolute bottom-20 right-5 ">
<ControlBar recording={recording} toggleRecording={toggleRecording} />
</div>
</div>
<div className="relative h-full w-full">
<MapComponent>
<Source
id="location"
type="geojson"
data={{
type: 'Point',
coordinates: [
values.at(-1)?.gps_lat || 0,
values.at(-1)?.gps_lng || 0,
],
}}
>
<Layer
id="point"
type="circle"
paint={{
'circle-radius': 10,
'circle-color': '#007cbf',
}}
/>
</Source>
<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>
<div className="pointer-events-none absolute inset-0 left-0 top-0 flex h-full w-full flex-col items-center justify-between gap-2 p-4">
<MeasurementsOverview data={values.at(-1)} isConnected={isConnected} />

<ControlBar
recording={recording}
toggleRecording={() => setRecording(!recording)}
/>
</div>
</div>
)
}
142 changes: 72 additions & 70 deletions src/components/Device/PreviewModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,76 +26,78 @@ export default function PreviewModal() {
useSenseBox()

return (
<Dialog>
<DialogTrigger>
<Button>Show Data</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Data Preview</DialogTitle>
<DialogDescription>
Last Measurement:{' '}
{values
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
.at(-1)
?.timestamp.toLocaleTimeString() || '-'}
</DialogDescription>
</DialogHeader>
<div className="max-h-80 overflow-auto">
<Table>
<TableCaption>Data</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Temperature</TableHead>
<TableHead>Humidity</TableHead>
<TableHead>PM1</TableHead>
<TableHead>PM2.5</TableHead>
<TableHead>PM4</TableHead>
<TableHead>PM10</TableHead>
<TableHead>Acceleration X</TableHead>
<TableHead>Acceleration Y</TableHead>
<TableHead>Acceleration Z</TableHead>
<TableHead>GPS Lat</TableHead>
<TableHead>GPS Lng</TableHead>
<TableHead>GPS Spd</TableHead>
<TableHead>Distance L</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<div>
<Dialog>
<DialogTrigger>
<Button>Show Data</Button>
</DialogTrigger>
<DialogContent className="w-11/12">
<DialogHeader>
<DialogTitle>Data Preview</DialogTitle>
<DialogDescription>
Last Measurement:{' '}
{values
.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
.map((value, idx) => (
<TableRow key={idx}>
<TableCell>{value.temperature?.toFixed(2)}</TableCell>
<TableCell>{value.humidity?.toFixed(2)}</TableCell>
<TableCell>{value.pm1?.toFixed(2)}</TableCell>
<TableCell>{value.pm2_5?.toFixed(2)}</TableCell>
<TableCell>{value.pm4?.toFixed(2)}</TableCell>
<TableCell>{value.pm10?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_x?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_y?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_z?.toFixed(2)}</TableCell>
<TableCell>{value.gps_lat?.toFixed(2)}</TableCell>
<TableCell>{value.gps_lng?.toFixed(2)}</TableCell>
<TableCell>{value.gps_spd?.toFixed(2)}</TableCell>
<TableCell>{value.distance_l?.toFixed(2)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<DialogFooter>
{isConnected ? (
<Button variant="default" onClick={() => disconnect()}>
Disconnect
</Button>
) : (
<Button variant="default" onClick={() => connect()}>
Connect
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
.at(-1)
?.timestamp.toLocaleTimeString() || '-'}
</DialogDescription>
</DialogHeader>
<div className="max-h-80 overflow-auto">
<Table>
<TableCaption>Data</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Temperature</TableHead>
<TableHead>Humidity</TableHead>
<TableHead>PM1</TableHead>
<TableHead>PM2.5</TableHead>
<TableHead>PM4</TableHead>
<TableHead>PM10</TableHead>
<TableHead>Acceleration X</TableHead>
<TableHead>Acceleration Y</TableHead>
<TableHead>Acceleration Z</TableHead>
<TableHead>GPS Lat</TableHead>
<TableHead>GPS Lng</TableHead>
<TableHead>GPS Spd</TableHead>
<TableHead>Distance L</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{values
.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
.map((value, idx) => (
<TableRow key={idx}>
<TableCell>{value.temperature?.toFixed(2)}</TableCell>
<TableCell>{value.humidity?.toFixed(2)}</TableCell>
<TableCell>{value.pm1?.toFixed(2)}</TableCell>
<TableCell>{value.pm2_5?.toFixed(2)}</TableCell>
<TableCell>{value.pm4?.toFixed(2)}</TableCell>
<TableCell>{value.pm10?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_x?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_y?.toFixed(2)}</TableCell>
<TableCell>{value.acceleration_z?.toFixed(2)}</TableCell>
<TableCell>{value.gps_lat?.toFixed(2)}</TableCell>
<TableCell>{value.gps_lng?.toFixed(2)}</TableCell>
<TableCell>{value.gps_spd?.toFixed(2)}</TableCell>
<TableCell>{value.distance_l?.toFixed(2)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<DialogFooter>
{isConnected ? (
<Button variant="default" onClick={() => disconnect()}>
Disconnect
</Button>
) : (
<Button variant="default" onClick={() => connect()}>
Connect
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}
Loading

0 comments on commit e56c262

Please sign in to comment.