Add styling to PointsList and FilterList

bruin-tennis-consulting · Dec 19, 2023 · 140e1df · 140e1df
1 parent 63e1703
commit 140e1df
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 51 deletions.
diff --git a/.firebase/hosting.b3V0.cache b/.firebase/hosting.b3V0.cache
@@ -1,19 +1,19 @@
-404.html,1702339212892,051e8e4ff3f71d0bd74e15494589e0ca5de0cb16e1e41279f2da91c79db16125
-upload-video.html,1702339212892,9f9248466de47a06469b2995e75ccdcc67a345e614e51bfd8433ec887b84132f
-index.html,1702339212892,ab9a7c1cc07fe068a677ea93740862d816d28b0621e4270e6d8596ed532ee9eb
-vercel.svg,1702339212746,95b23d92581bcaa6cd6312c6a8c0cb6eb64178a2c29f0fc2fee68662f70e1708
-favicon.ico,1702339212746,8ff5c5fd71faf06131ae533a096b06fcda3fae8f48c621bd441ddbcb8ea2b4d4
-_next/static/chunks/webpack-87b3a303122f2f0d.js,1702339211963,817c7888f6ef63218727f6f3159bfd652819603d625fa06bafcbd1f95605e25d
-_next/static/chunks/pages/_app-a3f0dee1d78bc15f.js,1702339211967,aa3e2e0d85a1c6146eb9a8ea49d91421d1269914cdf411da7de7393d48fe6c36
-_next/static/chunks/pages/_error-2afa8b7423c17645.js,1702339211967,46195394ed71ab30c5c326413e9d28ca6f7a1ea52e2301f0651bcc25ae7ef6de
-_next/static/chunks/pages/upload-video-99f947435c492371.js,1702339211967,2694158a61419c951f55a7014bcb396173239c7a4b24f17f92e21a3ebb465402
-_next/static/ovqO3hz2TH_Wvf6pHTgmi/_ssgManifest.js,1702339211963,5c126729f9831113842c425975615db312fa26d39f3a9e1baa47d4ad65ac2f90
-_next/static/ovqO3hz2TH_Wvf6pHTgmi/_buildManifest.js,1702339211963,1f7762a603843e64c9f29e785575aa8de1792957d038d3a9bcb5e31c11ee8bac
-_next/static/css/a6890a3306711e32.css,1702339211963,5791555d8b1ce38c22accfa8f62672e4d31118eb0769a1550dcf3bdc68f99b04
-_next/static/chunks/pages/index-ebac8424859500cb.js,1702339211967,d6429c1ae21f9044fc38a3e3e33296daa33cc389e345a1312d369c10ef0ccf86
-_next/static/chunks/main-72cd581c1e9bd837.js,1702339211963,d3584519068ff7f184f2155275564e1927da62932132481ec0a6445d90704157
-_next/static/chunks/193-65db597f11989e77.js,1702339211963,f5446f6abf3ccf906499bfb2394e59cb937d456a2d439dee7ddf3e652998b645
-_next/static/chunks/868-ecc6e1ef00699bdd.js,1702339211963,3819fdb89fe4fbaf9a3587727cc96c7ce69fd0a3d1c50b5f1c9a4d99773875ff
-_next/static/chunks/polyfills-c67a75d1b6f99dc8.js,1702339211963,9f22ebbc1e5746bc08aa476baa8169d3ac2c27814dba6bf675b749113ac4943e
-_next/static/chunks/framework-1e817f2a1c5c711b.js,1702339211963,11d7cf622f5e21b38d1ae17f528858480ed90d8deed14537afbed9a64b21f20f
-_next/static/chunks/7112840a-38828cf839f429a4.js,1702339211963,544f8b93e7869968012ce81e0dc7ec800b89685a52cd2f082a33f76057fd41f6
+404.html,1702956106181,c3cf4a5311a2d133fbea22c25e685f298944b954fe7f15d0e0419b206b86cb9d
+vercel.svg,1702956106084,95b23d92581bcaa6cd6312c6a8c0cb6eb64178a2c29f0fc2fee68662f70e1708
+upload-video.html,1702956106188,4142cccc2a3af269a21fae86fb8cf6208feecf4b97c26e2721073b9605b33c8f
+_next/static/AjC81hmv3QNSbfkjIujmV/_ssgManifest.js,1702956106032,5c126729f9831113842c425975615db312fa26d39f3a9e1baa47d4ad65ac2f90
+_next/static/AjC81hmv3QNSbfkjIujmV/_buildManifest.js,1702956106032,16d1d9b23a9fd2e4dd3c2840982bf61c3f8a43b6879c139908def862136fcc19
+index.html,1702956106184,ecb5243f5e5675d1405a4682f50c8859cff70ab34a11a9231d4b536208b3955b
+favicon.ico,1702956106084,8ff5c5fd71faf06131ae533a096b06fcda3fae8f48c621bd441ddbcb8ea2b4d4
+_next/static/chunks/webpack-87b3a303122f2f0d.js,1702956106033,817c7888f6ef63218727f6f3159bfd652819603d625fa06bafcbd1f95605e25d
+_next/static/chunks/pages/_app-a3f0dee1d78bc15f.js,1702956106048,aa3e2e0d85a1c6146eb9a8ea49d91421d1269914cdf411da7de7393d48fe6c36
+_next/static/chunks/pages/_error-2afa8b7423c17645.js,1702956106048,46195394ed71ab30c5c326413e9d28ca6f7a1ea52e2301f0651bcc25ae7ef6de
+_next/static/chunks/pages/index-a790e292dab5e31d.js,1702956106048,c9cf27bf5a9fd934186efcd4d660dbd8e0b5d826c09b202add8448d5aa876b66
+_next/static/chunks/pages/upload-video-99f947435c492371.js,1702956106048,2694158a61419c951f55a7014bcb396173239c7a4b24f17f92e21a3ebb465402
+_next/static/css/6440bdeac8bd87a5.css,1702956106033,95b9918e9898955bee77e61dd3222e00ba54e1321a7f81f1ee3f7dd8682e024b
+_next/static/chunks/868-ecc6e1ef00699bdd.js,1702956106032,3819fdb89fe4fbaf9a3587727cc96c7ce69fd0a3d1c50b5f1c9a4d99773875ff
+_next/static/chunks/193-65db597f11989e77.js,1702956106032,f5446f6abf3ccf906499bfb2394e59cb937d456a2d439dee7ddf3e652998b645
+_next/static/chunks/main-72cd581c1e9bd837.js,1702956106033,d3584519068ff7f184f2155275564e1927da62932132481ec0a6445d90704157
+_next/static/chunks/polyfills-c67a75d1b6f99dc8.js,1702956106033,9f22ebbc1e5746bc08aa476baa8169d3ac2c27814dba6bf675b749113ac4943e
+_next/static/chunks/framework-1e817f2a1c5c711b.js,1702956106032,11d7cf622f5e21b38d1ae17f528858480ed90d8deed14537afbed9a64b21f20f
+_next/static/chunks/7112840a-38828cf839f429a4.js,1702956106032,544f8b93e7869968012ce81e0dc7ec800b89685a52cd2f082a33f76057fd41f6
diff --git a/README.md b/README.md
@@ -14,5 +14,5 @@ Before uploading a CSV, it must be converted to JSON. Use csvjson.com.
 
 ## Deployment
 
