Merge pull request #174 from awest25/download-csv

Download csv
bruin-tennis-consulting · Jun 7, 2024 · 9cba651 · 9cba651
2 parents 515da3c + 0d02d04
commit 9cba651
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 58 deletions.
diff --git a/app/(interactive)/match-list/page.js b/app/(interactive)/match-list/page.js
@@ -72,7 +72,7 @@ export default function MatchList() {
             <div key={match.id}>
               <li>
                 <span>{match.name}<button onClick={() => handleDelete(match.id)}>Delete</button></span>
-                <span><button onClick={() => handleDownload(match.id)}>Download</button></span>
+                <span><button onClick={() => handleDownload(match.id)}>Download JSON</button></span>
                 <Link href={`/tag-match/${match.id}`}><button>Tag Match</button></Link>
                 <br/>
                 <input onChange={(e) => setNewName(e.target.value)}/>

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
@@ -132,6 +132,18 @@ export default function TagMatch() {
     navigator.clipboard.writeText(csvData);
   };
 
+  const handleDownload = () => {
+    const csvData = convertToCSV(tableState.rows);
+    const blob = new Blob([csvData], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'points.csv';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
 
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
@@ -418,6 +430,7 @@ export default function TagMatch() {
           <label>Input YouTube Code: </label>
           <input type="text" value={videoId} onChange={handleVideoIdChange} />
 
+          <button onClick={handleDownload}>Download CSV</button>
           <button onClick={handleCopy}>Copy Columns</button>
           <button onClick={undoLastAction}>Undo</button>
           <button onClick={togglePublish}>{isPublished ? "Unpublish" : "Publish"}</button>
@@ -473,8 +486,6 @@ export default function TagMatch() {
 
       </div>
 
-
-
       { /* CSV Table */}
       <table>
         <thead>

diff --git a/app/(interactive)/tag-match/page.js b/app/(interactive)/tag-match/page.js
@@ -199,61 +199,69 @@ export default function TagMatch() {
     <div className={styles.container}>
       <label>Enter YouTube Code: </label>
       <input type="text" value={videoId} onChange={handleVideoIdChange} ref={inputRef} />
-      <VideoPlayer videoId={videoId} setVideoObject={setVideoObject} />
-      <button onClick={handleDownload}>Download CSV</button>
-      <button onClick={handleCopyColumns}>Copy Columns</button>
-      <table className={styles.table}>
-        <tbody>
-          <tr>
-            <td colSpan="2">Current Time: {timerValue}ms</td>
-          </tr>
-          <tr>
-            <td>Jump to: </td>
-          </tr>
-          <tr>
-            <td>
-              <input
-                type="number"
-                placeholder="Milliseconds"
-                value={timerValue}
-                onChange={(event) => handleMillisecondsChange(event.target.value)}
-                style={{ marginRight: '10px' }}
-              />
-            </td>
-            <td>ms</td>
-          </tr>
-          <tr>
-            <td>
-              <input
-                type="number"
-                placeholder="Minutes"
-                value={Math.floor(timerValue / 60000)}
-                onChange={(event) => {
-                  const minutes = parseFloat(event.target.value);
-                  const seconds = (timerValue % 60000) / 1000;
-                  handleMinutesSecondsChange(minutes, seconds);
-                }}
-                style={{ marginRight: '10px' }}
-              />
-            </td>
-            <td>minutes</td>
-            <td>
-              <input
-                type="number"
-                placeholder="Seconds"
-                value={Math.round((timerValue % 60000) / 1000)}
-                onChange={(event) => {
-                  const seconds = parseFloat(event.target.value);
-                  const minutes = Math.floor(timerValue / 60000);
-                  handleMinutesSecondsChange(minutes, seconds);
-                }}
-              />
-            </td>
-            <td>seconds</td>
-          </tr>
-        </tbody>
-      </table>
-      <KeybindingsTable />
+      <div style={{ display: 'flex', flexDirection: 'row', width: '100%', height: '28vw'}}>
+        <div style={{ display: 'flex', flexDirection: 'column'}}>
+          <div style={{width: '42vw'}}>
+            <VideoPlayer videoId={videoId} setVideoObject={setVideoObject} />
+          </div>
+          <button onClick={handleDownload}>Download JSON</button>
+          <button onClick={handleCopyColumns}>Copy Columns</button>
+        </div>
+        <div>
+          <table className={styles.table}>
+            <tbody>
+              <tr>
+                <td colSpan="2">Current Time: {timerValue}ms</td>
+              </tr>
+              <tr>
+                <td>Jump to: </td>
+              </tr>
+              <tr>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Milliseconds"
+                    value={timerValue}
+                    onChange={(event) => handleMillisecondsChange(event.target.value)}
+                    style={{ marginRight: '10px' }}
+                  />
+                </td>
+                <td>ms</td>
+              </tr>
+              <tr>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Minutes"
+                    value={Math.floor(timerValue / 60000)}
+                    onChange={(event) => {
+                      const minutes = parseFloat(event.target.value);
+                      const seconds = (timerValue % 60000) / 1000;
+                      handleMinutesSecondsChange(minutes, seconds);
+                    }}
+                    style={{ marginRight: '10px' }}
+                  />
+                </td>
+                <td>minutes</td>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Seconds"
+                    value={Math.round((timerValue % 60000) / 1000)}
+                    onChange={(event) => {
+                      const seconds = parseFloat(event.target.value);
+                      const minutes = Math.floor(timerValue / 60000);
+                      handleMinutesSecondsChange(minutes, seconds);
+                    }}
+                  />
+                </td>
+                <td>seconds</td>
+              </tr>
+            </tbody>
+          </table>
+          <KeybindingsTable />
+        </div>
+      </div>
 
       <hr />
       <table>