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;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: grid;
gap: 15px;
}
label {
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<body>
<!-- Event Management Section -->
<h1>"Event scehdule Manager"</h1>
<div id="event-management" >
<h2>Event Management</h2>
<div id="username"></div>
<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 id="eventsContainer"></div>
<div id="manageEventsContainer" style="display: none"> </div>
<div id="trackEventsContainer" style="display: none"> </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
//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';
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
