account.html

---
layout: post
title: Account
permalink: account
---

<div class="student-profile py-4">
    <div class="container">
        <div class="row">
            <div class="card shadow-sm">
                <div class="card-header bg-transparent text-center">
                    <h1 value="name">Nikola Tesla</h1>
                </div>
                <div class="card-body">
                    <p class="mb-0"><strong class="pr-1">Student ID:</strong></p><p>23</p>
                    <p class="mb-0"><strong class="pr-1">Grade Level:</strong></p><p id="grade"></p>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                    <h3 class="mb-0"></i>General Information</h3>
                </div>
                <div class="card-body pt-0">
                    <table align="center" id="classSchedule">
                        <tr>
                            <th>Period 1</th>
                            <td><select id="period1">
                                <option value="null">---Select---</option>
                                <option value="stats">AP Stats</option>
                                <option value="csa">APCSA</option>
                                <option value="csp">APCSP</option>
                                <option value="csse">CSSE</option>
                                <option value="apes">APES</option>
                                <option value="bio">AP Bio</option>
                                <option value="calcab">AP Calc AB</option>
                            </select></td>
                        </tr>
                        <tr>
                            <th>Period 2</th>
                            <td><select id="period2">
                                <option value="null">---Select---</option>
                                <option value="stats">AP Stats</option>
                                <option value="csa">APCSA</option>
                                <option value="csp">APCSP</option>
                                <option value="csse">CSSE</option>
                                <option value="apes">APES</option>
                                <option value="bio">AP Bio</option>
                                <option value="calcab">AP Calc AB</option>
                            </select></td>
                        </tr>
                        <tr>
                            <th>Period 3</th>
                            <td><select id="period3">
                                <option value="null">---Select---</option>
                                <option value="stats">AP Stats</option>
                                <option value="csa">APCSA</option>
                                <option value="csp">APCSP</option>
                                <option value="csse">CSSE</option>
                                <option value="apes">APES</option>
                                <option value="bio">AP Bio</option>
                                <option value="calcab">AP Calc AB</option>
                            </select></td>
                        </tr>                        
                        <tr>
                            <th>Period 4</th>
                            <td><select id="period4">
                                <option value="null">---Select---</option>
                                <option value="stats">AP Stats</option>
                                <option value="csa">APCSA</option>
                                <option value="csp">APCSP</option>
                                <option value="csse">CSSE</option>
                                <option value="apes">APES</option>
                                <option value="bio">AP Bio</option>
                                <option value="calcab">AP Calc AB</option>
                            </select></td>
                        </tr>
                        <tr>
                            <th>Period 5</th>
                            <td><select id="period5">
                                <option value="null">---Select---</option>
                                <option value="stats">AP Stats</option>
                                <option value="csa">APCSA</option>
                                <option value="csp">APCSP</option>
                                <option value="csse">CSSE</option>
                                <option value="apes">APES</option>
                                <option value="bio">AP Bio</option>
                                <option value="calcab">AP Calc AB</option>
                                <!-- Add more options as needed -->
                            </select></td>
                        </tr>
                        <tr>
                            <th>Clubs</th>
                            <td>DECA, Robotics, Speech and Debate</td>
                        </tr>
                    </table>
                    <button onclick="submitSchedule()">Submit Schedule</button>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        background: #67B26F; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #4ca2cd, #67B26F); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to top, #CC5500, #000);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        padding: 0;
        margin: 0;
        font-family: 'Lato', sans-serif;
        color: #000;
    }

    .student-profile .card {
        border-radius: 10px;
    }

    .student-profile .card .card-header .profile_img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        margin: 10px auto;
        border: 10px solid #ccc;
        border-radius: 50%;
    }

    .student-profile .card h3 {
        font-size: 20px;
        font-weight: 700;
    }

    .student-profile .card p {
        font-size: 16px;
        color: #fff;
    }

    .student-profile .table th,
    .student-profile .table td {
        font-size: 14px;
        padding: 5px 10px;
        color: #000;
    }

    h1,
    p,
    h3,
    table {
        text-align: center;
    }

    .center {
        margin-left: auto;
        margin-right: auto;
    }

    th,
    td {
        background: linear-gradient(to center, #CC5500, #000)
    }
    div.container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<script>
    
    fetch('http://localhost:8098/api/person/23')
    .then(response => response.json())
    .then(data => {
        // Extract the grade value
        const grade = data.grade;
        // Update the HTML element with the fetched grade
        document.getElementById('grade').textContent = grade;
    })
    .catch(error => console.error('Error fetching user data:', error));
    
    function submitSchedule() {
        const id = "23"; // The ID of the person you want to update
        const date = "2024-02-07"; // The date for the stats update
        const period1 = document.getElementById('period1').value;
        const period2 = document.getElementById('period2').value;
        const period3 = document.getElementById('period3').value;
        const period4 = document.getElementById('period4').value;
        const period5 = document.getElementById('period5').value;

        const stats = {
            id: id,
            date: date,
            period1: period1,
            period2: period2,
            period3: period3,
            period4: period4,
            period5: period5
        };

        fetch('http://localhost:8098/api/person/setStats', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(stats)
        })
        .then(response => response.json())
        .then(data => {
            // Handle response if needed
            console.log(data);
        })
        .catch(error => console.error('Error updating schedule:', error));
    }

    
</script>