Gmail-parse-web/index.php at main · BitBender0702/Gmail-parse-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BDGDASH</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"
        rel="stylesheet" />

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
</head>
<style>
@media (max-width: 576px) {

    .table thead th,
    .table tbody td {
        font-size: 8px;
        padding: 5px;
    }

    .btn-search {
        font-size: 11px
    }

    #data_display_period {
        font-size: 20px;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}
</style>
<body>
    <?php
    $months = [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
    ];
    ?>
    <div class="container mt-5">
        <div class="mb-3">
            <label for="">Select Year : </label>
            <input type="text" id="datepicker" value="<?php echo date('Y'); ?>" />
        </div>
        <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group w-100" role="group" aria-label="First group">
                <?php for ($i = 0; $i < 12; $i++) { ?>
                <button type="button" class="btn btn-outline-dark btn-search"
                    data-month="<?php echo $i + 1; ?>"><?php echo $months[$i]; ?></button>
                <?php } ?>
            </div>
        </div>
        <h2 class="title text-center mt-5 mb-5" id="data_display_period"><?php echo date('Y-m-d'); ?></h2>
        <div class="datatable-wrapper">
            <table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th rowspan="2" class="text-center align-middle" style="background-color: #badc94;">Location</th>
                        <th colspan="2" class="text-center align-middle" style="background-color: #badc94;">NEW MONTHLY</th>
                        <th colspan="2" class="text-center align-middle" style="background-color: #badc94;">NEW 12M</th>
                    <th colspan="2" class="text-center align-middle" style="background-color: #badc94;">Renewals</th>
                        <th rowspan="2" class="text-center align-middle" style="background-color: #badc94;">Grand Total</th>
                    </tr>
                    <tr>
                        <th class="text-center align-middle">No.Signed</th>
                        <th class="text-center align-middle">Total</th>
                        <th class="text-center align-middle">No. Signed</th>
                        <th class="text-center align-middle">Total</th>
                        <th class="text-center align-middle">No. Signed</th>
                        <th class="text-center align-middle">Total</th>
                    </tr>
                </thead>
                <tbody id="data_list"></tbody>
            </table>
        </div>
        <div class="btn-toolbar mt-5" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group w-100" role="group" aria-label="Second group">
                <?php for ($i = 0; $i < 12; $i++) { ?>
                <button type="button" class="btn btn-outline-dark btn-search"
                    data-month="<?php echo $i + 1; ?>"><?php echo $months[$i]; ?></button>
                <?php } ?>
            </div>
        </div>
        <div class="btn-toolbar mt-5 toolbar3" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group w-50" role="group" aria-label="Second group" style="margin: 0 auto;">
                <button type="button" class="btn btn-outline-dark btn-search" data-month="before">Yesterday</button>
                <button type="button" class="btn btn-outline-dark btn-search" data-month="today">Today</button>
            </div>
        </div>
    </div>
    <script>
    // Function to fetch data from the API and populate the table
    function fetchData($month, $year) {
        $.ajax({
            url: 'http://bdgdash.com/server.php', // Change the URL to the actual location of your API script
            method: 'POST',
            dataType: 'json',
            data: {
                'month': $month,
                'year': $year
            },
            success: function(resp) {
                $('#data_list').empty();

                if (resp.error) {
                    $('#data_list').append('<tr>' +
                        '<td class="text-center align-middle" colspan="8">No data found.</td>' +
                        '</tr>');
                } else {
                    resp.data.forEach(function(row) {
                        $('#data_list').append('<tr>' +
                            '<td class="text-center align-middle">' + row.location + '</td>' +
                            '<td class="text-center align-middle">' + (row?.type1 ?? "-") +
                            '</td>' +
                            '<td class="text-center align-middle">' + (row?.type1 > 0 ? "€ " + (
                                54.95 * parseInt(row.type1)).toLocaleString('en-US') : '-') +
                            '</td>' +
                            '<td class="text-center align-middle">' + (row.type2 ?? "-") +
                            '</td>' +
                            '<td class="text-center align-middle">' + (row?.type2 > 0 ? '€ ' + (
                                325 * parseInt(row.type2)).toLocaleString('en-US') : '-') +
                            '</td>' +
                            '<td class="text-center align-middle">' + (row?.type3 ?? "-") +
                            '</td>' +
                            '<td class="text-center align-middle">' + (row?.type3 > 0 ? '€ ' + (
                                325 * parseInt(row.type3)).toLocaleString('en-US') : '-') +
                            '</td>' +
                            '<td class="text-center align-middle">€ ' + ((54.95 * parseInt(row
                                    .type1 ?? 0)) + 325 * parseInt(row.type2 ?? 0) + 325 *
                                parseInt(row.type3 ?? 0)).toLocaleString(
                                'en-US') + '</td>' +
                            '</tr>');
                    });
                }

                $('#data_display_period').text(resp.title);
            },
            error: function(error) {
                console.log('Error fetching data: ', error);
            }
        });
    }

    function callAPI() {
        $.ajax({
            url: 'http://bdgdash.com/server.php',
            dataType: 'json',
            method: 'GET',
            success: function(response) {
                // Handle the response data here
                console.log('API call successful');
            },
            error: function(xhr, status, error) {
                // Handle errors here
                console.error('Error making API call:', error);
            }
        });
    }

    // Call the fetchData function on page load
    $(document).ready(function() {
        let currentMonth = "today";
        let currentYear = $('#datepicker').val();

        fetchData(currentMonth, currentYear);

        $('body .btn-search').on('click', function() {
            let month = $(this).attr('data-month');
            let year = $('#datepicker').val();
            $('body .btn-search').removeClass('active');

           $('body .btn-search[data-month="' + month + '"]').addClass('active');
            fetchData(month, year);
        });

        // Call the API initially when the page loads
        callAPI();

        // Set interval to call the API every 30 minutes (30 * 60 * 1000 milliseconds)
        setInterval(callAPI, 5 * 60 * 1000);

        $("#datepicker").datepicker({
            format: "yyyy",
            viewMode: "years",
            minViewMode: "years",
            autoclose: true,
        });

        $('#datepicker').on('change', function() {
            let selYear = $(this).val();
            $('body .btn-search').removeClass('active');

            if (currentYear == selYear) {
                $('.toolbar3').show();
                fetchData('today', selYear);
            } else {
                fetchData(1, selYear);
                $('.toolbar3').hide();
                $('body .btn-search[data-month="1"]').addClass('active');
            }
        })
    });
    </script>

</body>

</html>