├── .eslintrc.json
├── .github
    └── workflows
    │   └── docker-publish.yml
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── components
    ├── history
    │   ├── HistoryEntry.tsx
    │   ├── HistoryList.tsx
    │   └── styles.tsx
    ├── layout
    │   ├── CoachDetailsView.tsx
    │   ├── TrainDetailsView.tsx
    │   ├── TrainHistoryView.tsx
    │   ├── TripDetailsView.tsx
    │   └── styles.tsx
    ├── misc
    │   ├── CommonComponents.tsx
    │   ├── CommonStyles.tsx
    │   ├── Error.tsx
    │   ├── ErrorBoundary.tsx
    │   ├── Footer.tsx
    │   ├── GlobalStyles.tsx
    │   ├── Loader.tsx
    │   ├── NavigationBar.tsx
    │   ├── RainbowStripe.tsx
    │   ├── ThemeSwitcher.tsx
    │   └── UicID.tsx
    ├── search
    │   ├── SearchBox.tsx
    │   ├── SearchSuggestionList.tsx
    │   └── styles.tsx
    └── timetable
    │   ├── CompleteTripTimetable.tsx
    │   ├── MultiTripTimetable.tsx
    │   ├── Node.tsx
    │   ├── ShortTripTimetable.tsx
    │   ├── SingleRowRenderer.tsx
    │   ├── TimetableRenderer.tsx
    │   └── styles.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
    ├── 404.tsx
    ├── _app.tsx
    ├── _document.js
    ├── coach
    │   └── [uic].tsx
    ├── index.tsx
    ├── trip
    │   └── [trainType]
    │   │   └── [trainNumber].tsx
    ├── tripSearch.tsx
    └── vehicle
    │   └── [trainType]
    │       └── [tzn].tsx
├── public
    ├── images
    │   ├── adridoesthings.webp
    │   ├── card.png
    │   ├── icon-bg-32.png
    │   ├── icon-bg-400.png
    │   ├── logo.png
    │   ├── philippirl.webp
    │   ├── screenshot1.png
    │   └── twittercard.png
    ├── manifest.json
    ├── offline.html
    └── sw.js
├── tsconfig.json
├── util
    ├── commonTypes.ts
    ├── constants.ts
    ├── dataFetcher.ts
    ├── graphql.ts
    ├── hooks.ts
    ├── registerServiceWorker.ts
    ├── theme.ts
    ├── tracking.ts
    └── trainDataUtil.ts
