jankboard/client/src/App.svelte

<script lang="ts">
  import '@fontsource/roboto/latin.css'
  import 'material-icons/iconfont/material-icons.css'
  import Dashboard from './lib/Dashboard/Dashboard.svelte'
  import 'material-symbols'
  import AppBar from './lib/Apps/AppBar.svelte'
  import { appList } from './lib/Apps/appList'
  import { initializeTelemetry } from './lib/utils/initializeTelemetry'
  import { onMount } from 'svelte'
  import { Toaster } from 'svelte-french-toast'
  import { initializationSequence } from './lib/Sequences/sequences'
  import Loading from './lib/Loading/Loading.svelte'
  import { settingsStore } from './lib/stores/settingsStore'
  import getSettings from './lib/utils/getSettings'
  import { Svrollbar } from 'svrollbar'

  let activeApp: App = 'camera'
  let topics: TelemetryTopics = {
    doubles: [
      'orientation',
      'chassis-x-speed',
      'chassis-y-speed',
      'accx',
      'accy',
      'accz',
      'jerk-x',
      'jerk-y',
      'voltage',
    ],
    strings: ['acc-profile', 'gear'],
    booleans: ['ebrake', 'reorient', 'gpws'],
  }

  let loading = $settingsStore.fastStartup ? false : true

  onMount(() => {
    let savedSettings = getSettings()
    if (savedSettings !== false) {
      settingsStore.set(savedSettings)
    }
    initializeTelemetry(topics, 200)
    setTimeout(() => {
      loading = false
      initializationSequence()
    }, 3000)
  })

  let infotainmentViewport: Element
  let infotainmentContent: Element
</script>

<Svrollbar />

<main
  class="select-none transition-opacity duration-300 overflow-x-hidden"
  class:opacity-0={loading}
>
  <!-- driver dashboard -->
  <div class="h-screen w-[35vw] fixed shadow-lg shadow-slate-800 z-10">
    <Dashboard />
  </div>
  <!-- the infotainment system -->
  <Svrollbar viewport={infotainmentViewport} contents={infotainmentContent} />
  <div
    class="min-h-screen w-[65vw] right-0 absolute infotainment-container overflow-x-hidden"
    bind:this={infotainmentViewport}
  >
    <!-- dynamic app system (edit appList.ts to add new apps) -->
    <div class="mx-10 mt-10 overflow-x-hidden" bind:this={infotainmentContent}>
      <svelte:component this={appList[activeApp].component} />
    </div>
    <div
      class="fixed w-[65vw] flex justify-center right-0 bottom-0 mb-4 overflow-x-hidden"
    >
      <AppBar bind:activeApp {appList} />
    </div>
  </div>

  <!-- toast service -->
</main>

{#if loading}
  <Loading />
{/if}

<Toaster />

<style lang="postcss">
  main {
    font-family: 'Roboto', sans-serif;
  }

  .infotainment-container {
    background: #2c3e50; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #2c3e50,
      #fd746c
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #2c3e50,
      #fd746c
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .infotainment-container::-webkit-scrollbar {
    /* hide scrollbar */
    display: none;
  }
</style>