-1. Run `npm next build` to generate production files
+1. Run `npm run build` to generate production files
 2. Run `firebase deploy` to depoly to firebase
diff --git a/components/FilterList.js b/components/FilterList.js
@@ -1,6 +1,7 @@
 // components/FilterList.js
 
 import React, { useEffect, useState } from 'react';
+import styles from '../styles/FilterList.module.css';
 
 const FilterList = ({ pointsData, filterList, setFilterList }) => {
     const keys = Object.keys(pointsData[0] || {}).sort(); // Sort the keys array
@@ -44,26 +45,28 @@ const FilterList = ({ pointsData, filterList, setFilterList }) => {
 
     return (
         <div>
-            <div>
+            <div class={styles.activeFilterListContainer}>
                 Active Filters:
-                <ul>
+                <ul class={styles.activeFilterList}>
                     {sortedFilterList.map(([key, value]) => (
-                        <li key={`${key}-${value}`} style={{ cursor: 'pointer' }} onClick={() => removeFilter(key, value)}>
+                        <li class={styles.activeFilterItem} key={`${key}-${value}`} style={{ cursor: 'pointer' }} onClick={() => removeFilter(key, value)}>
                             {key}: {value}
                         </li>
                     ))}
                 </ul>
             </div>
-            <ul>
+            <ul class={styles.availableFilterList}>
                 {keys.map((key) => (
-                    <li key={key}>
-                        <strong onClick={() => toggleCollapse(key)} style={{ cursor: 'pointer' }}>{key}</strong>
-                        <ul style={{ display: collapsedKeys.includes(key) ? 'none' : 'block'}}>
-                            {uniqueValues[key].map((value) => (
-                                <li key={value} style={{ cursor: 'pointer' }} onClick={() => addFilter(key, value)}>{value}</li>
-                            ))}
-                        </ul>
-                    </li>
+                    <div class={styles.availableFilterItem}>
+                        <li key={key}>
+                            <strong onClick={() => toggleCollapse(key)} style={{ cursor: 'pointer' }}>{key}</strong>
+                            <ul class={styles.list} style={{ display: collapsedKeys.includes(key) ? 'none' : 'block'}}>
+                                {uniqueValues[key].map((value) => (
+                                    <li key={value} style={{ cursor: 'pointer' }} onClick={() => addFilter(key, value)}>{value}</li>
+                                ))}
+                            </ul>
+                        </li>
+                    </div>
                 ))}
             </ul>
         </div>

diff --git a/components/PointsList.js b/components/PointsList.js
@@ -1,12 +1,13 @@
 // components/PointsList.js
 
 import React from 'react';
+import styles from '../styles/PointsList.module.css';
 
 const PointsList = ({ pointsData, onPointSelect }) => {
     return (
-        <ul>
+        <ul class={styles.pointsList}>
             {pointsData.map((point, index) => (
-                <li key={index} onClick={() => onPointSelect(point.Position)} style={{ cursor: 'pointer' }}>
+                <li class={styles.pointsListItem} key={index} onClick={() => onPointSelect(point.Position)} style={{ cursor: 'pointer' }}>
                     {point.Name}
                 </li>
             ))}

diff --git a/pages/index.js b/pages/index.js
@@ -52,7 +52,7 @@ export default function Home() {
 
     return filteredPoints;
   }
-  
+
   // // This filter logic gets rid of anything that doesn't match all of the filters
   // const returnFilteredPoints = () => { // filter is an array of [key, value]
   //   let filteredPoints = matchData.points;
@@ -84,22 +84,24 @@ export default function Home() {
         </div>
 
         {/* Main Content Area */}
-        <div className={styles.mainContent}>
-          {/* Video Player */}
-          <div className="videoPlayer">
-            <VideoPlayer videoURL={matchData ? matchData.url : ''} videoRef={videoRef} />
-          </div>
-
-          {/* Filter List */}
-          <div className="filterList">
-            <FilterList pointsData={matchData ? matchData.points : []} filterList={filterList} setFilterList={setFilterList} />
+        {matchData && (
+          <div className={styles.mainContent}>
+            {/* Video Player */}
+            <div className="videoPlayer">
+              <VideoPlayer videoURL={matchData ? matchData.url : ''} videoRef={videoRef} />
+            </div>
+
+            {/* Filter List */}
+            <div className="filterList">
+              <FilterList pointsData={matchData.points} filterList={filterList} setFilterList={setFilterList} />
+            </div>
+
+            {/* Points List */}
+            <div className="pointsList">
+            <PointsList pointsData={returnFilteredPoints()} onPointSelect={handleJumpToTime}/>
+            </div>
           </div>
-
-          {/* Points List */}
-          <div className="pointsList">
-          <PointsList pointsData={matchData ? returnFilteredPoints() : []} onPointSelect={handleJumpToTime}/>
-          </div>
-        </div>
+        )}
 
       </main>
 

diff --git a/services/uploadMatch.js b/services/uploadMatch.js
@@ -1,5 +1,5 @@
 // Import the necessary Firebase libraries
-import { getFirestore, collection, addDoc } from "firebase/firestore";
+import { collection, addDoc } from "firebase/firestore";
 import '../services/initializeFirebase.js'; // Initialize Firebase on the client side
 import db from '../services/initializeFirebase.js';
 

diff --git a/styles/FilterList.module.css b/styles/FilterList.module.css
@@ -0,0 +1,56 @@
+.activeFilterListContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin: 10px 0;
+    background-color: #ffffff;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+}
+
+.activeFilterList {
+    padding: 0px;
+    list-style-type: none;
+    margin: 0px;
+}
+
+.activeFilterItem {
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+}
+
+.availableFilterItem {
+    padding: 10px;
+    list-style-type: none;
+}
+
+.availableFilterSubitem {
+    list-style-type: none;
+}
+
+.availableFilterList {
+    padding: 0px;
+}
+
+.availableFilterSubitemList {
+    padding: 0px;
+    list-style-type: none;
+}
+
+.list {
+    padding: 0px;
+    list-style-type: none;
+}
diff --git a/styles/PointsList.module.css b/styles/PointsList.module.css
@@ -0,0 +1,12 @@
+.pointsList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pointsListItem {
+    padding: 10px;
+}