Merge branch 'main' of https://github.com/longmetal7127/scouting2024

longmetal7127 · Feb 26, 2024 · 51b91d1 · 51b91d1
2 parents bbab251 + 62ccd83
commit 51b91d1
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,25 @@
 </head>
 
 <body>
-
+	<script>
+		async function registerServiceWorker() {
+		  if ("serviceWorker" in navigator) {
+			try {
+			  const registration = await navigator.serviceWorker.register(
+				"sw.js"
+			  );
+			  console.log(
+				"Service Worker registered with scope:",
+				registration.scope
+			  );
+			} catch (error) {
+			  console.error("Service Worker registration failed:", error);
+			}
+		  }
+		}
+
+		registerServiceWorker();
+	  </script>
 	<nav>
 		<div class = "heading">
 			<h1>Longmetal 7127 4</h1>
@@ -36,7 +54,7 @@ <h1>Longmetal 7127 4</h1>
  <header>
 	<h1>Teams</h1>
 	<form id="new-team-form">
-	 <input type="text" name="new-team-input" id="new-team-input" placeholder="Input TeamName_Number (ex. LongMetal_7127)" />
+	 <input type="text" name="new-team-input" id="new-team-input" placeholder="Input Team Name" />
      <input type="submit" id="new-team-submit" value="Add Team" />
 	</form>
 	</header>

diff --git a/pages/aboutus.html b/pages/aboutus.html
@@ -5,23 +5,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us</title>
     <link rel="stylesheet" href="teams.css" />
+    <style>
+        /* CSS for centering */
+        body {
+            text-align: center;
+        }
+        /* CSS for indentation */
+        .indented {
+            margin-left: 180px; /* Adjust the value as needed */
+            text-align: left; /* Reset text alignment for indented text */
+        }
+        .bullet-list {
+            margin-left: 200px; /* Adjust the value to indent the bullets further */
+            text-align: left; /* Reset text alignment for bullet list */
+            list-style-position: inside; /* Ensure bullets are within the list */
+        }
+        /* CSS for box */
+        .capability-box {
+            border: 1px solid black;
+            padding: 10px;
+            margin: 20px auto; /* Center the box */
+            width: 80%; /* Adjust the width as needed */
+        }
+        /* CSS for input box */
+        .ranking-input {
+            width: 50px; /* Adjust the width as needed */
+        }
+    </style>
 </head>
 <body>
     <nav>
-		<div class = "heading">
-			<h1> Longmetal 7127 </h1>
-		</div>
-		<div class = "topnav">
-			<a href="../index.html"> Teams </a> 
-		    <a href="teamdetails.html"> Team Details </a> 
-			<a href="aboutus.html"> About Us </a> 
-		</div>
-	</nav>
+        <div class="heading">
+            <h1>Longmetal 7127</h1>
+        </div>
+        <div class="topnav">
+            <a href="../index.html">Teams</a>
+            <a href="teamdetails.html">Team Details</a>
+            <a href="aboutus.html">About Us</a>
+        </div>
+    </nav>
 
     <header>
         <div>
-            <h1> About Us </h1>
+            <h1>About Us</h1>
         </div>
     </header>
+
+    <div class="capability-box">
+        <h2>Our robot capabilities:</h2>
+    </div>
+    <!-- Space or new line between the box and the bullet list -->
+    <p class="indented"><strong>Autonomous</strong></p>
+    <ul>
+        <li class="bullet-list">prefer position ___ </li>
+        <li class="bullet-list">leaves position and shoots in ___ </li>
+    </ul>
+    <br>
+    <p class="indented"><strong>TeleOp</strong></p>
+    <ul>
+        <li class="bullet-list">prefer scoring in ___ </li>
+        <li class="bullet-list">prefer intaking from ___ </li>
+        <li class="bullet-list">can hang with ___ </li>
+    </ul>
+    <br>
+    <p class="indented"><strong>Human Player</strong></p>
+    <ul></ul>
+        <li class="bullet-list">prefer the coopertition button </li>
+        <li class="bullet-list">don't attempt the spotlight </li>
+    </ul>
+    <br>
+    <div class="capability-box">
+        <h2>Our Stats:</h2>
+    </div>
+    <br>
+    <p class="indented"><strong>Current Ranking:</strong> <input type="text" class="ranking-input"></p>
+    <br>
+    <p class="indented"><strong>Average points scored:</strong> <input type="text" class="ranking-input"></p>
+    <br>
+
+    <input type="submit" class="submit" value="Save">
+
 </body>
