Merge pull request #44 from NUTFes/feat/imaimai/43-prod-update

駐車場情報&マップ新規対応

Author: nose221834

view/public/images/map.png

@@ -13,7 +13,7 @@ const Header = () => (
     }}
     className='bg-primary text-textWhite'
   >
-    TrackingParking
+    駐車場管理システム
   </AppBar>
 )
 

view/src/components/common/Header/Header.tsx

@@ -78,7 +78,6 @@ const ParkingCard = ({ name, maxCapacity, currentCapacity, data, dataLimit }: Pa
             gap: '1rem',
             minWidth: '300px',
           }}
-          // hoverしたら浮かして影をつける
           className='transition-all hover:-translate-y-1 hover:shadow-lg'
         >
           <h1 className='mr-auto text-xl font-bold'>{name}</h1>

view/src/components/common/ParkingCard/ParkingCard.tsx

@@ -1,6 +1,36 @@
-export const parkingNames = ['twenty-four']
-export const parkingLimit = [24]
+export const parkings = [
+  {
+    nameJP: '中央',
+    name: 'central',
+    limit: 96,
+  },
+  {
+    nameJP: '生物',
+    name: 'bionics',
+    limit: 40,
+  },
+  {
+    nameJP: '電気',
+    name: 'electronics',
+    limit: 44,
+  },
+  {
+    nameJP: '講義棟西1',
+    name: 'lecture_west1',
+    limit: 48,
+  },
+  {
+    nameJP: '講義棟西2',
+    name: 'lecture_west2',
+    limit: 44,
+  },
+  {
+    nameJP: '講義棟北',
+    name: 'lecture_north',
+    limit: 44 + 159, // 講義棟北2, 3の合計
+  },
+]
 
-export type ParkingName = (typeof parkingNames)[number]
+export type ParkingName = (typeof parkings)[number]['name']
 
-export const isParkingName = (arg: string): arg is ParkingName => parkingNames.includes(arg)
+export const isParkingName = (arg: string): arg is ParkingName => parkings.some((parking) => parking.name === arg)

view/src/constants/parkingNames.ts

@@ -8,7 +8,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const { method } = req
     const { parkingName } = req.query
     if (typeof parkingName !== 'string') throw new Error('parkingName is not string')
-    if (!isParkingName(parkingName)) throw new Error('parkingName is not valid')
+    if (!isParkingName(parkingName)) throw new Error('parkingName is not found')
 
     switch (method) {
       case 'GET': {
@@ -19,7 +19,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         break
       }
       default:
-        res.setHeader('Allow', ['GET', 'PUT'])
+        res.setHeader('Allow', ['GET'])
         if (method) res.status(405).end(`Method ${method} Not Allowed`)
         else res.status(405).end(`Method Not Allowed`)
     }

view/src/pages/api/parkings/[parkingName].ts

@@ -3,7 +3,7 @@ import { NextPage } from 'next'
 import Image from 'next/image'
 
 import { ParkingCard } from '@/components/common'
-import { parkingNames, parkingLimit } from '@/constants/parkingNames'
+import { parkings } from '@/constants/parkingNames'
 import { ParkingData, Parking } from '@/type/parking.type'
 
 interface Props {
@@ -12,7 +12,7 @@ interface Props {
 
 export const getServerSideProps = async () => {
   const parkingData = await Promise.all(
-    parkingNames.map(async (name) => {
+    parkings.map(async ({ name, nameJP }) => {
       const url = `http://view:3000/api/parkings/${name}`
       const res = await fetch(url)
 
@@ -21,7 +21,7 @@ export const getServerSideProps = async () => {
       }
       const data = (await res.json()) as Parking[]
       return {
-        name,
+        name: nameJP,
         data,
       }
     }),
@@ -39,34 +39,52 @@ export const Home: NextPage<Props> = ({ parkingData }: Props) => (
     <div className='my-10 flex flex-col items-center'>
       <Card
         sx={{
-          width: 'fit-content',
-          p: '2rem',
-          mxnWidth: '90%',
+          width: '90%',
           display: 'flex',
           flexDirection: 'column',
           gap: '2rem',
           alignItems: 'center',
           boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.2)',
         }}
-        className='bg-white text-textBlack'
+        className='bg-white p-4 text-textBlack md:p-8'
       >
-        <div className='w-4/5'>
-          <Image src='/images/map.png' alt='map' width={500} height={500} className='w-full' />
+        <div className='flex w-full justify-center'>
+          <Image src='/images/map.png' alt='map' width={500} height={500} className='w-full md:w-1/2' />
         </div>
         <Typography variant='h5' fontWeight='bold'>
           現在の駐車状況
         </Typography>
         <div className='gird-cols-1 grid gap-5 md:grid-cols-3'>
-          {parkingData.map(({ name, data }, index) => (
-            <ParkingCard
-              key={name}
-              name={name}
-              currentCapacity={data[data.length - 1].count}
-              maxCapacity={parkingLimit[index]}
-              data={data}
-              dataLimit={20}
-            />
-          ))}
+          {parkingData.map(({ name, data }, index) => {
+            if (!data.length)
+              return (
+                <Card
+                  sx={{
+                    p: '1rem',
+                    backgroundColor: 'white',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem',
+                    minWidth: '300px',
+                  }}
+                >
+                  <div className='flex flex-col gap-4'>
+                    <p className='text-xl'>{name}</p>
+                    <p className='text-sm'>読み込みに失敗しました</p>
+                  </div>
+                </Card>
+              )
+            return (
+              <ParkingCard
+                key={name}
+                name={name}
+                currentCapacity={data[data.length - 1].count}
+                maxCapacity={parkings[index].limit}
+                data={data}
+                dataLimit={20}
+              />
+            )
+          })}
         </div>
       </Card>
     </div>