Notes
Notes - notes.io |
document.addEventListener('DOMContentLoaded', function () {
const usernameSearch = document.getElementById('usernameSearch');
const bookSearch = document.getElementById('bookSearch');
const userResults = document.getElementById('userResults');
const bookResults = document.getElementById('bookResults');
const issueBookForm = document.getElementById('issueBookForm');
const responseMessage = document.getElementById('responseMessage');
let selectedUserId = null;
let selectedBookId = null;
// Function to search users
usernameSearch.addEventListener('input', async function () {
const query = usernameSearch.value;
if (query.length > 1) {
try {
const response = await fetch(`http://127.0.0.1:8000/api/userslist/?search=${query}`);
const data = await response.json();
// Log the entire response to understand the structure
console.log('User Search Response:', data);
userResults.innerHTML = '';
// Check if the response contains the 'members' array
if (data.members && Array.isArray(data.members)) {
data.members.forEach(user => {
const li = document.createElement('li');
li.textContent = user.username;
li.addEventListener('click', () => {
selectedUserId = user.id;
usernameSearch.value = user.username;
userResults.innerHTML = '';
});
userResults.appendChild(li);
});
} else {
console.error('Unexpected user data format:', data);
}
} catch (error) {
console.error('Error fetching users:', error);
}
}
});
// Function to search books
bookSearch.addEventListener('input', async function () {
const query = bookSearch.value;
if (query.length > 1) {
try {
const response = await fetch(`http://127.0.0.1:8000/api/books/?search=${query}`);
const data = await response.json();
// Log the entire response to understand the structure
console.log('Book Search Response:', data);
bookResults.innerHTML = '';
// Check if the response contains the 'books' array
if (data.books && Array.isArray(data.books)) {
data.books.forEach(book => {
const li = document.createElement('li');
li.textContent = book.name;
li.addEventListener('click', () => {
selectedBookId = book.id;
bookSearch.value = book.name;
bookResults.innerHTML = '';
});
bookResults.appendChild(li);
});
} else {
console.error('Unexpected book data format:', data);
}
} catch (error) {
console.error('Error fetching books:', error);
}
}
});
// Form submission handler
// Form submission handler
issueBookForm.addEventListener('submit', async function (e) {
e.preventDefault();
const dueDate = document.getElementById('dueDate').value;
if (selectedUserId && selectedBookId && dueDate) {
try {
const response = await fetch('http://127.0.0.1:8000/api/issue-book/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
user: selectedUserId, // Changed from user_id to user
book: selectedBookId, // Changed from book_id to book
due_date: dueDate,
}),
});
if (response.ok) {
responseMessage.textContent = 'Book issued successfully!';
responseMessage.style.color = 'green';
} else {
const errorData = await response.json(); // Get the error message from the response
console.error('Error issuing book:', errorData);
responseMessage.textContent = 'Error issuing book. Please try again.';
responseMessage.style.color = 'red';
}
} catch (error) {
console.error('Error issuing book:', error);
responseMessage.textContent = 'Error issuing book. Please try again.';
responseMessage.style.color = 'red';
}
} else {
responseMessage.textContent = 'Please select a user, book, and due date.';
responseMessage.style.color = 'red';
}
});
});
------------------------------------------------html-----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Issue Book</title>
<link rel="stylesheet" href="try.css"> <!-- Link to your CSS file -->
</head>
<body>
<div class="container">
<h2>Issue a Book</h2>
<form id="issueBookForm">
<div class="form-group">
<label for="usernameSearch">Search User:</label>
<input type="text" id="usernameSearch" placeholder="Enter username to search" autocomplete="off">
<ul id="userResults" class="search-results"></ul>
</div>
<div class="form-group">
<label for="bookSearch">Search Book:</label>
<input type="text" id="bookSearch" placeholder="Enter book title to search" autocomplete="off">
<ul id="bookResults" class="search-results"></ul>
</div>
<div class="form-group">
<label for="dueDate">Select Due Date:</label>
<input type="date" id="dueDate" required>
</div>
<button type="submit" class="submit-btn">Issue Book</button>
</form>
<div id="responseMessage"></div>
</div>
<script src="try.js"></script> <!-- Link to your JavaScript file -->
</body>
</html>
--------------------------------csss-----------------------
/* Basic body styles */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #6a11cb, #2575fc);
margin: 0;
padding: 0;
color: #333;
}
/* Container for the form */
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
/* Form header styles */
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
/* Form group styles */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
/* Input field styles */
input[type="text"],
input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
/* Search results list styles */
.search-results {
list-style: none;
padding: 0;
margin: 0;
background-color: #f9f9f9;
border: 1px solid #ddd;
max-height: 150px;
overflow-y: auto;
}
.search-results li {
padding: 8px;
cursor: pointer;
}
.search-results li:hover {
background-color: #eaeaea;
}
/* Button styles */
.submit-btn {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s, transform 0.3s;
}
.submit-btn:hover {
background-color: #218838;
transform: scale(1.05);
}
/* Response message styles */
#responseMessage {
margin-top: 15px;
text-align: center;
font-weight: bold;
}
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
