Merge pull request #372 from bruin-tennis-consulting/369-feature-integrate-d3js-from-analytics-into-site

369 feature integrate d3js from analytics into site

Author: kesdlvi

app/DataProvider.js

@@ -121,22 +121,25 @@ export const DataProvider = ({ children }) => {
   const createMatch = useCallback(
     async (collectionName, newMatchData) => {
       try {
-        let pdfUrl = null
-        if (newMatchData.pdfFile) {
-          const pdfRef = ref(storage, `match-pdfs/${newMatchData.pdfFile.name}`)
+        let htmlUrl = null
+        if (newMatchData.htmlFile) {
+          const htmlRef = ref(
+            storage,
+            `match-html/${newMatchData.htmlFile.name}`
+          )
           const metadata = {
-            contentType: 'application/pdf'
+            contentType: 'text/html'
           }
 
           const snapshot = await uploadBytes(
-            pdfRef,
-            newMatchData.pdfFile.blob,
+            htmlRef,
+            newMatchData.htmlFile.blob,
             metadata
           )
-          pdfUrl = await getDownloadURL(snapshot.ref)
+          htmlUrl = await getDownloadURL(snapshot.ref)
         }
-        console.log(pdfUrl)
-        newMatchData.pdfFile = pdfUrl
+        console.log(htmlUrl)
+        newMatchData.htmlFile = htmlUrl
         newMatchData._deleted = false
 
         const newMatch = {

app/matches/[slug]/page.js

@@ -46,7 +46,8 @@ const MatchPage = ({ params }) => {
   const [showPercent, setShowPercent] = useState(false)
   const [showCount, setShowCount] = useState(false)
   const [playingPoint, setPlayingPoint] = useState(null)
-  const [showPDF, setShowPDF] = useState(true)
+  const [showHTML, setShowHTML] = useState(false)
+  const [showPDF, setShowPDF] = useState(false)
   const [tab, setTab] = useState(1)
   const [bookmarks, setBookmarks] = useState([])
   const [triggerScroll, setTriggerScroll] = useState(false)
@@ -113,6 +114,20 @@ const MatchPage = ({ params }) => {
     }
   }, [matches, params.slug, fetchMatchDetails])
 
+  // Set showHTML/showPDF based on available files (prioritize HTML, fallback to PDF)
+  useEffect(() => {
+    if (matchData?.htmlFile != null) {
+      setShowHTML(true)
+      setShowPDF(false)
+    } else if (matchData?.pdfFile != null) {
+      setShowHTML(false)
+      setShowPDF(true)
+    } else {
+      setShowHTML(false)
+      setShowPDF(false)
+    }
+  }, [matchData])
+
   const handleJumpToTime = (time) => {
     if (videoObject && videoObject.seekTo) {
       videoObject.seekTo(time / 1000, true)
@@ -221,13 +236,13 @@ const MatchPage = ({ params }) => {
   }, [videoObject, matchData, returnFilteredPoints])
 
   useEffect(() => {
-    if (triggerScroll && !showPDF) {
+    if (triggerScroll && !showHTML && !showPDF) {
       if (tableRef.current) {
         tableRef.current.scrollIntoView({ behavior: 'smooth' })
       }
       setTriggerScroll(false)
     }
-  }, [triggerScroll, showPDF])
+  }, [triggerScroll, showHTML, showPDF])
 
   const removeFilter = (key, value) => {
     const updatedFilterList = filterList.filter(
@@ -238,6 +253,7 @@ const MatchPage = ({ params }) => {
   }
 
   const scrollToDetailedList = () => {
+    setShowHTML(false)
     setShowPDF(false)
     setTriggerScroll(true)
   }
@@ -595,29 +611,47 @@ const MatchPage = ({ params }) => {
       </div>
       <div className={styles.toggle}>
         <button
-          onClick={() => setShowPDF(true)}
+          onClick={() => {
+            if (matchData?.htmlFile != null) {
+              setShowHTML(true)
+              setShowPDF(false)
+            } else if (matchData?.pdfFile != null) {
+              setShowPDF(true)
+              setShowHTML(false)
+            }
+          }}
           className={
-            showPDF
+            showHTML || showPDF
               ? styles.toggle_buttonb_inactive
               : styles.toggle_buttonb_active
           }
         >
           Key Stats & Visuals
         </button>
         <button
-          onClick={() => setShowPDF(false)}
+          onClick={() => {
+            setShowHTML(false)
+            setShowPDF(false)
+          }}
           className={
-            showPDF
+            !showHTML && !showPDF
               ? styles.toggle_buttona_active
               : styles.toggle_buttona_inactive
           }
         >
           Detailed Point List
         </button>
-        {showPDF ? (
+        {showHTML ? (
+          <iframe
+            className={styles.VisualsView}
+            src={matchData?.htmlFile}
+            width="90%"
+            height="1550"
+          />
+        ) : showPDF ? (
           <iframe
-            className={styles.pdfView}
-            src={matchData.pdfFile}
+            className={styles.VisualsView}
+            src={matchData?.pdfFile}
             width="90%"
             height="1550"
           />

app/services/matchSchemas.js

@@ -161,9 +161,14 @@ const initialSchema = {
       title: 'JSON File',
       format: 'data-url'
     },
-    pdfFile: {
+    // pdfFile: {
+    //   type: 'string',
+    //   title: 'PDF File'
+    // },
+    htmlFile: {
       type: 'string',
-      title: 'PDF File'
+      title: 'HTML File',
+      format: 'data-url'
     }
   },
   required: [
@@ -182,7 +187,10 @@ const uiSchema = {
   jsonFile: {
     'ui:widget': 'file'
   },
-  pdfFile: {
+  // pdfFile: {
+  //   'ui:widget': 'file'
+  // },
+  htmlFile: {
     'ui:widget': 'file'
   },
   event: {

app/styles/Match.module.css

@@ -106,7 +106,7 @@
   margin: 0 auto; /* This may help maintain the centering if other elements are taking up space */
 }
 
-.pdfView {
+.VisualsView {
   width: 100%;
   border: 1px solid #eaeaea;
   border-radius: 10px;

app/upload-match/page.js

@@ -189,7 +189,7 @@ export default function UploadMatchForm() {
 
       // Validate the File types
       validateFileType(formData.jsonFile, 'application/json', 'JSON file')
-      validateFileType(formData.pdfFile, 'application/pdf', 'PDF file')
+      validateFileType(formData.htmlFile, 'text/html', 'HTML file')
 
       const pointsJson = formData.jsonFile
         ? JSON.parse(atob(formData.jsonFile.split(',')[1]))
@@ -261,7 +261,7 @@ export default function UploadMatchForm() {
         sets,
         videoId: formData.videoID,
         pointsJson,
-        pdfFile: formData.pdfFile ? dataURItoBlob(formData.pdfFile) : null,
+        htmlFile: formData.htmlFile ? dataURItoBlob(formData.htmlFile) : null,
         teams: teamsData,
         players,
         matchDate: formData.date,