Scribd
Upload
15 views25 pages

Assign 14

The document outlines a mini project titled 'Automate Printing System', aimed at creating a web-based application to streamline print job management in various organizations. It details the system's objectives, including automation of print job submission, centralized job management, and a user-friendly interface, while utilizing technologies like HTML, CSS, JavaScript, Node.js, and MongoDB. The document also includes a code snippet for the front-end interface, showcasing features such as user login, registration, and admin dashboard functionalities.

Uploaded by

Pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views25 pages

Assign 14

The document outlines a mini project titled 'Automate Printing System', aimed at creating a web-based application to streamline print job management in various organizations. It details the system's objectives, including automation of print job submission, centralized job management, and a user-friendly interface, while utilizing technologies like HTML, CSS, JavaScript, Node.js, and MongoDB. The document also includes a code snippet for the front-end interface, showcasing features such as user login, registration, and admin dashboard functionalities.

Uploaded by

Pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Assignment No.

14

Title: Automate Printing System.

Aim: Design a mini project for any real time scenario such as online library, Milk dairy,
Hotel online booking etc.

Theory:

The Automated Printing System is a web-based application developed to simplify and automate
the process of handling print jobs in organizations, institutions, or printing services. This
system provides users with an intuitive interface to upload documents and submit print
requests, while administrators can manage, track, and monitor these jobs effectively. The
project leverages modern web technologies including HTML, CSS, and JavaScript for the
front-end, and Node.js with Express.js for the back-end server logic. Data storage and
management are handled through MongoDB, a NoSQL database.

By integrating these technologies, the system reduces manual intervention, minimizes delays,
and improves the overall printing workflow.

Objectives:

1. Automation of Print Job Submission:


Allow users to easily upload and submit print jobs through a web interface,
eliminating the need for manual submissions.

2. Centralized Job Management:


Provide an admin panel for monitoring all submitted print requests, including status
tracking, user details, and document management.
3. Efficient Workflow:
Streamline the printing process by organizing print requests in a queue and enabling
real-time updates on job status.

4. User-Friendly Interface:
Design an intuitive and responsive user interface for both users and administrators to
ensure easy navigation and usage.

5. Data Storage and Retrieval:


Store all registration details securely in a MongoDB database for easy retrieval and
history tracking.

6. Scalability and Flexibility:


Develop the system in a modular way so it can be easily extended with additional
features like payment integration, role-based access, or print usage analytics in the
future.
Code:
index.html

<!DOCTYPE html>

<html lang="en" class="scroll-smooth">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Premium Xerox Service | PrintEase Pro</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<link rel="stylesheet" href="/styles.css">

</head>

<body class="bg-gradient-to-br from-gray-50 to-indigo-50 min-h-screen">

<!-- Navigation -->

<nav class="gradient-bg text-white shadow-xl fixed w-full z-50">

<div class="container mx-auto px-6 py-4 flex justify-between items-center">

<a href="#" class="text-2xl font-bold flex items-center gap-2">

<i class="fas fa-print"></i>

PrintEase Pro

</a>

<div id="navLinks" class="flex items-center gap-6">

<button onclick="logout()" class="hidden" id="logoutBtn">

<i class="fas fa-sign-out-alt mr-2"></i>Logout

</button>

</div>

</div>

</nav>

<!-- Main Container -->

<div class="container mx-auto px-4 pt-24 pb-12 max-w-7xl">

<!-- Login Page -->

<div id="loginPage" class="page active-page">

<div class="glassmorphism max-w-md mx-auto rounded-2xl p-8 shadow-2xl">

<div class="text-center mb-8">


<h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome Back!</h1>

<p class="text-gray-600">Login to manage your print jobs</p>

</div>

<form id="loginForm" class="space-y-6">

<div>

<label class="block text-gray-700 mb-2 font-medium">Email</label>

<input type="email" id="loginUsername"

class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

</div>

<div>

<label class="block text-gray-700 mb-2 font-medium">Password</label>

<input type="password" id="loginPassword"

class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

</div>

<button type="submit"

class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90">

Sign In

</button>

<p class="text-center text-gray-600">

New user?

<a href="#" onclick="showPage('registerPage')" class="text-blue-600 font-medium">Create account</a>

</p>

</form>

</div>

</div>

<!-- Register Page -->

<div id="registerPage" class="page">

<div class="glassmorphism max-w-md mx-auto rounded-2xl p-8 shadow-2xl">

<div class="text-center mb-8">