└── yarn.lock


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "extends": ["plugin:@typescript-eslint/recommended", "next/core-web-vitals"],
 4 |   "rules": {
 5 |     "@typescript-eslint/quotes": ["error", "single", {"allowTemplateLiterals": true}],
 6 |     "@typescript-eslint/semi": ["error", "never"],
 7 |     "@typescript-eslint/comma-dangle": ["error", "always-multiline"],
 8 |     "@typescript-eslint/no-explicit-any": ["warn"],
 9 |     "react/jsx-no-target-blank": "off",
10 |     "@next/next/no-page-custom-font": "off",
11 |     "eol-last": "error",
12 |     "no-redeclare": "error",
13 |     "eqeqeq": "error",
14 |     "no-tabs": "error",
15 |     "no-unneeded-ternary": "error",
16 |     "no-useless-return": "error"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.github/workflows/docker-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Docker
 2 | 
 3 | # This workflow uses actions that are not certified by GitHub.
 4 | # They are provided by a third-party and are governed by
 5 | # separate terms of service, privacy policy, and support
 6 | # documentation.
 7 | 
 8 | on:
 9 |   push:
10 |     branches: [ main, canary ]
11 | 
12 | env:
13 |   # Use docker.io for Docker Hub if empty
14 |   REGISTRY: ghcr.io
15 |   # github.repository as <account>/<repo>
16 |   IMAGE_NAME: ${{ github.repository }}
17 | 
18 | 
19 | jobs:
20 |   build:
21 | 
22 |     runs-on: ubuntu-latest
23 |     permissions:
24 |       contents: read
25 |       packages: write
26 | 
27 |     steps:
28 |       - name: Checkout repository
29 |         uses: actions/checkout@v2
30 | 
31 |       # Login against a Docker registry except on PR
32 |       # https://github.com/docker/login-action
33 |       - name: Log into registry ${{ env.REGISTRY }}
34 |         if: github.event_name != 'pull_request'
35 |         uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
36 |         with:
37 |           registry: ${{ env.REGISTRY }}
38 |           username: ${{ github.actor }}
39 |           password: ${{ secrets.GITHUB_TOKEN }}
40 | 
41 |       # Extract metadata (tags, labels) for Docker
42 |       # https://github.com/docker/metadata-action
43 |       - name: Extract Docker metadata
44 |         id: meta
45 |         uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
46 |         with:
47 |           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
48 | 
49 |       # Build and push Docker image with Buildx (don't push on PR)
50 |       # https://github.com/docker/build-push-action
51 |       - name: Build and push Docker image
52 |         uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
53 |         with:
54 |           context: .
55 |           push: ${{ github.event_name != 'pull_request' }}
56 |           tags: ${{ steps.meta.outputs.tags }}
57 |           labels: ${{ steps.meta.outputs.labels }}
58 |           build-args: |
59 |             BUILD_ENV=${{ github.ref_name }}
60 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # old source code
37 | /old
38 | 
39 | # typescript
40 | tsconfig.tsbuildinfo
41 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:20-alpine as base
 2 | WORKDIR /app
 3 | 
 4 | COPY package.json yarn.lock ./
 5 | 
 6 | FROM base as dependencies
 7 | 
 8 | RUN yarn install --cache-folder ./ycache --immutable --immutable-cache --pure-lockfile; rm -rf ./ycache
 9 | 
10 | FROM dependencies as build
11 | 
12 | ENV BUILD_ENV=development
13 | ARG BUILD_ENV=development
14 | 
15 | COPY ./components ./components
16 | COPY ./pages ./pages
17 | COPY ./public ./public
18 | COPY ./util ./util
19 | 
20 | COPY ./next.config.js .
21 | COPY ./next-env.d.ts .
22 | COPY ./tsconfig.json .
23 | 
24 | RUN yarn next build
25 | 
26 | FROM node:20-alpine
27 | WORKDIR /app
28 | 
29 | COPY --from=build /app/package.json ./
30 | COPY --from=build /app/node_modules/ ./node_modules/
31 | COPY --from=build /app/.next ./.next
32 | COPY --from=build /app/public ./public
33 | COPY --from=build /app/next.config.js .
34 | 
35 | EXPOSE 80
36 | CMD ["yarn", "next", "start", "-p", "80"]
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU AFFERO GENERAL PUBLIC LICENSE
  2 |                        Version 3, 19 November 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU Affero General Public License is a free, copyleft license for
 11 | software and other kinds of works, specifically designed to ensure
 12 | cooperation with the community in the case of network server software.
 13 | 
 14 |   The licenses for most software and other practical works are designed
 15 | to take away your freedom to share and change the works.  By contrast,
 16 | our General Public Licenses are intended to guarantee your freedom to
 17 | share and change all versions of a program--to make sure it remains free
 18 | software for all its users.
 19 | 
 20 |   When we speak of free software, we are referring to freedom, not
 21 | price.  Our General Public Licenses are designed to make sure that you
 22 | have the freedom to distribute copies of free software (and charge for
 23 | them if you wish), that you receive source code or can get it if you
 24 | want it, that you can change the software or use pieces of it in new
 25 | free programs, and that you know you can do these things.
 26 | 
 27 |   Developers that use our General Public Licenses protect your rights
 28 | with two steps: (1) assert copyright on the software, and (2) offer
 29 | you this License which gives you legal permission to copy, distribute
 30 | and/or modify the software.
 31 | 
 32 |   A secondary benefit of defending all users' freedom is that
 33 | improvements made in alternate versions of the program, if they
 34 | receive widespread use, become available for other developers to
 35 | incorporate.  Many developers of free software are heartened and
 36 | encouraged by the resulting cooperation.  However, in the case of
 37 | software used on network servers, this result may fail to come about.
 38 | The GNU General Public License permits making a modified version and
 39 | letting the public access it on a server without ever releasing its
 40 | source code to the public.
 41 | 
 42 |   The GNU Affero General Public License is designed specifically to
 43 | ensure that, in such cases, the modified source code becomes available
 44 | to the community.  It requires the operator of a network server to
 45 | provide the source code of the modified version running there to the
 46 | users of that server.  Therefore, public use of a modified version, on
 47 | a publicly accessible server, gives the public access to the source
 48 | code of the modified version.
 49 | 
 50 |   An older license, called the Affero General Public License and
 51 | published by Affero, was designed to accomplish similar goals.  This is
 52 | a different license, not a version of the Affero GPL, but Affero has
 53 | released a new version of the Affero GPL which permits relicensing under
 54 | this license.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                        TERMS AND CONDITIONS
 60 | 
 61 |   0. Definitions.
 62 | 
 63 |   "This License" refers to version 3 of the GNU Affero General Public License.
 64 | 
 65 |   "Copyright" also means copyright-like laws that apply to other kinds of
 66 | works, such as semiconductor masks.
 67 | 
 68 |   "The Program" refers to any copyrightable work licensed under this
 69 | License.  Each licensee is addressed as "you".  "Licensees" and
 70 | "recipients" may be individuals or organizations.
 71 | 
 72 |   To "modify" a work means to copy from or adapt all or part of the work
 73 | in a fashion requiring copyright permission, other than the making of an
 74 | exact copy.  The resulting work is called a "modified version" of the
 75 | earlier work or a work "based on" the earlier work.
 76 | 
 77 |   A "covered work" means either the unmodified Program or a work based
 78 | on the Program.
 79 | 
 80 |   To "propagate" a work means to do anything with it that, without
 81 | permission, would make you directly or secondarily liable for
 82 | infringement under applicable copyright law, except executing it on a
 83 | computer or modifying a private copy.  Propagation includes copying,
 84 | distribution (with or without modification), making available to the
 85 | public, and in some countries other activities as well.
 86 | 
 87 |   To "convey" a work means any kind of propagation that enables other
 88 | parties to make or receive copies.  Mere interaction with a user through
 89 | a computer network, with no transfer of a copy, is not conveying.
 90 | 
 91 |   An interactive user interface displays "Appropriate Legal Notices"
 92 | to the extent that it includes a convenient and prominently visible
 93 | feature that (1) displays an appropriate copyright notice, and (2)
 94 | tells the user that there is no warranty for the work (except to the
 95 | extent that warranties are provided), that licensees may convey the
 96 | work under this License, and how to view a copy of this License.  If
 97 | the interface presents a list of user commands or options, such as a
 98 | menu, a prominent item in the list meets this criterion.
 99 | 
100 |   1. Source Code.
101 | 
102 |   The "source code" for a work means the preferred form of the work
103 | for making modifications to it.  "Object code" means any non-source
104 | form of a work.
105 | 
106 |   A "Standard Interface" means an interface that either is an official
107 | standard defined by a recognized standards body, or, in the case of
108 | interfaces specified for a particular programming language, one that
109 | is widely used among developers working in that language.
110 | 
111 |   The "System Libraries" of an executable work include anything, other
112 | than the work as a whole, that (a) is included in the normal form of
113 | packaging a Major Component, but which is not part of that Major
114 | Component, and (b) serves only to enable use of the work with that
115 | Major Component, or to implement a Standard Interface for which an
116 | implementation is available to the public in source code form.  A
117 | "Major Component", in this context, means a major essential component
118 | (kernel, window system, and so on) of the specific operating system
119 | (if any) on which the executable work runs, or a compiler used to
120 | produce the work, or an object code interpreter used to run it.
121 | 
122 |   The "Corresponding Source" for a work in object code form means all
123 | the source code needed to generate, install, and (for an executable
124 | work) run the object code and to modify the work, including scripts to
125 | control those activities.  However, it does not include the work's
126 | System Libraries, or general-purpose tools or generally available free
127 | programs which are used unmodified in performing those activities but
128 | which are not part of the work.  For example, Corresponding Source
129 | includes interface definition files associated with source files for
130 | the work, and the source code for shared libraries and dynamically
131 | linked subprograms that the work is specifically designed to require,
132 | such as by intimate data communication or control flow between those
133 | subprograms and other parts of the work.
134 | 
135 |   The Corresponding Source need not include anything that users
136 | can regenerate automatically from other parts of the Corresponding
137 | Source.
138 | 
139 |   The Corresponding Source for a work in source code form is that
140 | same work.
141 | 
142 |   2. Basic Permissions.
143 | 
144 |   All rights granted under this License are granted for the term of
145 | copyright on the Program, and are irrevocable provided the stated
146 | conditions are met.  This License explicitly affirms your unlimited
147 | permission to run the unmodified Program.  The output from running a
148 | covered work is covered by this License only if the output, given its
149 | content, constitutes a covered work.  This License acknowledges your
150 | rights of fair use or other equivalent, as provided by copyright law.
151 | 
152 |   You may make, run and propagate covered works that you do not
153 | convey, without conditions so long as your license otherwise remains
154 | in force.  You may convey covered works to others for the sole purpose
155 | of having them make modifications exclusively for you, or provide you
156 | with facilities for running those works, provided that you comply with
157 | the terms of this License in conveying all material for which you do
158 | not control copyright.  Those thus making or running the covered works
159 | for you must do so exclusively on your behalf, under your direction
160 | and control, on terms that prohibit them from making any copies of
161 | your copyrighted material outside their relationship with you.
162 | 
163 |   Conveying under any other circumstances is permitted solely under
164 | the conditions stated below.  Sublicensing is not allowed; section 10
165 | makes it unnecessary.
166 | 
167 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
168 | 
169 |   No covered work shall be deemed part of an effective technological
170 | measure under any applicable law fulfilling obligations under article
171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
172 | similar laws prohibiting or restricting circumvention of such
173 | measures.
174 | 
175 |   When you convey a covered work, you waive any legal power to forbid
176 | circumvention of technological measures to the extent such circumvention
177 | is effected by exercising rights under this License with respect to
178 | the covered work, and you disclaim any intention to limit operation or
179 | modification of the work as a means of enforcing, against the work's
180 | users, your or third parties' legal rights to forbid circumvention of
181 | technological measures.
182 | 
183 |   4. Conveying Verbatim Copies.
184 | 
185 |   You may convey verbatim copies of the Program's source code as you
186 | receive it, in any medium, provided that you conspicuously and
187 | appropriately publish on each copy an appropriate copyright notice;
188 | keep intact all notices stating that this License and any
189 | non-permissive terms added in accord with section 7 apply to the code;
190 | keep intact all notices of the absence of any warranty; and give all
191 | recipients a copy of this License along with the Program.
192 | 
193 |   You may charge any price or no price for each copy that you convey,
194 | and you may offer support or warranty protection for a fee.
195 | 
196 |   5. Conveying Modified Source Versions.
197 | 
198 |   You may convey a work based on the Program, or the modifications to
199 | produce it from the Program, in the form of source code under the
200 | terms of section 4, provided that you also meet all of these conditions:
201 | 
202 |     a) The work must carry prominent notices stating that you modified
203 |     it, and giving a relevant date.
204 | 
205 |     b) The work must carry prominent notices stating that it is
206 |     released under this License and any conditions added under section
207 |     7.  This requirement modifies the requirement in section 4 to
208 |     "keep intact all notices".
209 | 
210 |     c) You must license the entire work, as a whole, under this
211 |     License to anyone who comes into possession of a copy.  This
212 |     License will therefore apply, along with any applicable section 7
213 |     additional terms, to the whole of the work, and all its parts,
214 |     regardless of how they are packaged.  This License gives no
215 |     permission to license the work in any other way, but it does not
216 |     invalidate such permission if you have separately received it.
217 | 
218 |     d) If the work has interactive user interfaces, each must display
219 |     Appropriate Legal Notices; however, if the Program has interactive
220 |     interfaces that do not display Appropriate Legal Notices, your
221 |     work need not make them do so.
222 | 
223 |   A compilation of a covered work with other separate and independent
224 | works, which are not by their nature extensions of the covered work,
225 | and which are not combined with it such as to form a larger program,
226 | in or on a volume of a storage or distribution medium, is called an
227 | "aggregate" if the compilation and its resulting copyright are not
228 | used to limit the access or legal rights of the compilation's users
229 | beyond what the individual works permit.  Inclusion of a covered work
230 | in an aggregate does not cause this License to apply to the other
231 | parts of the aggregate.
232 | 
233 |   6. Conveying Non-Source Forms.
234 | 
235 |   You may convey a covered work in object code form under the terms
236 | of sections 4 and 5, provided that you also convey the
237 | machine-readable Corresponding Source under the terms of this License,
238 | in one of these ways:
239 | 
240 |     a) Convey the object code in, or embodied in, a physical product
241 |     (including a physical distribution medium), accompanied by the
242 |     Corresponding Source fixed on a durable physical medium
243 |     customarily used for software interchange.
244 | 
245 |     b) Convey the object code in, or embodied in, a physical product
246 |     (including a physical distribution medium), accompanied by a
247 |     written offer, valid for at least three years and valid for as
248 |     long as you offer spare parts or customer support for that product
249 |     model, to give anyone who possesses the object code either (1) a
250 |     copy of the Corresponding Source for all the software in the
251 |     product that is covered by this License, on a durable physical
252 |     medium customarily used for software interchange, for a price no
253 |     more than your reasonable cost of physically performing this
254 |     conveying of source, or (2) access to copy the
255 |     Corresponding Source from a network server at no charge.
256 | 
257 |     c) Convey individual copies of the object code with a copy of the
258 |     written offer to provide the Corresponding Source.  This
259 |     alternative is allowed only occasionally and noncommercially, and
260 |     only if you received the object code with such an offer, in accord
261 |     with subsection 6b.
262 | 
263 |     d) Convey the object code by offering access from a designated
264 |     place (gratis or for a charge), and offer equivalent access to the
265 |     Corresponding Source in the same way through the same place at no
266 |     further charge.  You need not require recipients to copy the
267 |     Corresponding Source along with the object code.  If the place to
268 |     copy the object code is a network server, the Corresponding Source
269 |     may be on a different server (operated by you or a third party)
270 |     that supports equivalent copying facilities, provided you maintain
271 |     clear directions next to the object code saying where to find the
272 |     Corresponding Source.  Regardless of what server hosts the
273 |     Corresponding Source, you remain obligated to ensure that it is
274 |     available for as long as needed to satisfy these requirements.
275 | 
276 |     e) Convey the object code using peer-to-peer transmission, provided
277 |     you inform other peers where the object code and Corresponding
278 |     Source of the work are being offered to the general public at no
279 |     charge under subsection 6d.
280 | 
281 |   A separable portion of the object code, whose source code is excluded
282 | from the Corresponding Source as a System Library, need not be
283 | included in conveying the object code work.
284 | 
285 |   A "User Product" is either (1) a "consumer product", which means any
286 | tangible personal property which is normally used for personal, family,
287 | or household purposes, or (2) anything designed or sold for incorporation
288 | into a dwelling.  In determining whether a product is a consumer product,
289 | doubtful cases shall be resolved in favor of coverage.  For a particular
290 | product received by a particular user, "normally used" refers to a
291 | typical or common use of that class of product, regardless of the status
292 | of the particular user or of the way in which the particular user
293 | actually uses, or expects or is expected to use, the product.  A product
294 | is a consumer product regardless of whether the product has substantial
295 | commercial, industrial or non-consumer uses, unless such uses represent
296 | the only significant mode of use of the product.
297 | 
298 |   "Installation Information" for a User Product means any methods,
299 | procedures, authorization keys, or other information required to install
300 | and execute modified versions of a covered work in that User Product from
301 | a modified version of its Corresponding Source.  The information must
302 | suffice to ensure that the continued functioning of the modified object
303 | code is in no case prevented or interfered with solely because
304 | modification has been made.
305 | 
306 |   If you convey an object code work under this section in, or with, or
307 | specifically for use in, a User Product, and the conveying occurs as
308 | part of a transaction in which the right of possession and use of the
309 | User Product is transferred to the recipient in perpetuity or for a
310 | fixed term (regardless of how the transaction is characterized), the
311 | Corresponding Source conveyed under this section must be accompanied
312 | by the Installation Information.  But this requirement does not apply
313 | if neither you nor any third party retains the ability to install
314 | modified object code on the User Product (for example, the work has
315 | been installed in ROM).
316 | 
317 |   The requirement to provide Installation Information does not include a
318 | requirement to continue to provide support service, warranty, or updates
319 | for a work that has been modified or installed by the recipient, or for
320 | the User Product in which it has been modified or installed.  Access to a
321 | network may be denied when the modification itself materially and
322 | adversely affects the operation of the network or violates the rules and
323 | protocols for communication across the network.
324 | 
325 |   Corresponding Source conveyed, and Installation Information provided,
326 | in accord with this section must be in a format that is publicly
327 | documented (and with an implementation available to the public in
328 | source code form), and must require no special password or key for
329 | unpacking, reading or copying.
330 | 
331 |   7. Additional Terms.
332 | 
333 |   "Additional permissions" are terms that supplement the terms of this
334 | License by making exceptions from one or more of its conditions.
335 | Additional permissions that are applicable to the entire Program shall
336 | be treated as though they were included in this License, to the extent
337 | that they are valid under applicable law.  If additional permissions
338 | apply only to part of the Program, that part may be used separately
339 | under those permissions, but the entire Program remains governed by
340 | this License without regard to the additional permissions.
341 | 
342 |   When you convey a copy of a covered work, you may at your option
343 | remove any additional permissions from that copy, or from any part of
344 | it.  (Additional permissions may be written to require their own
345 | removal in certain cases when you modify the work.)  You may place
346 | additional permissions on material, added by you to a covered work,
347 | for which you have or can give appropriate copyright permission.
348 | 
349 |   Notwithstanding any other provision of this License, for material you
350 | add to a covered work, you may (if authorized by the copyright holders of
351 | that material) supplement the terms of this License with terms:
352 | 
353 |     a) Disclaiming warranty or limiting liability differently from the
354 |     terms of sections 15 and 16 of this License; or
355 | 
356 |     b) Requiring preservation of specified reasonable legal notices or
357 |     author attributions in that material or in the Appropriate Legal
358 |     Notices displayed by works containing it; or
359 | 
360 |     c) Prohibiting misrepresentation of the origin of that material, or
361 |     requiring that modified versions of such material be marked in
362 |     reasonable ways as different from the original version; or
363 | 
364 |     d) Limiting the use for publicity purposes of names of licensors or
365 |     authors of the material; or
366 | 
367 |     e) Declining to grant rights under trademark law for use of some
368 |     trade names, trademarks, or service marks; or
369 | 
370 |     f) Requiring indemnification of licensors and authors of that
371 |     material by anyone who conveys the material (or modified versions of
372 |     it) with contractual assumptions of liability to the recipient, for
373 |     any liability that these contractual assumptions directly impose on
374 |     those licensors and authors.
375 | 
376 |   All other non-permissive additional terms are considered "further
377 | restrictions" within the meaning of section 10.  If the Program as you
378 | received it, or any part of it, contains a notice stating that it is
379 | governed by this License along with a term that is a further
380 | restriction, you may remove that term.  If a license document contains
381 | a further restriction but permits relicensing or conveying under this
382 | License, you may add to a covered work material governed by the terms
383 | of that license document, provided that the further restriction does
384 | not survive such relicensing or conveying.
385 | 
386 |   If you add terms to a covered work in accord with this section, you
387 | must place, in the relevant source files, a statement of the
388 | additional terms that apply to those files, or a notice indicating
389 | where to find the applicable terms.
390 | 
391 |   Additional terms, permissive or non-permissive, may be stated in the
392 | form of a separately written license, or stated as exceptions;
393 | the above requirements apply either way.
394 | 
395 |   8. Termination.
396 | 
397 |   You may not propagate or modify a covered work except as expressly
398 | provided under this License.  Any attempt otherwise to propagate or
399 | modify it is void, and will automatically terminate your rights under
400 | this License (including any patent licenses granted under the third
401 | paragraph of section 11).
402 | 
403 |   However, if you cease all violation of this License, then your
404 | license from a particular copyright holder is reinstated (a)
405 | provisionally, unless and until the copyright holder explicitly and
406 | finally terminates your license, and (b) permanently, if the copyright
407 | holder fails to notify you of the violation by some reasonable means
408 | prior to 60 days after the cessation.
409 | 
410 |   Moreover, your license from a particular copyright holder is
411 | reinstated permanently if the copyright holder notifies you of the
412 | violation by some reasonable means, this is the first time you have
413 | received notice of violation of this License (for any work) from that
414 | copyright holder, and you cure the violation prior to 30 days after
415 | your receipt of the notice.
416 | 
417 |   Termination of your rights under this section does not terminate the
418 | licenses of parties who have received copies or rights from you under
419 | this License.  If your rights have been terminated and not permanently
420 | reinstated, you do not qualify to receive new licenses for the same
421 | material under section 10.
422 | 
423 |   9. Acceptance Not Required for Having Copies.
424 | 
425 |   You are not required to accept this License in order to receive or
426 | run a copy of the Program.  Ancillary propagation of a covered work
427 | occurring solely as a consequence of using peer-to-peer transmission
428 | to receive a copy likewise does not require acceptance.  However,
429 | nothing other than this License grants you permission to propagate or
430 | modify any covered work.  These actions infringe copyright if you do
431 | not accept this License.  Therefore, by modifying or propagating a
432 | covered work, you indicate your acceptance of this License to do so.
433 | 
434 |   10. Automatic Licensing of Downstream Recipients.
435 | 
436 |   Each time you convey a covered work, the recipient automatically
437 | receives a license from the original licensors, to run, modify and
438 | propagate that work, subject to this License.  You are not responsible
439 | for enforcing compliance by third parties with this License.
440 | 
441 |   An "entity transaction" is a transaction transferring control of an
442 | organization, or substantially all assets of one, or subdividing an
443 | organization, or merging organizations.  If propagation of a covered
444 | work results from an entity transaction, each party to that
445 | transaction who receives a copy of the work also receives whatever
446 | licenses to the work the party's predecessor in interest had or could
447 | give under the previous paragraph, plus a right to possession of the
448 | Corresponding Source of the work from the predecessor in interest, if
449 | the predecessor has it or can get it with reasonable efforts.
450 | 
451 |   You may not impose any further restrictions on the exercise of the
452 | rights granted or affirmed under this License.  For example, you may
453 | not impose a license fee, royalty, or other charge for exercise of
454 | rights granted under this License, and you may not initiate litigation
455 | (including a cross-claim or counterclaim in a lawsuit) alleging that
456 | any patent claim is infringed by making, using, selling, offering for
457 | sale, or importing the Program or any portion of it.
458 | 
459 |   11. Patents.
460 | 
461 |   A "contributor" is a copyright holder who authorizes use under this
462 | License of the Program or a work on which the Program is based.  The
463 | work thus licensed is called the contributor's "contributor version".
464 | 
465 |   A contributor's "essential patent claims" are all patent claims
466 | owned or controlled by the contributor, whether already acquired or
467 | hereafter acquired, that would be infringed by some manner, permitted
468 | by this License, of making, using, or selling its contributor version,
469 | but do not include claims that would be infringed only as a
470 | consequence of further modification of the contributor version.  For
471 | purposes of this definition, "control" includes the right to grant
472 | patent sublicenses in a manner consistent with the requirements of
473 | this License.
474 | 
475 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
476 | patent license under the contributor's essential patent claims, to
477 | make, use, sell, offer for sale, import and otherwise run, modify and
478 | propagate the contents of its contributor version.
479 | 
480 |   In the following three paragraphs, a "patent license" is any express
481 | agreement or commitment, however denominated, not to enforce a patent
482 | (such as an express permission to practice a patent or covenant not to
483 | sue for patent infringement).  To "grant" such a patent license to a
484 | party means to make such an agreement or commitment not to enforce a
485 | patent against the party.
486 | 
487 |   If you convey a covered work, knowingly relying on a patent license,
488 | and the Corresponding Source of the work is not available for anyone
489 | to copy, free of charge and under the terms of this License, through a
490 | publicly available network server or other readily accessible means,
491 | then you must either (1) cause the Corresponding Source to be so
492 | available, or (2) arrange to deprive yourself of the benefit of the
493 | patent license for this particular work, or (3) arrange, in a manner
494 | consistent with the requirements of this License, to extend the patent
495 | license to downstream recipients.  "Knowingly relying" means you have
496 | actual knowledge that, but for the patent license, your conveying the
497 | covered work in a country, or your recipient's use of the covered work
498 | in a country, would infringe one or more identifiable patents in that
499 | country that you have reason to believe are valid.
500 | 
501 |   If, pursuant to or in connection with a single transaction or
502 | arrangement, you convey, or propagate by procuring conveyance of, a
503 | covered work, and grant a patent license to some of the parties
504 | receiving the covered work authorizing them to use, propagate, modify
505 | or convey a specific copy of the covered work, then the patent license
506 | you grant is automatically extended to all recipients of the covered
507 | work and works based on it.
508 | 
509 |   A patent license is "discriminatory" if it does not include within
510 | the scope of its coverage, prohibits the exercise of, or is
511 | conditioned on the non-exercise of one or more of the rights that are
512 | specifically granted under this License.  You may not convey a covered
513 | work if you are a party to an arrangement with a third party that is
514 | in the business of distributing software, under which you make payment
515 | to the third party based on the extent of your activity of conveying
516 | the work, and under which the third party grants, to any of the
517 | parties who would receive the covered work from you, a discriminatory
518 | patent license (a) in connection with copies of the covered work
519 | conveyed by you (or copies made from those copies), or (b) primarily
520 | for and in connection with specific products or compilations that
521 | contain the covered work, unless you entered into that arrangement,
522 | or that patent license was granted, prior to 28 March 2007.
523 | 
524 |   Nothing in this License shall be construed as excluding or limiting
525 | any implied license or other defenses to infringement that may
526 | otherwise be available to you under applicable patent law.
527 | 
528 |   12. No Surrender of Others' Freedom.
529 | 
530 |   If conditions are imposed on you (whether by court order, agreement or
531 | otherwise) that contradict the conditions of this License, they do not
532 | excuse you from the conditions of this License.  If you cannot convey a
533 | covered work so as to satisfy simultaneously your obligations under this
534 | License and any other pertinent obligations, then as a consequence you may
535 | not convey it at all.  For example, if you agree to terms that obligate you
536 | to collect a royalty for further conveying from those to whom you convey
537 | the Program, the only way you could satisfy both those terms and this
538 | License would be to refrain entirely from conveying the Program.
539 | 
540 |   13. Remote Network Interaction; Use with the GNU General Public License.
541 | 
542 |   Notwithstanding any other provision of this License, if you modify the
543 | Program, your modified version must prominently offer all users
544 | interacting with it remotely through a computer network (if your version
545 | supports such interaction) an opportunity to receive the Corresponding
546 | Source of your version by providing access to the Corresponding Source
547 | from a network server at no charge, through some standard or customary
548 | means of facilitating copying of software.  This Corresponding Source
549 | shall include the Corresponding Source for any work covered by version 3
550 | of the GNU General Public License that is incorporated pursuant to the
551 | following paragraph.
552 | 
553 |   Notwithstanding any other provision of this License, you have
554 | permission to link or combine any covered work with a work licensed
555 | under version 3 of the GNU General Public License into a single
556 | combined work, and to convey the resulting work.  The terms of this
557 | License will continue to apply to the part which is the covered work,
558 | but the work with which it is combined will remain governed by version
559 | 3 of the GNU General Public License.
560 | 
561 |   14. Revised Versions of this License.
562 | 
563 |   The Free Software Foundation may publish revised and/or new versions of
564 | the GNU Affero General Public License from time to time.  Such new versions
565 | will be similar in spirit to the present version, but may differ in detail to
566 | address new problems or concerns.
567 | 
568 |   Each version is given a distinguishing version number.  If the
569 | Program specifies that a certain numbered version of the GNU Affero General
570 | Public License "or any later version" applies to it, you have the
571 | option of following the terms and conditions either of that numbered
572 | version or of any later version published by the Free Software
573 | Foundation.  If the Program does not specify a version number of the
574 | GNU Affero General Public License, you may choose any version ever published
575 | by the Free Software Foundation.
576 | 
577 |   If the Program specifies that a proxy can decide which future
578 | versions of the GNU Affero General Public License can be used, that proxy's
579 | public statement of acceptance of a version permanently authorizes you
580 | to choose that version for the Program.
581 | 
582 |   Later license versions may give you additional or different
583 | permissions.  However, no additional obligations are imposed on any
584 | author or copyright holder as a result of your choosing to follow a
585 | later version.
586 | 
587 |   15. Disclaimer of Warranty.
588 | 
589 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
590 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
594 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
595 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
597 | 
598 |   16. Limitation of Liability.
599 | 
600 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
608 | SUCH DAMAGES.
609 | 
610 |   17. Interpretation of Sections 15 and 16.
611 | 
612 |   If the disclaimer of warranty and limitation of liability provided
613 | above cannot be given local legal effect according to their terms,
614 | reviewing courts shall apply local law that most closely approximates
615 | an absolute waiver of all civil liability in connection with the
616 | Program, unless a warranty or assumption of liability accompanies a
617 | copy of the Program in return for a fee.
618 | 
619 |                      END OF TERMS AND CONDITIONS
620 | 
621 |             How to Apply These Terms to Your New Programs
622 | 
623 |   If you develop a new program, and you want it to be of the greatest
624 | possible use to the public, the best way to achieve this is to make it
625 | free software which everyone can redistribute and change under these terms.
626 | 
627 |   To do so, attach the following notices to the program.  It is safest
628 | to attach them to the start of each source file to most effectively
629 | state the exclusion of warranty; and each file should have at least
630 | the "copyright" line and a pointer to where the full notice is found.
631 | 
632 |     <one line to give the program's name and a brief idea of what it does.>
633 |     Copyright (C) <year>  <name of author>
634 | 
635 |     This program is free software: you can redistribute it and/or modify
636 |     it under the terms of the GNU Affero General Public License as published
637 |     by the Free Software Foundation, either version 3 of the License, or
638 |     (at your option) any later version.
639 | 
640 |     This program is distributed in the hope that it will be useful,
641 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
642 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
643 |     GNU Affero General Public License for more details.
644 | 
645 |     You should have received a copy of the GNU Affero General Public License
646 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
647 | 
648 | Also add information on how to contact you by electronic and paper mail.
649 | 
650 |   If your software can interact with users remotely through a computer
651 | network, you should also make sure that it provides a way for users to
652 | get its source.  For example, if your program is a web application, its
653 | interface could display a "Source" link that leads users to an archive
654 | of the code.  There are many ways you could offer source, and different
655 | solutions will be better for different programs; see section 13 for the
656 | specific requirements.
657 | 
658 |   You should also get your employer (if you work as a programmer) or school,
659 | if any, to sign a "copyright disclaimer" for the program, if necessary.
660 | For more information on this, and how to apply and follow the GNU AGPL, see
661 | <https://www.gnu.org/licenses/>.
662 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Regenbogen ICE Frontend
2 | 


--------------------------------------------------------------------------------
/components/history/HistoryEntry.tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import Link from 'next/link'
 3 | import { TrainTrip } from '../../util/commonTypes'
 4 | import { getTrainTripLink } from '../../util/trainDataUtil'
 5 | import { UndecoratedInternalLink } from '../misc/CommonStyles'
 6 | import { Node } from '../timetable/Node'
 7 | import { HistoryEntryContainer, HistoryEntryTitle, HistoryRow, HistoryRowText } from './styles'
 8 | 
 9 | export default function HistoryEntry({day, trips}: {day: string, trips: TrainTrip[]}) {
10 |     return (
11 |         <HistoryEntryContainer>
12 |             <HistoryEntryTitle>{day}</HistoryEntryTitle>
13 |             {trips.map((trip, index) => {
14 |                 const departure = DateTime.fromISO(trip.initial_departure).toFormat('HH:mm')
15 | 
16 |                 return (
17 |                     <HistoryRow key={index}>
18 |                         <Node 
19 |                             dot={{color: 'var(--text-color)', size: '1em'}}
20 |                             top={index === 0 ? null : {type: 'solid', width: '.2em'}}
21 |                             bottom={index === trips.length - 1 ? null : {type: 'solid', width: '.2em'}} 
22 |                         />
23 |                         <HistoryRowText>
24 |                             <Link href={getTrainTripLink(trip.train_type, trip.train_number, trip.initial_departure)} passHref legacyBehavior>
25 |                                 <UndecoratedInternalLink>
26 |                                     Um {departure} als {trip.train_type} {trip.train_number}
27 |                                     <br/>{trip.origin_station || '?'} {'->'}
28 |                                     <br/>{trip.destination_station || '?'}
29 |                                 </UndecoratedInternalLink>
30 |                             </Link>
31 |                         </HistoryRowText>
32 |                     </HistoryRow>
33 |                 )
34 |             })}
35 |         </HistoryEntryContainer>
36 |     )
37 | }
38 | 


