JezK

Edit File: index.php

<?php
$finalData = array();
//ini_set('display_errors', '1');
//ini_set('display_startup_errors', '1');
//error_reporting('1');
require_once('../wp-load.php');
require('../wp-blog-header.php');
get_header(); //Include header
$date = date('Y-m-d');
?>

$(".tablinks").click(function (event, initial) {
            console.log('tablinks')

ore = $(this).val().split(" ")[0] ? $(this).val().split(" ")[0] : "Rare_Earth"
            matrialTypeToGetEle = $(this).val().split(" ")[1]
            // alert(matrialTypeToGetEle);
            
            date = $('#calender').val();
            
            $.ajax({
                method: 'POST',
                url: "alloyslist.php",
                data: {
                    ore: matrialTypeToGetEle,
                    date : date
                },
                success: function (response) {
                    $("#metals").empty();
                    var optionsRes = JSON.parse(response)

optionsRes.forEach(element => {
                        $("#metals").append(`<option value="${element.description}">${element.description}</option>`);
                    });
                    $(".months:last").trigger('click');
                    if (initial === "pageLoad") {
                        $("#metals").first().trigger('change');
                    }
                }
            })
        })

$(".months").click(function () {
            duration = $(this).val() ? $(this).val() : "all";
            $("#metals").first().trigger('change');
        })

var dataPoints = [];
        var minDate = dataPoints.length > 0 ? new Date(dataPoints[dataPoints.length - 1]?.x) : Date(2018, 04, 01);
        var maxDate = dataPoints.length > 0 ? new Date(dataPoints[0]?.x) : Date();

var stockChart = new CanvasJS.StockChart("stockChartContainer", {
            title: {
                text: ""
            },
            charts: [{
                data: [{
                    type: "line", //Change it to "spline", "area", "column"
                    dataPoints: dataPoints
                }]
            }],
            rangeSelector: {
                enabled: false
            },
            navigator: {
                // enabled:false,
                slider: {
                    minimum: minDate,
                    maximum: maxDate
                }
            }
        });

$("#metals").change(function () {
            let selectedAlloy = $(this).val();
            let dateSelctedFrom = document.getElementById('calender').value;
            $.ajax({
                method: 'POST',
                url: "alloysprice.php",
                data: {
                    matrialTypeToGetEle: matrialTypeToGetEle,
                    ore: ore ? ore : "Rare_Earth",
                    duration: duration,
                    selectedAlloy: selectedAlloy,
                    dateSelectedFromCalender: dateSelctedFrom
                },
                success: function (response) {
                    const parserChartRes = JSON.parse(response)
                    // Removing the "x" key from each object using map()
                    var newParserChartRes = parserChartRes.map(function (obj) {
                        var newObj = {
                            ...obj
                        }; // Create a shallow copy of the object
                        newObj.y = Number(newObj.y); // Change the "y" value to an integer
                        newObj.x = new Date((newObj.x).split('/').reverse().join('/'));

return newObj; // Return the modified object
                    });

updateChartData(newParserChartRes, selectedAlloy);
                    dataPoints = []

},
                error: function (xhr, status, error) {
                    console.log(xhr, status, error);
                }
            })
        });

$(".tablinks").first().trigger('click', ["pageLoad"]);

$("#calender").change(function (e) {
            var materialTypeSelected = document.getElementById('typeOfMaterialNumber').value
            getDataFromDataBase(e.target.value, materialTypeSelected, ore)
        })
    });

function openCity(evt, cityName, material_type) {
        console.log('openCity')
        $('#typeOfMaterialNumber').val(material_type) //memory the value of material or tab for other changes
        let dateSendToAjax = document.getElementById('calender').value; //'<?php echo $today; ?>'
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
        getDataFromDataBase(dateSendToAjax, material_type, evt.target.value.split(" ")[0])

}

