From bbdf19bcb01f73e530edd88fb66ded307f75d15a Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Sat, 30 Mar 2024 23:13:00 -0700
Subject: [PATCH] static screen setup

---
 src-tauri/tauri.conf.json                 |  7 ++++++-
 src/components/Navbar.vue                 | 14 +++++++++++---
 src/router/index.js                       |  8 ++++----
 src/views/CamFocus.vue                    | 21 ++++++++++++++++++++-
 src/views/{fourCam.vue => HomeScreen.vue} |  0
 src/views/StaticScreen.vue                | 20 ++++++++++++++++++++
 6 files changed, 61 insertions(+), 9 deletions(-)
 rename src/views/{fourCam.vue => HomeScreen.vue} (100%)
 create mode 100644 src/views/StaticScreen.vue

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 1bf9893..ce2965e 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -37,9 +37,14 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "Interface",
+        "title": "Camera Screen",
         "width": 800,
         "height": 600
+      },
+      {
+        "label": "StaticScreen",
+        "title": "Over View",
+        "url": "http://localhost:4000/#/1"
       }
     ]
   }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 494a502..a05f8d1 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -12,7 +12,15 @@ export default {
     toggleNavbar() {
       this.isNavbarOpen = !this.isNavbarOpen;
     }
-  }
+  },
+  openNewWindow() {
+      // Open a new window with specified URL
+      if (window.tauri) {
+        window.tauri.open('/');
+      } else {
+        console.error('Tauri API is not available.');
+      }
+    }
 };
 </script>
 
@@ -71,8 +79,8 @@ export default {
         <ul style="list-style-type: none; padding-left: 0;">
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
-          <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
+          <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
+          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>
diff --git a/src/router/index.js b/src/router/index.js
index 89aafba..229d6be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,14 @@
 import { createRouter, createWebHashHistory } from "vue-router"
-import fourCam from "../views/fourCam.vue";
-import Cam1Focus from "../views/Cam1Focus.vue";
+import HomeScreen from "../views/HomeScreen.vue";
+import StaticScreen from "../views/StaticScreen.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
 import CamFocus from "../views/CamFocus.vue";
 import test from "../views/test.vue";
 
 
 const routes = [
-  { path: '/', component: fourCam },
-  { path: '/1', component: Cam1Focus },
+  { path: '/', component: HomeScreen },
+  { path: '/1', component: StaticScreen },
   { path: '/2', component: Cam2Focus },
   { path: '/CamFocus/:id', component: CamFocus },
   { path: '/test', component: test },
diff --git a/src/views/CamFocus.vue b/src/views/CamFocus.vue
index 98344d9..f313f30 100644
--- a/src/views/CamFocus.vue
+++ b/src/views/CamFocus.vue
@@ -9,7 +9,11 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
 
 <template>
     <div class="camera-container">
-        <Camera :cameraID=cameraID />
+        <div class="camera-wrapper">
+            <router-link to="/" class="back">Back</router-link>
+            <Camera :cameraID="cameraID" />
+            <!-- Back button -->
+        </div>
     </div>
 </template>
   
@@ -21,4 +25,19 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
     justify-content: center; /* Center the child element horizontally */
     align-items: center; /* Center the child element vertically */
 }
+.camera-wrapper {
+    position: relative; /* For positioning the button relative to the camera */
+    height: 100%; 
+    width: 100%;
+}
+.back {
+    position: absolute; /* Position the button relative to the container */
+    top: 10px;
+    left: 10px; 
+    padding: 5px 10px;
+    border: none;
+    background-color: lightgray;
+    color: black;
+    cursor: pointer;
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/fourCam.vue b/src/views/HomeScreen.vue
similarity index 100%
rename from src/views/fourCam.vue
rename to src/views/HomeScreen.vue
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
new file mode 100644
index 0000000..67a7436
--- /dev/null
+++ b/src/views/StaticScreen.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+       this is static screen
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>
\ No newline at end of file