Evaluation  4

Main.jsx : 

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

  <StrictMode>

    <App />

  </StrictMode>,

)

BookingConfirmation.jsx : 

import React from "react";

const BookingConfirmation = ({ bookingDetails, onGoBack }) => {

  return (

    <div>

      <h2>Booking Confirmation</h2>

      <p><b>Ticket ID:</b> {bookingDetails.ticketId}</p>

      <p><b>Train Name:</b> {bookingDetails.train.train_name}</p>

      <p><b>Departure:</b> {bookingDetails.train.departure_time}</p>

      <p><b>Arrival:</b> {bookingDetails.train.arrival_time}</p>

      <button onClick={onGoBack}>Go Back</button>

    </div>

  );

};

export default BookingConfirmation;

App.jsx : 

import React, { useState } from "react";

import Login from "./components/Login";

import StaffDashboard from "./components/StaffDashboard";

import PassengerDashboard from "./components/PassengerDashboard";

import BookingConfirmation from "./components/BookingConfirmation";

import './styles.css';

const App = () => {

  const [loggedIn, setLoggedIn] = useState(false);

  const [user, setUser] = useState(null);

  const [role, setRole] = useState(null);

  const [bookingDetails, setBookingDetails] = useState(null);

  const handleLogin = (user) => {

    setUser(user);

    setLoggedIn(true);

  };

  const handleLogout = () => {

    setLoggedIn(false);

    setUser(null);

    setRole(null);

  };

  return (

    <div>

      {!loggedIn ? (

        <Login onLogin={handleLogin} role={role} setRole={setRole} />

      ) : bookingDetails ? (

        <BookingConfirmation

          bookingDetails={bookingDetails}

          onGoBack={() => setBookingDetails(null)}

        />

      ) : role === "staff" ? (

        <StaffDashboard user={user} onLogout={handleLogout} />

      ) : (

        <PassengerDashboard

          user={user}

          onLogout={handleLogout}

          onBookingComplete={setBookingDetails}

        />

      )}

    </div>

  );

};

export default App;

Login.jsx : 

import React, { useState } from "react";

const Login = ({ onLogin, role, setRole }) => {

  const [username, setUsername] = useState("");

  const [password, setPassword] = useState("");

  const handleSubmit = async () => {

    if (!role) {

      alert("Please select a role!");

      return;

    }

    const response = await fetch("http://localhost:8080/api/login", {

      method: "POST",

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

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

    });

    const data = await response.json();

    if (data.success && data.user.role === role) {

      onLogin(data.user);

    } else {

      alert("Invalid credentials or incorrect role!");

    }

  };

  return (

    <div>

      <h2>Login</h2>

      <select onChange={(e) => setRole(e.target.value)} value={role}>

        <option value="">Select Role</option>

        <option value="staff">Staff</option>

        <option value="passenger">Passenger</option>

      </select>

      <input

        type="text"

        placeholder="Username"

        onChange={(e) => setUsername(e.target.value)}

      />

      <input

        type="password"

        placeholder="Password"

        onChange={(e) => setPassword(e.target.value)}

      />

      <button onClick={handleSubmit}>Login</button>

    </div>

  );

};

export default Login;

PassengerDashboard.jsx :

  import React, { useState, useEffect } from "react";

  const PassengerDashboard = ({ user, onLogout, onBookingComplete }) => {

    const [trains, setTrains] = useState([]);

    useEffect(() => {

      fetchTrains();

    }, []);

    const fetchTrains = async () => {

      const response = await fetch("http://localhost:8080/api/trains");

      const data = await response.json();

      setTrains(data);

    };

    const bookTicket = async (trainId) => {

      const response = await fetch("http://localhost:8080/api/tickets", {

        method: "POST",

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

        body: JSON.stringify({ train_id: trainId, passenger_id: user.id }),

      });

      const data = await response.json();

      if (data.success) {

        onBookingComplete({

          train: trains.find((t) => t.id === trainId),

          ticketId: data.ticket_id,

        });

      } else {

        alert("Failed to book ticket.");

      }

    };

    return (

      <div>

        <h2>Passenger Dashboard</h2>

        <h3>Welcome, {user.username}</h3>

        <button onClick={onLogout}>Logout</button>

        <h4>Available Trains</h4>

        <ul>

          {trains.map((train) => (

            <li key={train.id}>

              <p><b>Train:</b> {train.train_name}</p>

              <p><b>Departure:</b> {train.departure_time}</p>

              <p><b>Arrival:</b> {train.arrival_time}</p>

              <p><b>Status:</b> {train.status}</p>

              <button onClick={() => bookTicket(train.id)}>Book Ticket</button>

            </li>

          ))}

        </ul>

      </div>

    );

  };

  export default PassengerDashboard;

StaffDashboard.jsx :

import React, { useState, useEffect } from "react";

const StaffDashboard = ({ user }) => {

  const [trains, setTrains] = useState([]);

  const [selectedTrain, setSelectedTrain] = useState(null);

  const [newStatus, setNewStatus] = useState("");

  useEffect(() => {

    fetchTrains();

  }, []);

  const fetchTrains = async () => {

    const response = await fetch("http://localhost:8080/api/trains");

    const data = await response.json();

    setTrains(data);

  };

  const updateTrainStatus = async (trainId) => {

    const response = await fetch(`http://localhost:8080/api/trains/${trainId}`, {

      method: "PUT",

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

      body: JSON.stringify({ status: newStatus }),

    });

    const data = await response.json();

    if (data.success) {

      alert("Train status updated!");

      fetchTrains();

    } else {

      alert("Failed to update train status.");

    }

  };

  return (

    <div>

      <h2>Staff Dashboard</h2>

      <h3>Welcome, {user.username}</h3>

      <h4>Train Operations</h4>

      <ul>

        {trains.map((train) => (

          <li key={train.id}>

            <p><b>Train:</b> {train.train_name}</p>

            <p><b>Status:</b> {train.status}</p>

            <input

              type="text"

              placeholder="Enter new status"

              onChange={(e) => setNewStatus(e.target.value)}

            />

            <button onClick={() => updateTrainStatus(train.id)}>Update Status</button>

          </li>

        ))}

      </ul>

    </div>

  );

};

