Merge pull request #3 from reedu-reengineering-education/feat/sensebo…

…x-ble

senseBox ble

.lintstagedrc.js

@@ -1,10 +1,10 @@
-const path = require("path");
+const path = require('path')
 
-const buildEslintCommand = (filenames) =>
+const buildEslintCommand = filenames =>
   `next lint --fix --file ${filenames
-    .map((f) => path.relative(process.cwd(), f))
-    .join(" --file ")}`;
+    .map(f => path.relative(process.cwd(), f))
+    .join(' --file ')}`
 
 module.exports = {
-  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
-};
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+}

capacitor.config.ts

@@ -1,12 +1,12 @@
-import { CapacitorConfig } from "@capacitor/cli";
+import { CapacitorConfig } from '@capacitor/cli'
 
 const config: CapacitorConfig = {
-  appId: "com.example.app",
-  appName: "senseBox:Bike X SIMPORT",
-  webDir: "out",
+  appId: 'com.example.app',
+  appName: 'senseBox:Bike X SIMPORT',
+  webDir: 'out',
   server: {
-    url: "http://192.168.0.220:3000",
+    url: 'http://192.168.0.220:3000',
   },
-};
+}
 
-export default config;
+export default config

next.config.js

@@ -5,7 +5,7 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  output: "export",
-};
+  output: 'export',
+}
 
-module.exports = nextConfig;
+module.exports = nextConfig

package.json

@@ -1,7 +1,6 @@
 {
   "name": "sensebox-bike-simport",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -24,9 +23,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
-    "@types/node": "20.5.9",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -48,9 +44,13 @@
   },
   "devDependencies": {
     "@capacitor/cli": "^5.3.0",
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
     "eslint-config-prettier": "^9.0.0",
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss-safe-area": "^0.4.0"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

prettier.config.js

@@ -1,14 +1,14 @@
+/** @type {import("prettier").Config} */
 module.exports = {
-    singleQuote: true,
-    semi: false,
-    printWidth: 80,
-    trailingComma: 'all',
-    tabWidth: 2,
-    jsxSingleQuote: false,
-    quoteProps: 'as-needed',
-    bracketSpacing: true,
-    jsxBracketSameLine: false,
-    arrowParens: 'avoid',
-    plugins: [require('prettier-plugin-tailwindcss')],
-  }
-
+  singleQuote: true,
+  semi: false,
+  printWidth: 80,
+  trailingComma: 'all',
+  tabWidth: 2,
+  jsxSingleQuote: false,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'avoid',
+  plugins: ['prettier-plugin-tailwindcss'],
+}

src/app/about/page.tsx

@@ -1,14 +1,14 @@
-import { Navbar } from "@/components/ui/Navbar";
-import { TopBar } from "@/components/ui/TopBar";
-import { Button } from "@/components/ui/button";
+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";
+} from '@heroicons/react/24/outline'
+import Image from 'next/image'
+import Logo from '../../public/bike.png'
 
 export default function Home() {
-  return <div className="flex w-full flex-col h-full">des</div>;
+  return <div className="flex h-full w-full flex-col">des</div>
 }

src/app/device/page.tsx

@@ -1,7 +1,10 @@
+import PreviewModal from '@/components/Device/PreviewModal'
+
 export default function Home() {
   return (
-    <div className="flex w-full flex-col h-full">
+    <div className="flex h-full w-full flex-col">
       <h1> DEVICE PAGE </h1>
+      <PreviewModal />
     </div>
-  );
+  )
 }

src/app/layout.tsx

@@ -1,41 +1,42 @@
-import { TopBar } from "@/components/ui/TopBar";
-import "../styles/globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Navbar } from "@/components/ui/Navbar";
-import { cn } from "@/lib/utils";
-import { Toaster } from "@/components/ui/toaster"
+import { TopBar } from '@/components/ui/TopBar'
+import '../styles/globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { Navbar } from '@/components/ui/Navbar'
+import { cn } from '@/lib/utils'
+import { Toaster } from '@/components/ui/toaster'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-  viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+  viewport:
+    'width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no',
+}
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
-    <html lang="en" className="w-full h-full">
+    <html lang="en" className="h-full w-full">
       <body
         className={cn(
           inter.className,
-          "w-full h-full flex flex-col p-safe max-h-full",
+          'flex h-full max-h-full w-full flex-col p-safe',
         )}
       >
         <header>
           <TopBar />
         </header>
-        <main className="flex-1 p-4 overflow-auto">{children}</main>
+        <main className="flex-1 overflow-auto p-4">{children}</main>
         <nav>
           <Navbar />
         </nav>
         <Toaster />
       </body>
     </html>
-  );
+  )
 }

src/app/not-found.tsx

@@ -1,18 +1,18 @@
-import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
+import { Button } from '@/components/ui/button'
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
 
 export default function NotFound() {
   return (
-    <div className="flex flex-col items-center justify-center w-full h-full gap-2">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2">
       <h1 className="text-4xl font-bold">404</h1>
       <p className="text-xl">Page not found</p>
       <Link href="/">
-        <Button variant={"outline"}>
-          <ArrowLeft className="w-4 mr-2" />
+        <Button variant={'outline'}>
+          <ArrowLeft className="mr-2 w-4" />
           Back Home
         </Button>
       </Link>
     </div>
-  );
+  )
 }

src/app/page.tsx

@@ -1,40 +1,39 @@
 'use client'
-import ConnectionSelection from "@/components/Home/ConnectionSelection";
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Pagination } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
-import Welcome from "@/components/Wizard/Welcome";
-import OpenSenseMapLogin from "@/components/Wizard/OpenSenseMapLogin";
-import SelectDevice from "@/components/Wizard/SelectDevice";
-import { useState } from "react";
+import ConnectionSelection from '@/components/Home/ConnectionSelection'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation, Pagination } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import Welcome from '@/components/Wizard/Welcome'
+import OpenSenseMapLogin from '@/components/Wizard/OpenSenseMapLogin'
+import SelectDevice from '@/components/Wizard/SelectDevice'
+import { useState } from 'react'
 
 export default function Home() {
-
   const [boxes, setBoxes] = useState([])
 
   return (
     <Swiper
-    spaceBetween={50}
-    modules={[Navigation]}
-    slidesPerView={1}
-    onSlideChange={() => console.log('slide change')}
-    onSwiper={(swiper) => console.log(swiper)}
-    className="flex text-center h-full justify-center"
-  >
-    <SwiperSlide>
-      <Welcome />
-    </SwiperSlide>
-    <SwiperSlide>
-      <OpenSenseMapLogin />
-    </SwiperSlide>
-    <SwiperSlide>
-      <SelectDevice />
-    </SwiperSlide>
-    <SwiperSlide>
-      <ConnectionSelection />
-    </SwiperSlide>
-  </Swiper>
+      spaceBetween={50}
+      modules={[Navigation]}
+      slidesPerView={1}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={swiper => console.log(swiper)}
+      className="flex h-full justify-center text-center"
+    >
+      <SwiperSlide>
+        <Welcome />
+      </SwiperSlide>
+      <SwiperSlide>
+        <OpenSenseMapLogin />
+      </SwiperSlide>
+      <SwiperSlide>
+        <SelectDevice />
+      </SwiperSlide>
+      <SwiperSlide>
+        <ConnectionSelection />
+      </SwiperSlide>
+    </Swiper>
   )
 }