---

2026-06-24 16:52:08 +02:00
commit 5abeb4fd48
53 changed files with 276551 additions and 0 deletions
@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import { Providers } from './providers'
+import { Flex } from '@chakra-ui/react'
+
+export const metadata: Metadata = {
+  title: 'HSL Bike Helper',
+  description: 'An app that makes prediction based on Open Data from the Helsinki Bike System.',
+}
+
+const RootLayout = ({ children, }: Readonly<{ children: React.ReactNode }>) => {
+  return (
+    <html lang='en'>
+      <body>
+        <Providers>
+          <Flex justifyContent='center' width='100%' padding={4} minH='calc(100vh - 72px)'>
+            {children}
+          </Flex>
+        </Providers>
+      </body>
+    </html>
+  )
+}
+export default RootLayout
@@ -0,0 +1,26 @@
+import type { MetadataRoute } from 'next'
+
+const manifest = (): MetadataRoute.Manifest => {
+  return {
+    name: 'HSL Bike Helper',
+    short_name: 'HSL',
+    description: 'An app that makes prediction based on Open Data from the Helsinki Bike System.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#000000',
+    icons: [
+      {
+        src: '/icon-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  }
+}
+export default manifest
@@ -0,0 +1,78 @@
+'use client'
+
+import { InputField, Wrapper } from '@/components'
+import { Box, Button, Flex, FormLabel, Select, Text } from '@chakra-ui/react'
+import { Field, Form, Formik } from 'formik'
+import { useState } from 'react'
+
+interface Response {
+  timestamp: string
+  station: string
+  departingCount: number
+  returningCount: number
+  bikeAtStationCount: number
+  increasing: boolean
+}
+
+const Home: React.FC = () => {
+  const [predictionData, setPredictionData] = useState<Response>()
+
+  return (
+    <Box w='100%'>
+      <Wrapper>
+        <Formik
+          initialValues={{ station: 'Kamppi (M)', timestamp: '' }}
+          onSubmit={async ({ station, timestamp }, { setErrors }) => {
+            const response: Response = await (await fetch(`${process.env.NEXT_PUBLIC_BACKEND_ORIGIN}/app/predict?timestamp=${timestamp}&station=${station}`)).json()
+            setPredictionData(response)
+          }}
+        >
+          {({ isSubmitting, values }) => (
+            <Form>
+              <Flex flexDir='column' alignItems='center' mt={4}>
+                <Field name='station'>
+                  {/* @ts-ignore */}
+                  {({ field }) => (
+                    <>
+                      <FormLabel htmlFor='station'>Station</FormLabel>
+                      <Select id='station' placeholder='' textAlign='center' {...field} >
+                        <option value='Kamppi (M)'>Kamppi (M)</option>
+                        <option value='Rautatientori - itä'>Rautatientori - itä</option>
+                      </Select>
+                    </>
+                  )}
+                </Field>
+
+                <FormLabel htmlFor='timestamp' mt={4} mb={0}>Timestamp</FormLabel>
+                <InputField name='timestamp' label='' placeholder='YYYY-MM-DD HH:MM:SS' textAlign='center' />
+
+                <Button type='submit' mt={4} disabled={isSubmitting} isLoading={isSubmitting}>Predict</Button>
+                {
+                  predictionData &&
+                  <Box mt={4}>
+                    <Text>Timestamp: {predictionData.timestamp}</Text>
+                    <Text>Station: {predictionData.station}</Text>
+                    <Text>Predicted Number of Bikes Arriving at Station: {predictionData.returningCount}</Text>
+                    <Text>Predicted Number of Bikes Departing from Station: {predictionData.departingCount}</Text>
+                    <Text>Predicted Number of Bikes at Station: {predictionData.bikeAtStationCount}</Text>
+                    <Text>Predicted Bike Count Status: {predictionData.increasing ? 'Decreasing' : 'Increasing'}</Text>
+                    <Text>
+                      In need of more bikes: &nbsp;
+                      {
+                        predictionData.bikeAtStationCount > 10 ? 'No' :
+                          predictionData.bikeAtStationCount > 5 ? 'Yes, but not urgently.' :
+                            'Yes, urgently.'
+                      }
+                    </Text>
+                  </Box>
+                }
+
+              </Flex>
+            </Form>
+          )}
+        </Formik>
+      </Wrapper>
+    </Box>
+  )
+}
+export default Home
@@ -0,0 +1,9 @@
+'use client'
+
+import { ChakraProvider } from '@chakra-ui/react'
+
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ChakraProvider>{children}</ChakraProvider>
+  )
+}