toos-halloween/toos-dashboard/src/App.vue

<template>
  <div class="w-full flex h-screen bg-neutral-950">
    <Sidebar @updateCurrentPage="setCurrentPage" />
    <div class="w-full">
      <Status />
      <Main v-if="currentPage === 0" />
      <Conf v-if="currentPage === 1" />
      <Test v-if="currentPage === 2" />
    </div>
    <audio id="audioContainer">
      <source src="./assets/audio.mp3" type="audio/mp3">
    </audio>
  </div>
</template>

<script setup>
import Sidebar from "./components/Sidebar.vue";
import Test from "./components/Test.vue";
import Main from "./components/Main.vue";
import Conf from "./components/Conf.vue";
import Status from "./components/Status.vue";

import { ref, onMounted } from "vue";
import { listen } from '@tauri-apps/api/event';
import { invoke } from "@tauri-apps/api/tauri"
import { useLocalStorage } from '@vueuse/core'

const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600, open: false })

const currentPage = ref(2);

const setCurrentPage = (x) => {
  currentPage.value = x;
}

onMounted(async () => {
  await invoke('close_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
  serialConfig.value.open = false;

  await listen('port-state', (event) => {
    serialConfig.value.open = event.payload.open
  });
})
</script>