Notes
Notes - notes.io |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Management System</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<style>
body {
font-family: Arial, sans-serif;
display: grid;
grid-template-columns: 250px 1fr; /* Sidebar and Content columns */
min-height: 100vh;
margin: 2;
}
/* Sidebar styles */
.sidebar {
display: list-item;
background-color: #333;
color: #992a2a;
padding: 20px;
}
/* Event buttons in the sidebar */
button {
display: block;
margin-bottom: 10px;
padding: 10px 20px;
background-color: #304d9c;
color: #fff;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #c2185b;
}
/* Content styles */
.content {
padding: 20px;
background-color: ddd;
}
/* Event grid in the content */
.event-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px;
}
/* Event container in the content */
.event-container {
background-color: #7e9191;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
/* Event title */
.event-title {
font-size: 24px;
font-weight: bold;
color: #333;
}
/* Event details */
.event-details {
font-size: 16px;
color: #666;
margin-top: 10px;
}
</style>
<body>
<!-- Event Management Section -->
<div id="event-management" >
<h2>Event Management</h2>
<div sidebar>
<h3 id="username"></h3>
</div sidebar>
<button onclick="displayUpcomingEvents()">Upcoming Events</button>
<button onclick="manageMyEvents()">Manage My Events</button>
<button onclick="createNewEvent()">Create New Event</button>
<button onclick="trackMyEvents()">Track My Events</button>
<button onclick="Appointment()">appointments</button>
<button onclick="logout()">Logout</button>
</div>
<div content>
<div id="eventsContainer" class="event-grid style "></div>
<div id="manageEventsContainer" style="display: none"> </div>
<div id="trackEventsContainer" style="display: none"> </div>
</div>
</div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get the username parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username');
// Display the username on the page
const usernameElement = document.getElementById('username');
if (usernameElement) {
usernameElement.textContent = `Welcome , ${username}!`;
}
});
//upcoming event
function displayUpcomingEvents() {
fetch('https://localhost:7114/api/Evensht/upcoming')
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch upcoming events: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(upcomingEvents => {
const eventsContainer = document.getElementById('eventsContainer');
eventsContainer.innerHTML = '';
upcomingEvents.forEach(event => {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event-container');
eventDiv.innerHTML = `<h3>${event.name}</h3><p><strong>Date:</strong>${event.date}</p><p><strong>Description :</strong>${event.description}</p><p><strong>Location:</strong>${event.location}</p><p><strong> Event creator:</strong>${event.creator}`;
// Add a Join button with an onclick event to dynamically obtain the event name
const joinButton = document.createElement('button');
joinButton.textContent = 'Join Event';
joinButton.onclick = function () {
joinEvent(event.name);
};
eventDiv.appendChild(joinButton);
eventsContainer.appendChild(eventDiv);
});
})
.catch(error => {
alert(`Error fetching upcoming events: ${error.message}`);
});
}
//join the event
function joinEvent(eventName) {
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username') || "YourDefaultUsername";
const joinRequest = {
EventName: eventName,
Username: username
};
fetch('https://localhost:7114/api/Evensht/join', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(joinRequest),
})
.then(response => {
if (!response.ok) {
throw new Error(`Failed to join event: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(data => {
alert(`Successfully joined event: ${data}`);
// You can perform additional actions here after a successful join
})
.catch(error => {
alert(`Error joining event: ${error.message}`);
});
}
/// manage
function manageMyEvents() {
// Hide other containers and show the manageEventsContainer
document.getElementById('eventsContainer').style.display = 'none';
document.getElementById('manageEventsContainer').style.display = 'block';
document.getElementById('trackEventsContainer').style.display = 'block';
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username');
// Call an API to fetch and display user's events
fetch(`https://localhost:7114/api/Evensht/manage/${username}`)
.then(response => response.json())
.then(events => {
const manageEventsContainer = document.getElementById('manageEventsContainer');
manageEventsContainer.innerHTML = '';
events.forEach(event => {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event-container');
eventDiv.innerHTML = `<h3>${event.name}</h3>
<p><strong>Date:</strong>${event.date}</p>
<p><strong>Description :</strong>${event.description}</p>
<p><strong>Location:</strong>${event.location}</p>
<p><strong>Event creator:</strong>${event.creator}`;
// Add edit and join buttons with onclick events
const editButton = document.createElement('button');
editButton.textContent = 'Edit Event';
editButton.onclick = function () {
editEvent(event.name);
};
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete Event';
deleteButton.onclick = function () {
deleteEvent(event.name);
};
eventDiv.appendChild(editButton);
eventDiv.appendChild(deleteButton);
manageEventsContainer.appendChild(eventDiv);
});
})
.catch(error => {
console,error('errorfacing',error)
alert(`Error fetching managed events: ${error.message}`);
});
}
//EDIT EVENT
function editEvent(eventName) {
const updatedName = prompt("Enter the updated event name:");
const updatedLocation = prompt("Enter the updated event location:");
const updatedDate = prompt("Enter the updated event date (YYYY-MM-DDTHH:mm:ss.fffZ):");
const updatedDescription = prompt("Enter the updated event description:");
const urlParams = new URLSearchParams(window.location.search);
const UPDATEusername = urlParams.get('username');
const updatedEventData = {
Name: updatedName,
Location: updatedLocation,
Date: new Date(updatedDate), // Convert to a valid date object
Description: updatedDescription,
Creator:UPDATEusername
};
fetch(`https://localhost:7114/api/Evensht/edit/${eventName}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updatedEventData),
})
.then(response => {
if (!response.ok) {
throw new Error(`Failed to edit event: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(data => {
alert(`Event "${eventName}" edited successfully!`);
// Additional actions after a successful edit (if needed)
})
.catch(error => {
console.error('Error editing event:', error);
alert(`Error editing event: ${error.message}`);
});
}
//delete
function deleteEvent(eventName) {
// Confirm with the user before deleting the event
const confirmation = confirm(`Are you sure you want to delete the event "${eventName}"?`);
if (confirmation) {
// Make an AJAX DELETE request to delete the event
fetch(`https://localhost:7114/api/Evensht/delete/${eventName}`, {
method: 'DELETE',
})
.then(response => {
if (!response.ok) {
throw new Error(`Failed to delete event: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(data => {
alert(`Event "${eventName}" deleted successfully!`);
// You can perform additional actions here after a successful delete
})
.catch(error => {
console.error('Error deleting event:', error);
alert(`Error deleting event: ${error.message}`);
});
}
}
//CREATE
function createNewEvent() {
// Prompt user for event details
const eventName = prompt("Enter the event name:");
const location = prompt("Enter the event location:");
const date = prompt("Enter the event date (YYYY-MM-DDTHH:mm:ss.fffZ):");
const description = prompt("Enter the event description:");
// Get the username parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const creator = urlParams.get('username') || "YourDefaultUsername";
// Data to be sent in the request body
const eventData = {
Name: eventName,
Location: location,
Date: date,
Description: description,
Creator: creator
};
// Make an AJAX POST request
$.ajax({
type: "POST",
url: "https://localhost:7114/api/Evensht/create",
contentType: "application/json",
data: JSON.stringify(eventData),
success: function (response) {
if (response.success) {
const createdEvent = response.events;
alert(`Event "${createdEvent.Name}" created successfully!`);
} else {
alert("Unexpected error");
}
},
error: function (error) {
console.error("Error creating event: ", error.responseText);
alert("Error creating event: " + error.responseText);
}
});
// Assuming you have other containers, show the trackEventContainer and hide other containers
document.getElementById('eventsContainer').style.display = 'none';
document.getElementById('manageEventsContainer').style.display = 'none';
document.getElementById('trackEventContainer').style.display = 'block';
}
//track the events
function trackMyEvents() {
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username') || "YourDefaultUsername";
fetch(`https://localhost:7114/api/Evensht/track/${username}`)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch tracked events: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(trackedEvents => {
const trackEventsContainer = document.getElementById('trackEventsContainer');
trackEventsContainer.innerHTML = '';
if (trackedEvents.length > 0) {
trackedEvents.forEach(eventInfo => {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event-container');
eventDiv.innerHTML = `<p>${eventInfo}</p>`;
trackEventsContainer.appendChild(eventDiv);
});
} else {
trackEventsContainer.innerHTML = '<p>No events tracked yet.</p>';
}
// Show the trackEventsContainer and hide eventsContainer
document.getElementById('eventsContainer').style.display = 'none';
document.getElementById('manageEventsContainer').style.display = 'none';
document.getElementById("trackEventsContainer").style.display = 'block';
})
.catch(error => {
alert(`Error fetching tracked events: ${error.message}`);
});
}
function Appointment()
{
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username') || "YourDefaultUsername";
fetch(`https://localhost:7114/api/Evensht/track/${username}`)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch tracked events: ${response.status} - ${response.statusText}`);
}
return response.json();
})
.then(trackedEvents => {
const trackEventsContainer = document.getElementById('trackEventsContainer');
trackEventsContainer.innerHTML = '';
if (trackedEvents.length > 0) {
trackedEvents.forEach(eventInfo => {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event-container');
eventDiv.innerHTML = `<p>${eventInfo}</p>`;
trackEventsContainer.appendChild(eventDiv);
});
} else {
trackEventsContainer.innerHTML = '<p>No events tracked yet.</p>';
}
// Show the trackEventsContainer and hide eventsContainer
document.getElementById('eventsContainer').style.display = 'none';
document.getElementById('manageEventsContainer').style.display = 'none';
trackEventsContainer.style.display = 'block';
})
.catch(error => {
alert(`Error fetching tracked events: ${error.message}`);
});
}
function logout() {
window.location.href=`project.html`;
}
</script>
</html>
|
|
Notes.io is a web-based application for 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 12 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
