Merge branch 'main' into patrick-map

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  'env': {
+    'es2021': true
+  },
+  'extends': [
+    'eslint:recommended',
+    'plugin:svelte/recommended',
+    'plugin:prettier/recommended'
+  ],
+  'parser': '@typescript-eslint/parser',
+  'parserOptions': {
+    'project': './tsconfig.json',
+    'extraFileExtensions': ['.svelte']
+  },
+  'overrides': [
+    {
+      'files': ['*.svelte'],
+      'parser': 'svelte-eslint-parser',
+      'parserOptions': {
+        'parser': '@typescript-eslint/parser'
+      }
+    }
+  ],
+  'rules': {
+    'no-undef': 'off',
+    "svelte/valid-compile": [
+      "warn",
+    ],
+  },
+}

.github/workflows/lint.yml

@@ -0,0 +1,19 @@
+name: Lint Code
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - run: npm install
+      - run: npm run lint

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "prettier-plugin-svelte"
+  ]
+}

App_Resources/iOS/Info.plist

@@ -46,6 +46,8 @@
     <key>UIBackgroundModes</key>
     <array>
       <string>location</string>
+      <string>audio</string>
+      <string>fetch</string>
     </array>
   </dict>
 </plist>

app/App.svelte

@@ -5,14 +5,15 @@
 
   import { tabIndex } from "~/stores";
 </script>
+
 <rootLayout backgroundColor="black">
   <tabView androidTabsPosition="bottom" bind:selectedIndex={$tabIndex}>
-    <tabViewItem title="Reise planen">
+    <tabViewItem title="Planung">
       <frame id="tabPlanJourney">
         <PlanJourney />
       </frame>
     </tabViewItem>
-    <tabViewItem title="Live Ansicht">
+    <tabViewItem title="Begleitung">
       <frame>
         <LiveView />
       </frame>

app/api/index.ts

@@ -1 +1 @@
-export * from './routes';
+export * from "./routes";

app/api/routes.ts

