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-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>