--------------------------------------------------------------------------------
/components/history/HistoryList.tsx:
--------------------------------------------------------------------------------
 1 | import { TrainTrip } from '../../util/commonTypes'
 2 | import HistoryEntry from './HistoryEntry'
 3 | import { HistoryListContainer } from './styles'
 4 | 
 5 | export default function HistoryList({days}: {days: [day: string, trips: TrainTrip[]][]}) {
 6 |     return (
 7 |         <HistoryListContainer>
 8 |             {days.map(([day, trips]: [string, TrainTrip[]]) => (
 9 |                 <HistoryEntry key={day} day={day} trips={trips} />
10 |             ))}
11 |         </HistoryListContainer>
12 |     )
13 | }
14 | 


--------------------------------------------------------------------------------
/components/history/styles.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const HistoryListContainer = styled.div`
 4 |     display: flex;
 5 |     flex-wrap: wrap;
 6 |     margin-top: 20px;
 7 | `
 8 | 
 9 | export const HistoryEntryContainer = styled.div`
10 |     width: 100%;
11 |     max-width: 300px;
12 |     margin-bottom: 40px;
13 |     
14 |     display: flex;
15 |     flex-direction: column;
16 | `
17 | 
18 | export const HistoryEntryTitle = styled.h2`
19 |     margin-bottom: 10px;
20 | `
21 | 
22 | export const HistoryRow = styled.div`
23 |     position: relative;
24 |     margin-left: -.5em;
25 | 
26 |     display: flex;
27 |     align-items: center;
28 |     padding: 12px;
29 |     padding-left: 0;
30 | `
31 | 
32 | export const HistoryRowText = styled.span`
33 |     font-weight: bold;
34 |     margin-left: 2em;
35 | `
36 | 


--------------------------------------------------------------------------------
/components/layout/CoachDetailsView.tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import Link from 'next/link'
 3 | import { useMemo } from 'react'
 4 | import { Coach, TrainTrip } from '../../util/commonTypes'
 5 | import { getTrainTripLink } from '../../util/trainDataUtil'
 6 | import { InternalLink } from '../misc/CommonStyles'
 7 | import MultiTimetable from '../timetable/MultiTripTimetable'
 8 | import { CoachEnumValue, DetailsContainer, InfoTitle, InfoValue, SectionTitle, SectionWrapper } from './styles'
 9 | import { TrainVehicleInfo } from './TripDetailsView'
10 | 
11 | export function Date({initialDeparture}: {initialDeparture: string}) {
12 |     const formattedDate = useMemo(() => (
13 |         DateTime.fromISO(initialDeparture).toFormat('dd.MM.yyyy')
14 |     ), [initialDeparture])
15 | 
16 |     return (
17 |         <>{formattedDate}</>
18 |     )
19 | }
20 | 
21 | function TripInfo({trip}: {trip: TrainTrip}) {
22 |     return (
23 |         <>
24 |             <InfoTitle>Letzte Zugfahrt</InfoTitle>
25 |             <InfoValue>
26 |                 <Date initialDeparture={trip.initial_departure} />
27 |                 <Link href={getTrainTripLink(trip.train_type, trip.train_number, trip.initial_departure)} passHref legacyBehavior>
28 |                     <InternalLink>{trip.train_type} {trip.train_number}</InternalLink>
29 |                 </Link>
30 |             </InfoValue>
31 |         </>
32 |     )
33 | }
34 | export default function CoachDetailsView({coach}: {coach: Coach}) {
35 |     const trip = coach.coach_links[0]?.trip
36 |     
37 |     const vehicles = []
38 |     if(coach?.coach_sequence?.train_vehicle) vehicles.push(coach.coach_sequence.train_vehicle)
39 |     
40 |     return (
41 |         <>
42 |             <DetailsContainer>
43 |                 <SectionWrapper>
44 |                     <SectionTitle>Fahrtverlauf</SectionTitle>
45 |                     <MultiTimetable trainTrips={[trip]} cutoffIndex={0} />
46 |                 </SectionWrapper>
47 |                 <SectionWrapper>
48 |                     <SectionTitle>Wagendetails</SectionTitle>
49 |                     <InfoTitle>Typ</InfoTitle>
50 |                     <CoachEnumValue>{coach.category}</CoachEnumValue>
51 |                     <TripInfo trip={trip} />
52 |                     <TrainVehicleInfo vehicles={vehicles} />
53 |                 </SectionWrapper>
54 |             </DetailsContainer>
55 |         </>
56 |     )
57 | }
58 | 


--------------------------------------------------------------------------------
/components/layout/TrainDetailsView.tsx:
--------------------------------------------------------------------------------
 1 | import { TrainTrip, TrainType, TrainVehicle } from '../../util/commonTypes'
 2 | import MultiTimetable from '../timetable/MultiTripTimetable'
 3 | import { DetailsContainer, InfoTitle, InfoValue, SectionTitle, SectionWrapper } from './styles'
 4 | import TrainHistoryView from './TrainHistoryView'
 5 | 
 6 | function getVehicleType(vehicle: TrainVehicle) {
 7 |     if(vehicle.building_series_name) return vehicle.building_series_name
 8 |     if(vehicle.building_series) return `Baureihe ${vehicle.building_series}`
 9 |     return '-'
10 | }
11 | 
12 | export default function TrainDetailsView({vehicle, currentTrip}: {vehicle: TrainVehicle, currentTrip: TrainTrip}) {
13 |     if(!vehicle.trips) return null
14 | 
15 |     return (
16 |         <>
17 |             <DetailsContainer>
18 |                 <SectionWrapper>
19 |                     <SectionTitle>Fahrtverlauf</SectionTitle>
20 |                     <MultiTimetable trainTrips={vehicle.trips} cutoffIndex={vehicle.trips.indexOf(currentTrip)} />
21 |                 </SectionWrapper>
22 |                 <SectionWrapper>
23 |                     <SectionTitle>Triebfahrzeug</SectionTitle>
24 |                     <InfoTitle>Zugname</InfoTitle>
25 |                     <InfoValue>{vehicle.train_vehicle_name || '-'}</InfoValue>
26 |                     <InfoTitle>Triebzugnummer</InfoTitle>
27 |                     <InfoValue>{vehicle.train_vehicle_number || '-'}</InfoValue>
28 |                     <InfoTitle>Zugtyp</InfoTitle>
29 |                     <InfoValue>{getVehicleType(vehicle)}</InfoValue>
30 |                 </SectionWrapper>
31 |                 <TrainHistoryView tzn={vehicle.train_vehicle_number} trainType={vehicle.train_type as TrainType} />
32 |             </DetailsContainer>
33 |         </>
34 |     )
35 | }
36 | 


--------------------------------------------------------------------------------
/components/layout/TrainHistoryView.tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import { useMemo, useState } from 'react'
 3 | import { TrainTrip, TrainType } from '../../util/commonTypes'
 4 | import { useTrainVehicleHistory } from '../../util/hooks'
 5 | import HistoryList from '../history/HistoryList'
 6 | import { InlineError } from '../misc/Error'
 7 | import Loader from '../misc/Loader'
 8 | import { Button, HistoryContainer } from './styles'
 9 | 
10 | export default function TrainHistoryView({tzn, trainType}: {tzn: string | number, trainType: TrainType}) {
11 |     const { data, error } = useTrainVehicleHistory(tzn, trainType)
12 |     
13 |     const [reduceItems, setReduceItems] = useState(true)
14 | 
15 |     const days = useMemo(() => {
16 |         if(!data?.trips || error) return null
17 | 
18 |         const days: {[key: string]: TrainTrip[]} = {}
19 | 
20 |         data.trips.forEach(trip => {
21 |             const date = DateTime.fromISO(trip.initial_departure)
22 |             const dateString = date.toFormat('dd.MM.yyyy')
23 |     
24 |             days[dateString] = [
25 |                 trip,
26 |                 ...(days[dateString] || []),
27 |             ]
28 |         })
29 | 
30 |         return days
31 |     }, [data, error])
32 | 
33 |     if(!days) {
34 |         return (
35 |             <HistoryContainer>
36 |                 {error ? (
37 |                     <h2>
38 |                         Historie kann nicht geladen werden.
39 |                         {' '}
40 |                         <InlineError error={error} />
41 |                     </h2>
42 |                 ) : (
43 |                     <Loader />
44 |                 )}
45 |             </HistoryContainer>
46 |         )
47 |     }
48 | 
49 |     let entries: [string, TrainTrip[]][] = Object.entries(days)
50 | 
51 |     if(reduceItems) {
52 |         entries = entries.slice(0,6)
53 |     }
54 | 
55 |     return (
56 |         <HistoryContainer>
57 |             <h1>Historie</h1>
58 | 
59 |             <HistoryList days={entries} />
60 |             
61 |             {reduceItems ? (
62 |                 <Button onClick={() => setReduceItems(false)}>Mehr anzeigen</Button>
63 |             ) : null}
64 |         </HistoryContainer>
65 |     )
66 | }
67 | 
68 | 


--------------------------------------------------------------------------------
/components/layout/TripDetailsView.tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import Link from 'next/link'
 3 | import { useMemo } from 'react'
 4 | import { TrainTrip, TrainVehicle } from '../../util/commonTypes'
 5 | import { getTrainVehicleLink } from '../../util/trainDataUtil'
 6 | import { ExternalLink } from '../misc/CommonComponents'
 7 | import { InternalLink } from '../misc/CommonStyles'
 8 | import FullTimetable from '../timetable/CompleteTripTimetable'
 9 | import { DetailsContainer, InfoTitle, InfoValue, SectionTitle, SectionWrapper } from './styles'
10 | 
11 | export function TripDate({initialDeparture}: {initialDeparture: string}) {
12 |     const formattedDate = useMemo(() => (
13 |         DateTime.fromISO(initialDeparture).toFormat('dd.MM.yyyy')
14 |     ), [initialDeparture])
15 | 
16 |     return (
17 |         <h3>{formattedDate}</h3>
18 |     )
19 | }
20 | 
21 | export function TrainVehicleInfo({vehicles}: {vehicles: TrainVehicle[]}) {
22 |     return (
23 |         <>
24 |             <InfoTitle>{vehicles.length > 1 ? 'Triebfahrzeuge' : 'Triebfahrzeug'}</InfoTitle>
25 |             <InfoValue>
26 |                 {vehicles.map(vehicle => {
27 |                     return (
28 |                         <Link key={vehicle.train_vehicle_number} href={getTrainVehicleLink(vehicle.train_type, String(vehicle.train_vehicle_number))} passHref legacyBehavior>
29 |                             <InternalLink>{vehicle.train_vehicle_name || `Tz ${vehicle.train_vehicle_number}`}</InternalLink>
30 |                         </Link>
31 |                     )
32 |                 })}
33 |                 {vehicles.length === 0 && (
34 |                     <>-</>
35 |                 )}
36 |             </InfoValue>
37 |         </>
38 |     )
39 | }
40 | 
41 | export default function TripDetailsView({currentTrip, vehicles}: {currentTrip: TrainTrip, vehicles: TrainVehicle[]}) {
42 |     return (
43 |         <>
44 |             <DetailsContainer>
45 |                 <SectionWrapper>
46 |                     <SectionTitle>Fahrtverlauf</SectionTitle>
47 |                     <TripDate initialDeparture={currentTrip.initial_departure} />
48 |                     <FullTimetable trainTrip={currentTrip} />
49 |                 </SectionWrapper>
50 |                 <SectionWrapper>
51 |                     <SectionTitle>Zugdetails</SectionTitle>
52 |                     <TrainVehicleInfo vehicles={vehicles} />
53 |                     {currentTrip.bahn_expert && (
54 |                         <InfoValue>
55 |                             <ExternalLink text={'bahn.expert'} link={currentTrip.bahn_expert} />
56 |                         </InfoValue>
57 |                     )}
58 |                 </SectionWrapper>
59 |             </DetailsContainer>
60 |         </>
61 |     )
62 | }
63 | 


--------------------------------------------------------------------------------
/components/layout/styles.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const SectionWrapper = styled.div`
 4 |     margin: 50px 0;
 5 |     padding: 20px;
 6 |     width: calc(100% - 4rem);
 7 |     max-width: 450px;
 8 | `
 9 | 
10 | export const SectionTitle = styled.h1`
11 |     margin-bottom: .75em;
12 | `
13 | 
14 | export const DetailsContainer = styled.div`
15 |     display: flex;
16 |     flex-direction: column;
17 |     justify-content: center;
18 |     flex-wrap: wrap;
19 |     flex-direction: row;
20 |     column-gap: 10vw;
21 | 
22 |     margin: auto;
23 |     max-width: 3000px;
24 | `
25 | 
26 | export const InfoTitle = styled.h2`
27 |     color: var(--text-dark-color);
28 |     font-size: 1rem;
29 |     margin-bottom: 0.2rem;
30 | `
31 | 
32 | export const InfoValue = styled.p`
33 |     font-weight: bold;
34 |     font-size: 1.5rem;
35 |     margin-bottom: 25px;
36 | 
37 |     display: flex;
38 |     flex-direction: column;
39 |     gap: 6px;
40 | `
41 | 
42 | export const InfoLink = styled.p`
43 |     font-weight: bold;
44 |     font-size: 1.1rem;
45 |     margin-bottom: 25px;
46 | `
47 | 
48 | export const HistoryContainer = styled.div`
49 |     display: flex;
50 |     flex-direction: column;
51 |     justify-content: center;
52 |     flex-wrap: wrap;
53 | 
54 |     margin: auto;
55 |     
56 |     width: calc(100% - 2rem);
57 |     max-width: calc(980px + 10vw);
58 |     padding: 20px;
59 |     box-sizing: border-box;
60 | 
61 |     margin-bottom: 50px;
62 | `
63 | 
64 | export const Button = styled.button`
65 |     background-color: var(--text-color);
66 |     align-self: center;
67 |     padding: 10px 50px;
68 |     
69 |     color: var(--theme-color);
70 |     font-family: Inter, sans-serif;
71 |     font-weight: bold;
72 |     font-size: 16px;
73 | 
74 |     border-radius: 15px;
75 |     cursor: pointer;
76 | `
77 | 
78 | export const CoachEnumValue = styled(InfoValue)`
79 |     word-break: break-all;
80 | `
81 | 


--------------------------------------------------------------------------------
/components/misc/CommonComponents.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | import { APP_BASE } from '../../util/constants'
 4 | import { ErrorContainer, ExternalLinkContainer } from './CommonStyles'
 5 | import { FullScreenError } from './Error'
 6 | import Loader from './Loader'
 7 | 
 8 | export function ExternalLink({text, link}: {text: string, link: string}) {
 9 |     return (
10 |         <Link href={link} passHref legacyBehavior>
11 |             <ExternalLinkContainer target='_blank'>
12 |                 {text}
13 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>
14 |             </ExternalLinkContainer>
15 |         </Link>
16 |     )
17 | }
18 | 
19 | export function HtmlTitle({title}: {title: string}) {
20 |     return (
21 |         <Head>
22 |             <title>{title}</title>
23 |             <meta name="twitter:card" content="summary_large_image" />
24 |             <meta name="twitter:title" content={title} />
25 |             <meta name="twitter:image:src" content={APP_BASE + '/images/twittercard.png'} />
26 |             <meta property="og:title" content={title} />
27 |             <meta property="og:image" content={APP_BASE + '/images/twittercard.png'} />
28 |             <meta name="keywords" content="regenbogen ice, wo ist der regenbogen ice, regenbogen ice fahrplan, regenbogen ice strecke, regenbogen ice nummer, regenbogen ice db, zug" />
29 |         </Head>
30 |     )
31 | }
32 | 
33 | 
34 | export function NoDataComponent({error, title}: {error: Error | null, title: string}) {
35 |     if(error) {
36 |         return (
37 |             <>
38 |                 <HtmlTitle title={title} />
39 |                 <FullScreenError error={error} />
40 |             </>
41 |         )
42 |     }
43 | 
44 |     return (
45 |         <>
46 |             <HtmlTitle title={title} />
47 |             <ErrorContainer>
48 |                 <Loader />
49 |             </ErrorContainer>
50 |         </>
51 |     )
52 | 
53 | }
54 | 


--------------------------------------------------------------------------------
/components/misc/CommonStyles.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const HeaderContainer = styled.div`
 4 |     width: 100%;
 5 |     padding: 100px 20px;
 6 |     padding-bottom: 60px;
 7 | 
 8 |     box-sizing: border-box;
 9 | 
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     flex-direction: column;
14 |     text-align: center;
15 |     gap: 15px;
16 | `
17 | 
18 | export const ErrorContainer = styled.div`
19 |     width: 100vw;
20 |     height: 100vh;
21 |     
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: center;
25 |     text-align: center;
26 | 
27 |     padding: 20px;
28 |     box-sizing: border-box;
29 | `
30 | 
31 | export const ExternalLinkContainer = styled.a`
32 |     display: inline-flex;
33 |     align-items: center;
34 | 
35 |     color: var(--text-color);
36 |     fill: var(--text-color);
37 | 
38 |     > svg {
39 |         margin-left: 5px;
40 |         height: 1.2rem;
41 |     }
42 | `
43 | 
44 | export const InternalLink = styled.a`
45 |     color: var(--text-color);
46 |     fill: var(--text-color);
47 | 
48 |     display: flex;
49 | `
50 | 
51 | export const LinkIcon = styled.svg`
52 |     width: 35px;
53 |     height: 35px;
54 | `
55 | 
56 | export const UndecoratedInternalLink = styled(InternalLink)`
57 |     text-decoration: none;
58 | `
59 | 