export default StaffDashboard;

Database.js :

import mysql from "mysql";

const db = mysql.createConnection({

  host: "127.0.0.1",

  user: "root",

  password: "",

});

// Connect to MySQL

db.connect((err) => {

  if (err) {

    console.error("Database connection failed:", err.message);

    return;

  }

  console.log("Connected to MySQL!");

  // Create the database

  db.query("CREATE DATABASE IF NOT EXISTS rm", (err) => {

    if (err) {

      console.error("Error creating database:", err.message);

      return;

    }

    console.log("Database 'rm' created or already exists.");

    // Switch to the database

    db.changeUser({ database: "rm" }, (err) => {

      if (err) {

        console.error("Error switching to database:", err.message);

        return;

      }

      // Create `users` table

      const usersTable = `

        CREATE TABLE IF NOT EXISTS users (

          id INT AUTO_INCREMENT PRIMARY KEY,

          username VARCHAR(255) NOT NULL,

          password VARCHAR(255) NOT NULL,

          role ENUM('staff', 'passenger') NOT NULL

        );

      `;

      db.query(usersTable, (err) => {

        if (err) {

          console.error("Error creating users table:", err.message);

          return;

        }

        console.log("Users table created or already exists.");

        const insertUsers = `

          INSERT INTO users (username, password, role)

          VALUES

          ('staff', 'staff123', 'staff'),

          ('passenger', 'passenger123', 'passenger')

          ON DUPLICATE KEY UPDATE username=username;

        `;

        db.query(insertUsers, (err) => {

          if (err) console.error("Error inserting users:", err.message);

          else console.log("Sample users added.");

        });

      });

      // Check and add columns to `trains` table

      const checkColumns = `

        SELECT COLUMN_NAME

        FROM INFORMATION_SCHEMA.COLUMNS

        WHERE TABLE_SCHEMA = 'rm' AND TABLE_NAME = 'trains';

      `;

      db.query(checkColumns, (err, results) => {

        if (err) {

          console.error("Error checking columns:", err.message);

          return;

        }

        const existingColumns = results.map((col) => col.COLUMN_NAME);

        const columnsToAdd = [];

        if (!existingColumns.includes("source")) {

          columnsToAdd.push("ADD COLUMN source VARCHAR(255)");

        }

        if (!existingColumns.includes("destination")) {

          columnsToAdd.push("ADD COLUMN destination VARCHAR(255)");

        }

        if (!existingColumns.includes("fare")) {

          columnsToAdd.push("ADD COLUMN fare DECIMAL(10, 2)");

        }

        if (columnsToAdd.length > 0) {

          const alterTableQuery = `

            ALTER TABLE trains

            ${columnsToAdd.join(", ")};

          `;

          db.query(alterTableQuery, (err) => {

            if (err) console.error("Error altering trains table:", err.message);

            else console.log("Trains table updated.");

          });

        } else {

          console.log("No columns to add; trains table already up to date.");

        }

      });

      // Create or update `trains` table

      const trainsTable = `

        CREATE TABLE IF NOT EXISTS trains (

          id INT AUTO_INCREMENT PRIMARY KEY,

          train_name VARCHAR(255) NOT NULL,

          departure_time TIME NOT NULL,

          arrival_time TIME NOT NULL,

          status ENUM('on_time', 'delayed', 'canceled') DEFAULT 'on_time'

        );

      `;

      db.query(trainsTable, (err) => {

        if (err) {

          console.error("Error creating trains table:", err.message);

          return;

        }

        console.log("Trains table created or already exists.");

        const insertTrains = `

          INSERT INTO trains (train_name, source, destination, departure_time, arrival_time, fare, status)

          VALUES

          ('HBL-BLG', 'Hubli', 'Banglore', '08:00:00', '12:00:00', 500.00, 'on_time'),

          ('CMT-HYD', 'Chennai', 'Hyderdabd', '10:00:00', '14:00:00', 300.00, 'delayed'),

          ('MUM-DEH', 'Mumbai', 'Dehli', '12:00:00', '16:00:00', 400.00, 'on_time'),

          ('BGM-KLT', 'Belgaum', 'Kolkata', '04:00:00', '09:00:00', 250.00, 'on_time');

        `;

        db.query(insertTrains, (err) => {

          if (err) console.error("Error inserting trains:", err.message);

          else console.log("Sample trains added.");

        });

      });

      // Create `tickets` table

      const ticketsTable = `

        CREATE TABLE IF NOT EXISTS tickets (

          id INT AUTO_INCREMENT PRIMARY KEY,

          train_id INT NOT NULL,

          passenger_id INT NOT NULL,

          status ENUM('booked', 'confirmed', 'canceled') DEFAULT 'booked',

          FOREIGN KEY (train_id) REFERENCES trains(id),

          FOREIGN KEY (passenger_id) REFERENCES users(id)

        );

      `;

      db.query(ticketsTable, (err) => {

        if (err) {

          console.error("Error creating tickets table:", err.message);

          return;

        }

        console.log("Tickets table created or already exists.");

      });

    });

  });

});