-</html>
+</html>
diff --git a/pages/teamdetails.html b/pages/teamdetails.html
@@ -62,6 +62,11 @@ <h1>Team Details</h1>
     <div id="team-details">
         <!-- Team details will be displayed here -->
     </div>
+
+    <input type="submit" class="submit" id="submit">
+
+    <!-- NOTE: add a "CANCEL" button if any changes are made to the text fields in case changes are not to be saved-->
+
 
     <script src="teamdetails.js"></script>
 

diff --git a/pages/teamdetails.js b/pages/teamdetails.js
@@ -1,29 +1,53 @@
 // Initialize IndexedDB database
+
+//NOTE: we need to rename all of the variables in here from the "To-Do List" template to our "Teams" 
+
+//NOTE: I added ChatGPT-based explanations to break down this code because otherwise it's unintelligible lol
+
+// QUESTION: Are teams that are deleted from the site also deleted from the local DB? 
+
 const db = new Dexie("Todo App");
 db.version(1).stores({ todos: "++id, todo, globalid" });
 
+    // the database sets up an object "todos" (need to rename) that consists of:
+        // ++id - auto-incrementing primary key/field named "id"
+        // todo - a field called "todo"
+        // globalid - a field called "globalid," used to identify teams
+
 // Function to extract query parameter from URL
 function getQueryParam(name) {
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get(name);
 }
 
+    // URLs look like ... /scouting2024/pages/teamdetails.html?globalid=____
+    // the ? denotes the start of URL/query parameters (which are used to pass data to web page thru URL)
+    // and globalid has a value (unique UTC time) that identifies the team (i.e. 1708014161661)
+
 // Function to fetch team details using globalid
 async function fetchTeamDetails(globalid) {
     const team = await db.todos.where({ globalid: Number(globalid) }).first();
     return team;
 }
 
+    // fetchTeamDetails is where info is pulled from local database 
+
 // Fetch globalid from URL query parameter
 const globalid = getQueryParam("globalid");
 
+    // searches the URL parameters for a key called globalid and saved value in constant 
+
+/*document.getElementById("submit").addEventListener("submit", function(event){
+    print("hello world")
+})*/
+
 // Fetch and display team details
-if (globalid) {
+if (globalid) { // if globalid isn't null, undef, empty, etc.
     fetchTeamDetails(globalid).then(team => {
-        if (team) {
-            const teamDetailsDiv = document.getElementById("team-details");
+        if (team) { // if team details successfully fetched
+            const teamDetailsDiv = document.getElementById("team-details"); // there is a div with id "team-details" on team details page
             teamDetailsDiv.innerHTML = `<p>Team Name: ${team.todo}</p>`;
-        } else {
+        } else { // team details not fetched
             const teamDetailsDiv = document.getElementById("team-details");
             teamDetailsDiv.innerHTML = `Team not found`;
             console.error("Team not found");

diff --git a/sw.js b/sw.js
@@ -0,0 +1,40 @@
+const cacheName = "offline-cache-v1";
+const cacheUrls = ["index.html","index.js","manifest.json","sw.js","index.css","node_modules\\dexie\\","pages\\"];
+
+// Installing the Service Worker
+self.addEventListener("install", async (event) => {
+  try {
+    const cache = await caches.open(cacheName);
+    await cache.addAll(cacheUrls);
+  } catch (error) {
+    console.error("Service Worker installation failed:", error);
+  }
+});
+
+// Fetching resources
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(cacheName);
+
+      try {
+        const cachedResponse = await cache.match(event.request);
+        if (cachedResponse) {
+          console.log("cachedResponse: ", event.request.url);
+          return cachedResponse;
+        }
+
+        const fetchResponse = await fetch(event.request);
+        if (fetchResponse) {
+          console.log("fetchResponse: ", event.request.url);
+          await cache.put(event.request, fetchResponse.clone());
+          return fetchResponse;
+        }
+      } catch (error) {
+        console.log("Fetch failed: ", error);
+        const cachedResponse = await cache.match("index.html");
+        return cachedResponse;
+      }
+    })()
+  );
+});