UID-Project-CourierService/Page 4.html at main · sid-possibly/UID-Project-CourierService · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>Courier Service Booking</title>
    <link rel="stylesheet" href="style_booking.css">
</head>
<body>
    <div class="background">
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Booking</a></li>
                <li><a href="Main_Track.html">Track</a></li>
                <li><a href="c.html">Contact</li>
                <li><a href="#" style="color: rgb(195, 42, 25);">SDSS Courier Service</a></li>
                <li><a href="#" id="sign-in">Sign In</a></li>
                <li><a href="#" id="sign-up">Sign Up</a></li>
            </ul>
        </nav>
        <div class="booking-form">
            <h2>Confirmation and Submission</h2>
            <form id="bookingForm" onsubmit="return false;">
                <p><strong>Booking Details:</strong></p>
                <p>Full Name: <span id="fullName"></span></p>
                <p>Email: <span id="email"></span></p>
                <p>Phone Number: <span id="phone"></span></p>
                <p>Parcel Item: <span id="parcelItem"></span></p>
                <p>Pickup Address: <span id="pickupAddress"></span></p>
                <p>Delivery Address: <span id="deliveryAddress"></span></p>
                <br>
                <button onclick="prevStep('Page 3.html')">Previous</button>
                <button id="orderConfirmbtn" onclick="submitBooking()">Confirm & Submit</button>
            </form>
        </div>
    </div>


    <script>
        document.getElementById('fullName').innerText = sessionStorage.getItem('fullName');
        document.getElementById('email').innerText = sessionStorage.getItem('email');
        document.getElementById('phone').innerText = sessionStorage.getItem('phone');
        document.getElementById('parcelItem').innerText = sessionStorage.getItem('parcelItem');
        document.getElementById('pickupAddress').innerText = sessionStorage.getItem('pickupAddress');
        document.getElementById('deliveryAddress').innerText = sessionStorage.getItem('deliveryAddress');
        // document.getElementById('parcelDesc').innerText = sessionStorage.getItem('parcelDesc');


        function prevStep(prevPage) {
            window.location.href = prevPage;
        }

        function submitBooking() {
            console.log("button clicked")
        const dataToSend = {
        orderId: generateOrderId(), // Include orderId
        trackingId: generateTrackingId(), // Include trackingId
        fullName: document.getElementById('fullName').innerText,
        email: document.getElementById('email').innerText,
        phoneNumber: document.getElementById('phone').innerText,
        parcelItem: document.getElementById('parcelItem').innerText,
        // parcelDescription: document.getElementById('parcelDesc').innerText,
        departureDate: new Date().toISOString().split('T')[0], // Include departureDate
        deliveryAddress: document.getElementById('deliveryAddress').innerText,
        pickupAddress: document.getElementById('pickupAddress').innerText,
        expectedDeliveryDate: getExpectedDeliveryDate(),
        statusDelivery: getRandomStatus() // Include expectedDeliveryDate
    };

    const statusDelivery = getRandomStatus(); // new adjustement for progress bar dynamic
    sessionStorage.setItem('statusDelivery', statusDelivery); // new adjustement for progress bar dynamic

    fetch('http://localhost:3000/submitBooking' ,{
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
    })
   .then(response => {
        if (response.ok){
            sessionStorage.setItem('orderId', dataToSend.orderId);
            sessionStorage.setItem('trackingId', dataToSend.trackingId);
            sessionStorage.setItem('expectedDeliveryDate', dataToSend.expectedDeliveryDate);
            sessionStorage.setItem('orderItem', dataToSend.parcelItem);

            window.location.href = 'TrackPage_2.html';
        }
        // if (!response.ok) {
        //     throw new Error('Network response was not ok');
        // }
        return response.text(); // Assuming the server sends text responses
    })
//    .then(message => {
//         alert(message);
//     })
   .catch(error => {
        console.error('Error:', error);
    });


}
        function generateRandomString(length) {
            return Math.random().toString(length + 1).substring(2, length + 2);
        }

        function generateOrderId() {
            return generateRandomString(5) + generateRandomString(5); // 10 characters total
        }

        function generateTrackingId() {
            return generateRandomString(10); // Exactly 10 digits
        }

        function getExpectedDeliveryDate() {
            const today = new Date();
            const fourDaysFromNow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5);
            return fourDaysFromNow.toISOString().split('T')[0]; // Format: YYYY-MM-DD
        }
        function getRandomStatus() {
    const statuses = ['processing', 'shipped', 'out-of-delivered'];
    return statuses[Math.floor(Math.random() * statuses.length)];
}
    </script>
</body>
</html>