Add data-sources to tabs

index.php

@@ -49,75 +49,86 @@
         $stmt2 = $conn->query( $query );
         ?>
         <nav class="nav nav-tabs" style="margin: 24px 0;">
-            <a class="nav-link active" data-toggle="tab" href="#">Scratchings</a>
-            <a class="nav-link" data-toggle="tab" href="#">Races on Torn</a>
+            <a class="nav-link active" data-toggle="tab" href="#scratchings">Scratchings</a>
+            <a class="nav-link" data-toggle="tab" href="#tornraces">Races on Torn</a>
+            <a class="nav-link" href="#allraces">All races</a>
         </nav>
-        <h4>Races featured on Torn</h4>
-        <table class="table table-striped table-bordered">
-            <caption>Races featured on Torn</caption>
-            <thead>
-                <tr>
-                    <th>venue</th>
-                    <th>state</th>
-                    <th>date</th>
-                    <th>race</th>
-                    <th>start</th>
-                    <th>utc</th>
-                </tr>
-            </thead>
-            <tbody>
-            <?php
-            while ( $row = $stmt2->fetch( PDO::FETCH_ASSOC ) ) : ?>
-                <tr>
-                    <!-- <td><?php // echo htmlspecialchars($row['id']); ?></td> -->
-                    <td><?php echo htmlspecialchars($row['venue']); ?></td>
-                    <td><?php echo htmlspecialchars($row['state']); ?></td>
-                    <td><?php echo htmlspecialchars($row['race_date']); ?></td>
-                    <td><?php echo htmlspecialchars($row['race']); ?></td>
-                    <td><?php echo htmlspecialchars(substr($row['start_time'], 0, -3)); ?></td>
-                    <td><?php $t = strtotime($row['utctime']); echo gmdate('H:i', $t); ?></td>
-                </tr>
-			<?php endwhile; ?>
-            </tbody>
-        </table>
-        <!--
-        <?php
-        $query = sprintf("SELECT * FROM race_program
-        WHERE race_date >= %s ORDER BY race_date, venue, race;", $conn->quote($date->format('Y-m-d')));
-        $stmt3 = $conn->query( $query );
-        ?>
-        <table class="table table-striped table-bordered">
-            <caption>All races</caption>
-            <thead>
-            <tr>
-                <th>venue</th>
-                <th>state</th>
-                <th>date</th>
-                <th>race</th>
-                <th>start</th>
-                <th>utc</th>
-            </tr>
-            </thead>
-            <tbody>
-			<?php
-			while ( $row = $stmt3->fetch( PDO::FETCH_ASSOC ) ) : ?>
-                <tr>
-                    -->
-                    <!-- <td><?php // echo htmlspecialchars($row['id']); ?></td> -->
-                    <!--
-                    <td><?php echo htmlspecialchars($row['venue']); ?></td>
-                    <td><?php echo htmlspecialchars($row['state']); ?></td>
-                    <td><?php echo htmlspecialchars($row['race_date']); ?></td>
-                    <td><?php echo htmlspecialchars($row['race']); ?></td>
-                    <td><?php echo htmlspecialchars(substr($row['start_time'], 0, -3)); ?></td>
-                    <td><?php $t = strtotime($row['utctime']); echo gmdate('H:i', $t); ?></td>
-                </tr>
-			<?php endwhile; ?>
-            </tbody>
-        </table>
-        -->
-        <h4>Scratchings</h4>
-<table class="table table-striped table-bordered">
+        <div class="tab-content">
+            <div class="tab-pane container active" id="tornraces">
+                <h4>Races featured on Torn</h4>
+                <table class="table table-striped table-bordered">
+                    <caption>Races featured on Torn</caption>
+                    <thead>
+                        <tr>
+                            <th>venue</th>
+                            <th>state</th>
+                            <th>date</th>
+                            <th>race</th>
+                            <th>start</th>
+                            <th>utc</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    <?php
+                    while ( $row = $stmt2->fetch( PDO::FETCH_ASSOC ) ) : ?>
+                        <tr>
+                            <!-- <td><?php // echo htmlspecialchars($row['id']); ?></td> -->
+                            <td><?php echo htmlspecialchars($row['venue']); ?></td>
+                            <td><?php echo htmlspecialchars($row['state']); ?></td>
+                            <td><?php echo htmlspecialchars($row['race_date']); ?></td>
+                            <td><?php echo htmlspecialchars($row['race']); ?></td>
+                            <td><?php echo htmlspecialchars(substr($row['start_time'], 0, -3)); ?></td>
+                            <td><?php $t = strtotime($row['utctime']); echo gmdate('H:i', $t); ?></td>
+                        </tr>
+                    <?php endwhile; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="tab-content">
+            <div class="tab-pane container active" id="allraces">
+                <!--
+                <?php
+                $query = sprintf("SELECT * FROM race_program
+                WHERE race_date >= %s ORDER BY race_date, venue, race;", $conn->quote($date->format('Y-m-d')));
+                $stmt3 = $conn->query( $query );
+                ?>
+                <table class="table table-striped table-bordered">
+                    <caption>All races</caption>
+                    <thead>
+                    <tr>
+                        <th>venue</th>
+                        <th>state</th>
+                        <th>date</th>
+                        <th>race</th>
+                        <th>start</th>
+                        <th>utc</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <?php
+                    while ( $row = $stmt3->fetch( PDO::FETCH_ASSOC ) ) : ?>
+                        <tr>
+                            -->
+                            <!-- <td><?php // echo htmlspecialchars($row['id']); ?></td> -->
+                            <!--
+                            <td><?php echo htmlspecialchars($row['venue']); ?></td>
+                            <td><?php echo htmlspecialchars($row['state']); ?></td>
+                            <td><?php echo htmlspecialchars($row['race_date']); ?></td>
+                            <td><?php echo htmlspecialchars($row['race']); ?></td>
+                            <td><?php echo htmlspecialchars(substr($row['start_time'], 0, -3)); ?></td>
+                            <td><?php $t = strtotime($row['utctime']); echo gmdate('H:i', $t); ?></td>
+                        </tr>
+                    <?php endwhile; ?>
+                    </tbody>
+                </table>
+                -->
+            </div>
+        </div>
+        <div class="tab-content">
+            <div class="tab-pane container active" id="scratchings">
+                <h4>Scratchings</h4>
+                    <table class="table table-striped table-bordered">
     <?php
     $table_head = <<<TABLEHEAD
         <thead>
@@ -193,7 +204,9 @@ TAG;
 		echo $e->getMessage();
 	}
     ?>
-</div>
+            </div>
+        </div>
+    </div>
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>