@@ -1,4 +1,4 @@
-import { Http } from '@nativescript/core';
+import { Http } from "@nativescript/core";
 
 type GetRouteOptions = {
   origin: string;
@@ -33,8 +33,8 @@ type TimeAndPlace = {
 };
 
 type RouteApiGetParams = {
-  origin: LatLng,
-  destination: LatLng,
+  origin: LatLng;
+  destination: LatLng;
   arrivalTime?: Date;
   departureTime?: Date;
   lang?: string;
@@ -47,7 +47,27 @@ type RouteApiGetParams = {
 };
 
 // @see https://developer.here.com/documentation/intermodal-routing/dev_guide/concepts/modes.html
-export type HereApiTransportMode = 'highSpeedTrain' | 'intercityTrain' | 'interRegionalTrain' | 'regionalTrain' | 'cityTrain' | 'bus' | 'ferry' | 'subway' | 'lightRail' | 'privateBus' | 'inclined' | 'aerial' | 'busRapid' | 'monorail' | 'flight' | 'walk' | 'car' | 'bicycle' | 'pedestrian' | string;
+export type HereApiTransportMode =
+  | "highSpeedTrain"
+  | "intercityTrain"
+  | "interRegionalTrain"
+  | "regionalTrain"
+  | "cityTrain"
+  | "bus"
+  | "ferry"
+  | "subway"
+  | "lightRail"
+  | "privateBus"
+  | "inclined"
+  | "aerial"
+  | "busRapid"
+  | "monorail"
+  | "flight"
+  | "walk"
+  | "car"
+  | "bicycle"
+  | "pedestrian"
+  | string;
 
 export type HereApiRoute = {
   id: string;
@@ -59,7 +79,7 @@ export type HereApiRoute = {
     summary?: {
       duration: number;
       length: number;
-    }
+    };
     actions?: Array<{
       action: string;
       duration: number;
@@ -85,11 +105,11 @@ export type HereApiRoute = {
       textColor?: string;
       headsign?: string;
       shortName?: string;
-    },
+    };
     intermediateStops?: Array<{
       departure: TimeAndPlace;
       duration?: number;
-    }>,
+    }>;
     agency?: {
       id: string;
       name: string;
@@ -101,7 +121,7 @@ export type HereApiRoute = {
     name: string;
     website: string;
   };
-}
+};
 
 export type RouteApiGetResponse = {
   routes: Array<HereApiRoute>;
@@ -111,10 +131,8 @@ export type RouteApiGetResponse = {
   }>;
 };
 
-
 export const routeApi = {
   get: async (params: RouteApiGetParams) => {
-
     const routeOptions: GetRouteOptions = {
       ...params,
       origin: `${params.origin.lat},${params.origin.lng}`,
@@ -123,32 +141,33 @@ export const routeApi = {
       departureTime: params.departureTime?.toISOString() ?? undefined,
     };
 
-    Object.keys(routeOptions).forEach(key => {
+    Object.keys(routeOptions).forEach((key) => {
       if (routeOptions[key as keyof typeof routeOptions] === undefined) {
         delete routeOptions[key as keyof typeof routeOptions];
       }
     });
 
     const response = await Http.request({
-      url: process.env.BACKEND_SERVICE_ROUTE_URL ?? '',
-      method: 'POST',
+      url: process.env.BACKEND_SERVICE_ROUTE_URL ?? "",
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'return': 'actions,intermediate',
-        'lang': 'de-de',
-        ...routeOptions
+        "Content-Type": "application/json",
+        return: "actions,intermediate",
+        lang: "de-de",
+        ...routeOptions,
       },
     });
 
-    console.log('response', response);
+    console.log("response", response);
 
     if (response.statusCode !== 200 || !response.content) {
-      throw new Error(response.content?.toString())
+      throw new Error(response.content?.toString());
     }
 
-    const responseJson = JSON.parse(response.content.toString()) as RouteApiGetResponse;
+    const responseJson = JSON.parse(
+      response.content.toString(),
+    ) as RouteApiGetResponse;
 
     return responseJson.routes;
-  }
-}
-
+  },
+};

app/app.scss

@@ -8,7 +8,6 @@
 .ns-root {
   @include font-normal;
   font-size: var(--s);
-  background-color: var(--color-background);
 }
 
 .icon {
@@ -27,10 +26,3 @@ actionBar{
   padding-top: var(--l);
   padding-bottom: var(--l);
 }
-
-.main-layout {
-  padding-left: var(--xl);
-  padding-right: var(--xl);
-  padding-top: var(--l);
-  padding-bottom: var(--l);
-}

app/app.ts

@@ -4,8 +4,8 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first page.
 */
 
-import { svelteNativeNoFrame } from 'svelte-native'
+import { svelteNativeNoFrame } from "svelte-native";
 
-import App from './App.svelte'
+import App from "./App.svelte";
 
-svelteNativeNoFrame(App, {})
+svelteNativeNoFrame(App, {});

app/shared/components/Accordion.svelte

@@ -8,19 +8,24 @@
 </script>
 
 <stackLayout class="wrapper {customClass}">
-  <gridLayout columns="*,auto" rows="auto" on:tap="{toggle}">
+  <gridLayout columns="*,auto" rows="auto" on:tap={toggle}>
     <slot name="header" />
-    <button text={open ? 'expand_less' : 'expand_more'} class="icon fs-m" row={0} col={1} on:tap="{toggle}" />
+    <button
+      text={open ? "expand_less" : "expand_more"}
+      class="icon fs-m"
+      row={0}
+      col={1}
+      on:tap={toggle}
+    />
   </gridLayout>
 
   {#if open}
-  <stackLayout class="content">
-    <slot name="content">
-      <label text="No content" />
-    </slot>
-  </stackLayout>
+    <stackLayout class="content">
+      <slot name="content">
+        <label text="No content" />
+      </slot>
+    </stackLayout>
   {/if}
-
 </stackLayout>
 
 <style>
@@ -31,12 +36,11 @@
   }
 
   .content {
-    margin-top: var(--xs)
+    margin-top: var(--xs);
   }
 
   button {
     padding: var(--s);
     margin: calc(var(--s) * -1);
   }
 </style>
-

app/shared/components/BigButton.svelte

@@ -0,0 +1,51 @@
+<script type="ts">
+  export let icon = "";
+  $: hasIcon = icon !== "";
+  export let label = "Default Label";
+
+  export let selected = false;
+
+  let customClass = "";
+  export { customClass as class };
+</script>
+
+<gridLayout class="button {customClass}" class:selected>
+  <stackLayout orientation="horizontal" on:tap>
+    {#if hasIcon}
+      <label class="icon button-icon" text={icon} />
+    {/if}
+    <label class="button-text" text={label} />
+  </stackLayout>
+</gridLayout>
+
+<style lang="scss">
+  .button {
+    padding-left: calc(var(--base-s) * 24px);
+    padding-right: var(--s);
+    width: auto;
+    height: 150px;
+    border-color: var(--color-primary);
+    border-width: 2pt;
+    border-radius: calc(var(--base-s) * 5);
+    background-color: var(--color-background-light);
+    font-size: var(--m);
+  }
+
+  .button-icon {
+    color: var(--color-primary);
+    padding-right: calc(var(--base-s) * 8px);
+  }
+
+  .button-text {
+    padding-left: calc(var(--base-s) * 16px);
+  }
+
+  .button.selected {
+    background-color: var(--color-primary);
+    color: var(--color-background-light);
+
+    .button-icon {
+      color: var(--color-background-light);
+    }
+  }
+</style>