<h1 class="text-3xl font-bold text-gray-800 mb-2">Create Account</h1>

<p class="text-gray-600">Get started with PrintEase Pro</p>

</div>

<form id="registerForm" action="/api/register" method="POST" class="space-y-6">

<div>
<label class="block text-gray-700 mb-2 font-medium">Email</label>

<input type="email" id="registerEmail" name="email"

class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>

</div>

<div>

<label class="block text-gray-700 mb-2 font-medium">Password</label>

<input type="password" id="registerPassword" name="password"

class="w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>

</div>

<button type="submit"

class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90">

Create Account

</button>

<p class="text-center text-gray-600">

Already have an account?

<a href="#" onclick="showPage('loginPage')" class="text-blue-600 font-medium">Login here</a>

</p>

</form>

</div>

</div>

<!-- Admin Dashboard -->

<div id="adminDashboard" class="page">

<div class="flex justify-between items-center mb-8">

<h1 class="text-2xl font-bold text-gray-800">Admin Dashboard</h1>

<div class="flex gap-4">

<button onclick="showAddCenterModal()"

class="gradient-bg text-white px-6 py-2 rounded-lg hover:opacity-90 flex items-center">

<i class="fas fa-plus mr-2"></i>Add Center

</button>

<!-- <button onclick="showPage('homePage')"

class="bg-gray-200 text-gray-800 px-6 py-2 rounded-lg hover:bg-gray-300">

View User Side

</button> -->

<button onclick="showUserSide()"
class="bg-gray-200 text-gray-800 px-6 py-2 rounded-lg hover:bg-gray-300">

View User Side

</button>

</div>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="centersContainer"></div>

</div>

<!-- User Side Page -->

<div id="userSidePage" class="page">

<button onclick="showPage('adminDashboard')" class="mb-4 text-blue-600 hover:underline flex items-center">

<i class="fas fa-arrow-left mr-2"></i>Back to Admin Dashboard

</button>

<div class="container mx-auto px-4">

<h1 class="text-2xl font-bold text-gray-800 mb-4">User Side</h1>

<!-- Content for user side goes here -->

</div>

</div>

<!-- Add Center Modal -->

<div id="addCenterModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4">

<div class="glassmorphism rounded-2xl p-8 max-w-md w-full">

<h2 class="text-2xl font-bold mb-6">Add New Center</h2>

<form id="addCenterForm" class="space-y-4">

<div>

<label class="block mb-2 font-medium">Center Name</label>

<input type="text" id="centerName" required

class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500">

</div>

<div>

<label class="block mb-2 font-medium">Location</label>

<input type="text" id="centerLocation" required

class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500">

</div>
<div class="flex gap-4">

<button type="submit" class="gradient-bg text-white px-6 py-2 rounded-lg flex-1">

Save Center

</button>

<button type="button" onclick="hideAddCenterModal()"

class="bg-gray-200 text-gray-800 px-6 py-2 rounded-lg flex-1">

Cancel

</button>

</div>

</form>

</div>

</div>

<!-- Home Page -->

<!-- <div id="homePage" class="page">

<div class="mb-8">

<h1 class="text-2xl font-bold text-gray-800 mb-2">Available Centers</h1>

<p class="text-gray-600">Choose your nearest printing center</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="userCentersContainer"></div>

</div> -->

<!-- Home Page -->

<div id="homePage" class="page">

<!-- Add back button container -->

<div id="adminBackButton" class="hidden mb-4">

<button onclick="showAdminDashboard()" class="text-blue-600 hover:underline flex items-center">

<i class="fas fa-arrow-left mr-2"></i>Back to Admin Dashboard

</button>

</div>

<div class="mb-8">

<h1 class="text-2xl font-bold text-gray-800 mb-2">Available Centers</h1>

<p class="text-gray-600">Choose your nearest printing center</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="userCentersContainer"></div>


</div>

<!-- File Upload Page -->

<div id="fileUploadPage" class="page">

<button onclick="showPage('homePage')" class="mb-4 text-blue-600 hover:underline flex items-center">

<i class="fas fa-arrow-left mr-2"></i>Back to Centers

</button>

<div class="glassmorphism rounded-2xl p-8 shadow-xl">

<h2 class="text-2xl font-bold mb-6">Upload Documents</h2>

<div id="uploadZone"

class="border-2 border-dashed border-gray-300 rounded-2xl p-12 text-center cursor-pointer mb-6 hover:border-


