Jump to content

Display data onmouseover

stevochegeoj

By stevochegeoj
in Javascript Help

 Share

Recommended Posts

stevochegeoj Member

stevochegeoj

Posted
Posted

I have a bookings table represented by the code below, i wish to add a mouseover function to display customer details eg. number of persons in a room,meal plan etc.All data is fetched from the database.How can i go about it? 

<?php
    session_start();
    if (!isset($_SESSION["user"])) {
        header("location:index.php");
    }

    require_once(__DIR__ . '/db.php');

    //Get all the rooms from the database
    $roomsSQL  = "SELECT TRoom FROM room";

    $days = 30;

    $roomsArray = array();

    $roomsResult = mysqli_query($con, $roomsSQL);

    $roomsArray = array();

    while ($row = mysqli_fetch_assoc($roomsResult)) {
        array_push($roomsArray, $row);
    }

    //Get all date bound bookings
    date_default_timezone_set('Africa/Nairobi');

    $startDate = $_GET['start_date'] ?? date("Y-m-d");
    $endDate = date('Y-m-d', strtotime($startDate . " + $days days"));

    $sql = "SELECT tbl_events.id, tbl_events.title, tbl_events.start, tbl_events.end, tbl_events.color, room.TRoom\n
    FROM tbl_events\n
    INNER JOIN roombook\n
    ON tbl_events.roombook_id =  roombook.id\n
    INNER JOIN room\n
    ON roombook.TRoom = room.TRoom\n
    WHERE tbl_events.start BETWEEN '$startDate' AND '$endDate'\n
    OR (tbl_events.start < '$startDate' AND tbl_events.end > '$startDate');";

    $result = mysqli_query($con, $sql);

    $bookingsArray = array();

    while ($row = mysqli_fetch_assoc($result)) {
        array_push($bookingsArray, $row);
    }

    /**
     * Gets the color for a cell
     * 
     * @param string $room the room to check
     * 
     * @param string $date the date to check
     * 
     * @param array $bookingsArray the current bookings to iterate through
     */
    function getCellColor(string $room, string $date, array $bookingsArray)
    {
        
        foreach ($bookingsArray as $booking) {
            if($room == $booking['TRoom'] &&  $date >= $booking['start'] && $date <= $booking['end']){
                return $booking['color'];
            }
        }

    }

    /**
     * Gets the content that should be in every single cell
     * 
     * @param string $room the room to check
     * 
     * @param string $date the date to check
     * 
     * @param array $bookingsArray the current bookings to iterate through
     */
    function getCellContent(string $room, string $date, array $bookingsArray)
    {
        foreach ($bookingsArray as $booking) {
            if($room == $booking['TRoom'] &&  $date >= $booking['start'] && $date <= $booking['end']){
                return $booking['title'];
            }
        }

        return null;

    }

    function getRowSpan(string $room, string $date, $bookingsArray, $remainingCells)
    {
        if(!is_null(getCellContent($room, $date, $bookingsArray))){

            $end = null;
            
            foreach ($bookingsArray as $booking) {

                if($room == $booking['TRoom'] &&  $date >= $booking['start'] && $date <= $booking['end']){
                    $end = $booking['end'];

                    $endDateDifference = date_diff(date_create($date), date_create($end))->format("%a");

                    return ($endDateDifference < $remainingCells) ? $endDateDifference : $remainingCells;
                }
            }

        }
    }

    function cellAlreadyCovered(string $room, string $date, $bookingsArray, $currentIndex)
    {        
        
        if(!is_null(getCellContent($room, $date, $bookingsArray))){

            $start = null;
            
            foreach ($bookingsArray as $booking) {

                if($room == $booking['TRoom'] &&  $date >= $booking['start'] && $date <= $booking['end']){
                    $start = $booking['start'];

                    $startDateDifference = date_diff(date_create($start), date_create($date))->format("%a");


                    return $startDateDifference > 0 && $currentIndex != 0;
                }
            }

        }

        return false;
        
    }

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<!---->

<body>
    <div id="wrapper">

       
        <!--/. NAV TOP  -->
<!--        -->
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">Booking Table</h1>
                        
                        <div class="table-responsive overflow-auto" style="overflow-x: auto;">
                            <table class="table table-hover table-bordered" style="font-size: 8px">
                                <thead>
                                    <tr>
                                        <th>Days</th>

                                        <?php foreach($roomsArray as $room) : ?>
                                            <th><?= $room['TRoom'] ?></th>
                                        <?php endforeach; ?>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Days</th>

                                        <?php foreach($roomsArray as $room) : ?>
                                            <th><?= $room['TRoom'] ?></th>
                                        <?php endforeach; ?>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <?php for($i = 0; $i < $days; $i++): ?>
                                        <tr>
                                        <th><?= date('D, d/m/Y', strtotime($startDate . " + $i days")) ?></th>
                                        <?php foreach($roomsArray as $room) : ?>
                                            <?php if(!cellAlreadyCovered($room['TRoom'], date('Y-m-d', strtotime($startDate . " + $i days")), $bookingsArray, $i)) : ?>
                                                <td rowspan="<?= getRowSpan($room['TRoom'], date('Y-m-d', strtotime($startDate . " + $i days")), $bookingsArray, ($days - $i)) ?>" style="background-color: <?= getCellColor($room['TRoom'],  date('Y-m-d', strtotime($startDate . " + $i days")), $bookingsArray) ?>;">
                                                <?= getCellContent($room['TRoom'], date('Y-m-d', strtotime($startDate . " + $i days")), $bookingsArray) ?>
                                                </td>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                        </tr>
                                    <?php endfor; ?>
                                </tbody>

                            </table>
                        </div>

                        <div class="d-flex align-items-center justify-content-between" style="text-align: left">
                            <a href="table.php?start_date=<?= date('Y-m-d', strtotime($startDate . " - $days days")) ?>" class="btn btn-primary">Previous  7 Days</a>
                            <a href="table.php?start_date=<?= date('Y-m-d', strtotime($startDate . " + $days days")) ?>" class="btn btn-primary ml-2">Next  7 Days</a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between" style="alignment: right">
                            <a href="table2.php?start_date=<?= date('Y-m-d', strtotime($startDate . " - $days days")) ?>" class="btn btn-primary">Previous 30 Days</a>
                            <a href="table2.php?start_date=<?= date('Y-m-d', strtotime($startDate . " + $days days")) ?>" class="btn btn-primary ml-2">Next 30 Days</a>
                        </div>

                    </div>
                </div>
                <!-- /. ROW  -->
            </div>

        </div>


    </div>
    <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <script src="assets/js/jquery-1.10.2.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.2.7/morris.min.js"></script>
    <!-- jQuery Js -->
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- DATA TABLE SCRIPTS -->
    <script src="assets/js/dataTables/jquery.dataTables.js"></script>
    <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            //$('#dataTables-example').dataTable();
        });
    </script>
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>


</body>

</html>

 

Link to comment
Share on other sites
maxxd Prolific Member

maxxd

Posted
Posted

I didn't read all your code, but on a macro-level you have a couple choices. Either get all the information on page load and use PHP to put it into JS variables or HTML data attributes, or use AJAX on the mouse over event and do it dynamically (slower, but IMO a better choice).

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.