From 23bf4790df6b393cafbbce2a1c0c070d5f0dd929 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 28 Feb 2024 16:07:44 +0800
Subject: [PATCH] add 2 extra pages

---
 src/AlertListScreen.vue   | 18 ++++++++++++++++++
 src/App.vue               |  9 +++++++--
 src/MainScreen.vue        | 18 ++++++++++++++++++
 src/utils/useWebsocket.js |  3 ++-
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 src/AlertListScreen.vue
 create mode 100644 src/MainScreen.vue

diff --git a/src/AlertListScreen.vue b/src/AlertListScreen.vue
new file mode 100644
index 0000000..cdb87ae
--- /dev/null
+++ b/src/AlertListScreen.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { ref, onMounted } from "vue";
+</script>
+
+<template>
+  <main class="alertlist-screen">
+    <h1 style="color: red">alert list</h1>
+  </main>
+</template>
+
+<style scoped>
+.alertlist-screen {
+  background: #e6e6e6;
+  height: 100vh;
+  width: 100vw;
+  display: inline-block;
+}
+</style>
diff --git a/src/App.vue b/src/App.vue
index 652ae79..94871f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,20 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
+import MainScreen from "./MainScreen.vue";
+import AlertListScreen from "./AlertListScreen.vue";
 // import Slider from "./components/Slider.vue";
 import useWebsocket from "./utils/useWebsocket";
 import { useWsStore } from "./store";
 const store = useWsStore();
 
+const excludePaths = ["/alert-list", "/main-screen"];
 // use websocket
 let urlPath = ref(document.location.pathname);
 if (urlPath.value === "/") {
   urlPath.value = "/1-1";
 }
-useWebsocket(store, urlPath.value);
+useWebsocket(store, urlPath.value, excludePaths);
 
 // size setting
 // const size = ref(80);
@@ -33,8 +36,10 @@ useWebsocket(store, urlPath.value);
 
 <template>
   <div id="app-container">
-    <MainPage :path="urlPath" />
     <!-- <Slider :size="size" @size-change="setSize" /> -->
+    <MainPage v-if="!excludePaths.includes(urlPath)" :path="urlPath" />
+    <MainScreen v-if="urlPath == '/main-screen'" />
+    <AlertListScreen v-if="urlPath == '/alert-list'" />
   </div>
 </template>
 
diff --git a/src/MainScreen.vue b/src/MainScreen.vue
new file mode 100644
index 0000000..38f2bf9
--- /dev/null
+++ b/src/MainScreen.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { ref, onMounted } from "vue";
+</script>
+
+<template>
+  <main class="main-screen">
+    <h1>main screen</h1>
+  </main>
+</template>
+
+<style scoped>
+.main-screen {
+  background: #e6e6e6;
+  height: 100vh;
+  width: 100vw;
+  display: inline-block;
+}
+</style>
diff --git a/src/utils/useWebsocket.js b/src/utils/useWebsocket.js
index 7e96d21..e6896f5 100644
--- a/src/utils/useWebsocket.js
+++ b/src/utils/useWebsocket.js
@@ -1,6 +1,7 @@
 import Client from "./ws";
 
-export default function useWebsocket(store, path) {
+export default function useWebsocket(store, path, excludePaths = []) {
+  if (excludePaths.includes(path)) return;
   // connect0(store);
   connectPath(store, path);
 }