function getDataFromDataBase(reqDate, reqMaterialType, reqDataTableName) {
        $.ajax({
            method: 'POST',
            url: 'getMarketData.php',
            data: {
                material_type: reqMaterialType,
                date: reqDate
            },
            // dataType: 'json',
            success: function (response) {
                //alert(response);
              
                const parsedData = JSON.parse(response);

// Get the DataTable instance
                var table = $(`#${reqDataTableName}_Table`).DataTable();

// Clear existing rows and destroy the DataTable instance
                table.clear().destroy();

if (!parsedData.hasOwnProperty('error')) {

// Extract desired columns from the data
                    var extractedData = parsedData.map(function (row) {
                        return [row.description, row.price, row.date];
                    });

// Add new rows to the DataTable
                    extractedData.forEach(function (rowData) {
                        table.row.add(rowData);
                    });
                }
                // console.log(extractedData, 'extractedData');

// Recreate the DataTable with the updated data and options
                table = $(`#${reqDataTableName}_Table`).DataTable({
                    data: extractedData,
                    destroy: true, // Destroy the previous instance
                    paging: true, // Enable pagination
                    // Add any other DataTable options as needed
                });
            },
            error: function (xhr, status, error) {
                console.log(xhr, status, error);
            }
        });
    }
</script>

body {
        max-width: 100% !important
    }

a {
        text-decoration: none;
    }

.alloyList {
        /* width: 532.484px; */
        height: 40px;
    }

.site-content .ast-container {
        display: block;
        max-width: 100%;
        padding: 0;
    }

.dataTables_filter {
        margin-bottom: 1rem;
    }

.dataTables_paginate.paging_full_numbers {
        font-size: 14px;
        margin-top: 1rem;
    }

.dataTables_info {
        font-size: 14px;
        margin-top: 1rem;
    }

/* Style the tab */
    .tab {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 25%;
        margin-bottom: 2rem;
    }

/* Style the buttons inside the tab */
    .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 21px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 16px;
    }

/* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

/* Create an active/current "tab button" class */
    .tab button.active {
        background-color: #20bec7;
        color: white;
        font-weight: 600;
    }

/* Style the tab content */
    .tabcontent {
        float: left;
        padding: 0px 12px;
        border: 1px solid #ccc;
        width: 75%;
        padding: 1rem;
    }

.market_img {
        display: block;
        margin: auto;
        width: 60%;
    }

div#example_filter {
        margin-bottom: 1rem;
    }

.main img {
        padding: 1rem 0;
    }

.main h5 {
        padding: 1rem 0;
        margin-bottom: 0;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: linear-gradient(to bottom, rgb(0 191 199 / 8%) 0%, rgb(0 191 199 / 40%) 100%);
        border-radius: 50px;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.2em 0.8em;
    }

.header {
        padding: 2rem;
        background: #323232;
    }

.btn-group button {
        background-color: #04AA6D;
        /* Green background */
        border: 1px solid green;
        /* Green border */
        color: white;
        /* White text */
        padding: 2px 10px;
        /* Some padding */
        cursor: pointer;
        /* Pointer/hand icon */
        float: left;
        /* Float the buttons side by side */
        height: 40px;
    }

.header p {
        color: white;
    }

tr.odd {
        background: #00bfc714 !important;
    }

.table_top {
        display: flex;
        justify-content: space-between;
        background: #00bfc72e;
        padding: 1rem;
        border-radius: 5px
    }

body {}

td.sorting_1 {
        width: 62%;
    }

@media (max-width: 767px) {
        .table_top {
            display: block;
        }

.tablinks {
            padding: 8px !important;
            font-size: 14px !important;
        }

.market-table {
            display: grid;
        }

.market-table .tab,
        .tabcontent {
            width: 100%;
        }
    }

.btn-secondary:not(:disabled):not(.disabled).active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .show>.btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: #20bec7;
        border-color: #20bec7;
    }

@media (max-width: 544px) {
        .ast-separate-container #content .ast-container {
            padding-left: 0em !important;
            padding-right: 0em !important;
        }
    }
</style>

<div class="header">
    <div class="container">
        <h2 style="color: white; font-weight: 700">Market Data</h2>
    </div>
</div>

<?php echo ($_SESSION['user_id'] != '') ? ''
    :
    '<div class="container main">
    <p class="mt-5">
        The database provides daily price updates of rare-earth products, minor metals, battery materials, precious
        metals
        and base metals.
    </p>
    <h5 style="font-weight:600">
        Access to the database is provided only to REIA members. If you would like to know more, please <a
            href="https://bu3is.krify.com/REIA_Web/contact/"><span style="color:#20bec7">contact us.</span></a>
    </h5>
    <img src="https://bu3is.krify.com/REIA_Web/wp-content/uploads/2023/04/marketdata.png" class="market_img">

</div>' ?>

<div class="container table_top mb-4">
    <div><label><b>Listing Date</b></label><input type="date" id="calender" class="form-control"
            value="<?php echo date('Y-m-d'); ?>" max="<?php echo date('Y-m-d'); ?>">
    </div>

