From 3ba58ef165331140e4d668bf78394bf4d0e41a75 Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Sat, 30 Mar 2024 22:24:23 -0700
Subject: [PATCH] Generalize components for reusablilty: FocusCam, FourCam

---
 src/App.vue               | 36 ------------------------------------
 src/components/Camera.vue |  8 ++++----
 src/router/index.js       |  2 ++
 src/views/CamFocus.vue    | 24 ++++++++++++++++++++++++
 src/views/fourCam.vue     | 31 ++++++++++++++++++++++---------
 5 files changed, 52 insertions(+), 49 deletions(-)
 create mode 100644 src/views/CamFocus.vue

diff --git a/src/App.vue b/src/App.vue
index 9eb8283..e094329 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
-import Camera from "./components/Camera.vue";
 import { RouterView } from "vue-router";
 </script>
 
@@ -12,38 +8,6 @@ import { RouterView } from "vue-router";
     <Navbar/>
   </div>
   <RouterView/>
-  <!-- <div class="container">
-    <h1>Welcome to Tauri!</h1>
-    <div class="row">
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-      </a>
-      <a href="https://tauri.app" target="_blank">
-        <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
-
-    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
-
-    <p>
-      Recommended IDE setup:
-      <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-      +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-      +
-      <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank"
-        >Tauri</a
-      >
-      +
-      <a href="https://github.com/rust-lang/rust-analyzer" target="_blank"
-        >rust-analyzer</a
-      >
-    </p>
-
-  </div> -->
 </template>
 
 <style scoped>
diff --git a/src/components/Camera.vue b/src/components/Camera.vue
index 9b28d62..d537daa 100644
--- a/src/components/Camera.vue
+++ b/src/components/Camera.vue
@@ -1,6 +1,6 @@
   <script>
   export default {
-    props: ['cameraNumber'],
+    props: ['cameraID'],
     data() {
       return {
         localIp: 'http://localhost', //maybe change accordingly .env?
@@ -25,15 +25,15 @@
       //     console.error('Error accessing camera:', error);
       //   }
       // },
-        getCameraImageUrl(cameraNumber) {
-          return `${this.localIp}:${this.port}/${this.cameraUrls[cameraNumber]}`;
+        getCameraImageUrl(cameraID) {
+          return `${this.localIp}:${this.port}/${this.cameraUrls[cameraID]}`;
       }
     }
   };
   </script>
   <template>
     <div class="box video-section">
-        <img :src="getCameraImageUrl(cameraNumber)" class="video-image">
+        <img :src="getCameraImageUrl(cameraID)" class="video-image">
     </div>
   </template>
   <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 5b56169..89aafba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router"
 import fourCam from "../views/fourCam.vue";
 import Cam1Focus from "../views/Cam1Focus.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
+import CamFocus from "../views/CamFocus.vue";
 import test from "../views/test.vue";
 
 
@@ -9,6 +10,7 @@ const routes = [
   { path: '/', component: fourCam },
   { path: '/1', component: Cam1Focus },
   { 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
new file mode 100644
index 0000000..98344d9
--- /dev/null
+++ b/src/views/CamFocus.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const cameraID = Number(route.params.id); // Assuming we're using camera Number 
+
+</script>
+
+<template>
+    <div class="camera-container">
+        <Camera :cameraID=cameraID />
+    </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
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
index dff8af1..7e80247 100644
--- a/src/views/fourCam.vue
+++ b/src/views/fourCam.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import Battery from '../components/VehicleStatus/Battery.vue';
 import Connection from '../components/VehicleStatus/Connection.vue';
-
 import Camera from "../components/Camera.vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const handleClick = (cameraID:number) => {
+  console.log("camera:" , cameraID);
+  router.push(`/CamFocus/${cameraID}`);}
 </script>
 
+
+
 <template>
     <div class="grid">
-        <div style="position: relative; display: flex;">
-            <Camera :cameraNumber="2"/>
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(2)">
+            <Camera :cameraID="2"/>
             <Battery :percentage=85 :charging="false" class="battery_test"/>
             <Connection :latency=65 class="connection_test"/>   
             <!-- the Battery and Connection component's size is dependent on its parent element. So changing 'status_div' size will change their size-->
@@ -18,8 +27,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
-            <Camera :cameraNumber="2"/>
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
+            <Camera :cameraID="1"/>
             <Battery :percentage=12 :charging="false" class="battery_test"/>
             <Connection :latency=3 class="connection_test"/>  
             <!-- <div class="status_div">
@@ -28,8 +37,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
-            <Camera :cameraNumber="2"/>
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
+            <Camera :cameraID="1"/>
             <Battery :percentage=46 :charging="false" class="battery_test"/>
             <Connection :latency=82 class="connection_test"/>   
             <!-- <div class="status_div">
@@ -38,8 +47,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
-            <Camera :cameraNumber="1"/>
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
+            <Camera :cameraID="1"/>
             <Battery :percentage=0 :charging="false" class="battery_test"/>
             <Connection :latency=5 class="connection_test"/>   
             <!-- <div class="status_div">
@@ -83,4 +92,8 @@ it directly in their file component's style*/
     top: 1%;
     left: 9.5%;
   }
+
+  .hover{
+    cursor: pointer;
+  }
 </style>
\ No newline at end of file