<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gym Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"
</div>
<script type="module" src="scripts.js" defer ></script>
</html>
SCRIPT.JS FILE
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js';
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js';
import { getFirestore, collection, addDoc, getDocs, serverTimestamp, query, orderBy } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js';
const firebaseConfig = {
apiKey: "AIzaSyAqW1Sb6okV-bIp6Z_q1LjnR62fjEyEOKM",
authDomain: "management-system-f0b2b.firebaseapp.com",
projectId:"management-system-f0b2b",
storageBucket: "management-system-f0b2b.appspot.com",
messagingSenderId:"412778751231",
appId: "1:412778751231:web:316fe137b5c980417ed8ca",
measurementId:"G-KBG05HJ8F6"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
const analytics = getAnalytics(app);
document.addEventListener('DOMContentLoaded', () => {
const app = document.getElementById('app');
const renderLogin = () => {
app.innerHTML = `
<h2>Login</h2>
<form id="login-form">
<input type="email" id="login-email" placeholder="Email" required>
<input type="password" id="login-password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="#" id="signup-link">Sign up</a></p>
`;
document.getElementById('login-form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
auth.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
console.log('User logged in:', userCredential.user);
renderDashboard();
})
.catch((error) => {
console.error('Error logging in:', error);
});
});
document.getElementById('signup-link').addEventListener('click', (e) => {
e.preventDefault();
renderSignup();
});
};
const renderSignup = () => {
app.innerHTML = `
<h2>Sign Up</h2>
<form id="signup-form">
<input type="email" id="signup-email" placeholder="Email" required>
<input type="password" id="signup-password" placeholder="Password" required>
<button type="submit">Sign Up</button>
</form>
<p>Already have an account? <a href="#" id="login-link">Login</a></p>
`;
document.getElementById('signup-form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('signup-email').value;
const password = document.getElementById('signup-password').value;
auth.createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
console.log('User signed up:', userCredential.user);
renderDashboard();
})
.catch((error) => {
console.error('Error signing up:', error);
});
});
document.getElementById('login-link').addEventListener('click', (e) => {
e.preventDefault();
renderLogin();
});
};
const renderDashboard = () => {
app.innerHTML = `
<h2>Dashboard</h2>
<button id="logout">Logout</button>
<h3>Members</h3>
<div id="members-list"></div>
<h3>Add Member</h3>
<form id="add-member-form">
<input type="text" id="member-name" placeholder="Name" required>
<input type="email" id="member-email" placeholder="Email" required>
<button type="submit">Add Member</button>
</form>
</div>
<div class="section">
<h3>Fees</h3>
<div id="fees-list"></div>
<form id="add-fee-form">
<input type="text" id="fee-member-email" placeholder="Member Email" required>
<input type="number" id="fee-amount" placeholder="Amount" required>
<button type="submit">Add Fee</button>
</form>
</div>
<div class="section">
<h3>Working Day Notifications</h3>
<div id="notifications-list"></div>
<form id="add-notification-form">
<input type="text" id="notification-message" placeholder="Notification Message" required>
<button type="submit">Add Notification</button>
</form>
</div>
`;
document.getElementById('logout').addEventListener('click', () => {
auth.signOut().then(() => {
console.log('User logged out');
renderLogin();
});
});
const addMemberForm = document.getElementById('add-member-form');
addMemberForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('member-name').value;
const email = document.getElementById('member-email').value;
db.collection('members').add({
name: name,
email: email,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then(() => {
console.log('Member added');
addMemberForm.reset();
loadMembers();
})
.catch((error) => {
console.error('Error adding member:', error);
});
});
const addFeeForm = document.getElementById('add-fee-form');
addFeeForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('fee-member-email').value;
const amount = document.getElementById('fee-amount').value;
db.collection('fees').add({
email: email,
amount: amount,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then(() => {
console.log('Fee added');
addFeeForm.reset();
loadFees();
})
.catch((error) => {
console.error('Error adding fee:', error);
});
});
const addNotificationForm = document.getElementById('add-notification-form');
addNotificationForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = document.getElementById('notification-message').value;
db.collection('notifications').add({
message: message,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then(() => {
console.log('Notification added');
addNotificationForm.reset();
loadNotifications();
})
.catch((error) => {
console.error('Error adding notification:', error);
});
});
loadMembers();
loadFees();
loadNotifications();
};
const loadMembers = () => {
const membersList = document.getElementById('members-list');
membersList.innerHTML = '';
db.collection('members').orderBy('createdAt', 'desc').get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const member = doc.data();
membersList.innerHTML += `
<div>
<h4>${member.name}</h4>
<p>${member.email}</p>
</div>
`;
});
})
.catch((error) => {
console.error('Error loading members:', error);
});
};
const loadFees = () => {
const feesList = document.getElementById('fees-list');
feesList.innerHTML = '';
db.collection('fees').orderBy('createdAt', 'desc').get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const fee = doc.data();
feesList.innerHTML += `
<div>
<h4>${fee.email}</h4>
<p>Amount: $${fee.amount}</p>
</div>
`;
});
})
.catch((error) => {
console.error('Error loading fees:', error);
});
};
const loadNotifications = () => {
const notificationsList = document.getElementById('notifications-list');
notificationsList.innerHTML = '';
db.collection('notifications').orderBy('createdAt', 'desc').get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const notification = doc.data();
notificationsList.innerHTML += `
<div class="notification">
<p>${notification.message}</p>
</div>
`;
});
})
.catch((error) => {
console.error('Error loading notifications:', error);
});
};
// Initial render
auth.onAuthStateChanged((user) => {
if (user) {
renderDashboard();
} else {
renderLogin();
}
});
});
i am not able to get the output.
my html file is not able to process the link to my javascript file
why can i not import rules form firebase
now my console is only showing problem with my html code
i am new to programming so i’m just trying to incorporate codes from here and there but nothing is working out.