fmatos23.github.io/profile.html at main · fmatos23/fmatos23.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile - Allegro</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>User Profile</h1>
        <div class="profile-container">
            <div id="profileInfo" class="profile-info"></div>

            <h2>Your Offers</h2>
            <div id="userOffers" class="offers-container"></div>
            <h2>Loaned Offers</h2>
            <div id="loanedOffersContainer" class="offers-container"></div>
            <button onclick="goHome()" class="btn">Back to Home</button>
            <button onclick="logout()" class="btn">Logout</button>
        </div>
    </div>

    <script>
        function loadProfile() {
            const profile = JSON.parse(localStorage.getItem('userProfile'));
            if (profile) {
                document.getElementById('profileInfo').innerHTML = `
                    <p>First Name: ${profile.firstName}</p>
                    <p>Last Name: ${profile.lastName}</p>
                    <p>Email: ${profile.email}</p>
                    <p>Phone: ${profile.phone}</p>
                `;
                loadUserOffers(profile.email);
                loadLoanedOffers(profile.email);
            } else {
                alert('No profile found. Redirecting to login.');
                window.location.href = 'login.html';
            }
        }

        function loadLoanedOffers(email) {
            const offers = JSON.parse(localStorage.getItem('offers')) || [];
            const loanedOffers = offers.filter(offer => offer.status === 'loaned' && offer.email !== email);
            const loanedOffersContainer = document.getElementById('loanedOffersContainer');
            loanedOffersContainer.innerHTML = '';
            loanedOffers.forEach((offer, index) => {
                const offerElement = document.createElement('div');
                offerElement.className = 'offer';
                offerElement.innerHTML = `
                    <h3>${offer.instrument}</h3>
                    <p>Size: ${offer.size}</p>
                    <p>Material: ${offer.material}</p>
                    <p>Notes: ${offer.notes}</p>
                    <p>Price: €${offer.price}</p>
                    <p>Loan Duration: ${offer.loanDuration} days</p>
                    <p>Owner: ${offer.postedBy} (${offer.contact})</p>
                    <button onclick="returnOffer(${index})" class="btn return-btn">Return</button>
                `;
                loanedOffersContainer.appendChild(offerElement);
            });
        }

        function returnOffer(index) {
            const offers = JSON.parse(localStorage.getItem('offers')) || [];
            if (offers[index].status === 'loaned') {
                offers[index].status = 'available';
                delete offers[index].loanedBy;
                localStorage.setItem('offers', JSON.stringify(offers));
                loadProfile();
                alert('Instrument returned successfully!');
            }
        }

        function loadUserOffers(email) {
            const offers = JSON.parse(localStorage.getItem('offers')) || [];
            const userOffers = offers.filter(offer => offer.email === email);
            const userOffersContainer = document.getElementById('userOffers');
            userOffersContainer.innerHTML = '';
            userOffers.forEach((offer, index) => {
                const offerElement = document.createElement('div');
                offerElement.className = 'offer';
                offerElement.innerHTML = `
                    <h3>${offer.instrument}</h3>
                    <p>Size: ${offer.size}</p>
                    <p>Material: ${offer.material}</p>
                    <p>Notes: ${offer.notes}</p>
                    <p>Price: €${offer.price}</p>
                    <p>Loan Duration: ${offer.loanDuration} days</p>
                    <p>Posted by: ${offer.postedBy} (${offer.contact})</p>
                    <button onclick="cancelOffer(${index})" class="btn cancel-btn">Cancel Offer</button>
                `;
                userOffersContainer.appendChild(offerElement);
            });
        }

        function cancelOffer(index) {
            let offers = JSON.parse(localStorage.getItem('offers')) || [];
            offers.splice(index, 1);
            localStorage.setItem('offers', JSON.stringify(offers));
            loadProfile();
        }

        function goHome() {
            window.location.href = 'index.html';
        }

        function logout() {
            const profile = JSON.parse(localStorage.getItem('userProfile'));
            if (profile) {
                sessionStorage.setItem('userProfile', JSON.stringify(profile));
                localStorage.removeItem('userProfile');
                alert('Logged out successfully!');
                window.location.href = 'login.html';
            }
        }

        window.onload = loadProfile;
    </script>
</body>
</html>