blue-400 transition-colors">

<div class="text-gray-500 mb-4">

<i class="fas fa-cloud-upload-alt text-4xl"></i>

</div>

<p class="text-gray-600">Drag & drop files here or click to browse</p>

<input type="file" id="fileInput" multiple class="hidden">

</div>

<div id="fileList" class="space-y-4"></div>

<button onclick="showPage('printSettingsPage')"

class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 mt-6 w-full">

Continue to Settings <i class="fas fa-arrow-right ml-2"></i>

</button>

</div>

</div>

<!-- Print Settings Page -->

<div id="printSettingsPage" class="page">

<button onclick="showPage('fileUploadPage')" class="mb-4 text-blue-600 hover:underline flex items-center">

<i class="fas fa-arrow-left mr-2"></i>Back to Upload

</button>

<div class="glassmorphism rounded-2xl p-8 shadow-xl">

<h2 class="text-2xl font-bold mb-6">Print Settings</h2>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

<div class="dashboard-card p-6">


<label class="block text-lg font-medium mb-4">Print Preferences</label>

<div class="space-y-4">

<div>

<label class="block mb-2">Color Mode</label>

<div class="flex gap-4">

<label class="flex items-center gap-2 cursor-pointer">

<input type="radio" name="color" value="bw" checked

class="w-5 h-5 text-blue-500">

Black & White (₹2/page)

</label>

<label class="flex items-center gap-2 cursor-pointer">

<input type="radio" name="color" value="color"

class="w-5 h-5 text-blue-500">

Color (₹10/page)

</label>

</div>

</div>

<div>

<label class="block mb-2">Paper Size</label>

<select id="paperSize" class="w-full p-2 rounded-lg border">

<option value="A4">A4 (₹2)</option>

<option value="A3">A3 (₹5)</option>

<option value="A2">A2 (₹10)</option>

<option value="A1">A1 (₹20)</option>

</select>

</div>

</div>

</div>

<div class="dashboard-card p-6">

<label class="block text-lg font-medium mb-4">Print Details</label>

<div class="space-y-4">

<div>

<label class="block mb-2">Copies</label>

<div class="flex items-center gap-4">

<button onclick="adjustCopies(-1)"
class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200">

</button>

<input type="number" id="copies" min="1" value="1"

class="w-20 text-center p-2 rounded-lg border">

<button onclick="adjustCopies(1)"

class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200">

</button>

</div>

</div>

<div>

<label class="block mb-2">Orientation</label>

<select id="orientation" class="w-full p-2 rounded-lg border">

<option value="portrait">Portrait</option>

<option value="landscape">Landscape</option>

</select>

</div>

</div>

</div>

</div>

<div class="dashboard-card p-4 mb-6">

<h3 class="font-medium mb-2">Current Rates</h3>

<ul class="text-sm text-gray-600 space-y-1">

<li>• Black & White: ₹2 per page</li>

<li>• Color: ₹10 per page</li>

<li>• Paper Size: A4(₹2), A3(₹5), A2(₹10), A1(₹20)</li>

<li>• Service Fee: ₹10 fixed</li>

</ul>

</div>

<button onclick="showConfirmation()"

class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 w-full">

Review Order <i class="fas fa-check-circle ml-2"></i>

</button>

</div>
</div>

<!-- Confirmation Page -->

<div id="confirmationPage" class="page">

<button onclick="showPage('printSettingsPage')" class="mb-4 text-blue-600 hover:underline flex items-center">

<i class="fas fa-arrow-left mr-2"></i>Back to Settings

</button>

<div class="glassmorphism rounded-2xl p-8 shadow-xl">

<h2 class="text-2xl font-bold mb-6">Order Summary</h2>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">

<div class="dashboard-card p-6">

<h3 class="text-lg font-semibold mb-4">Print Details</h3>

<div id="orderDetails" class="space-y-3 text-gray-600"></div>

</div>

<div class="dashboard-card p-6">

<h3 class="text-lg font-semibold mb-4">Payment Summary</h3>

<div id="paymentSummary" class="space-y-3 text-gray-600"></div>

<div class="mt-6 text-center">

<p class="text-sm font-medium mb-2">Scan QR Code to Pay</p>

<img src="bank_qrcode.jpg" alt="Payment QR Code"

class="mx-auto w-48 h-48 object-contain border rounded-lg p-2">

<p class="text-xs text-gray-500 mt-2">Scan using any UPI app</p>