--------------------------------------------------------------------------------
/components/misc/Error.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import { StatusError } from '../../util/dataFetcher'
 3 | import NavigationBar from './NavigationBar'
 4 | 
 5 | const FullscreenErrorContainer = styled.div`
 6 |     display: flex;
 7 |     flex-direction: column;
 8 | 
 9 |     height: 100%;
10 | 
11 |     justify-content: center;
12 |     align-items: center;
13 | 
14 |     margin-top: -50px;
15 | `
16 | 
17 | const ErrorContainer = styled.div`
18 |     display: flex;
19 |     flex-direction: column;
20 |     
21 |     gap: 20px;
22 | 
23 |     width: calc(100% - 50px);
24 |     max-width: 600px;
25 | 
26 |     text-align: center;
27 | `
28 | 
29 | const StatusCode = styled.h1`
30 |     font-size: 48px;
31 | `
32 | 
33 | const ErrorMessage = styled.h2`
34 |     font-size: 32px;
35 | `
36 | 
37 | export function FullScreenError({error}: {error?: Error}) {
38 |     return (
39 |         <>
40 |             <NavigationBar />
41 |             <FullscreenErrorContainer>
42 |                 <Error error={error} />
43 |             </FullscreenErrorContainer>
44 |         </>
45 |     )
46 | }
47 | 
48 | export function InlineError({error}: {error?: Error}) {
49 |     if(error instanceof StatusError) {
50 |         return (
51 |             <>
52 |                 {error.title}: {error.description}
53 |             </>
54 |         )
55 |     }
56 | 
57 |     return (
58 |         <>
59 |             {error?.toString()}
60 |         </>
61 |     )
62 | }
63 | 
64 | export function Error({error}: {error?: Error}) {
65 |     if(error instanceof StatusError) {
66 |         return (
67 |             <ErrorContainer>
68 |                 <StatusCode>{error.title}</StatusCode>
69 |                 <ErrorMessage>{error.description}</ErrorMessage>
70 |             </ErrorContainer>
71 |         )
72 |     }
73 | 
74 |     return (
75 |         <ErrorContainer>
76 |             <h2>{error?.toString()}</h2>
77 |         </ErrorContainer>
78 |     )
79 | }
80 | 
81 | 


