Techies/exchange.html at main · gauriarora-cyber/Techies · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Books</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        .button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

    <h1>Your Listed Books</h1>

    <table>
        <thead>
            <tr>
                <th>Book Name</th>
                <th>Author</th>
                <th>Condition</th>
                <th>Price</th>
                <th>Available for Exchange</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="book-list">
            <!-- Book listings will be added here -->
        </tbody>
    </table>

    <div id="exchange-details" style="margin-top: 20px; display:none;">
        <h3>Exchange Request Details</h3>
        <p id="request-details"></p>
    </div>

    <script>
        // Fetch the books data from json-server and display it
        fetch('http://localhost:3000/books')
            .then(response => response.json())
            .then(books => {
                const bookList = document.getElementById('book-list');
                books.forEach(book => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${book.bookName}</td>
                        <td>${book.author}</td>
                        <td>${book.bookCondition}</td>
                        <td>${book.price}</td>
                        <td>
                            <input type="checkbox" class="exchange-toggle"
                                ${book.available_for_exchange ? 'checked' : ''}
                                onclick="toggleExchangeAvailability(${book.id}, this.checked)">
                        </td>
                        <td>
                            <button class="button" onclick="requestExchange(${book.id})">Request Exchange</button>
                        </td>
                    `;
                    bookList.appendChild(row);
                });
            });

        // Toggle exchange availability (yes/no) when checkbox is clicked
        function toggleExchangeAvailability(bookId, isChecked) {
            fetch(`http://localhost:3000/books/${bookId}`)
                .then(response => response.json())
                .then(book => {
                    if (book) {
                        book.available_for_exchange = isChecked;
                        fetch(`http://localhost:3000/books/${bookId}`, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(book),
                        })
                        .then(response => response.json())
                        .then(updatedBook => {
                            alert(`Book '${updatedBook.bookName}' exchange availability updated.`);
                        })
                        .catch(error => {
                            console.error('Error updating book availability:', error);
                        });
                    }
                });
        }

        // Handle the exchange request when button is clicked
        function requestExchange(bookId) {
            fetch(`http://localhost:3000/books/${bookId}`)
                .then(response => response.json())
                .then(book => {
                    if (book) {
                        // Show exchange details
                        const exchangeDetails = document.getElementById('exchange-details');
                        const requestDetails = document.getElementById('request-details');
                        exchangeDetails.style.display = 'block';

                        // Request details: Which book they want to exchange and what book they want in exchange
                        requestDetails.innerHTML = `
                            You have requested to exchange your book:
                            <br><strong>${book.bookName}</strong> by ${book.author}.
                            <br>Please choose the book you want in exchange.
                        `;
                    }
                });
        }
    </script>

</body>
</html>