<div class="btn-group d-block btn-group-toggle" data-toggle="buttons">
        <p style="margin-bottom: 0.5rem"><b>Range</b></p>
        <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option1" autocomplete="off" class="months" value="1">1m
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option2" autocomplete="off" class="months" value="3">3m
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option3" autocomplete="off" class="months" value="6">6m
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option4" autocomplete="off" class="months" value="9">9m
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option5" autocomplete="off" class="months" value="12">12m
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option6" autocomplete="off" class="months" value="all" checked>all
        </label>
    </div>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">

</div>
    <div>
        <label><b>Chart for Commodity</b></label>
        <select id="metals" class="form-control alloyList">
            <option value="0">Select Alloy:</option>
        </select>
    </div>
</div>
<div class="container">
    <div id="stockChartContainer" style="height: 400px; width: 100%;"></div>
</div>
<div style="margin-bottom:1rem; margin-top: 1rem">
    <input type='hidden' id='typeOfMaterialNumber' />
    <div class="container mt-5 market-table ">
        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'Rare_Earth',2)" id="defaultOpen"
                value="Rare_Earth 2">Rare
                Earth</button>
            <button class="tablinks" onclick="openCity(event, 'Battery',18)" value="Battery 18">Battery</button>
            <button class="tablinks" onclick="openCity(event, 'Minor metal',7)" value="minor_metal 7">Minor
                metal</button>
            <button class="tablinks" onclick="openCity(event, 'Precious metal',8)" value="Precious_metal_PGM 8">Precious
                metal
                /
                PGM</button>
            <button class="tablinks" onclick="openCity(event, 'Lead',1)" value="Lead_Zinc_Tin 1">Lead / Zinc /
                Tin</button>
            <button class="tablinks" onclick="openCity(event, 'Aluminium',3)" value="Aluminium 3">Aluminium</button>
            <button class="tablinks" onclick="openCity(event, 'Copper',6)" value="Copper 6">Copper</button>
            <button class="tablinks" onclick="openCity(event, 'Iron',9)" value="Iron_ore_steel 9">Iron ore /
                steel</button>
            <button class="tablinks" onclick="openCity(event, 'SUS',5)" value="SUS_Ferroalloy 5">SUS /
                Ferroalloy</button>
            <button class="tablinks" onclick="openCity(event, 'E-waste',4)" value="E-waste 4">E-waste</button>
            <button class="tablinks" onclick="openCity(event, 'SCD',15)" value="SCD_Electronics 15">SCD /
                Electronics</button>
            <button class="tablinks" onclick="openCity(event, 'Recycling',16)" value="Recycling 16">Recycling</button>
        </div>

<table class="example border" id='Rare_Earth_Table' class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>

</tr>
                </thead>
                <tbody>

</tbody>
            </table>

</div>

<table class="example border" class="display" id='Battery_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Battery'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Minor metal" class="tabcontent">
            <table class="example border" class="display" id='minor_metal_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Minor metal'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Precious metal" class="tabcontent">
            <table class="example border" class="display" id='Precious_metal_PGM_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Precious metal / PGM'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Lead" class="tabcontent">
            <table class="example border" class="display" id='Lead_Zinc_Tin_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Lead / Zinc / Tin'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Aluminium" class="tabcontent">
            <table class="example border" class="display" id='Aluminium_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Aluminum'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Copper" class="tabcontent">
            <table class="example border" class="display" id='Copper_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Copper'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Iron" class="tabcontent">
            <table class="example border" class="display" id='Iron_ore_steel_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Iron'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="SUS" class="tabcontent">
            <table class="example border" class="display" id='SUS_Ferroalloy_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['SUS, Ferrous Alloy'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="E-waste" class="tabcontent">
            <table class="example border" class="display" id='E-waste_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['E-Waste'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                       <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="SCD" class="tabcontent">
            <table class="example border" class="display" id='SCD_Electronics_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['SCD / Electronic materials'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>

<div id="Recycling" class="tabcontent">
            <table class="example border" class="display" id='Recycling_Table' style="width:100%">
                <thead>
                    <tr>
                        <th>Commodity Description</th>
                        <th>Price</th>
                        <th>Update Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($finalData['Recycling'] as $alloy => $price) {
                        // print_r($price);
                        echo "<tr>
                  <td>" . $alloy . "</td><td>" . $price . "</td></tr>";
                    } ?>
                </tbody>
            </table>
        </div>
    </div>
</div>