</div>

</div>

</div>

<button onclick="submitPrintJob()"

class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 w-full">

Confirm Payment <i class="fas fa-lock ml-2"></i>

</button>

</div>

</div>

</div>

<script src="script.js"></script>

</body></html>
styles.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {

--primary: #6366f1;

--secondary: #4f46e5;

--dark: #1e293b;

--light: #f8fafc;

*{

font-family: 'Poppins', sans-serif;

transition: all 0.3s Cubic-Bezier(0.4, 0, 0.2, 1);

.page {

display: none;

opacity: 0;

transform: translateY(20px);

.active-page {

display: block;

opacity: 1;

transform: translateY(0);

animation: fadeIn 0.5s ease-out;

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

.glassmorphism {

background: rgba(255, 255, 255, 0.95);


backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

.gradient-bg {

background: linear-gradient(to right, #4f46e5, #3b82f6);

.file-preview {

border-left: 4px solid var(--primary);

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

.hover-scale {

transition: transform 0.3s, box-shadow 0.3s;

.hover-scale:hover {

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

.dashboard-card {

background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(245,245,245,0.9) 100%);

backdrop-filter: blur(10px);

border-radius: 1.5rem;

box-shadow: 0 8px 32px rgba(0,0,0,0.1);

script.js

// Admin Configuration

const ADMIN_CREDENTIALS = {

email: '[email protected]',

password: '1234'
};

// Pricing Configuration

const PRICING = {

bw: 2,

color: 10,

paperSizes: {

A4: 2,

A3: 5,

A2: 10,

A1: 20

},

serviceFee: 10

};

// Data Storage

let centers = JSON.parse(localStorage.getItem('printingCenters')) || [];

let currentUser = null;

let currentPrintJob = {

center: null,

files: [],

settings: {

color: 'bw',

size: 'A4',

copies: 1,

orientation: 'portrait'

};

function showUserSide() {

// Show back button when coming from admin dashboard

document.getElementById('adminBackButton').classList.remove('hidden');

showPage('homePage');

renderUserCenters();

}
function showAdminDashboard() {

// Hide back button when returning to admin dashboard

document.getElementById('adminBackButton').classList.add('hidden');

showPage('adminDashboard');

renderCenters();

// Helper Function to Calculate Total Cost

function calculateTotalCost() {

const colorRate = currentPrintJob.settings.color === 'bw' ? PRICING.bw : PRICING.color;

const paperRate = PRICING.paperSizes[currentPrintJob.settings.size];

const totalPages = currentPrintJob.files.length * currentPrintJob.settings.copies;

const subtotal = totalPages * (colorRate);

const total = subtotal + PRICING.serviceFee;

return { subtotal, total };

// Auth Management

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const email = document.getElementById('loginUsername').value;

const password = document.getElementById('loginPassword').value;

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const email = document.getElementById('loginUsername').value;

const password = document.getElementById('loginPassword').value;

// 1. Check for empty fields first

if (!email || !password) {

alert('Email and password cannot be blank.');

return;

}
// 2. Admin check

if (email === ADMIN_CREDENTIALS.email && password === ADMIN_CREDENTIALS.password) {

showAdminDashboard();

document.getElementById('logoutBtn').classList.remove('hidden');

return;

// 3. Regular user authentication (needs server implementation)

authenticateUser(email, password).then(valid => {

if (valid) {

currentUser = { email };

document.getElementById('logoutBtn').classList.remove('hidden');

showPage('homePage');

renderUserCenters();

} else {

alert('Invalid email or password.');

});

});

});

async function authenticateUser(email, password) {

try {

const response = await fetch('/api/login', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ email, password })

});

return response.ok;

} catch (error) {

console.error('Login error:', error);

return false;

}
// Registration Handling

document.getElementById('registerForm').addEventListener('submit', async (e) => {

e.preventDefault();

const email = document.getElementById('registerEmail').value;

const password = document.getElementById('registerPassword').value;

try {

const response = await fetch('/api/register', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

body: new URLSearchParams({

'email': email,

'password': password

})

});

const data = await response.json();

if (response.ok) {

alert('Registration successful!');

showPage('loginPage');

} else {

alert(data.message);

} catch (error) {

console.error('Error:', error);

alert('An error occurred during registration');

});

// Center Management

function renderCenters() {
const container = document.getElementById('centersContainer');

container.innerHTML = centers.map(center => `

<div class="dashboard-card p-6 hover-scale">

<div class="flex justify-between items-start mb-4">

<h3 class="text-xl font-semibold">${center.name}</h3>

<button onclick="deleteCenter('${center.id}')"

class="text-red-500 hover:text-red-600">

<i class="fas fa-trash"></i>

</button>

</div>

<div class="text-gray-600">

<p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i>${center.location}</p>

<div class="flex items-center justify-between">

<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">

${center.distance} away

</span>

<div class="flex items-center">

<span class="text-yellow-500">

${'★'.repeat(Math.floor(center.rating))}${center.rating % 1 ? '½' : ''}

</span>

<span class="ml-2 text-sm">${center.rating}</span>

</div>

</div>

</div>

</div>

`).join('');

function renderUserCenters() {

const container = document.getElementById('userCentersContainer');

container.innerHTML = centers.map(center => `

<div class="dashboard-card p-6 hover-scale cursor-pointer" onclick="selectCenter('${center.id}')">

<h3 class="text-xl font-semibold mb-2">${center.name}</h3>

<div class="text-gray-600">

<p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i>${center.location}</p>


<div class="flex items-center justify-between">

<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">

${center.distance} away

</span>

<div class="flex items-center">

<span class="text-yellow-500">

${'★'.repeat(Math.floor(center.rating))}${center.rating % 1 ? '½' : ''}

</span>

</div>

</div>

</div>

</div>

`).join('');

function showAddCenterModal() {

document.getElementById('addCenterModal').classList.remove('hidden');

document.getElementById('addCenterModal').classList.add('flex');

function hideAddCenterModal() {

document.getElementById('addCenterModal').classList.add('hidden');

document.getElementById('addCenterForm').addEventListener('submit', function(e) {

e.preventDefault();

const newCenter = {

id: Date.now().toString(),

name: document.getElementById('centerName').value,

location: document.getElementById('centerLocation').value,

rating: Math.floor(Math.random() * 3) + 3.5,

distance: (Math.random() * 5).toFixed(1) + 'km'

};

centers.push(newCenter);
localStorage.setItem('printingCenters', JSON.stringify(centers));

renderCenters();

hideAddCenterModal();

});

function deleteCenter(id) {

centers = centers.filter(center => center.id !== id);

localStorage.setItem('printingCenters', JSON.stringify(centers));

renderCenters();

function selectCenter(id) {

currentPrintJob.center = id;

showPage('fileUploadPage');

const uploadZone = document.getElementById('uploadZone');

const fileInput = document.getElementById('fileInput');

uploadZone.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', function(e) {

currentPrintJob.files = Array.from(e.target.files);

updateFileList();

});

uploadZone.addEventListener('dragover', (e) => {

e.preventDefault();

uploadZone.classList.add('border-blue-400', 'bg-blue-50');

});

uploadZone.addEventListener('dragleave', () => {

uploadZone.classList.remove('border-blue-400', 'bg-blue-50');

});
uploadZone.addEventListener('drop', (e) => {

e.preventDefault();

uploadZone.classList.remove('border-blue-400', 'bg-blue-50');

currentPrintJob.files = Array.from(e.dataTransfer.files);

updateFileList();

});

function updateFileList() {

const fileList = document.getElementById('fileList');

fileList.innerHTML = currentPrintJob.files.map(file => `

<div class="dashboard-card p-4 flex items-center justify-between">

<div>

<p class="font-medium">${file.name}</p>

<p class="text-sm text-gray-500">${(file.size/1024/1024).toFixed(2)} MB</p>

</div>

<button onclick="removeFile('${file.name}')" class="text-red-500 hover:text-red-600">

<i class="fas fa-times"></i>

</button>

</div>

`).join('');

function removeFile(filename) {

currentPrintJob.files = currentPrintJob.files.filter(file => file.name !== filename);

updateFileList();

function adjustCopies(change) {

const copiesInput = document.getElementById('copies');

let copies = parseInt(copiesInput.value) + change;

copies = Math.max(1, copies);

copiesInput.value = copies;

currentPrintJob.settings.copies = copies;

}
// Update Print Settings Event Listeners

document.querySelectorAll('input[name="color"]').forEach(input => {

input.addEventListener('change', () => {

currentPrintJob.settings.color = input.value;

});

});

document.getElementById('paperSize').addEventListener('change', (e) => {

currentPrintJob.settings.size = e.target.value;

});

document.getElementById('orientation').addEventListener('change', (e) => {

currentPrintJob.settings.orientation = e.target.value;

});

function showConfirmation() {

const orderDetails = document.getElementById('orderDetails');

const paymentSummary = document.getElementById('paymentSummary');

const { subtotal, total } = calculateTotalCost();

orderDetails.innerHTML = `

<p><span class="font-medium">Color:</span> ${currentPrintJob.settings.color === 'bw' ? 'Black & White' :


'Color'}</p>

<p><span class="font-medium">Paper Size:</span> ${currentPrintJob.settings.size}</p>

<p><span class="font-medium">Copies:</span> ${currentPrintJob.settings.copies}</p>

<p><span class="font-medium">Orientation:</span> ${currentPrintJob.settings.orientation}</p>

<p><span class="font-medium">Files:</span> ${currentPrintJob.files.length}</p>

`;

paymentSummary.innerHTML = `

<div class="flex justify-between">

<span>Subtotal:</span>

<span>₹${subtotal.toFixed(2)}</span>

</div>
<div class="flex justify-between">

<span>Service Fee:</span>

<span>₹${PRICING.serviceFee.toFixed(2)}</span>

</div>

<div class="flex justify-between font-semibold border-t pt-3">

<span>Total:</span>

<span>₹${total.toFixed(2)}</span>

</div>

`;

showPage('confirmationPage');

function submitPrintJob() {

const { total } = calculateTotalCost();

alert(`Print job submitted successfully!\nTotal: ₹${total.toFixed(2)}`);

showPage('homePage');

function showPage(pageId) {

document.querySelectorAll('.page').forEach(page => {

page.classList.remove('active-page');

});

document.getElementById(pageId).classList.add('active-page');

function logout() {

currentUser = null;

currentPrintJob = {

center: null,

files: [],

settings: { color: 'bw', size: 'A4', copies: 1, orientation: 'portrait' }

};

document.getElementById('logoutBtn').classList.add('hidden');

showPage('loginPage');
}

if (centers.length === 0) {

centers = [

id: '1',

name: 'AISSMS IOIT XEROX',

location: 'Mangalwar Peth',

rating: 4.5,

distance: '0.5km'

},

id: '2',

name: 'COEP XEROX',

location: 'COEP COLLEGE',

rating: 4.8,

distance: '1.2km'

];

localStorage.setItem('printingCenters', JSON.stringify(centers));

showPage('loginPage');

// function showAdminDashboard() {

// showPage('adminDashboard');

// renderCenters();

// }

function showAdminDashboard() {

showPage('adminDashboard');

renderCenters();

// Ensure back button is hidden when accessing normally

document.getElementById('adminBackButton').classList.add('hidden');

}
server.js

const express = require('express');

const mongoose = require('mongoose');

const bodyParser = require('body-parser');

const cors = require('cors'); // Add CORS

const app = express(); // Define 'app' first

const PORT = 3000;

// Middleware - Use 'app' after it's defined

app.use(cors()); // Enable CORS for cross-origin requests

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

app.use(express.static('public')); // Serve static files

// MongoDB Connection

mongoose.connect('mongodb://localhost:27017/printease', {

useNewUrlParser: true,

useUnifiedTopology: true

})

.then(() => console.log('Connected to MongoDB'))

.catch(err => console.error('MongoDB connection error:', err));

// User Schema

const userSchema = new mongoose.Schema({

email: { type: String, required: true, unique: true },

password: { type: String, required: true },

createdAt: { type: Date, default: Date.now }

});

const User = mongoose.model('User', userSchema);

// Registration Endpoint

app.post('/api/register', async (req, res) => {

try {
const { email, password } = req.body;

if (!email || !password) {

return res.status(400).json({ message: 'Email and password are required' });

const existingUser = await User.findOne({ email });

if (existingUser) {

return res.status(400).json({ message: 'Email already registered' });

const newUser = new User({ email, password });

await newUser.save();

res.status(201).json({ message: 'Registration successful' });

} catch (error) {

console.error('Registration error:', error);

res.status(500).json({ message: 'Server error' });

});

// Login Endpoint

app.post('/api/login', async (req, res) => {

try {

const { email, password } = req.body;

const user = await User.findOne({ email, password });

if (!user) return res.status(401).json({ message: 'Invalid credentials' });

res.json({ valid: true });

} catch (error) {

res.status(500).json({ message: 'Server error' });

});

// Start server

app.listen(PORT, () => {

console.log(`Server running on port ${PORT}`);

});

You might also like