From 3034820bcea67865efcb26be32470f212b018ae8 Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Sun, 3 Mar 2024 00:43:12 -0800
Subject: [PATCH] polish camera views

---
 src/components/Camera.vue |  9 +++++----
 src/components/Navbar.vue |  4 ++++
 src/router/index.js       |  4 ++++
 src/views/Cam1Focus.vue   | 18 +++++++++++++-----
 src/views/Cam2Focus.vue   | 20 ++++++++++++++++++++
 5 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 src/views/Cam2Focus.vue

diff --git a/src/components/Camera.vue b/src/components/Camera.vue
index 7cb82f9..7fce0ee 100644
--- a/src/components/Camera.vue
+++ b/src/components/Camera.vue
@@ -33,16 +33,16 @@
   </script>
   <template>
     <div class="box video-section">
-        <img :src="getCameraImageUrl(cameraNumber)">
+        <img :src="getCameraImageUrl(cameraNumber)" class="video-image">
     </div>
   </template>
   <style scoped>
-  .app {
+  /* .app {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-  }
+  } */
   
   .video-section {
     width: 100%; 
@@ -51,9 +51,10 @@
     border: 2px solid #ccc; 
   }
   
-  .video-section video {
+  .video-image {
     width: 100%;
     height: 100%;
+    /* object-fit: contain; */
   }
   .box{
     border: 2px solid #030303; 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index a8d1425..f198508 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -28,7 +28,9 @@ export default {
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/1" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>
@@ -39,7 +41,9 @@ export default {
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 2</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/2" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>
diff --git a/src/router/index.js b/src/router/index.js
index caa285e..5b56169 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,14 @@
 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 test from "../views/test.vue";
 
 
 const routes = [
   { path: '/', component: fourCam },
+  { path: '/1', component: Cam1Focus },
+  { path: '/2', component: Cam2Focus },
   { path: '/test', component: test },
 ]
 
diff --git a/src/views/Cam1Focus.vue b/src/views/Cam1Focus.vue
index f2dbd6c..4535e1e 100644
--- a/src/views/Cam1Focus.vue
+++ b/src/views/Cam1Focus.vue
@@ -4,9 +4,17 @@ import Camera from "../components/Camera.vue";
 </script>
 
 <template>
-    <div class="grid">
-        <div>
-            <Camera :cameraNumber="1"/>
-        </div>
+    <div class="camera-container">
+        <Camera :cameraNumber="1" />
     </div>
-</template>
\ No newline at end of file
+</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/Cam2Focus.vue b/src/views/Cam2Focus.vue
new file mode 100644
index 0000000..fd80919
--- /dev/null
+++ b/src/views/Cam2Focus.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+        <Camera :cameraNumber="2" />
+    </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