--------------------------------------------------------------------------------
/components/misc/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, PropsWithChildren } from 'react'
 2 | import styled from 'styled-components'
 3 | import { Button } from '../layout/styles'
 4 | import { Error as ErrorView } from './Error'
 5 | 
 6 | type Props = PropsWithChildren
 7 | type State = {
 8 |     hasError: boolean,
 9 |     lastError?: Error,
10 | }
11 | 
12 | const FullscreenErrorContainer = styled.div`
13 |     display: flex;
14 |     flex-direction: column;
15 | 
16 |     height: 100%;
17 | 
18 |     justify-content: center;
19 |     align-items: center;
20 | 
21 |     gap: 25px;
22 | `
23 | 
24 | export default class ErrorBoundary extends Component<Props, State> {
25 |     constructor(props: Props) {
26 |         super(props)
27 | 
28 |         this.state = {hasError: false}
29 | 
30 |         this.retry = this.retry.bind(this)
31 |     }
32 | 
33 |     static getDerivedStateFromError(error: Error) {
34 |         return { hasError: true, lastError: error }
35 |     }
36 | 
37 |     retry() {
38 |         window.location.reload()
39 |     }
40 | 
41 |     render() {
42 |         if (this.state.hasError) {
43 |             return (
44 |                 <>
45 |                     <FullscreenErrorContainer>
46 |                         <h1>Oops</h1>
47 |                         <ErrorView error={this.state.lastError} />
48 |                         <Button onClick={this.retry}>Restart app</Button>
49 |                     </FullscreenErrorContainer>
50 |                 </>
51 |             )
52 |         }
53 | 
54 |         return this.props.children
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/components/misc/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import styled from 'styled-components'
 3 | import { InternalLink, LinkIcon, UndecoratedInternalLink } from './CommonStyles'
 4 | import ThemeSwitcher from './ThemeSwitcher'
 5 | 
 6 | const FooterContainer = styled.footer`
 7 |     width: 100%;
 8 |     height: 70px;
 9 |     padding: 10px 20px;
10 |     
11 |     box-sizing: border-box;
12 | 
13 |     display: flex;
14 |     align-items: center;
15 |     justify-content: space-between;
16 | `
17 | 
18 | const FooterSection = styled.div`
19 |     display: flex;
20 |     gap: 15px;
21 | 
22 |     align-items: center;
23 | `
24 | 
25 | const ProfilePicture = styled.img`
26 |     width: 50px;
27 |     height: 50px;
28 | 
29 |     border-radius: 50%;
30 | `
31 | 
32 | function MailLink() {
33 |     const [mailLink, setMailLink] = useState('mailto:unconfigured@null.regenbogen-ice-mc.org')
34 | 
35 |     useEffect(() => {
36 |         setMailLink(atob('bWFpbHRvOmNvbnRhY3RAcmVnZW5ib2dlbi1pY2UuZGU='))
37 |     }, [])
38 | 
39 |     return (
40 |         <InternalLink href={mailLink}>
41 |             <LinkIcon viewBox="0 0 24 24">
42 |                 <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
43 |             </LinkIcon>
44 |         </InternalLink>
45 |     )
46 | }
47 | 
48 | export default function Footer() {
49 |     return (
50 |         <FooterContainer>
51 |             <FooterSection>
52 |                 <ThemeSwitcher />
53 |                 <MailLink />
54 |             </FooterSection>
55 |             <FooterSection>
56 |                 <UndecoratedInternalLink href='https://ppluss.de' target='_blank'>
57 |                     <ProfilePicture src='/images/philippirl.webp' loading='lazy' />
58 |                 </UndecoratedInternalLink>
59 |                 <UndecoratedInternalLink href='https://adridoesthings.com' target='_blank'>
60 |                     <ProfilePicture src='/images/adridoesthings.webp' loading='lazy' />
61 |                 </UndecoratedInternalLink>
62 |             </FooterSection>
63 |         </FooterContainer>
64 |     )
65 | }
66 | 


--------------------------------------------------------------------------------
/components/misc/GlobalStyles.tsx:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle, css } from 'styled-components'
 2 | 
 3 | export const GlobalStyles = createGlobalStyle<{transitionThemeColor: boolean, backgroundColor: string}>`
 4 |     :root {
 5 |         --theme-color: ${({backgroundColor}) => backgroundColor};
 6 |         --text-color: #fff;
 7 |         --reverse-text-color: #000;
 8 |         --text-dark-color: #ccc;
 9 |         --warning-color: #ffd600;
10 |     }
11 | 
12 |     * {
13 |         margin: 0;
14 |         padding: 0;
15 |         outline: 0;
16 |         border: 0;
17 |     }
18 | 
19 |     body {
20 |         background-color: var(--theme-color);
21 |         color: var(--text-color);
22 |         font-family: 'Inter', 'Roboto', sans-serif;
23 | 
24 |         ${({transitionThemeColor}) => transitionThemeColor && css`
25 |             transition: background-color .2s;
26 |         `}
27 |     }
28 | 
29 |     @media only screen and (min-width: 800px) {
30 |         html {
31 |             font-size: 120%;
32 |         }
33 |     }
34 | 
35 |     html, body, #__next {
36 |         height: 100%;
37 |         overflow-x: clip;
38 |     }
39 | `
40 | 


--------------------------------------------------------------------------------
/components/misc/Loader.tsx:
--------------------------------------------------------------------------------
 1 | import styled, { keyframes } from 'styled-components'
 2 | 
 3 | const LoaderContainer = styled.h1`
 4 |     display: flex;
 5 |     flex-direction: row;
 6 |     align-items: center;
 7 |     gap: 15px;
 8 | `
 9 | 
10 | const LoadingAnimation = keyframes`
11 |     from {
12 |         transform: scale(1);
13 |     }
14 | 
15 |     to {
16 |         transform: scale(2);
17 |     }
18 | `
19 | 
20 | const LoaderItem = styled.span`
21 |     animation: .5s ${LoadingAnimation} infinite alternate;
22 | 
23 |     &:nth-child(2) {
24 |         animation-delay: .2s;
25 |     }
26 | 
27 |     &:nth-child(3) {
28 |         animation-delay: .4s;
29 |     }
30 | `
31 | 
32 | export default function Loader() {
33 |     return (
34 |         <LoaderContainer>
35 |             <LoaderItem>•</LoaderItem>
36 |             <LoaderItem>•</LoaderItem>
37 |             <LoaderItem>•</LoaderItem>
38 |         </LoaderContainer>
39 |     )
40 | }
41 | 


--------------------------------------------------------------------------------
/components/misc/NavigationBar.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import styled from 'styled-components'
 3 | 
 4 | const HeaderContainer = styled.header`
 5 |     width: 100%;
 6 |     min-height: 30px;
 7 |     padding: 10px;
 8 |     
 9 |     box-sizing: border-box;
10 | 
11 |     display: flex;
12 |     align-items: center;
13 | `
14 | 
15 | const HomeLinkAnchor = styled.a`
16 |     color: var(--text-color);
17 |     font-weight: bold;
18 |     font-size: 22px;
19 |     text-decoration: none;
20 | 
21 |     display: flex;
22 |     align-items: center;
23 |     gap: 10px;
24 | `
25 | 
26 | const BackIcon = styled.svg`
27 |     fill: var(--text-color);
28 |     height: 22px;
29 | `
30 | 
31 | const HeaderTitle = styled.span`
32 |     overflow: hidden;
33 |     white-space: nowrap;
34 | 
35 |     @media only screen and (max-width: 500px) {
36 |         display: none;
37 |     }
38 | `
39 | 
40 | export default function NavigationBar() {
41 |     return (
42 |         <HeaderContainer>
43 |             <Link href='/' passHref legacyBehavior>
44 |                 <HomeLinkAnchor>
45 |                     <BackIcon viewBox='0 0 492 492'><g><path d='M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12
46 |                     C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084
47 |                     c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864
48 |                     l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z'/></g></BackIcon>
49 |                     <HeaderTitle>Wo ist der Regenbogen-ICE?</HeaderTitle>
50 |                 </HomeLinkAnchor>
51 |             </Link>
52 |         </HeaderContainer>
53 |     )
54 | }
55 | 


--------------------------------------------------------------------------------
/components/misc/RainbowStripe.tsx:
--------------------------------------------------------------------------------
 1 | import { motion } from 'framer-motion'
 2 | import styled from 'styled-components'
 3 | 
 4 | const RainbowStripeContainer = styled(motion.svg)`
 5 |     width: calc(100% + 40px);
 6 |     height: 50px;
 7 |     align-self: center;
 8 |     margin: 30px 0;
 9 | 
10 |     shape-rendering: crispedges;
11 | 
12 |     @media only screen and (min-width: 900px) {
13 |         margin-top: 10vh;
14 |     }
15 | `
16 | 
17 | export default function RainbowStripe() {
18 |     const colors = ['#e40303', '#ff8c00', '#ffed00', '#008026', '#004dff', '#750787']
19 | 
20 |     const stripeContainer = {
21 |         hidden: {
22 |             
23 |         },
24 |         show: {
25 |             transition: {
26 |                 staggerChildren: .1,
27 |                 staggerDirection: -1,
28 |             },
29 |         },
30 |     }
31 | 
32 |     const stripeItem = {
33 |         hidden: {
34 |             width: '0%',
35 |         },
36 |         show: {
37 |             width: '100%',
38 |             transition: {
39 |                 duration: .5,
40 |             },
41 |         },
42 |     }
43 | 
44 |     return (
45 |         <RainbowStripeContainer
46 |             initial='hidden'
47 |             animate='show'
48 |             variants={stripeContainer}
49 | 
50 |             viewBox='0 0 1 6' 
51 |             preserveAspectRatio='none'>
52 |             {colors.map((color, index) => {
53 |                 return (
54 |                     <motion.rect
55 |                         key={'stripe' + index}
56 | 
57 |                         variants={stripeItem}
58 | 
59 |                         x='0'
60 |                         y={index}
61 |                         width='100%'
62 |                         height='1'
63 |                         fill={color} 
64 |                     />
65 |                 )
66 |             })}
67 |         </RainbowStripeContainer>
68 |     )
69 | }
70 | 


--------------------------------------------------------------------------------
/components/misc/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
 1 | import { SyntheticEvent, useContext } from 'react'
 2 | import { ThemeContext } from 'styled-components'
 3 | import { DEFAULT_COLOR } from '../../util/theme'
 4 | import { InternalLink, LinkIcon } from './CommonStyles'
 5 | 
 6 | export default function ThemeSwitcher() {
 7 |     const theme = useContext(ThemeContext)
 8 | 
 9 |     function switchTheme(e: SyntheticEvent) {
10 |         e.preventDefault()
11 | 
12 |         console.log(theme)
13 |         if(theme?.themeColor === DEFAULT_COLOR) {
14 |             theme.changeThemeColor('#000')
15 |         } else {
16 |             theme?.changeThemeColor?.(DEFAULT_COLOR)
17 |         }
18 |     }
19 | 
20 |     return (
21 |         <div>
22 |             <InternalLink href='#' onClick={switchTheme}>
23 |                 <LinkIcon viewBox="0 0 24 24">
24 |                     <path d="M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z" />
25 |                 </LinkIcon>
26 |             </InternalLink>
27 |         </div>
28 |     )
29 | }
30 | 


--------------------------------------------------------------------------------
/components/misc/UicID.tsx:
--------------------------------------------------------------------------------
 1 | export default function UicID({uic}: {uic: string}) {
 2 |     const formatted = formatUIC(uic)
 3 | 
 4 |     return (
 5 |         <>{formatted.substring(0,7)}<b>{formatted.substring(7)}</b></>
 6 |     )
 7 | }
 8 | 
 9 | export function formatUIC(rawUIC: string) {
10 |     return `${rawUIC.substring(0,2)} ${rawUIC.substring(2,4)} ${rawUIC.substring(4,8)} ${rawUIC.substring(8,11)}-${rawUIC.substring(11,12)}`
11 | }
12 | 


--------------------------------------------------------------------------------
/components/search/SearchBox.tsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { SyntheticEvent, useCallback, useState } from 'react'
 3 | import { AutoCompleteSuggestion } from '../../util/commonTypes'
 4 | import { useAutoComplete } from '../../util/hooks'
 5 | import { getCoachLink, getTrainTripLink, getTrainVehicleLink } from '../../util/trainDataUtil'
 6 | import SearchSuggestionList from './SearchSuggestionList'
 7 | import { SearchBarIcon, SearchContainer, SearchInput } from './styles'
 8 | 
 9 | export type NavigateToSuggestion = (suggestion: AutoCompleteSuggestion) => void
10 | 
11 | export default function SearchBox() {
12 |     const [value, setValue] = useState('')
13 |     const { data, error } = useAutoComplete(value || null)
14 |     const router = useRouter()
15 | 
16 |     const navigateToSuggestion = useCallback((suggestion: AutoCompleteSuggestion) => {
17 |         switch(suggestion.type) {
18 |             case 'train_vehicle':
19 |                 router.push(getTrainVehicleLink(suggestion.train_type, suggestion.guess))
20 |                 break
21 | 
22 |             case 'coach':
23 |                 router.push(getCoachLink(suggestion.guess))
24 |                 break
25 | 
26 |             case 'train_trip':
27 |                 router.push(getTrainTripLink(suggestion.train_type, Number(suggestion.guess)))
28 |                 break
29 |         }
30 | 
31 |         setValue('')
32 |     }, [setValue, router])
33 | 
34 |     const formSubmit = useCallback((e: SyntheticEvent) => {
35 |         e.preventDefault()
36 | 
37 |         if(data && data[0]) {
38 |             navigateToSuggestion(data[0])
39 |         }
40 |     }, [data, navigateToSuggestion])
41 | 
42 |     const escapeListener = useCallback((e: SyntheticEvent<EventTarget, KeyboardEvent>) => {
43 |         if(e.nativeEvent.code === 'Escape') {
44 |             setValue('')
45 |         }
46 |     }, [setValue])
47 | 
48 |     return (
49 |         <>
50 |             <SearchContainer onSubmit={formSubmit} onKeyDown={escapeListener}>
51 |                 <SearchBarIcon height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></SearchBarIcon>
52 |                 <SearchInput type='text' placeholder='Suchen...' value={value} onChange={(e) => setValue(e.target.value)} />
53 | 
54 |                 {data && !error && data.length > 0 && (
55 |                     <SearchSuggestionList suggestions={data} navigateToSuggestion={navigateToSuggestion} />
56 |                 )}
57 |             </SearchContainer>
58 |         </>
59 |     )
60 | }
61 | 


--------------------------------------------------------------------------------
/components/search/SearchSuggestionList.tsx:
--------------------------------------------------------------------------------
 1 | import { AutoCompleteSuggestion } from '../../util/commonTypes'
 2 | import UicID from '../misc/UicID'
 3 | import { NavigateToSuggestion } from './SearchBox'
 4 | import { SearchSuggestionContainer, SearchSuggestionEntryContainer } from './styles'
 5 | 
 6 | export default function SearchSuggestionList({suggestions, navigateToSuggestion}: {suggestions: AutoCompleteSuggestion[], navigateToSuggestion: NavigateToSuggestion}) {
 7 |     return (
 8 |         <SearchSuggestionContainer>
 9 |             {suggestions.map((suggestion, index) => (
10 |                 <SearchSuggestionEntry suggestion={suggestion} key={index} navigateToSuggestion={navigateToSuggestion} />
11 |             ))}
12 |         </SearchSuggestionContainer>
13 |     )
14 | }
15 | 
16 | function SearchSuggestionEntry({suggestion, navigateToSuggestion}: {suggestion: AutoCompleteSuggestion, navigateToSuggestion: NavigateToSuggestion}) {
17 |     switch(suggestion.type) {
18 |         case 'train_vehicle':
19 |             return (
20 |                 <SearchSuggestionEntryContainer onClick={() => navigateToSuggestion(suggestion)}>
21 |                     <svg viewBox="0 0 24 24">
22 |                         <path d="M12,2C8,2 4,2.5 4,6V15.5A3.5,3.5 0 0,0 7.5,19L6,20.5V21H8.23L10.23,19H14L16,21H18V20.5L16.5,19A3.5,3.5 0 0,0 20,15.5V6C20,2.5 16.42,2 12,2M7.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,14A1.5,1.5 0 0,1 9,15.5A1.5,1.5 0 0,1 7.5,17M11,10H6V6H11V10M13,10V6H18V10H13M16.5,17A1.5,1.5 0 0,1 15,15.5A1.5,1.5 0 0,1 16.5,14A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 16.5,17Z" />
23 |                     </svg>
24 |                     {suggestion.guess} {suggestion.train_type !== 'ICE' && `(${suggestion.train_type})`}
25 |                 </SearchSuggestionEntryContainer>
26 |             )
27 | 
28 |         case 'train_trip':
29 |             return (
30 |                 <SearchSuggestionEntryContainer onClick={() => navigateToSuggestion(suggestion)}>
31 |                     <svg viewBox="0 0 24 24">
32 |                         <path d="M16.5 13H15V16.69L18.19 18.53L18.94 17.23L16.5 15.82V13M16 9C14.04 9 12.27 9.82 11 11.12V7H17L19 5L17 3H11V2L10 1L9 2V6H3L1 8L3 10H9V20C7.9 20 7 20.9 7 22H12.41C13.46 22.63 14.69 23 16 23C19.87 23 23 19.87 23 16S19.87 9 16 9M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15 20.85 13.32 20.85 16 18.68 20.85 16 20.85Z" />
33 |                     </svg>
34 |                     {suggestion.train_type} {suggestion.guess}
35 |                 </SearchSuggestionEntryContainer>
36 |             )
37 | 
38 |         case 'coach':
39 |             return (
40 |                 <SearchSuggestionEntryContainer onClick={() => navigateToSuggestion(suggestion)}>
41 |                     <svg viewBox="0 0 24 24">
42 |                         <path d="M21 7H3C1.9 7 1 7.9 1 9V17H2C2 18.11 2.9 19 4 19S6 18.11 6 17H18C18 18.11 18.9 19 20 19S22 18.11 22 17H23V9C23 7.9 22.11 7 21 7M7 12H3V9H7V12M15 12H9V9H15V12M21 12H17V9H21V12Z" />
43 |                     </svg>
44 |                     <UicID uic={suggestion.guess} />
45 |                 </SearchSuggestionEntryContainer>
46 |             )
47 | 
48 |         default:
49 |             return null
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/components/search/styles.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const SearchContainer = styled.form`
 4 |     background-color: var(--text-color);
 5 |     padding: 10px 20px;
 6 | 
 7 |     margin-top: 20px;
 8 |     border-radius: 20px;
 9 |     box-shadow: 0 0 0 2px rgba(23, 7, 13, 0.05);
10 | 
11 |     display: flex;
12 |     gap: 5px;
13 |     align-items: center;
14 | 
15 |     position: relative;
16 | `
17 | 
18 | export const SearchInput = styled.input`
19 |     font-size: 16px;
20 |     max-width: 50vw;
21 | `
22 | 
23 | export const SearchBarIcon = styled.svg``
24 | 
25 | export const SearchSuggestionContainer = styled.div`
26 |     position: absolute;
27 |     top: 100%;
28 |     left: 0;
29 |     width: 100%;
30 |     margin-top: 2px;
31 |     box-sizing: border-box;
32 |     border-radius: 5px;
33 | 
34 |     z-index: 5;
35 | 
36 |     background-color: var(--text-color);
37 |     color: var(--reverse-text-color);
38 | 
39 |     max-height: 300px;
40 |     overflow: hidden auto;
41 | 
42 |     display: flex;
43 |     flex-direction: column;
44 | `
45 | 
46 | export const SearchSuggestionEntryContainer = styled.div`
47 |     text-align: left;
48 | 
49 |     padding: 6px 6px;
50 |     width: 100%;
51 | 
52 |     cursor: pointer;
53 |     transition: background-color .1s;
54 | 
55 |     display: flex;
56 |     align-items: center;
57 | 
58 |     &:hover {
59 |         background: var(--text-dark-color);
60 |     }
61 | 
62 |     > svg {
63 |         fill: var(--reverse-text-color);
64 | 
65 |         height: 20px;
66 |         width: 20px;
67 | 
68 |         flex-shrink: 0;
69 | 
70 |         padding-right: 5px;
71 |     }
72 | `
73 | 


--------------------------------------------------------------------------------
/components/timetable/CompleteTripTimetable.tsx:
--------------------------------------------------------------------------------
 1 | import { TrainTrip } from '../../util/commonTypes'
 2 | import TimetableRenderer from './TimetableRenderer'
 3 | 
 4 | export default function FullTimetable({trainTrip}: {trainTrip: TrainTrip}) {
 5 |     const stops = trainTrip.stops ?? []
 6 |     const rowData: {type: string, index: number, time: string}[] = stops.map(stop => ({ type: 'stop', stop, index: stops.indexOf(stop), time: stop.departure || stop.arrival! }))
 7 | 
 8 |     if(!stops?.length) {
 9 |         rowData.push({
10 |             type: 'noStops',
11 |             index: 0,
12 |             time: '',
13 |         })
14 |     }
15 | 
16 |     return <TimetableRenderer rows={rowData} />
17 | }
18 | 


--------------------------------------------------------------------------------
/components/timetable/MultiTripTimetable.tsx:
--------------------------------------------------------------------------------
 1 | import { TrainTrip } from '../../util/commonTypes'
 2 | import { RowRendererArgs } from './SingleRowRenderer'
 3 | import TimetableRenderer from './TimetableRenderer'
 4 | 
 5 | export default function MultiTimetable({trainTrips, cutoffIndex}: {trainTrips: TrainTrip[], cutoffIndex: number}) {
 6 |     let rowData: RowRendererArgs[] = []
 7 | 
 8 |     let rowIndex = 0
 9 |     for(let i = cutoffIndex; i >= 0; i--) {
10 |         const trainTrip = trainTrips[i]
11 |         const stops = trainTrip.stops ?? []
12 |         
13 |         //if(stops.length === 0) continue
14 | 
15 |         const tripTime = stops[0]?.departure || stops[0]?.arrival || ''
16 | 
17 |         rowData = [
18 |             ...rowData,
19 |             {
20 |                 type: 'tripChange',
21 |                 to: `${trainTrip.train_type} ${trainTrip.train_number}${trainTrip.destination_station ? ' -> ' + trainTrip.destination_station : ''}`,
22 |                 time: tripTime,
23 |                 link: trainTrip.bahn_expert,
24 |                 index: rowIndex++,
25 |             },
26 |             ...stops.map(stop => ({
27 |                 type: 'stop',
28 |                 stop, index: rowIndex++,
29 |                 time: stop.departure || stop.arrival!,
30 |             })),
31 |         ]
32 | 
33 |         if(!stops?.length) {
34 |             rowData.push({
35 |                 type: 'noStops',
36 |                 index: rowIndex++,
37 |                 time: tripTime,
38 |             })
39 |         }
40 |     }
41 |     
42 |     return <TimetableRenderer rows={rowData} />
43 | }
44 | 


--------------------------------------------------------------------------------
/components/timetable/Node.tsx:
--------------------------------------------------------------------------------
 1 | import { BlueDot, BottomConnectingLine, Dot, NodeContainer, TopConnectingLine } from './styles'
 2 | 
 3 | type ConnectingLineArgs = {width: string, color?: string, type: string}
 4 | type DotArgs = {size: string, color: string}
 5 | export type NodeArgs = {top?: ConnectingLineArgs | null, dot: DotArgs, bottom?: ConnectingLineArgs | null, offset?: string, blueDot?: number | null}
 6 | 
 7 | export function Node({ top, dot, bottom, offset, blueDot }: NodeArgs) {
 8 |     return (
 9 |         <NodeContainer width={dot.size} offset={offset}>
10 |             {top ? (
11 |                 <TopConnectingLine {...top} />
12 |             ) : null}
13 | 
14 |             <Dot {...dot} />
15 | 
16 |             {bottom ? (
17 |                 <BottomConnectingLine {...bottom} />
18 |             ) : null}
19 | 
20 |             {typeof blueDot === 'number' ? (
21 |                 <BlueDot style={{top: blueDot + '%'}} />
22 |             ) : null}
23 |         </NodeContainer>
24 |     )
25 | }
26 | 


--------------------------------------------------------------------------------
/components/timetable/ShortTripTimetable.tsx:
--------------------------------------------------------------------------------
 1 | import { TrainStop, TrainTripWithStops } from '../../util/commonTypes'
 2 | import { DateTime } from 'luxon'
 3 | import TimetableRenderer from './TimetableRenderer'
 4 | 
 5 | export function ShortTimetable({trainTrip}: {trainTrip: TrainTripWithStops}) {
 6 |     const allStops = trainTrip.stops ?? []
 7 |     const selectedStops = new Set<TrainStop>()
 8 | 
 9 |     selectedStops.add(allStops[0])
10 |     for(let i = 0; i < allStops.length; i++) {
11 |         const stop = allStops[i]
12 | 
13 |         if(DateTime.fromISO(stop.arrival || stop.departure!) > DateTime.now()) {
14 |             if(allStops[i - 1]) {
15 |                 if(i === allStops.length - 1) {
16 |                     selectedStops.add(allStops[i - 2])
17 |                 }
18 | 
19 |                 selectedStops.add(allStops[i - 1])
20 |             }
21 | 
22 |             selectedStops.add(stop)
23 | 
24 |             break
25 |         }
26 |     }
27 | 
28 |     if(selectedStops.size < 3) {
29 |         const middleNode = allStops[Math.floor(allStops.length / 2)]
30 |         const departure = DateTime.fromISO(middleNode.departure!)
31 | 
32 |         if(departure > DateTime.now()) {
33 |             selectedStops.add(allStops[1])
34 |             selectedStops.add(allStops[2])
35 |         } else {
36 |             selectedStops.add(allStops[allStops.length - 3])
37 |             selectedStops.add(allStops[allStops.length - 2])
38 |         }
39 |     }
40 | 
41 |     selectedStops.add(allStops[allStops.length - 1])
42 | 
43 |     const rowData = Array.from(selectedStops).map(stop => ({ type: 'stop', stop, index: allStops.indexOf(stop), time: stop.departure || stop.arrival! }))
44 |     return <TimetableRenderer rows={rowData} />
45 | }
46 | 


--------------------------------------------------------------------------------
/components/timetable/SingleRowRenderer.tsx:
--------------------------------------------------------------------------------
  1 | import { TrainStop } from '../../util/commonTypes'
  2 | import { DateTime } from 'luxon'
  3 | import type { ReactNode } from 'react'
  4 | import { StopLabel, TimeDisplay, TimetableRowContainer, TimeWrapper, TripChangeBottom, TripChangeContainer, TripChangeTop } from './styles'
  5 | import { Node, NodeArgs } from './Node'
  6 | import Link from 'next/link'
  7 | 
  8 | export type RowRendererArgs = {stop?: TrainStop, index: number, type: string, time: string, to?: string | null, link?: string}
  9 | 
 10 | type Time = {time: string, color: string, cancelled?: boolean}
 11 | 
 12 | export default function SingleRowRenderer({currentRow, nextRow, lastRow}: {currentRow: RowRendererArgs, nextRow: RowRendererArgs, lastRow: RowRendererArgs}) {
 13 |     let bottom = null
 14 |     // eslint-disable-next-line prefer-const
 15 |     let dot = {size: '1rem', color: 'var(--text-color)'}
 16 |     let top = null
 17 |     let blueDot: number | null = null
 18 | 
 19 |     if(nextRow) {
 20 |         const color = DateTime.fromISO(nextRow?.stop?.arrival || nextRow.time) < DateTime.now() ? 'var(--text-dark-color)' : 'var(--text-color)'
 21 |         bottom = {type: 'solid', width: '.2rem', color}
 22 |     }
 23 | 
 24 |     const colorToUse = DateTime.fromISO(currentRow?.stop?.arrival || currentRow.time) < DateTime.now() ? 'var(--text-dark-color)' : 'var(--text-color)'
 25 |     dot.color = colorToUse
 26 | 
 27 |     if(lastRow) {
 28 |         top = {type: 'solid', width: '.2rem', color: colorToUse}
 29 |     }
 30 | 
 31 |     if(currentRow.type === 'stop' && currentRow.stop) {
 32 | 
 33 |         if(nextRow?.type === 'stop') {
 34 |             if(bottom !== null && nextRow.index !== currentRow.index + 1) {
 35 |                 bottom.type = 'dotted'
 36 |             }
 37 |         } else {
 38 |             dot.size = '1.5rem'
 39 |         }
 40 | 
 41 |         if(lastRow?.type === 'stop') {
 42 |             if(top !== null && lastRow.index !== currentRow.index - 1) {
 43 |                 top.type = 'dotted'
 44 |             }
 45 |         } else {
 46 |             dot.size = '1.5rem'
 47 |         }
 48 | 
 49 |         const stopTime = currentRow.stop.departure || currentRow.stop.arrival
 50 |         const stopPassed = DateTime.fromISO(stopTime!) < DateTime.now()
 51 | 
 52 |         const times: Time[] = [[currentRow.stop.arrival, currentRow.stop.scheduled_arrival], [currentRow.stop.departure, currentRow.stop.scheduled_departure]]
 53 |             .filter(([time, scheduledTime]) => time && scheduledTime)
 54 |             .map(([time, scheduledTime]) => {
 55 |                 const timeObj = DateTime.fromISO(time!)
 56 |                 const formattedTime = timeObj.toFormat('HH:mm')
 57 |                 const delayed = DateTime.fromISO(scheduledTime!).plus({ minutes: 3 }) < timeObj
 58 | 
 59 |                 const normalColor = delayed ? 'var(--warning-color)' : 'var(--text-color)'
 60 |                 
 61 |                 return {
 62 |                     time: formattedTime,
 63 |                     color: stopPassed ? 'var(--text-dark-color)' : normalColor,
 64 |                     cancelled: currentRow.stop?.cancelled,
 65 |                 }
 66 |             })
 67 | 
 68 |         const lastDepature = lastRow?.type === 'stop' && lastRow.stop ? DateTime.fromISO(lastRow.stop.departure!) : null
 69 |         const thisArrival = DateTime.fromISO(currentRow.stop.arrival!)
 70 |         const thisDepature = DateTime.fromISO(currentRow.stop.departure!)
 71 |         const nextArrival = nextRow?.type === 'stop' && nextRow.stop ? DateTime.fromISO(nextRow.stop.arrival!) : null
 72 | 
 73 |         if(DateTime.now() >= thisArrival && DateTime.now() <= thisDepature) {
 74 |             blueDot = 50
 75 |         } else if(lastDepature && lastDepature < DateTime.now() && DateTime.now() < thisArrival) {
 76 |             const max = lastDepature.diff(thisArrival).toMillis()
 77 |             const process = lastDepature.diffNow().toMillis()
 78 |             const percentage = (process / max) - 0.5
 79 |             if(percentage > 0) {
 80 |                 blueDot = percentage * 100
 81 |             }
 82 |         } else if(nextArrival && nextArrival > DateTime.now() && thisDepature < DateTime.now()) {
 83 |             const max = thisDepature.diff(nextArrival).toMillis()
 84 |             const process = thisDepature.diffNow().toMillis()
 85 |             const percentage = (process / max) + 0.5
 86 |             if(percentage < 1) {
 87 |                 blueDot = percentage * 100
 88 |             }
 89 |         }
 90 | 
 91 |         if(currentRow.stop.cancelled) {
 92 |             blueDot = null
 93 |         }
 94 | 
 95 |         return (
 96 |             <TimetableRow key={currentRow.index} node={{bottom, dot, top, blueDot}} times={times}>
 97 |                 <StopLabel cancelled={currentRow.stop.cancelled} stopPassed={stopPassed}>{currentRow.stop.station}</StopLabel>
 98 |             </TimetableRow>
 99 |         )
100 |     } else if(currentRow.type === 'tripChange') {
101 |         dot.size = '2rem'
102 | 
103 |         return (
104 |             <TimetableRow key={currentRow.index} node={{bottom, dot, top, blueDot}}>
105 |                 <TripChangeContainer color={colorToUse}>
106 |                     <TripChangeTop>{currentRow.index !== 0 ? 'Weiter als' : null}</TripChangeTop>
107 |                     {currentRow.link ? (
108 |                         <Link href={currentRow.link} passHref legacyBehavior>
109 |                             <TripChangeBottom target='_blank' color={colorToUse}>{currentRow.to}</TripChangeBottom>
110 |                         </Link>
111 |                     ) : (
112 |                         <TripChangeBottom color={colorToUse}>{currentRow.to}</TripChangeBottom>
113 |                     )}
114 |                 </TripChangeContainer>
115 |             </TimetableRow>
116 |         )
117 |     } else if(currentRow.type === 'noStops') {
118 |         dot.size = '1.5rem'
119 | 
120 |         return (
121 |             <TimetableRow key={currentRow.index} node={{bottom, dot, top, blueDot}}>
122 |                 <TripChangeContainer>
123 |                     <b>Keine Daten!</b>
124 |                 </TripChangeContainer>
125 |             </TimetableRow>
126 |         )
127 |     }
128 |     
129 |     return null
130 | }
131 | 
132 | function TimetableRow({children, times, node}: {children?: ReactNode, times?: Time[], node: NodeArgs}) {
133 |     return (
134 |         <TimetableRowContainer>
135 |             <TimeWrapper>
136 |                 {times && times.map((time, index) => {
137 |                     return <TimeDisplay key={index} color={time.color} cancelled={time.cancelled}>{time.time}</TimeDisplay>
138 |                 })}
139 |             </TimeWrapper>
140 | 
141 |             <Node offset={'3.75em'} {...node} />
142 |             
143 |             {children}
144 |         </TimetableRowContainer>
145 |     )
146 | }
147 | 


--------------------------------------------------------------------------------
/components/timetable/TimetableRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { TimetableContainer } from './styles'
 2 | import SingleRowRenderer, { RowRendererArgs } from './SingleRowRenderer'
 3 | 
 4 | export default function TimetableRenderer({rows}: {rows: RowRendererArgs[]}) {
 5 |     return (
 6 |         <TimetableContainer>
 7 |             {rows.map((currentRow, index) => {
 8 |                 const nextRow = rows[index + 1]
 9 |                 const lastRow = rows[index - 1]
10 | 
11 |                 return <SingleRowRenderer key={index} currentRow={currentRow} nextRow={nextRow} lastRow={lastRow} />
12 |             })}
13 |         </TimetableContainer>
14 |     )
15 | }
16 | 


--------------------------------------------------------------------------------
/components/timetable/styles.tsx:
--------------------------------------------------------------------------------
  1 | import styled, { css } from 'styled-components'
  2 | 
  3 | function shouldForwardProp(prop: string | number) {
  4 |     return (['children', 'href', 'target', 'onClick'] as (string | number)[]).includes(prop)
  5 | }
  6 | 
  7 | export const NodeContainer = styled.div.withConfig({ shouldForwardProp })<{offset?: string, width?: string}>`
  8 |     position: absolute;
  9 |     height: 100%;
 10 | 
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     justify-content: center;
 14 | 
 15 |     width: 2rem;
 16 | 
 17 |     ${(props) => css`
 18 |         left: ${props.offset};
 19 |     `}
 20 | 
 21 |     shape-rendering: crispedges;
 22 | `
 23 | 
 24 | export const Dot = styled.div.withConfig({ shouldForwardProp })<{size: string, color: string}>`
 25 |     position: absolute;
 26 | 
 27 |     ${(props) => css`
 28 |         width: ${props.size};
 29 |         height: ${props.size};
 30 |         background-color: ${props.color};
 31 |     `}
 32 | 
 33 |     left: 50%;
 34 |     transform: translateX(-50%);
 35 |     
 36 |     border-radius: 50%;
 37 |     z-index: 2;
 38 | `
 39 | 
 40 | type ConnectingLineArgs = {type: string, color?: string, width: string}
 41 | 
 42 | export const ConnectingLine = styled.div.withConfig({ shouldForwardProp })<ConnectingLineArgs>`
 43 |     position: absolute;
 44 |     width: 0;
 45 | 
 46 |     ${(props) => css`
 47 |         border-left-style: ${props.type};
 48 |         border-width: ${props.width};
 49 |         border-color: ${props.color};
 50 |     `}
 51 | 
 52 |     left: 50%;
 53 |     transform: translateX(-50%);
 54 | `
 55 | 
 56 | export const TopConnectingLine = styled(ConnectingLine)<ConnectingLineArgs>`
 57 |     top: 0;
 58 | 
 59 |     ${(props) => props.type === 'dotted' && css`
 60 |         top: ${props.width};
 61 | 
 62 |         @supports (-moz-appearance:none) {
 63 |             top: calc(${props.width} * -1);
 64 |         }
 65 |     `}
 66 | 
 67 |     height: 50%;
 68 | `
 69 | 
 70 | export const BottomConnectingLine = styled(ConnectingLine)<ConnectingLineArgs>`
 71 |     top: 50%;
 72 |     height: 50%;
 73 | `
 74 | 
 75 | export const TimetableRowContainer = styled.div`
 76 |     position: relative;
 77 |     width: 100%;
 78 | 
 79 |     display: flex;
 80 |     align-items: center;
 81 | `
 82 | 
 83 | export const TimeWrapper = styled.div.withConfig({ shouldForwardProp })`
 84 |     width: calc(5.5em + 15px);
 85 |     flex-shrink: 0;
 86 |     margin: 5px 0;
 87 |     min-height: 2rem;
 88 | 
 89 |     display: flex;
 90 |     flex-direction: column;
 91 |     justify-content: center;
 92 | `
 93 | 
 94 | export const TimeDisplay = styled.span.withConfig({ shouldForwardProp })<{color: string, cancelled?: boolean}>`
 95 |     display: flex;
 96 |     align-items: center;
 97 |     justify-content: left;
 98 | 
 99 |     font-size: 1rem;
100 |     font-weight: bold;
101 | 
102 |     ${(props) => css`
103 |         color: ${props.color};
104 |     `}
105 | 
106 |     ${(props) => props.cancelled && css`
107 |         text-decoration: line-through;
108 |     `}
109 | `
110 | 
111 | export const BlueDot = styled.div`
112 |     background-color: #426BFF;
113 |     width: 1rem;
114 |     height: 1rem;
115 |     border-radius: 50%;
116 |     border: .2rem solid white;
117 |     position: absolute;
118 |     z-index: 10;
119 |     left: 50%;
120 |     margin-left: -0.7rem;
121 |     margin-top: -0.7rem;
122 |     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
123 | `
124 | 
125 | export const StopLabel = styled.b.withConfig({ shouldForwardProp })<{cancelled: boolean, stopPassed: boolean}>`
126 |     word-break: break-word;
127 |     
128 |     ${(props) => css`
129 |         text-decoration: ${props.cancelled ? 'line-through' : ''};
130 |         color: ${props.stopPassed ? 'var(--text-dark-color)' : 'var(--text-color)'}
131 |     `}
132 | `
133 | 
134 | export const TimetableContainer = styled.span`
135 | 
136 | `
137 | 
138 | export const TripChangeContainer = styled.div.withConfig({ shouldForwardProp })<{color?: string}>`
139 |     display: flex;
140 |     flex-direction: column;
141 |     ${(props) => css`
142 |         color: ${props.color}
143 |     `}
144 | `
145 | 
146 | export const TripChangeTop = styled.span`
147 |     font-size: 0.8rem;
148 |     font-weight: bold;
149 | `
150 | 
151 | export const TripChangeBottom = styled.a.withConfig({ shouldForwardProp })<{color: string}>`
152 |     font-weight: bold;
153 | 
154 |     ${(props) => css`
155 |         color: ${props.color};
156 | 
157 |         &:visited {
158 |             color: ${props.color};
159 |         }
160 |     `}
161 | `
162 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const configs = {
 2 |   development: {
 3 |     NEXT_PUBLIC_ENV: 'local',
 4 |     NEXT_PUBLIC_GRAPHQL_URL: 'https://regenbogen-ice.de/graphql',
 5 |     NEXT_PUBLIC_APP_BASE: 'https://mainpc20481.ppluss.de',
 6 |   },
 7 |   canary: {
 8 |     NEXT_PUBLIC_ENV: 'canary',
 9 |     NEXT_PUBLIC_GRAPHQL_URL: 'https://dev.regenbogen-ice.de/graphql',
10 |     NEXT_PUBLIC_APP_BASE: 'https://dev.regenbogen-ice.de',
11 |     NEXT_PUBLIC_SENTRY_DSN: 'https://6356562d284f46ab906a52b7701b60a8@glitch.regenbogen-ice.de/3',
12 |     NEXT_PUBLIC_ACKEE_UUID: '5534184d-108a-47a9-aced-3376820bb486',
13 |   },
14 |   production: {
15 |     NEXT_PUBLIC_ENV: 'production',
16 |     NEXT_PUBLIC_GRAPHQL_URL: 'https://regenbogen-ice.de/graphql',
17 |     NEXT_PUBLIC_APP_BASE: 'https://regenbogen-ice.de',
18 |     NEXT_PUBLIC_SENTRY_DSN: 'https://6356562d284f46ab906a52b7701b60a8@glitch.regenbogen-ice.de/3',
19 |     NEXT_PUBLIC_ACKEE_UUID: '540a6aea-c6c8-4df5-8d6e-1bfa7a6f5472',
20 |   },
21 | }
22 | 
23 | let configKey = 'development'
24 | 
25 | if(process.env.BUILD_ENV) {
26 | 
27 |   if(process.env.BUILD_ENV === 'main') {
28 |     configKey = 'production'
29 |   } else {
30 |     configKey = process.env.BUILD_ENV
31 |   }
32 | 
33 | }
34 | 
35 | const config = configs[configKey]
36 | 
37 | module.exports = {
38 |   reactStrictMode: true,
39 |   env: config,
40 |   redirects: async () => ([
41 |     {source: '/details/:tzn', destination: '/vehicle/ICE/:tzn', permanent: false},
42 |   ]),
43 |   compiler: {
44 |     styledComponents: true,
45 |   },
46 | }
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wo-ist-der-regenbogen-ice-frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "tsc --noEmit && next lint"
10 |   },
11 |   "dependencies": {
12 |     "@sentry/react": "^8.48.0",
13 |     "ackee-tracker": "^5.1.0",
14 |     "framer-motion": "^11.16.4",
15 |     "luxon": "^3.5.0",
16 |     "next": "15.1.4",
17 |     "react": "19.0.0",
18 |     "react-dom": "19.0.0",
19 |     "react-is": "^19.0.0",
20 |     "styled-components": "^6.1.14",
21 |     "swr": "^2.3.0"
22 |   },
23 |   "devDependencies": {
24 |     "@types/ackee-tracker": "^5.0.4",
25 |     "@types/luxon": "^3.4.2",
26 |     "@types/node": "^22.10.5",
27 |     "@types/react": "^19.0.4",
28 |     "@types/styled-components": "^5.1.34",
29 |     "@typescript-eslint/eslint-plugin": "^6.19.0",
30 |     "babel-plugin-styled-components": "^2.1.4",
31 |     "eslint": "8.56.0",
32 |     "eslint-config-next": "15.1.4",
33 |     "typescript": "^5.7.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/404.tsx:
--------------------------------------------------------------------------------
 1 | import { FullScreenError } from '../components/misc/Error'
 2 | import { StatusError } from '../util/dataFetcher'
 3 | 
 4 | export default function ErrorPage() {
 5 |     const error = new StatusError('404', 'Seite nicht gefunden')
 6 | 
 7 |     return (
 8 |         <FullScreenError error={error} />
 9 |     )
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import type { AppProps } from 'next/app'
 2 | import Head from 'next/head'
 3 | import { ThemeContext } from 'styled-components'
 4 | import ErrorBoundary from '../components/misc/ErrorBoundary'
 5 | import { GlobalStyles } from '../components/misc/GlobalStyles'
 6 | import { useThemeColor } from '../util/theme'
 7 | 
 8 | import '../util/tracking'
 9 | import '../util/registerServiceWorker'
10 | 
11 | export default function App({ Component, pageProps }: AppProps) {
12 |     const [themeColor, transitionThemeColor, changeThemeColor] = useThemeColor()
13 | 
14 |     return (
15 |         <>
16 |             <GlobalStyles backgroundColor={themeColor} transitionThemeColor={transitionThemeColor} />
17 |             <Head>
18 |                 <meta name='theme-color' content={themeColor} />
19 |             </Head>
20 | 
21 |             <ThemeContext.Provider value={{ themeColor, changeThemeColor }}>
22 |                 <ErrorBoundary>
23 |                     <Component {...pageProps} />
24 |                 </ErrorBoundary>
25 |             </ThemeContext.Provider>
26 |         </>
27 |     )
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // stolen from https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
 3 | 
 4 | import Document from 'next/document'
 5 | import { ServerStyleSheet } from 'styled-components'
 6 | import { Html, Head, Main, NextScript } from 'next/document'
 7 | 
 8 | export default class MyDocument extends Document {
 9 |   static async getInitialProps(ctx) {
10 |     const sheet = new ServerStyleSheet()
11 |     const originalRenderPage = ctx.renderPage
12 | 
13 |     try {
14 |       ctx.renderPage = () =>
15 |         originalRenderPage({
16 |           enhanceApp: (App) => (props) =>
17 |             sheet.collectStyles(<App {...props} />),
18 |         })
19 | 
20 |       const initialProps = await Document.getInitialProps(ctx)
21 |       return {
22 |         ...initialProps,
23 |         styles: (
24 |           <>
25 |             {initialProps.styles}
26 |             {sheet.getStyleElement()}
27 |           </>
28 |         ),
29 |       }
30 |     } finally {
31 |       sheet.seal()
32 |     }
33 |   }
34 | 
35 |   render() {
36 |     return (
37 |       <Html>
38 |         <Head>
39 |           <link rel="preconnect" href="https://fonts.googleapis.com" />
40 |           <link rel="preconnect" href="https://fonts.gstatic.com" />
41 |           <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
42 |           <link rel="icon" type="image/png" href="/images/icon-bg-32.png" />
43 |           <link rel='manifest' href='/manifest.json' crossOrigin='use-credentials' />
44 |           <link rel="apple-touch-icon" href="/images/icon-bg-400.png" />
45 |           <meta name="mobile-web-app-capable" content="yes" />
46 |         </Head>
47 |         <body>
48 |           <Main />
49 |           <NextScript />
50 |         </body>
51 |       </Html>
52 |     )
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/pages/coach/[uic].tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { useRouter } from 'next/router'
 3 | import CoachDetailsView from '../../components/layout/CoachDetailsView'
 4 | import { NoDataComponent } from '../../components/misc/CommonComponents'
 5 | import { HeaderContainer } from '../../components/misc/CommonStyles'
 6 | import Footer from '../../components/misc/Footer'
 7 | import NavigationBar from '../../components/misc/NavigationBar'
 8 | import UicID, { formatUIC } from '../../components/misc/UicID'
 9 | import SearchBox from '../../components/search/SearchBox'
10 | import { Coach } from '../../util/commonTypes'
11 | import { REFRESH_INTERVAL } from '../../util/constants'
12 | import { useCoach, useRerenderPeriodically } from '../../util/hooks'
13 | 
14 | export default function ParameterWaitingView() {
15 |     const router = useRouter()
16 |     const { uic } = router.query
17 |     
18 |     if(!router.isReady) {
19 |         return <NoDataComponent error={null} title={''} />
20 |     }
21 | 
22 |     return (
23 |         <CoachView uic={uic as string} />
24 |     )
25 | }
26 | 
27 | function CoachView({uic}: {uic: string}) {
28 |     useRerenderPeriodically(REFRESH_INTERVAL)
29 | 
30 |     const { data, error } = useCoach(uic)
31 |     if(error || !data) {
32 |         return <NoDataComponent error={error} title={`Wagen ${formatUIC(uic)}`} />
33 |     }
34 | 
35 |     const coach = data[0]
36 | 
37 |     return (
38 |         <>
39 |             <Head>
40 |                 <title>{`Wagen ${formatUIC(coach.uic)}`}</title>
41 |             </Head>
42 |             <NavigationBar />
43 |             <CoachHeader coach={coach} />
44 |             <CoachDetailsView coach={coach} />
45 |             <Footer />
46 |         </>
47 |     )
48 | }
49 | 
50 | function CoachHeader({coach}: {coach: Coach}) {
51 |     return (
52 |         <HeaderContainer>
53 |             <h1>
54 |                 <UicID uic={coach.uic} />    
55 |             </h1>
56 |             <h2>{coach.type}</h2>
57 |             <SearchBox />
58 |         </HeaderContainer>
59 |     )
60 | }
61 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head'
  2 | import styled from 'styled-components'
  3 | import { useRerenderPeriodically, useTrainVehicleCurrent } from '../util/hooks'
  4 | import { findCurrentTrip, generateTripHeadline, getTrainTripWithStops } from '../util/trainDataUtil'
  5 | import { TrainTrip } from '../util/commonTypes'
  6 | import TrainDetailsView from '../components/layout/TrainDetailsView'
  7 | import { APP_BASE, RAINBOW_TZN, REFRESH_INTERVAL } from '../util/constants'
  8 | import SearchBox from '../components/search/SearchBox'
  9 | import { ShortTimetable } from '../components/timetable/ShortTripTimetable'
 10 | import RainbowStripe from '../components/misc/RainbowStripe'
 11 | import Loader from '../components/misc/Loader'
 12 | import { InlineError } from '../components/misc/Error'
 13 | import Footer from '../components/misc/Footer'
 14 | 
 15 | const HeaderContainer = styled.div`
 16 |     padding: 0 20px;
 17 |     
 18 |     display: flex;
 19 |     align-items: center;
 20 |     justify-content: center;
 21 |     flex-direction: column;
 22 | 
 23 |     min-height: 100%;
 24 | `
 25 | 
 26 | const TopHeader = styled.div`
 27 |     position: relative;
 28 |     display: flex;
 29 |     min-height: 15rem;
 30 |     flex-direction: column;
 31 | 
 32 |     @media only screen and (min-width: 900px) {
 33 |         align-items: center;
 34 |         min-height: 35vh;
 35 |         flex-direction: row;
 36 |         gap: 10rem;
 37 |         padding: 3rem;
 38 |     }
 39 | `
 40 | 
 41 | const Title = styled.h1`
 42 |     margin: 20px 0;
 43 | 
 44 |     word-break: break-word;
 45 | `
 46 | 
 47 | const TimetableWrapper = styled.div``
 48 | 
 49 | const TimetablePuppet = styled.div`
 50 |     min-width: min(25vw, 20rem);
 51 |     min-height: 10rem;
 52 | 
 53 |     display: flex;
 54 |     justify-content: center;
 55 |     align-items: center;
 56 | `
 57 | 
 58 | function Header({currentTrip}: {currentTrip: TrainTrip}) {
 59 |     const tripHeadline: string = generateTripHeadline(currentTrip)
 60 | 
 61 |     const tripWithStops = getTrainTripWithStops(currentTrip)
 62 | 
 63 |     return (
 64 |         <HeaderContainer>
 65 |             <TopHeader>
 66 |                 <div>
 67 |                     <Title>Wo ist der Regenbogen-ICE?</Title>
 68 |                     <Title as={'h2'}>{tripHeadline}</Title>
 69 |                 </div>
 70 |                 <TimetableWrapper>
 71 |                     {tripWithStops && <ShortTimetable trainTrip={tripWithStops} />}
 72 |                 </TimetableWrapper>
 73 |             </TopHeader>
 74 |             <SearchBox />
 75 |             <RainbowStripe />
 76 |         </HeaderContainer>
 77 |     )
 78 | }
 79 | 
 80 | function HeadSection() {
 81 |     return (
 82 |         <Head>
 83 |             <title>Wo ist der Regenbogen-ICE?</title>
 84 |             <link rel="canonical" href={APP_BASE + '/'} />
 85 |             <meta name="twitter:card" content="summary_large_image" />
 86 |             <meta name="twitter:title" content="Wo ist der Regenbogen ICE?" />
 87 |             <meta name="twitter:description" content="Tracke den Regenbogen-ICE auf seinem Weg durch ganz Deutschland" />
 88 |             <meta name="twitter:image:src" content={APP_BASE + '/images/twittercard.png'} />
 89 |             <meta property="og:title" content="Wo ist der Regenbogen ICE?" />
 90 |             <meta property="og:image" content={APP_BASE + '/images/twittercard.png'} />
 91 |             <meta name="description" content="Tracke den Regenbogen-ICE auf dem ganzen Streckennetz der Deutschen Bahn!" />
 92 |             <meta name="keywords" content="regenbogen ice, wo ist der regenbogen ice, regenbogen ice fahrplan, regenbogen ice strecke, regenbogen ice nummer, regenbogen ice db, zug" /> 
 93 |         </Head>
 94 |     )
 95 | }
 96 | 
 97 | export default function IndexPage() {
 98 |     useRerenderPeriodically(REFRESH_INTERVAL)
 99 | 
100 |     const { data, error } = useTrainVehicleCurrent(RAINBOW_TZN, 'ICE')
101 | 
102 |     if(error) {
103 |         return (
104 |             <>
105 |                 <HeadSection />
106 |                 <HeaderContainer>
107 |                     <TopHeader>
108 |                         <div>
109 |                             <Title>Wo ist der Regenbogen-ICE?</Title>
110 |                             <Title as={'h2'}>
111 |                                 Keine Ahnung.
112 |                                 {' '}
113 |                                 <InlineError error={error} />
114 |                             </Title>
115 |                         </div>
116 |                     </TopHeader>
117 |                     <RainbowStripe />
118 |                 </HeaderContainer>
119 |             </>
120 |         )
121 |     }
122 | 
123 |     if(!data) {
124 |         return (
125 |             <>
126 |                 <HeadSection />
127 |                 <HeaderContainer>
128 |                     <TopHeader style={{marginBottom: '200px'}}>
129 |                         <div>
130 |                             <Title>Wo ist der Regenbogen-ICE?</Title>
131 |                             <Title as={'h2'}>
132 |                                 {'\xa0'}
133 |                             </Title>
134 |                         </div>
135 |                         <TimetablePuppet>
136 |                             <Loader />
137 |                         </TimetablePuppet>
138 |                     </TopHeader>
139 |                 </HeaderContainer>
140 |             </>
141 |         )
142 |     }
143 | 
144 |     const currentTrip = findCurrentTrip(data)
145 | 
146 |     return (
147 |         <>
148 |             <HeadSection />
149 |             <Header currentTrip={currentTrip} />
150 |             <TrainDetailsView currentTrip={currentTrip} vehicle={data} />
151 |             <Footer />
152 |         </>
153 |     )
154 | }
155 | 


--------------------------------------------------------------------------------
/pages/trip/[trainType]/[trainNumber].tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import { useRouter } from 'next/router'
 3 | import TripDetailsView from '../../../components/layout/TripDetailsView'
 4 | import { HtmlTitle, NoDataComponent } from '../../../components/misc/CommonComponents'
 5 | import { HeaderContainer } from '../../../components/misc/CommonStyles'
 6 | import Footer from '../../../components/misc/Footer'
 7 | import NavigationBar from '../../../components/misc/NavigationBar'
 8 | import SearchBox from '../../../components/search/SearchBox'
 9 | import { TrainTrip, TrainType } from '../../../util/commonTypes'
10 | import { REFRESH_INTERVAL } from '../../../util/constants'
11 | import { useRerenderPeriodically, useTrainTrips } from '../../../util/hooks'
12 | 
13 | export default function VehicleParameterWaitingView() {
14 |     const router = useRouter()
15 |     const { trainNumber, trainType } = router.query
16 |     
17 |     if(!router.isReady) {
18 |         return <NoDataComponent error={null} title={''} />
19 |     }
20 | 
21 |     return (
22 |         <Trip 
23 |             trainNumber={trainNumber as string}
24 |             trainType={trainType as string}
25 |             initialDeparture={router.query.initialDeparture as string || null}
26 |         />
27 |     )
28 | }
29 | 
30 | function Trip({trainNumber, trainType, initialDeparture}: {trainNumber: string, trainType: string, initialDeparture: string | null}) {
31 |     useRerenderPeriodically(REFRESH_INTERVAL)
32 | 
33 |     const { data, error } = useTrainTrips(Number(trainNumber), trainType as TrainType, initialDeparture)
34 |     if(error || !data) {
35 |         return <NoDataComponent error={error} title={`${trainType} ${trainNumber}`} />
36 |     }
37 |     
38 |     const currentTrip = data[0]
39 | 
40 |     return (
41 |         <>
42 |             <HtmlTitle title={`${currentTrip.train_type} ${currentTrip.train_number}`} />
43 |             <NavigationBar />
44 |             <TripHeader trainTrip={currentTrip} />
45 |             <TripDetailsView currentTrip={currentTrip} vehicles={currentTrip.train_vehicles || []} />
46 |             <Footer />
47 |         </>
48 |     )
49 | }
50 | 
51 | function TripHeader({trainTrip}: {trainTrip: TrainTrip}) {
52 |     const date = DateTime.fromISO(trainTrip.initial_departure).toFormat('dd.MM.yyyy')
53 | 
54 |     return (
55 |         <HeaderContainer>
56 |             <h1>{trainTrip.train_type} {trainTrip.train_number}</h1>
57 |             <h2>
58 |                 {date}
59 |                 <br />
60 |                 {trainTrip.origin_station || '?'} {'->'} {trainTrip.destination_station || '?'}
61 |             </h2>
62 |             <SearchBox />
63 |         </HeaderContainer>
64 |     )
65 | }
66 | 


--------------------------------------------------------------------------------
/pages/tripSearch.tsx:
--------------------------------------------------------------------------------
 1 | import { DateTime } from 'luxon'
 2 | import { useRouter } from 'next/router'
 3 | import { SyntheticEvent } from 'react'
 4 | import styled from 'styled-components'
 5 | import Footer from '../components/misc/Footer'
 6 | import { TrainType } from '../util/commonTypes'
 7 | import { getTrainTripLink } from '../util/trainDataUtil'
 8 | 
 9 | const PageContainer = styled.div`
10 |     display: flex;
11 |     flex-direction: column;
12 | 
13 |     padding: 2rem;
14 | `
15 | 
16 | const PageTitle = styled.h1`
17 |     margin-top: 50px;
18 |     margin-bottom: 20px;
19 | `
20 | 
21 | const InputElement = styled.input`
22 |     padding: 20px;
23 |     box-sizing: border-box;
24 |     max-width: 450px;
25 | 
26 |     margin-bottom: 15px;
27 |     margin-top: 7px;
28 | 
29 |     font-size: 16px;
30 |     border-radius: 15px;
31 | `
32 | 
33 | const FormContainer = styled.form`
34 |     display: flex;
35 |     flex-direction: column;
36 | `
37 | 
38 | const InputLabel = styled.label`
39 | 
40 | `
41 | 
42 | export default function SearchTripPage() {
43 |     const router = useRouter()
44 | 
45 |     function onSubmit(e: SyntheticEvent) {
46 |         e.preventDefault()
47 | 
48 |         const formData = new FormData(e.nativeEvent.target as HTMLFormElement)
49 | 
50 |         const trainNumber = formData.get('trainNumber') as string
51 |         const [type, number] = trainNumber.toUpperCase().split(' ')
52 | 
53 |         const time = formData.get('time') as string + ' ' + formData.get('date') as string
54 |         const formattedTime = DateTime.fromFormat(time, 'HH:mm yyyy-MM-dd', {zone: 'local'}).toISO({includeOffset: true})
55 |         
56 |         const link = getTrainTripLink(type as TrainType, parseInt(number), formattedTime!)
57 |         router.push(link)
58 |     }
59 | 
60 |     return (
61 |         <>
62 |             <PageContainer>
63 |                 <FormContainer onSubmit={onSubmit}>
64 |                     <PageTitle>Zugsuche</PageTitle>
65 |                     <InputLabel>Zugnummer</InputLabel>
66 |                     <InputElement name="trainNumber" type="text" placeholder="Bspw. ICE 123" required />
67 |                     <InputLabel>Datum</InputLabel>
68 |                     <InputElement name="date" type="date" required />
69 |                     <InputLabel>Zeit</InputLabel>
70 |                     <InputElement name="time" type="time" required />
71 |                     <InputElement type="submit" />
72 |                 </FormContainer>
73 |             </PageContainer>
74 |             <Footer />
75 |         </>
76 |     )
77 | }
78 | 


--------------------------------------------------------------------------------
/pages/vehicle/[trainType]/[tzn].tsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import NavigationBar from '../../../components/misc/NavigationBar'
 3 | import SearchBox from '../../../components/search/SearchBox'
 4 | import TrainDetailsView from '../../../components/layout/TrainDetailsView'
 5 | import { TrainTrip, TrainType } from '../../../util/commonTypes'
 6 | import { useRerenderPeriodically, useTrainVehicleCurrent } from '../../../util/hooks'
 7 | import { findCurrentTrip, generateTripHeadline } from '../../../util/trainDataUtil'
 8 | import { HeaderContainer } from '../../../components/misc/CommonStyles'
 9 | import { HtmlTitle, NoDataComponent } from '../../../components/misc/CommonComponents'
10 | import { REFRESH_INTERVAL } from '../../../util/constants'
11 | import Footer from '../../../components/misc/Footer'
12 | 
13 | export default function VehicleParameterWaitingView() {
14 |     const router = useRouter()
15 |     const { tzn, trainType } = router.query
16 |     
17 |     if(!router.isReady) {
18 |         return <NoDataComponent error={null} title={''} />
19 |     }
20 | 
21 |     return (
22 |         <Vehicle tzn={tzn as string} trainType={trainType as string} />
23 |     )
24 | }
25 | 
26 | function Vehicle({tzn, trainType}: {tzn: string, trainType: string}) {
27 |     useRerenderPeriodically(REFRESH_INTERVAL)
28 | 
29 |     const { data, error } = useTrainVehicleCurrent(tzn, trainType as TrainType)
30 |     if(error || !data) {
31 |         return <NoDataComponent error={error} title={`Wo ist das ${trainType} Tfz ${tzn}?`} />
32 |     }
33 |     const trainTrip = findCurrentTrip(data)
34 | 
35 |     const pageTitle = `Wo ist der ${data.train_type} ${data.train_vehicle_name || 'Tz ' + data.train_vehicle_number}?`
36 | 
37 |     return (
38 |         <>
39 |             <HtmlTitle title={pageTitle} />
40 |             <NavigationBar />
41 |             <VehicleHeader trainTrip={trainTrip} title={pageTitle} />
42 |             <TrainDetailsView vehicle={data} currentTrip={trainTrip} />
43 |             <Footer />
44 |         </>
45 |     )
46 | }
47 | 
48 | function VehicleHeader({trainTrip, title}: {trainTrip: TrainTrip, title: string}) {
49 |     const tripHeadline: string = generateTripHeadline(trainTrip)
50 | 
51 |     return (
52 |         <HeaderContainer>
53 |             <h1>{title}</h1>
54 |             <h2>{tripHeadline}</h2>
55 |             <SearchBox />
56 |         </HeaderContainer>
57 |     )
58 | }
59 | 


--------------------------------------------------------------------------------
/public/images/adridoesthings.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/adridoesthings.webp


--------------------------------------------------------------------------------
/public/images/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/card.png


--------------------------------------------------------------------------------
/public/images/icon-bg-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/icon-bg-32.png


--------------------------------------------------------------------------------
/public/images/icon-bg-400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/icon-bg-400.png


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/philippirl.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/philippirl.webp


--------------------------------------------------------------------------------
/public/images/screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/screenshot1.png


--------------------------------------------------------------------------------
/public/images/twittercard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/regenbogen-ice/frontend/bebf882b3a4508ada3e3974ba5f4919ab2e06ec8/public/images/twittercard.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "id": "webfrontend",
 3 |     "name": "Wo ist der Regenbogen ICE?",
 4 |     "short_name": "Regenbogen-ICE",
 5 |     "description": "Tracke den Regenbogen ICE und andere Züge der Deutschen Bahn",
 6 |     "display": "standalone",
 7 |     "start_url": "/?app=1",
 8 |     "icons": [
 9 |         {
10 |             "src": "/images/icon-bg-400.png",
11 |             "sizes": "400x400",
12 |             "type": "image/png"
13 |         }
14 |     ],
15 |     "theme_color": "#FF007A",
16 |     "screenshots": [
17 |         {
18 |             "src": "/images/screenshot1.png",
19 |             "sizes": "563x1001",
20 |             "type": "image/png"
21 |         }
22 |     ]
23 | }
24 | 


--------------------------------------------------------------------------------
/public/offline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Offline.</title>
 8 | </head>
 9 | <body>
10 |     <h1>Offline</h1>
11 |     <span>Du bist offline. Gehe online um diese App verwenden.</span>
12 |     <script>
13 |         setTimeout(() => window.location.reload(), 3000)
14 |     </script>
15 |     <style>
16 |         html {
17 |             font-size: 150%;
18 |         }
19 |         
20 |         body {
21 |             font-family: -system-ui, "Roboto", sans-serif;
22 |             display: flex;
23 |             justify-content: center;
24 |             align-items: center;
25 |             flex-direction: column;
26 |             min-height: 100vh;
27 |             margin: 0;
28 |             text-align: center;
29 |         }
30 | 
31 |         body * {
32 |             margin: 10px 20px;
33 |         }
34 |     </style>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/public/sw.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /*
 3 | Copyright 2015, 2019 Google Inc. All Rights Reserved.
 4 |  Licensed under the Apache License, Version 2.0 (the "License");
 5 |  you may not use this file except in compliance with the License.
 6 |  You may obtain a copy of the License at
 7 |  http://www.apache.org/licenses/LICENSE-2.0
 8 |  Unless required by applicable law or agreed to in writing, software
 9 |  distributed under the License is distributed on an "AS IS" BASIS,
10 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 |  See the License for the specific language governing permissions and
12 |  limitations under the License.
13 | */
14 | 
15 | // Incrementing OFFLINE_VERSION will kick off the install event and force
16 | // previously cached resources to be updated from the network.
17 | const OFFLINE_VERSION = 1;
18 | const CACHE_NAME = 'offline';
19 | // Customize this with a different URL if needed.
20 | const OFFLINE_URL = 'offline.html';
21 | 
22 | self.addEventListener('install', (event) => {
23 |   event.waitUntil((async () => {
24 |     const cache = await caches.open(CACHE_NAME);
25 |     // Setting {cache: 'reload'} in the new request will ensure that the response
26 |     // isn't fulfilled from the HTTP cache; i.e., it will be from the network.
27 |     await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
28 |   })());
29 | });
30 | 
31 | self.addEventListener('activate', (event) => {
32 |   event.waitUntil((async () => {
33 |     // Enable navigation preload if it's supported.
34 |     // See https://developers.google.com/web/updates/2017/02/navigation-preload
35 |     if ('navigationPreload' in self.registration) {
36 |       await self.registration.navigationPreload.enable();
37 |     }
38 |   })());
39 | 
40 |   // Tell the active service worker to take control of the page immediately.
41 |   self.clients.claim();
42 | });
43 | 
44 | self.addEventListener('fetch', (event) => {
45 |   // We only want to call event.respondWith() if this is a navigation request
46 |   // for an HTML page.
47 |   if (event.request.mode === 'navigate') {
48 |     event.respondWith((async () => {
49 |       try {
50 |         // First, try to use the navigation preload response if it's supported.
51 |         const preloadResponse = await event.preloadResponse;
52 |         if (preloadResponse) {
53 |           return preloadResponse;
54 |         }
55 | 
56 |         const networkResponse = await fetch(event.request);
57 |         return networkResponse;
58 |       } catch (error) {
59 |         // catch is only triggered if an exception is thrown, which is likely
60 |         // due to a network error.
61 |         // If fetch() returns a valid HTTP response with a response code in
62 |         // the 4xx or 5xx range, the catch() will NOT be called.
63 |         console.log('Fetch failed; returning offline page instead.', error);
64 | 
65 |         const cache = await caches.open(CACHE_NAME);
66 |         const cachedResponse = await cache.match(OFFLINE_URL);
67 |         return cachedResponse;
68 |       }
69 |     })());
70 |   }
71 | 
72 |   // If our if() condition is false, then this fetch handler won't intercept the
73 |   // request. If there are any other fetch handlers registered, they will get a
74 |   // chance to call event.respondWith(). If no fetch handlers call
75 |   // event.respondWith(), the request will be handled by the browser as if there
76 |   // were no service worker involvement.
77 | });


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "incremental": true
21 |   },
22 |   "include": [
23 |     "next-env.d.ts",
24 |     "**/*.ts",
25 |     "**/*.tsx"
26 |   ],
27 |   "exclude": [
28 |     "node_modules"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/util/commonTypes.ts:
--------------------------------------------------------------------------------
 1 | export type TrainVehicleResponse = {
 2 |     train_vehicle: TrainVehicle,
 3 | }
 4 | 
 5 | export type TrainVehicle = {
 6 |     train_vehicle_name?: string,
 7 |     building_series?: string,
 8 |     building_series_name?: string,
 9 |     train_vehicle_number: number,
10 |     train_type: TrainType,
11 |     trips: TrainTrip[],
12 |     coach_sequences?: TrainCoachSeqence[],
13 | }
14 | 
15 | export type TrainTrip = {
16 |     group_index: number,
17 |     train_number: number,
18 |     train_type: TrainType,
19 |     origin_station?: string,
20 |     destination_station?: string,
21 |     initial_departure: string,
22 |     bahn_expert?: string,
23 |     stops?: TrainStop[],
24 |     train_vehicles?: TrainVehicle[],
25 | }
26 | 
27 | export type TrainTripWithStops = TrainTrip & {
28 |     stops: TrainStop[],
29 | }
30 | 
31 | export type TrainCoachSeqence = {
32 |     timestamp: string,
33 |     coaches?: TrainCoach[],
34 | }
35 | 
36 | export type TrainCoach = {
37 |     index: number,
38 |     class: number,
39 |     type: string,
40 |     uic: string,
41 |     category: string,
42 | }
43 | 
44 | type Time = {
45 |     scheduled_departure: string,
46 |     departure: string,
47 |     scheduled_arrival: string | null,
48 |     arrival: string | null,
49 | } | {
50 |     scheduled_departure: string | null,
51 |     departure: string | null,
52 |     scheduled_arrival: string,
53 |     arrival: string,
54 | }
55 | 
56 | export type TrainStop = {
57 |     cancelled: boolean,
58 |     station: string,
59 | } & Time
60 | 
61 | export type AutoCompleteResponse = {
62 |     autocomplete: AutoCompleteSuggestion[],
63 | }
64 | 
65 | export type AutoCompleteSuggestion = {
66 |     guess: string,
67 |     train_type: TrainType,
68 |     type: string,
69 | }
70 | 
71 | export type Coach = {
72 |     index: number,
73 |     class: number,
74 |     type: string,
75 |     uic: string,
76 |     category: string,
77 |     coach_sequence: {
78 |         train_vehicle?: TrainVehicle
79 |     },
80 |     coach_links: [
81 |         {
82 |             trip: TrainTrip,
83 |         },
84 |     ],
85 | }
86 | 
87 | export type TrainType = 'ICE' | 'IC'
88 | 


--------------------------------------------------------------------------------
/util/constants.ts:
--------------------------------------------------------------------------------
1 | export const RAINBOW_TZN = 304
2 | export const RAINBOW_NAME = 'München'
3 | 
4 | export const GRAPHQL_URL: string = process.env.NEXT_PUBLIC_GRAPHQL_URL!
5 | export const APP_BASE: string = process.env.NEXT_PUBLIC_APP_BASE!
6 | 
7 | export const REFRESH_INTERVAL = 1000
8 | 


--------------------------------------------------------------------------------
/util/dataFetcher.ts:
--------------------------------------------------------------------------------
 1 | import { fetchAutoComplete, fetchCoach, fetchTrainHistory, fetchTrainTrip, fetchTrainVehicle } from './graphql'
 2 | 
 3 | export class StatusError extends Error {
 4 |     constructor(title: string, description: string) {
 5 |         super(title + ' ' + description)
 6 | 
 7 |         this.title = title
 8 |         this.description = description
 9 |     }
10 | 
11 |     title?: string | null = null
12 |     description: string | null = null
13 | }
14 | 
15 | const fetchFromAPI = async ([arg, method]: [any, string]): Promise<any> => {
16 |     let response: any | null = null
17 | 
18 |     if(!arg) throw new Error('missing arg')
19 | 
20 |     switch(method) {
21 |         case 'trainVehicleCurrent':
22 |             response = await fetchTrainVehicle(arg[1], arg[0].toString())
23 |             break
24 | 
25 |         case 'trainVehicleHistory':
26 |             response = await fetchTrainHistory(arg[1], arg[0].toString())
27 |             break
28 | 
29 |         case 'autocomplete':
30 |             response = await fetchAutoComplete(arg[0])
31 |             break
32 | 
33 |         case 'trainTrips':
34 |             response = await fetchTrainTrip(arg[1], arg[0], arg[2])
35 |             break
36 | 
37 |         case 'coach':
38 |             response = await fetchCoach(arg[0])
39 |             break
40 | 
41 |         default:
42 |             throw new Error('invalid method')
43 |     }
44 | 
45 |     if(!response ||
46 |         (Array.isArray(response) && response.length === 0)) {
47 |         throw new StatusError('404', 'Nichts gefunden')
48 |     } else if(typeof response.errors?.length === 'number' && response.errors.length > 0) {
49 |         throw new StatusError(response.errors[0].message, `Error Code: ${response.errors[0].error_code}`)
50 |     } else if(typeof response.error === 'string') {
51 |         throw new StatusError(response.error, `Error Code: ${response.error_code}`)
52 |     }
53 | 
54 |     return response
55 | }
56 | 
57 | export default fetchFromAPI
58 | 


--------------------------------------------------------------------------------
/util/graphql.ts:
--------------------------------------------------------------------------------
  1 | import { GRAPHQL_URL } from './constants'
  2 | 
  3 | const TrainVehicleQuery = `
  4 |     query Query($trainType: String!, $query: String!) {
  5 |         train_vehicle(train_type: $trainType, q: $query) {
  6 |             train_type
  7 |             train_vehicle_name
  8 |             train_vehicle_number
  9 |             building_series
 10 |             building_series_name
 11 |             trips(limit: 5, ignore_finished_trips: true) {
 12 |                 destination_station
 13 |                 origin_station
 14 |                 initial_departure
 15 |                 bahn_expert
 16 |                 train_number
 17 |                 train_type
 18 |                 stops {
 19 |                     arrival
 20 |                     departure
 21 |                     cancelled
 22 |                     scheduled_arrival
 23 |                     scheduled_departure
 24 |                     station
 25 |                 }
 26 |             }
 27 |         }
 28 |     }
 29 | `
 30 | 
 31 | const TrainHistoryQuery = `
 32 |     query Query($trainType: String!, $query: String!) {
 33 |         train_vehicle(train_type: $trainType, q: $query) {
 34 |             train_type
 35 |             train_vehicle_number
 36 |             building_series
 37 |             trips(limit: 499) {
 38 |                 destination_station
 39 |                 origin_station
 40 |                 initial_departure
 41 |                 train_number
 42 |                 train_type
 43 |             }
 44 |         }
 45 |     }
 46 | `
 47 | 
 48 | const AutoCompleteQuery = `
 49 |     query Query($query: String!) {
 50 |         autocomplete(q: $query) {
 51 |             guess
 52 |             type
 53 |             train_type
 54 |         }
 55 |     }
 56 | `
 57 | 
 58 | const TrainTripQuery = `
 59 |     query Query($trainType: String!, $trainNumber: Int!, $initialDeparture: DateTime) {
 60 |         train_trip(train_type: $trainType, train_number: $trainNumber, limit: 1, initial_departure: $initialDeparture) {
 61 |             train_type
 62 |             train_number
 63 |             origin_station
 64 |             destination_station
 65 |             bahn_expert
 66 |             initial_departure
 67 |             stops {
 68 |                 station
 69 |                 cancelled
 70 |                 scheduled_arrival
 71 |                 scheduled_departure
 72 |                 arrival
 73 |                 departure
 74 |             }
 75 |             train_vehicles {
 76 |                 train_vehicle_number
 77 |                 train_vehicle_name
 78 |                 building_series
 79 |                 train_type
 80 |             }
 81 |         }
 82 |     }
 83 | `
 84 | 
 85 | const CoachQuery = `
 86 |     query Query($uic: String!) {
 87 |         coach(uic: $uic) {
 88 |             index
 89 |             class
 90 |             type
 91 |             uic
 92 |             category
 93 |             coach_sequence {
 94 |                 train_vehicle {
 95 |                     train_vehicle_number
 96 |                     train_vehicle_name
 97 |                     train_type
 98 |                 }
 99 |             }
100 |             coach_links {
101 |                 trip {
102 |                     train_type
103 |                     train_number
104 |                     origin_station
105 |                     destination_station
106 |                     initial_departure
107 |                     bahn_expert
108 |                     stops {
109 |                         cancelled
110 |                         station
111 |                         scheduled_departure
112 |                         departure
113 |                         scheduled_arrival
114 |                         arrival
115 |                     }
116 |                 }
117 |             }
118 |         }
119 |     }
120 | `
121 | 
122 | async function fetchFromGraphQL(query: string, variables: { [key: string]: string | number | undefined }, key: string) {
123 |     const response = await fetch(GRAPHQL_URL, {
124 |         method: 'POST',
125 |         headers: {
126 |             'content-type': 'application/json',
127 |         },
128 |         body: JSON.stringify({
129 |             query,
130 |             variables,
131 |             operationName: 'Query',
132 |         }),
133 |     })
134 | 
135 |     const json = await response.json()
136 | 
137 |     if(!response.ok || json.errors) {
138 |         return json
139 |     }
140 | 
141 |     return json.data[key]
142 | }
143 | 
144 | export function fetchTrainVehicle(trainType: string, query: string) {
145 |     return fetchFromGraphQL(TrainVehicleQuery, { trainType, query }, 'train_vehicle')
146 | }
147 | 
148 | export function fetchTrainHistory(trainType: string, query: string) {
149 |     return fetchFromGraphQL(TrainHistoryQuery, { trainType, query }, 'train_vehicle')
150 | }
151 | 
152 | export function fetchAutoComplete(query: string) {
153 |     return fetchFromGraphQL(AutoCompleteQuery, { query }, 'autocomplete')
154 | }
155 | 
156 | export function fetchTrainTrip(trainType: string, trainNumber: number, initialDeparture: string | null) {
157 |     const initialDepartureObject = initialDeparture ? { initialDeparture } : {}
158 | 
159 |     return fetchFromGraphQL(TrainTripQuery, { trainType, trainNumber, ...initialDepartureObject }, 'train_trip')
160 | }
161 | 
162 | export function fetchCoach(uic: string) {
163 |     return fetchFromGraphQL(CoachQuery, { uic }, 'coach')
164 | }
165 | 


--------------------------------------------------------------------------------
/util/hooks.ts:
--------------------------------------------------------------------------------
 1 | import useSWR from 'swr'
 2 | import fetchFromAPI from './dataFetcher'
 3 | import { AutoCompleteSuggestion, TrainTrip, TrainType, TrainVehicle, Coach } from './commonTypes'
 4 | import { useEffect, useState } from 'react'
 5 | 
 6 | export function useTrainVehicleCurrent(tzn: string | number | null, trainType: TrainType) {
 7 |     const { data, error } = useSWR([[tzn, trainType], 'trainVehicleCurrent'], fetchFromAPI)
 8 | 
 9 |     return { data: data as (TrainVehicle | undefined), error }
10 | }
11 | 
12 | export function useTrainVehicleHistory(tzn: string | number | null, trainType: TrainType) {
13 |     const { data, error } = useSWR([[tzn, trainType], 'trainVehicleHistory'], fetchFromAPI)
14 | 
15 |     return { data: data as (TrainVehicle | undefined), error }
16 | }
17 | 
18 | export function useAutoComplete(query: string | null) {
19 |     const { data, error } = useSWR(query ? [[query], 'autocomplete'] : null, fetchFromAPI)
20 | 
21 |     return { data: data as (AutoCompleteSuggestion[] | undefined), error }
22 | }
23 | 
24 | export function useTrainTrips(trainNumber: number, trainType: TrainType, initialDeparture: string | null) {
25 |     const { data, error } = useSWR([[trainNumber, trainType, initialDeparture], 'trainTrips'], fetchFromAPI)
26 | 
27 |     return { data: data as (TrainTrip[] | undefined), error }
28 | }
29 | 
30 | export function useCoach(uic: string) {
31 |     const { data, error } = useSWR([[uic], 'coach'], fetchFromAPI)
32 | 
33 |     return { data: data as (Coach[] | null), error }
34 | }
35 | 
36 | export function useRerenderPeriodically(interval: number) {
37 |     const [,setMillis] = useState(0)
38 | 
39 |     useEffect(() => {
40 |         const id = setInterval(() => setMillis(performance.now()), interval)
41 | 
42 |         return () => clearInterval(id)
43 |     }, [interval])
44 | }
45 | 


--------------------------------------------------------------------------------
/util/registerServiceWorker.ts:
--------------------------------------------------------------------------------
 1 | setTimeout(() => {
 2 |     if(typeof navigator !== 'undefined' 
 3 |         && navigator.serviceWorker
 4 |         && window.location.hostname !== 'localhost'
 5 |         && window.location.hostname !== '127.0.0.1') {
 6 |         navigator.serviceWorker.register('/sw.js')
 7 |     }
 8 | }, 1000)
 9 | 
10 | export {}
11 | 


--------------------------------------------------------------------------------
/util/theme.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | 
 3 | const THEME_STORAGE_KEY = 'regenbogenICEThemeColor'
 4 | export const DEFAULT_COLOR = '#FF007A'
 5 | 
 6 | export function useThemeColor(): [string, boolean, (newThemeColor: string) => void] {
 7 |     const [themeColor, setThemeColor] = useState(DEFAULT_COLOR)
 8 |     const [transitionThemeColor, setTransitionThemeColor] = useState(false)
 9 | 
10 |     useEffect(() => {
11 |         const storedThemeColor = window.localStorage.getItem(THEME_STORAGE_KEY)
12 |         
13 |         if(storedThemeColor) {
14 |             setTransitionThemeColor(false)
15 |             setThemeColor(storedThemeColor)
16 |         }
17 |     }, [])
18 | 
19 |     function changeThemeColor(newThemeColor: string) {
20 |         setTransitionThemeColor(true)
21 |         setThemeColor(newThemeColor)
22 | 
23 |         window.localStorage.setItem(THEME_STORAGE_KEY, newThemeColor)
24 |     }
25 | 
26 |     return [themeColor, transitionThemeColor, changeThemeColor]
27 | }
28 | 


--------------------------------------------------------------------------------
/util/tracking.ts:
--------------------------------------------------------------------------------
 1 | import { init as initSentry } from '@sentry/react'
 2 | import { create as ackeeCreate } from 'ackee-tracker'
 3 | 
 4 | function initTracking() {
 5 |     if(process.env.NEXT_PUBLIC_SENTRY_DSN) {
 6 |         initSentry({
 7 |             dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 8 |             tracesSampleRate: 1.0,
 9 |             environment: process.env.NEXT_PUBLIC_ENV, 
10 |         })
11 |     }
12 |     
13 |     if(process.env.NEXT_PUBLIC_ACKEE_UUID) {
14 |         ackeeCreate('https://ackee.adridoesthings.com', { detailed: true }).record(process.env.NEXT_PUBLIC_ACKEE_UUID)
15 |     }
16 |     
17 | }
18 | 
19 | if(typeof window !== 'undefined') {
20 |     initTracking()
21 | }
22 | 


--------------------------------------------------------------------------------
/util/trainDataUtil.ts:
--------------------------------------------------------------------------------
 1 | import { TrainTrip, TrainTripWithStops, TrainType, TrainVehicle } from './commonTypes'
 2 | import { DateTime } from 'luxon'
 3 | import { RAINBOW_NAME, RAINBOW_TZN } from './constants'
 4 | 
 5 | export function findCurrentTrip(trainVehicle: TrainVehicle) {
 6 |     const trips = trainVehicle.trips
 7 | 
 8 |     for(let i = trips.length - 1; i >= 0; i--) {
 9 |         const trip = trips[i]
10 | 
11 |         if(isTripOver(trip, 3)) {
12 |             continue
13 |         }
14 | 
15 |         return trip
16 |     }
17 | 
18 |     return trips[0]
19 | }
20 | 
21 | export function getTrainTripWithStops(trip: TrainTrip) {
22 |     if(!trip?.stops?.length) return null
23 | 
24 |     return trip as TrainTripWithStops
25 | }
26 | 
27 | export function getTrainTripsWithStops(trips: TrainTrip[]) {
28 |     return trips.map(getTrainTripWithStops).filter(trip => trip !== null)
29 | }
30 | 
31 | export function isTripOver(trip: TrainTrip, bufferMinutes = 0) {
32 |     if(!trip.stops?.length) return true
33 | 
34 | 
35 |     const arrivalTimeString = trip.stops[trip.stops.length - 1].arrival
36 |     const arrivalTime = DateTime.fromISO(arrivalTimeString!)
37 | 
38 |     return arrivalTime < DateTime.now().minus(1000 * 60 * bufferMinutes)
39 | }
40 | 
41 | export function hasTripStarted(trip: TrainTrip) {
42 |     if(!trip.stops) return true
43 | 
44 |     const departureTimeString = trip.stops[0].departure
45 |     const departureTime = DateTime.fromISO(departureTimeString!)
46 | 
47 |     return departureTime < DateTime.now()
48 | }
49 | 
50 | export function generateTripHeadline(trip: TrainTrip, includeName = true) {
51 |     const suffix = includeName ? ` als ${trip.train_type} ${trip.train_number}` : ''
52 | 
53 |     if(!trip.stops?.length) {
54 |         let dateSentence = ''
55 |         if(trip.initial_departure) {
56 |             const trainDate = DateTime.fromISO(trip.initial_departure).toFormat('dd.MM.yyyy')
57 |             dateSentence = ' am ' + trainDate
58 |         }
59 | 
60 |         return `Zug zuletzt gefunden${dateSentence}${suffix}`
61 |     }
62 | 
63 |     if(isTripOver(trip)) {
64 |         const arrival = DateTime.fromISO(trip.stops[trip.stops.length - 1].arrival!)
65 |         const timeSinceArrival = arrival.toRelative({ locale: 'de' })
66 | 
67 |         return `Zuletzt unterwegs ${timeSinceArrival}${suffix}`
68 |     }
69 |     
70 |     if(!hasTripStarted(trip)) {
71 |         const departure = DateTime.fromISO(trip.stops[0].departure!)
72 |         const timeUntilDeparture = 'In ' + departure.toRelative({ locale: 'de' })!.substring(3)
73 | 
74 |         return `${timeUntilDeparture} unterwegs${suffix}`
75 |     }
76 |     
77 |     return `Gerade unterwegs${suffix}`
78 | }
79 | 
80 | export function getTrainTripLink(train_type: TrainType, train_number: number, initialDeparture?: string) {
81 |     const initialDepartureParameter = initialDeparture ? `?initialDeparture=${encodeURIComponent(initialDeparture)}` : ''
82 |     return `/trip/${encodeURIComponent(train_type)}/${encodeURIComponent(train_number)}${initialDepartureParameter}`
83 | }
84 | 
85 | export function getTrainVehicleLink(train_type: TrainType, tzn: string) {
86 |     if(train_type === 'ICE' && (tzn === RAINBOW_NAME || tzn === RAINBOW_TZN.toString())) {
87 |         return '/'
88 |     }
89 | 
90 |     return `/vehicle/${encodeURIComponent(train_type)}/${encodeURIComponent(tzn)}`
91 | }
92 | 
93 | export function getCoachLink(uic: string) {
94 |     return `/coach/${encodeURIComponent(uic)}`
95 | }
96 | 


--------------------------------------------------------------------------------