Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Route Map #99

Open
wants to merge 29 commits into
base: main
Choose a base branch
from
Open

Add Route Map #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
5f9c192
Add RouteMap Transition & Circle(Work In Progress)
kcyoow Dec 17, 2024
676b339
Merge pull request #89 from BusHanyang/main
kcyoow Dec 17, 2024
a2b3d1d
ADD All RouteMap
kcyoow Dec 21, 2024
aebd247
feat(RouteMap): add ping effect to Circle based on the current route
kcyoow Dec 22, 2024
a137918
fix(RouteMap): resolve some TypeScript errors
kcyoow Dec 23, 2024
a7ba8e7
fix(RouteMap,Shuttle,FullTime): refine Yesulin route details and upda…
kcyoow Jan 6, 2025
7add724
Merge branch 'kcy/route-map&Migration' into kcy/route-map
kcyoow Jan 6, 2025
e4bdb8c
fix(RouteMap): Fix Errors
kcyoow Jan 6, 2025
2cb6457
Merge branch 'dev/route-map' into dev/kcy-routemap
kcyoow Mar 8, 2025
933d808
fix(RouteMap): Fix Errors
kcyoow Mar 8, 2025
fb2669f
fix(App): Sort Imports
kcyoow Mar 8, 2025
e6aa354
Fix Some Errors
kcyoow Mar 8, 2025
28280f7
fix(RouteMap): Fix Z-index
kcyoow Mar 9, 2025
4011c60
Modify the margin on some devices not to be too wide
devITae Mar 9, 2025
20635cd
Remove useless code
devITae Mar 9, 2025
01bb219
Modify media queries to improve readability
devITae Mar 10, 2025
8abb935
Modify font weight
devITae Mar 10, 2025
e8faad7
Fix Format, zIndex, FileName & Simplifying certain loops
kcyoow Mar 10, 2025
d6baa0e
Change Redux to useContext
kcyoow Mar 10, 2025
1dff890
Remove Unnecessary Semicolon
kcyoow Mar 10, 2025
06801e7
Modify File Name
kcyoow Mar 10, 2025
597d8ed
Fix Difference Between Local and Remote
kcyoow Mar 10, 2025
20a707b
Modify px to rem
devITae Mar 12, 2025
ac00ac4
Add only lines for selected stops to be colored
devITae Mar 12, 2025
f0d60eb
Sizing the text on the Chip
devITae Mar 12, 2025
cf87f1e
Adjust arrow size
devITae Mar 12, 2025
2b41f2d
Remove Empty Space & Fix Format
kcyoow Mar 12, 2025
46b01b7
Simplifying if-else Statement
kcyoow Mar 12, 2025
442c041
Fix The Possibility That Timetable And setTimetable Could Be Null
kcyoow Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions .pnp.cjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added .yarn/cache/@babel-runtime-npm-7.26.0-9afa3c4ef6-9f4ea1c1d5.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/@types-react-transition-group-npm-4.4.11-dda183055d-a7f4de6e5f.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/dom-helpers-npm-5.2.1-b38bb4470b-bed2341adf.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/react-transition-group-npm-4.4.5-98ea4ef96e-ca32d3fd21.zip
View file
Open in desktop
Binary file not shown.
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-snowfall": "^2.2.0",
"react-spinners": "^0.13.8",
"react-tiny-fab": "^4.0.4",
"react-transition-group": "^4.4.5",
"recoil": "^0.7.7",
"sass": "^1.76.0",
"styled-components": "^6.1.9",
Expand All @@ -40,6 +41,7 @@
"devDependencies": {
"@types/react": "18.3.1",
"@types/react-dom": "18.3.0",
"@types/react-transition-group": "^4",
"@types/styled-components": "^5.1.34",
"@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0",
Expand Down
74 changes: 50 additions & 24 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@ import React, { lazy, Suspense, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { BrowserRouter, Link, Navigate, Route, Routes } from 'react-router-dom'
import PullToRefresh from 'react-simple-pull-to-refresh'
import { Transition } from 'react-transition-group'
import styled, { css } from 'styled-components'
import { Reset } from 'styled-reset'
import tw from 'twin.macro'

import Arrow from '/public/image/expand_less_white_48dp.svg?react'
import HelpImg from '/public/image/helpblack.svg?react'
import { Shuttle } from '@/components'
import Fabs from '@/components/fab/fab'
import { RouteMap } from '@/components/routemap/RouteMap'
import { useDarkMode } from '@/components/useDarkMode'
import { useDarkmodeContext } from '@/context/ThemeContext'
import { StopLocation } from '@/data'

import Refreshing from './app/components/ptr/refreshing-content'
import Refreshing from './app/components/ptr/refreshing-content'

const Notice = lazy(() => import('@/components/notice/Notice'))
const FullTime = lazy(() => import('@/components/fulltime/FullTime'))
Expand Down Expand Up @@ -92,6 +95,7 @@ const Button = styled(CardView)`
flex will-change-transform overflow-hidden cursor-default
border-none px-2 py-6 hm:py-4 hm:text-sm hm:leading-4 text-theme-text
`}

&.active {
${tw`
bg-button-active text-black drop-shadow-none shadow-inner transition-all ease-out duration-700
Expand All @@ -115,14 +119,24 @@ const HelpIcon = styled(HelpImg)`
${tw`bottom-3 right-0 absolute h-9 w-9 hsm:h-8 hsm:w-8 cursor-default`} drag-save-n
`

const RouteIndexCardView = styled(CardView)`
${tw`p-4 h-12 hm:p-2 flex`}
const RouteIndexCardView = styled(CardView)<{status: string}>`
${tw`relative p-4 h-12 hsm:h-20 hm:p-2 transition-[height] ease-in-out duration-150`}
${(props) => props.status === 'entered' ? tw`h-[13.7rem] hm:h-[11.7rem]` : tw`h-14 hsm:h-16`}
`

const RouteIndexWrapper = styled.div`
${tw`flex flex-wrap place-content-center items-center`}
`

const RouteIndexContainer = styled.div<{status: string}>`
${tw`absolute top-0 inset-0 flex place-content-center items-center transition ease-in-out duration-300`}
${(props) => props.status === 'exited' ? tw`opacity-100` : tw`opacity-0`}
${(props) => props.status === 'entered' ? tw`hidden`: tw``}
`
const RouteToggleImage = styled(Arrow)<{status: string}>`
${tw`absolute bottom-0 inset-x-0 rotate-180 m-auto h-[1.2rem] w-[1.2rem] opacity-80 transition ease-in-out duration-150`}
${(props) => props.status === 'entered'? tw`rotate-0`:tw`rotate-180`}
`
const SegmentedControl = styled.div`
${tw`
relative p-1 w-[16rem] hsm:w-[14rem] text-sm hsm:text-xs items-center grid grid-cols-2 gap-3 rounded-3xl bg-control-main will-change-transform
Expand All @@ -146,7 +160,7 @@ const SegmentedControlWrapper = styled.div<{
`

const OptionWrapper = styled.div`
${tw`relative z-10 flex items-center items-center justify-center`}
${tw`relative z-10 flex items-center justify-center`}
`

const ActiveIndicator = styled.div<{ $activeIndex: number }>`
Expand Down Expand Up @@ -183,6 +197,7 @@ function App() {
//window.localStorage.getItem('xmas_alert') === null,
window.localStorage.getItem('spring_2025') === null,
)
const [routeCardClick, setRouteCardClick] = useState<boolean>(false)

const handleContextMenu = (e: { preventDefault: () => void }) => {
e.preventDefault()
Expand Down Expand Up @@ -431,26 +446,37 @@ function App() {
</SegmentedControl>
</SegmentedControlWrapper>
</MainCardView>

<RouteIndexCardView>
<RouteIndexWrapper>
<CycleCircle theme={theme} />
<RouteText>{t('cycle_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<DirectCircle theme={theme} />
<RouteText>{t('direct_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<YesulinCircle theme={theme} />
<RouteText>{t('yesulin_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<JungangCircle theme={theme} />
<RouteText>{t('jungang_index')}</RouteText>
</RouteIndexWrapper>
</RouteIndexCardView>

<Transition
in={routeCardClick}
timeout={150}
>
{(state) => (
<>
<RouteIndexCardView status={state} onClick={() => {setRouteCardClick(!routeCardClick)}}>
<RouteIndexContainer status={state}>
<RouteIndexWrapper>
<CycleCircle theme={theme}/>
<RouteText>{t('cycle_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<DirectCircle theme={theme}/>
<RouteText>{t('direct_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<YesulinCircle theme={theme}/>
<RouteText>{t('yesulin_index')}</RouteText>
</RouteIndexWrapper>
<RouteIndexWrapper>
<JungangCircle theme={theme}/>
<RouteText>{t('jungang_index')}</RouteText>
</RouteIndexWrapper>
</RouteIndexContainer>
<RouteMap status={state} tab={tab}/>
<RouteToggleImage fill='var(--color-arrow-color)' status={state}/>
</RouteIndexCardView>
</>
)}
</Transition>
<StationButtonWrapper>
<Button
id="shuttlecoke_o"
Expand Down
39 changes: 25 additions & 14 deletions src/app/components/fulltime/FullTime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ const TimeBoxInner = styled.div<{ $maxChips: number }>`
return tw`h-28 hm:h-24`
} else if ($maxChips === 3) {
return tw`h-32 hm:h-28`
} else if ($maxChips === 4) {
return tw`h-40 hm:h-32`
}
}}
`
Expand All @@ -121,11 +123,6 @@ const TimetableContainer = styled.div`
${tw`pb-6`}
`

const YesulinMinuteWrapper = styled.span<{ $itemCount: number }>`
${tw`inline-block text-green-500`}
${({ $itemCount }) => ($itemCount === 0 ? tw`hidden` : undefined)}
`

const ComboBox = (props: {
type: string
value: StopLocation | Season | Week
Expand Down Expand Up @@ -175,19 +172,25 @@ const TimeBox = (props: OrganizedTimetables) => {
<Chip className="bg-chip-purple">{t('cycle_ja')}</Chip>
<MinuteContainer>{props.jungang.join(' ')}</MinuteContainer>
</TimeBoxBodyGrid>
<TimeBoxBodyGrid $itemCount={props.directY.length}>
<Chip className="bg-chip-green">{t('yesul')}</Chip>
<MinuteContainer>{props.directY.join(' ')}</MinuteContainer>
</TimeBoxBodyGrid>
<TimeBoxBodyGrid $itemCount={props.direct.length}>
<Chip className="bg-chip-blue">{t('direct')}</Chip>
<Chip className={props.isShuttleI?"bg-chip-orange":"bg-chip-blue"}>{t('direct')}</Chip>
<DirectMinuteContainer>
{props.direct.map((time, idx) => {
return (
<React.Fragment key={idx}>
<span>{time} </span>
</React.Fragment>
let isExist = false
props.directY.map((ytime) => {
time === ytime ? (isExist = true) : null
})
return(
isExist ? null :
<React.Fragment key={idx}>
<span>{time} </span>
</React.Fragment>
)
})}
<YesulinMinuteWrapper $itemCount={props.directY.length}>
{`${props.directY.join(' ')} (${t('to_yesulin')})`}
</YesulinMinuteWrapper>
</DirectMinuteContainer>
</TimeBoxBodyGrid>
</TimeBoxBody>
Expand Down Expand Up @@ -251,6 +254,7 @@ const FullTime = () => {
circle: [],
directY: [],
jungang: [],
isShuttleI: false,
count: 0,
}
schedules.forEach((schedule) => {
Expand All @@ -266,6 +270,9 @@ const FullTime = () => {
single.circle.push(schedule.time.split(':')[1])
} else if (schedule.type === 'DHJ') {
single.jungang.push(schedule.time.split(':')[1])
}
if (schedule.type === 'R'){
single.isShuttleI = true
}
})

Expand All @@ -278,6 +285,9 @@ const FullTime = () => {
if (single.jungang.length !== 0) {
single.count++
}
if (single.directY.length !== 0) {
single.count++
}

filteredByType.push(single)
return <></>
Expand All @@ -299,13 +309,14 @@ const FullTime = () => {
// if schedule.direct.length === 0
return (
<React.Fragment key={schedule.time}>
{schedule.direct.length + schedule.circle.length === 0 ? null : (
{schedule.direct.length + schedule.circle.length === 0 && (schedule.directY.length === 0 && schedule.jungang.length === 0) ? null : (
<TimeBox
time={schedule.time}
direct={schedule.direct}
directY={schedule.directY}
circle={schedule.circle}
jungang={schedule.jungang}
isShuttleI={schedule.isShuttleI}
count={countChip}
/>
)}
Expand Down
4 changes: 4 additions & 0 deletions src/app/components/lang/lang.en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"cycle": "Cycle",
"direct": "Direct",
"cycle_ja": "Direct",
"yesul": "Yesulin",
"jung": "Jungang",

"NA": "N/A",
"left": "Left",
"departure": "Depart",
Expand All @@ -19,6 +22,7 @@
"shuttlecoke_i": "ShuttleCoke (To Dorm)",
"subway": "HYU@Ansan Stn.",
"residence": "Dormitory",
"dorm": "Dorm",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Translation consistency validation needed.

The addition of "dorm": "Dorm" seems appropriate, but verify that it's used consistently with the existing "residence": "Dormitory" (line 24) and "dest_dorm": "Dormitory" (line 35). Having both "Dorm" and "Dormitory" in different places might confuse users.

🏁 Script executed:

#!/bin/bash
# Check for consistency in how "dorm" terminology is used across files
echo "Checking for 'dorm' and 'dormitory' usage in component files:"
rg -i "dormitory|dorm" --type tsx --type ts src/app/components/

Length of output: 238

Translation Consistency Check: Please Verify Manually

  • The translation file (src/app/components/lang/lang.en.json) now uses "dorm": "Dorm" (line 25), while similar keys use "Dormitory" (e.g., "residence": "Dormitory" on line 24 and "dest_dorm": "Dormitory" on line 35). This inconsistency might confuse users.
  • Note that the original automated search using file type filters failed due to an unrecognized file type (tsx). The script above has been revised to search all files in the directory.
  • Action: Run the updated script to verify whether the terms “dorm” and “dormitory” appear in conflicting contexts across the components. Based on the results, adjust the translation entries to ensure consistency throughout the UI.

🏁 Script executed:

#!/bin/bash
# Re-run the consistency check for “dorm” and “dormitory” across all files in src/app/components
echo "Checking for 'dorm' and 'dormitory' usage in all files under src/app/components:"
rg -i "dormitory|dorm" src/app/components/

Length of output: 1336

Translation Consistency: Unify "Dorm" vs. "Dormitory" Terminology

  • In src/app/components/lang/lang.en.json, the key "dorm" is mapped to "Dorm" (line 25) while "residence" (line 24) and "dest_dorm" (line 35) use "Dormitory".
  • UI components such as RouteMap.tsx and others reference these keys, which may lead to user confusion.
  • Please verify if the abbreviated form "Dorm" is intentional. If not, update the translations to consistently use "Dormitory" (or choose one option) throughout the codebase.

"yesulin": "Yesulin Apt.",
"jungang": "Jungang Stn.",
"else": "unknown error",
Expand Down
Loading
Loading