├── .vscode
    └── settings.json
├── googleIcon.png
├── images
    └── logo.png
├── forgate.css
├── js
    ├── dashboard.js
    ├── logout.js
    ├── firebase.js
    ├── forgate.js
    ├── restaurant.js
    ├── registration.js
    ├── add-dishes.js
    ├── order.js
    └── dishes.js
├── registration.css
├── index.html
├── app.js
├── style.css
├── register.html
├── forgate.html
├── login.html
├── dashboard.html
├── orders.html
├── restaurants.html
├── add-dishes.html
└── dishes.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/googleIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/smit-batch-10-food-delivery-app/HEAD/googleIcon.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/smit-batch-10-food-delivery-app/HEAD/images/logo.png


--------------------------------------------------------------------------------
/forgate.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   height: 100%;
 4 | }
 5 | 
 6 | main {
 7 |   display: flex;
 8 |   align-items: center;
 9 |   padding-top: 40px;
10 |   padding-bottom: 40px;
11 |   background-color: #f5f5f5;
12 |   height: 100%;
13 | }
14 | 
15 | .form-signin {
16 |   max-width: 410px;
17 |   padding: 15px;
18 | }
19 | 


--------------------------------------------------------------------------------
/js/dashboard.js:
--------------------------------------------------------------------------------
 1 | import { auth, onAuthStateChanged } from "./firebase.js"
 2 | 
 3 | onAuthStateChanged(auth, (user) => {
 4 |     if (user) {
 5 |         console.log(user.email)
 6 |         if (user.email !== "admin@gmail.com") {
 7 |             location.href = "login.html"
 8 |         }
 9 | 
10 |     } else {
11 |         location.href = "login.html"
12 |     }
13 | });


--------------------------------------------------------------------------------
/js/logout.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import {signOut,auth} from "./firebase.js"
 3 | export async function logOut() {
 4 |     await signOut(auth).then(() => {
 5 |         Swal.fire({
 6 |             icon: 'success',
 7 |             title: 'Logout Successfully'
 8 |         })
 9 |         location.href = "../login.html"
10 |     }).catch((error) => {
11 |         Swal.fire({
12 |             icon: 'error',
13 |             title: 'Oops...',
14 |             text: error
15 |         })
16 |     });
17 | }
18 | document.getElementById('logoutbtn').addEventListener("click", logOut);


--------------------------------------------------------------------------------
/js/firebase.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
 2 | import {
 3 |   getAuth,
 4 |   signInWithEmailAndPassword,
 5 |   onAuthStateChanged,
 6 |   createUserWithEmailAndPassword,
 7 |   sendPasswordResetEmail,
 8 |   GoogleAuthProvider,
 9 |   signInWithPopup,
10 |   signOut
11 | } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
12 | import {
13 |   getStorage,
14 |   ref,
15 |   uploadBytesResumable,
16 |   getDownloadURL,
17 | } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-storage.js";
18 | import {
19 |   getFirestore,
20 |   collection,
21 |   addDoc,
22 |   query,
23 |   where,
24 |   getDocs,
25 |   getDoc,
26 |   doc,
27 |   setDoc,
28 |   serverTimestamp,
29 |   updateDoc,
30 | } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
31 | 
32 | const firebaseConfig = {
33 |   apiKey: "AIzaSyDG6-ZhFAuf2xkIVjieFKPzYXylqsASeXU",
34 |   authDomain: "smit-batch-10.firebaseapp.com",
35 |   projectId: "smit-batch-10",
36 |   storageBucket: "smit-batch-10.appspot.com",
37 |   messagingSenderId: "333213670128",
38 |   appId: "1:333213670128:web:b7d83af5afed979bafc035",
39 | };
40 | 
41 | const app = initializeApp(firebaseConfig);
42 | const auth = getAuth(app);
43 | const storage = getStorage(app);
44 | const db = getFirestore(app);
45 | const provider = new GoogleAuthProvider();
46 | export {
47 |   provider,
48 |   auth,
49 |   signInWithEmailAndPassword,
50 |   onAuthStateChanged,
51 |   storage,
52 |   ref,
53 |   uploadBytesResumable,
54 |   getDownloadURL,
55 |   db,
56 |   collection,
57 |   addDoc,
58 |   query,
59 |   where,
60 |   getDocs,
61 |   doc,
62 |   getDoc,
63 |   serverTimestamp,
64 |   updateDoc,
65 |   setDoc,
66 |   createUserWithEmailAndPassword,
67 |   GoogleAuthProvider,
68 |   signInWithPopup,
69 |   sendPasswordResetEmail,
70 |   signOut
71 | };
72 | 


--------------------------------------------------------------------------------
/js/forgate.js:
--------------------------------------------------------------------------------
 1 | import {auth,onAuthStateChanged,sendPasswordResetEmail} from "./firebase.js"
 2 | 
 3 | const usr_email = document.getElementById('user_email');
 4 | const usr_passwd = document.getElementById('user_passwd');
 5 | 
 6 | export function validEmail() {
 7 |     var uemail = document.getElementById('user_email');
 8 |     var emailerr = document.getElementById('email_err');
 9 |     if (uemail.value == "" || uemail.value == null) {
10 |         uemail.classList.remove("is-valid");
11 |         uemail.classList.add("is-invalid");
12 |         emailerr.innerHTML = "E-mail Address is required";
13 |         return false;
14 |     } else {
15 |         uemail.classList.remove("is-invalid");
16 |         uemail.classList.add("is-valid");
17 |         emailerr.innerHTML = "";
18 |         return true;
19 |     }
20 | }
21 | 
22 | export async function checkBeforeAuth() {
23 |     await onAuthStateChanged(auth, (user) => {
24 |         if (user) {
25 |             location.href = "dashboard.html";
26 |         }
27 |     });
28 | }
29 | export async function resetPassword() {
30 |     await sendPasswordResetEmail(auth, usr_email.value)
31 |         .then(() => {
32 |             Swal.fire({
33 |                 icon: 'success',
34 |                 title: 'Password Reset Email Sent Successfully',
35 |                 showDenyButton: false,
36 |                 showCancelButton: false,
37 |                 confirmButtonText: 'ok',
38 |             }).then((result) => {
39 |                 if (result.isConfirmed) {
40 |                     location.href = "index.html";
41 |                 }
42 |             })
43 |         })
44 |         .catch((error) => {
45 |             const errorCode = error.code;
46 |             Swal.fire({
47 |                 icon: 'error',
48 |                 title: 'Oops...',
49 |                 text: errorCode
50 |             })
51 |         });
52 | }


--------------------------------------------------------------------------------
/registration.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   align-items: center;
 5 |   height: 100vh;
 6 |   background-color: #4070f4;
 7 | }
 8 | 
 9 | .containerDiv {
10 |   background-color: white;
11 |   border-radius: 10px;
12 |   padding: 40px 20px;
13 |   width: 400px;
14 | }
15 | 
16 | button {
17 |   width: 100%;
18 |   background-color: #ff2806 !important;
19 | }
20 | .form-label span {
21 |   color: red;
22 | }
23 | #errorPara {
24 |   color: red;
25 | }
26 | 
27 | #alreadyAccountPara {
28 |   text-align: center;
29 | }
30 | 
31 | .hr-text {
32 |   line-height: 1em;
33 |   position: relative;
34 |   outline: 0;
35 |   border: 0;
36 |   color: black;
37 |   text-align: center;
38 |   height: 1.5em;
39 |   opacity: 0.5;
40 | 
41 |   &:before {
42 |     content: "";
43 |     /* // use the linear-gradient for the fading effect
44 |         // use a solid background color for a solid bar */
45 |     background: linear-gradient(to right, transparent, #000000, transparent);
46 |     position: absolute;
47 |     left: 0;
48 |     top: 50%;
49 |     width: 100%;
50 |     height: 1px;
51 |   }
52 | 
53 |   &:after {
54 |     content: attr(data-content);
55 |     position: relative;
56 |     display: inline-block;
57 |     color: black;
58 | 
59 |     padding: 0 0.5em;
60 |     line-height: 1.5em;
61 |     /* // this is really the only tricky part, you need to specify the background color of the container element... */
62 |     color: #818078;
63 |     background-color: #fcfcfa;
64 |   }
65 | }
66 | 
67 | #googleSignInBtn {
68 |   background: transparent !important;
69 |   border: none;
70 |   display: flex;
71 |   align-items: center;
72 |   justify-content: center;
73 |   gap: 20px;
74 |   border: 1px solid #cdcbcb;
75 |   padding: 5px 0;
76 | }
77 | 
78 | #googleSignInBtn img {
79 |   width: 35px;
80 | }
81 | 
82 | @media (max-width: 330px) {
83 |   body {
84 |     padding: 20px;
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Foodara</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
11 |         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
12 |         crossorigin="anonymous"></script>
13 |     <script src="https://kit.fontawesome.com/4876bfe495.js" crossorigin="anonymous"></script>
14 |     <link rel="stylesheet" href="style.css">
15 | </head>
16 | 
17 | <body>
18 |     <div>
19 |         <nav class="navbar navbar-expand-lg">
20 |             <div class="container-fluid">
21 |                 <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
22 |                     <img width="150" src="images/logo.png" alt="" />
23 |                 </a>
24 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
25 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
26 |                     aria-expanded="false" aria-label="Toggle navigation">
27 |                     <span class="navbar-toggler-icon"></span>
28 |                 </button>
29 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
30 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
31 |                     </ul>
32 |                     
33 |                        <a href="register.html"><button class="btn btn-primary" type="submit">Register</button></a>
34 |                         <a href="login.html"><button class="btn btn-outline-primary" type="submit">Login</button></a>
35 |                 </div>
36 |             </div>
37 |         </nav>
38 | 
39 |         <div id="page-spinner" class="p-5 text-center">
40 |             <div class="spinner-border page-spinner" role="status">
41 |                 <span class="visually-hidden">Loading...</span>
42 |             </div>
43 |         </div>
44 | 
45 |         <div id="res-list" class="row px-2 py-4">
46 | 
47 | 
48 |         </div>
49 |     </div>
50 | 
51 | 
52 | 
53 |     <script src="app.js" type="module"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   auth,
 3 |   signInWithEmailAndPassword,
 4 |   db,
 5 |   collection,
 6 |   getDocs,
 7 |   onAuthStateChanged,
 8 | } from "./js/firebase.js";
 9 | 
10 | const login = () => {
11 |   const email = document.getElementById("email");
12 |   const password = document.getElementById("password");
13 |   signInWithEmailAndPassword(auth, email.value, password.value)
14 |     .then((userCredential) => {
15 |       const user = userCredential.user;
16 |       console.log(user);
17 |       if (user.email === "admin@gmail.com") {
18 |         location.href = "dashboard.html";
19 |       } else {
20 |       }
21 |     })
22 |     .catch((error) => {
23 |       const errorCode = error.code;
24 |       const errorMessage = error.message;
25 |       console.log("err->", errorMessage);
26 |     });
27 | };
28 | 
29 | const loginBtn = document.getElementById("loginBtn");
30 | 
31 | loginBtn && loginBtn.addEventListener("click", login);
32 | 
33 | const pageSpinner = document.getElementById("page-spinner");
34 | 
35 | const getAllRestaurants = async () => {
36 |   const resList = document.getElementById("res-list");
37 |   resList.innerHTML = "";
38 |   const q = collection(db, "restaurants");
39 |   const querySnapshot = await getDocs(q);
40 |   let index = 0;
41 |   pageSpinner.style.display = "none";
42 |   querySnapshot.forEach((doc) => {
43 |     console.log(doc.id, " => ", doc.data());
44 |     resList.innerHTML += `
45 |         <div class="col mb-4">
46 |         <div class="card" style="width: 18rem;">
47 |             <img src="${doc.data().image}"
48 |                 class="card-img-top" alt="..." loading="lazy">
49 |             <div class="card-body">
50 |                 <h5 class="card-title">${doc.data().name}</h5>
51 |                 <p class="card-text">All variety are available
52 |                 </p>
53 |                 <p>
54 |                     <span class="badge rounded-pill text-bg-primary">Biryani</span>
55 |                     <span class="badge rounded-pill text-bg-primary">Karahi</span>
56 |                     <span class="badge rounded-pill text-bg-primary">Drinks</span>
57 |                 </p>
58 |                 <a href="dishes.html?restaurant=${doc.id
59 |       }" class="btn btn-primary">View all dishes</a>
60 |             </div>
61 |         </div>
62 |          </div>
63 |         `;
64 |   });
65 | };
66 | 
67 | onAuthStateChanged(auth, (user) => {
68 |   if (
69 |     (user && location.pathname.indexOf("restaurants") !== -1) ||
70 |     location.pathname === "/"
71 |   ) {
72 |     getAllRestaurants();
73 |   }
74 | });
75 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | .navbar {
  2 |     background-color: #fff;
  3 |     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 0 #dadce0;
  4 |     height: 70px;
  5 | }
  6 | 
  7 | .btn-primary {
  8 |     background-color: #ff2806;
  9 |     border-color: #ff2806;
 10 | }
 11 | 
 12 | 
 13 | .btn-primary:hover {
 14 |     background-color: #ff2806;
 15 |     border-color: #ff2806;
 16 | }
 17 | 
 18 | 
 19 | .btn-primary:active {
 20 |     background-color: #ff2806;
 21 |     border-color: #ff2806;
 22 |     opacity: 0.5;
 23 | }
 24 | 
 25 | .btn-outline-primary {
 26 |     border-color: #00ff00;
 27 |     color: #00ff00;
 28 | }
 29 | 
 30 | .btn-outline-primary:hover {
 31 |     background-color: #fff;
 32 |     border-color: #00ff00;
 33 |     color: #00ff00;
 34 | }
 35 | 
 36 | .btn-outline-primary:active {
 37 |     background-color: #fff;
 38 |     border-color: #00ff00;
 39 |     color: #00ff00;
 40 |     opacity: 0.5;
 41 | }
 42 | 
 43 | .text-bg-primary {
 44 |     background-color: #fbe50a !important;
 45 |     color: #000 !important;
 46 | }
 47 | 
 48 | .dish-image {
 49 |     width: 100px;
 50 |     height: 100px;
 51 |     object-fit: cover;
 52 |     border-radius: 10px;
 53 | }
 54 | 
 55 | 
 56 | .dish-card>div>div>div>div>.card-title {
 57 |     font-size: 14px;
 58 | }
 59 | 
 60 | .dish-card>div>div>div>div>p {
 61 |     font-size: 12px;
 62 | }
 63 | 
 64 | .dish-card>div>div>div>a {
 65 |     font-size: 12px;
 66 |     height: fit-content;
 67 | }
 68 | 
 69 | .qty-btn {
 70 |     background-color: #fff;
 71 |     border: 1px solid #ff2806;
 72 |     height: 30px;
 73 |     width: 30px;
 74 |     border-radius: 15px;
 75 |     display: flex;
 76 |     justify-content: center;
 77 |     align-items: center;
 78 |     font-size: 12px;
 79 |     font-weight: bold;
 80 | }
 81 | 
 82 | .socail-icons>i {
 83 |     font-size: 28px;
 84 |     color: #ff2806;
 85 | }
 86 | 
 87 | .fit-height {
 88 |     height: fit-content;
 89 | }
 90 | 
 91 | .slected-logo {
 92 |     display: none;
 93 | }
 94 | 
 95 | .spinner-border {
 96 |     width: 20px;
 97 |     height: 20px;
 98 |     font-size: 10px;
 99 | }
100 | 
101 | #submit-restaurant,
102 | #addDish {
103 |     display: flex;
104 |     align-items: center;
105 |     gap: 4px;
106 | }
107 | 
108 | #restaurant-spinner,
109 | #dish-spinner {
110 |     display: none;
111 | }
112 | 
113 | .res-logo-image,
114 | .dish-image {
115 |     width: 30px;
116 |     height: 30px;
117 |     border-radius: 15px;
118 | }
119 | 
120 | .card-img-top {
121 |     width: 100%;
122 |     height: 200px;
123 |     object-fit: cover;
124 | }
125 | 
126 | .page-spinner {
127 |     width: 200px;
128 |     height: 200px;
129 | }


--------------------------------------------------------------------------------
/register.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
 8 |     <link rel="stylesheet" href="registration.css">
 9 |     <title>Signup</title>
10 |     
11 | </head>
12 | 
13 | <body>
14 |     
15 |     <div class="containerDiv container">
16 |         <h2 class="text-center mb-4">Signup</h2>
17 |         <form id="signupForm">
18 |             <div class="mb-3">
19 |                 <label for="sname" class="form-label">Full Name <span>*</span></label>
20 |                 <input type="text" id="sname" class="form-control" placeholder="Name" >
21 |             </div>
22 |             <div class="mb-3">
23 |                 <label for="pNumber" class="form-label">Phone number <span>*</span></label>
24 |                 <input type="tel" id="pNumber" class="form-control" placeholder="Phone number" >
25 |             </div>
26 |             <div class="mb-3">
27 |                 <label for="Address" class="form-label">Address <span>*</span></label>
28 |                 <input type="text" id="Address" class="form-control" placeholder="Address" >
29 |             </div>
30 |             <div class="mb-3">
31 |                 <label for="semail" class="form-label">Email address <span>*</span></label>
32 |                 <input type="email" id="semail" class="form-control" placeholder="Email" >
33 |             </div>
34 |             <div class="mb-3">
35 |                 <label for="spassword" class="form-label">Password <span>*</span></label>
36 |                 <div class="input-group">
37 |                     <input type="password" id="spassword" class="form-control" placeholder="Password" >
38 |                     <button type="button" class="btn btn-outline-secondary" id="togglePassword">Show</button>
39 |                 </div>
40 |             </div>
41 |             <button type="button" id="sbtn" class="btn btn-primary mb-3">Signup</button>
42 |             <p id="errorPara"></p>
43 |             <p id="alreadyAccountPara">Already have an account? <a href="./login.html">Login</a></p>
44 | 
45 |             <hr class="hr-text" data-content="OR">
46 |             <button id="googleSignInBtn" class="btn btn-light">
47 |                 <div class="googleIcon"><img src="./googleIcon.png" alt=""></div>
48 |                 <div class="googleBtnPara">Login with Google</div>
49 |             </button>
50 |         </form>
51 |     </div>
52 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
53 |     <script type="module" src="./js/registration.js"></script>
54 |     <script>
55 |         document.getElementById('togglePassword').addEventListener('click', function () {
56 |             const passwordInput = document.getElementById('spassword');
57 |             const toggleButton = document.getElementById('togglePassword');
58 |             if (passwordInput.type === 'password') {
59 |                 passwordInput.type = 'text';
60 |                 toggleButton.textContent = 'Hide';
61 |             } else {
62 |                 passwordInput.type = 'password';
63 |                 toggleButton.textContent = 'Show';
64 |             }
65 |         });
66 |     </script>
67 | </body>
68 | 
69 | </html>
70 | 


--------------------------------------------------------------------------------
/forgate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Forgot Password | Firebase Auth Using JavaScript</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |         integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
10 |     <link href="./forgate.css" rel="stylesheet">
11 | </head>
12 | 
13 | <body>
14 |     <main>
15 |         <div class="container">
16 |             <div class="card shadow-lg rounded-4 form-signin w-100 m-auto">
17 |                 <div class="card-body">
18 |                     <form id="resetForm" class="needs-validation" novalidate autocomplete="off">
19 |                         <div class="text-center mx-auto">
20 |                            
21 |                         </div>
22 |                         <div id="usr_mail" class="mt-2">
23 |                             <label for="email_id" class="form-label fs-5">E-mail Address</label>
24 |                             <input type="email" class="form-control form-control-lg mb-2" id="user_email"
25 |                                 placeholder="Enter Your E-mail Address" aria-placeholder="Enter Your E-mail Address"
26 |                                 required>
27 |                             <span class="text-danger" id="email_err"></span>
28 |                         </div>
29 |                         <div class="d-grid gap-3 mt-3">
30 |                             <button class="btn btn-danger border-0 btn-lg fw-bold" type="submit">Reset Password</button>
31 |                         </div>
32 |                         <div class="mt-4 border-top text-center">
33 |                             <p class="mt-3 mb-0 p-0">
34 |                                 <a class="mt-2 mb-0 fw-bold" style="text-decoration:none" href="login.html">Back to Home
35 |                                 </a>
36 |                             </p>
37 |                         </div>
38 |                     </form>
39 |                 </div>
40 |             </div>
41 |                  
42 |         </div>
43 |     </main>
44 | 
45 |     <script type="module">
46 |         import { validEmail,checkBeforeAuth, resetPassword  } from './js/forgate.js';
47 |      
48 | 
49 |         document.getElementById('user_email').addEventListener("blur", validEmail);
50 |         document.getElementById("resetForm").onsubmit = function () { return passwordreset() };
51 |         document.addEventListener("DOMContentLoaded", checkBeforeAuth);
52 | 
53 |         function passwordreset() {
54 |             try {
55 |                 validEmail();
56 |                 if (validEmail() === true) {
57 |                     resetPassword();
58 |                 }
59 |                 return false;
60 |             } catch (err) {
61 |                 Swal.fire({
62 |                     icon: 'error',
63 |                     title: 'Oops...',
64 |                     text: err
65 |                 })
66 |             }
67 |         }
68 |     </script>
69 |     <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
70 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
71 |         integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
72 |         crossorigin="anonymous"></script>
73 | </body>
74 | 
75 | </html>


--------------------------------------------------------------------------------
/js/restaurant.js:
--------------------------------------------------------------------------------
 1 | import { storage, ref, uploadBytesResumable, getDownloadURL, db, collection, addDoc, getDocs } from "./firebase.js"
 2 | 
 3 | const logo = document.getElementById("restaurant-logo");
 4 | const selectedLogo = document.getElementById("selected-logo");
 5 | let file;
 6 | 
 7 | logo && logo.addEventListener("change", (e) => {
 8 |     file = e.target.files[0];
 9 |     selectedLogo.style.display = "flex";
10 |     selectedLogo.src = URL.createObjectURL(e.target.files[0])
11 | })
12 | 
13 | 
14 | let uploadFile = (file, name) => {
15 |     return new Promise((resolve, reject) => {
16 |         const storageRef = ref(storage, `images/${name.split(" ").join("-")}`);
17 |         const uploadTask = uploadBytesResumable(storageRef, file);
18 |         uploadTask.on('state_changed',
19 |             (snapshot) => {
20 |                 const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
21 |                 console.log('Upload is ' + progress + '% done');
22 |                 switch (snapshot.state) {
23 |                     case 'paused':
24 |                         console.log('Upload is paused');
25 |                         break;
26 |                     case 'running':
27 |                         console.log('Upload is running');
28 |                         break;
29 |                 }
30 |             },
31 |             (error) => {
32 |                 reject(error)
33 |             },
34 |             () => {
35 | 
36 |                 getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
37 |                     console.log('File available at', downloadURL);
38 |                     resolve(downloadURL)
39 |                 });
40 |             }
41 |         );
42 |     })
43 | }
44 | 
45 | const getAllRestaurants = async () => {
46 |     const resList = document.getElementById("res-list");
47 |     resList.innerHTML = "";
48 |     const q = collection(db, "restaurants");
49 |     const querySnapshot = await getDocs(q);
50 |     let index = 0;
51 |     querySnapshot.forEach((doc) => {
52 |         console.log(doc.id, " => ", doc.data());
53 |         index++
54 |         resList.innerHTML += `
55 |                     <tr>
56 |                         <th scope="row">${index}</th>
57 |                         <td><img class="res-logo-image" src="${doc.data().image}" alt=""></td>
58 |                         <td>${doc.data().name}</td>
59 |                         <td>${doc.data().address}</td>
60 |                     </tr>
61 |         `
62 |     });
63 | }
64 | 
65 | getAllRestaurants()
66 | 
67 | 
68 | const submitRestaurant = document.getElementById("submit-restaurant");
69 | 
70 | 
71 | submitRestaurant && submitRestaurant.addEventListener('click', async () => {
72 |     const closeBtn = document.getElementById("close-btn")
73 |     const spinner = document.getElementById("restaurant-spinner");
74 |     const name = document.getElementById("restaurant-name");
75 |     const address = document.getElementById("restaurant-address");
76 |     spinner.style.display = "block"
77 |     const image = await uploadFile(file, name.value)
78 |     const docRef = await addDoc(collection(db, "restaurants"), {
79 |         name: name.value,
80 |         address: address.value,
81 |         image
82 |     });
83 |     spinner.style.display = "none"
84 |     name.value = "";
85 |     address.value = "";
86 |     logo.value = "";
87 |     selectedLogo.style.display = "none";
88 |     console.log("Document written with ID: ", docRef.id);
89 |     getAllRestaurants();
90 |     closeBtn.click()
91 | })
92 | 
93 | export { uploadFile };


--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
11 |         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
12 |         crossorigin="anonymous"></script>
13 |     <script src="https://kit.fontawesome.com/4876bfe495.js" crossorigin="anonymous"></script>
14 |     <link rel="stylesheet" href="style.css">
15 | </head>
16 | 
17 | <body>
18 |     <div>
19 |         <nav class="navbar navbar-expand-lg">
20 |             <div class="container-fluid">
21 |                 <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
22 |                     <img width="150" src="images/logo.png" alt="" />
23 |                 </a>
24 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
25 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
26 |                     aria-expanded="false" aria-label="Toggle navigation">
27 |                     <span class="navbar-toggler-icon"></span>
28 |                 </button>
29 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
30 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
31 |                     </ul>
32 |                     <div class="d-flex gap-2" role="search">
33 |                         <a href="register.html"><button class="btn btn-primary" type="submit">Register</button></a>
34 |                         <a href="login.html"><button class="btn btn-outline-primary" type="submit">Login</button></a>
35 |                     </div>
36 |                 </div>
37 |             </div>
38 |         </nav>
39 | 
40 |         <div class="row justify-content-center">
41 |             <div class="col-6 p-5">
42 |                 <div>
43 |                     <div class="mb-3">
44 |                         <label for="exampleInputEmail1" class="form-label">Email address</label>
45 |                         <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
46 |                         <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
47 |                     </div>
48 |                     <div class="mb-3">
49 |                         <label for="exampleInputPassword1" class="form-label">Password</label>
50 |                         <input type="password" class="form-control" id="password">
51 |                     </div>
52 | 
53 |                     <button id="loginBtn" type="submit" class="btn btn-primary">Login</button>
54 | 
55 | 
56 |                     <br />
57 |                     <div class="d-flex gap-2 mt-4">
58 |                         <div id="emailHelp" class="form-text">Don't have account?</div>
59 |                         <a href="register.html">Register now</a>
60 |                     </div>
61 |                     <div class="d-flex gap-2 mt-4">
62 |                         <div id="emailHelp" class="form-text">Don't remember password?</div>
63 |                         <a href="forgate.html">forgat password</a>
64 |                     </div>
65 | 
66 | 
67 |                 </div>
68 |             </div>
69 |         </div>
70 |     </div>
71 | 
72 | 
73 | 
74 |     <script src="app.js" type="module"></script>
75 | </body>
76 | 
77 | </html>


--------------------------------------------------------------------------------
/js/registration.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import {auth,createUserWithEmailAndPassword,provider,onAuthStateChanged,signInWithPopup,db,doc,setDoc} from './firebase.js';
  3 | 
  4 | 
  5 | 
  6 | let sbtn = document.querySelector("#sbtn"); // get signin btn
  7 | let errorPara = document.querySelector("#errorPara"); // get error paragraph
  8 | 
  9 | sbtn.addEventListener("click", () => {
 10 |   let Email = document.querySelector("#semail"); // get email to signin user
 11 |   let password = document.querySelector("#spassword"); // get password to signin user
 12 |   let name = document.querySelector("#sname"); // get name of a user
 13 |   let phoneNumber = document.querySelector("#pNumber"); // get name of a user
 14 |   let Address = document.querySelector("#Address"); // get name of a user
 15 | 
 16 |   if (name.value == "") {
 17 |     errorPara.innerText = "Please fill name field!";
 18 |     setTimeout(() => {
 19 |       errorPara.innerHTML = "";
 20 |     }, 3000);
 21 |   } else {
 22 |     // storing data in a array
 23 |     let userData = {
 24 |       fullName: name.value,//s mean save
 25 |       Email: Email.value,
 26 |       password: password.value,
 27 |       phoneNumber : phoneNumber.value,
 28 |       Address:Address.value
 29 |     };
 30 |     // creating user with eamil and password
 31 |     createUserWithEmailAndPassword(auth, userData.Email, userData.password)
 32 |       // email value  , password value
 33 |       .then(async (userCredential) => {
 34 |         const user = userCredential.user; // getting user from firebase
 35 |         await setDoc(doc(db, "users", user.uid), {
 36 |           // collection name,   unique id of user
 37 |           ...userData, // setting array in a database
 38 |           userId: user.uid, // also user id in the database
 39 |         });
 40 |         location.href = "../login.html";
 41 |       })
 42 |       .catch((error) => {
 43 |         const errorCode = error.code;
 44 |         const errorMessage = errorCode.slice(5).toUpperCase();
 45 |         const errMessage = errorMessage.replace(/-/g, " ");
 46 |         errorPara.innerText = errMessage;
 47 |         setTimeout(() => {
 48 |           errorPara.innerHTML = "";
 49 |         }, 3000);
 50 |       });
 51 |   }
 52 | });
 53 | 
 54 | password.addEventListener("keypress", (e) => {
 55 |   if (e.key == "Enter") {
 56 |     sbtn.click();
 57 |   }
 58 | });
 59 | 
 60 | const googleSignInBtn = document.getElementById("googleSignInBtn");
 61 | 
 62 | googleSignInBtn.addEventListener("click", () => {
 63 |   signInWithPopup(auth, provider)
 64 |     .then(async (result) => {
 65 |       const credential = GoogleAuthProvider.credentialFromResult(result);
 66 |       const token = credential.accessToken;
 67 | 
 68 |       const user = result.user;
 69 | 
 70 |       let userData = {
 71 |         name: user.displayName,
 72 |         Email: user.email,
 73 |       };
 74 | 
 75 |       await setDoc(doc(db, "users", user.uid), {
 76 |         // collection name,   unique id of user
 77 |         ...userData, // setting array in a database
 78 |         userId: user.uid, // also user id in the database
 79 |       });
 80 | 
 81 |       localStorage.setItem("userUid", user.uid);
 82 | 
 83 |       location.href = "../index.html";
 84 |     })
 85 |     .catch((error) => {
 86 |       // Handle Errors here.
 87 |       const errorCode = error.code;
 88 |       const errorMessage = error.message;
 89 |       // The email of the user's account used.
 90 |       const email = error.customData.email;
 91 |       // The AuthCredential type that was used.
 92 |         const credential = GoogleAuthProvider.credentialFromError(error);
 93 |         
 94 |       if (email) {
 95 |         errorPara.innerText = email;
 96 |         setTimeout(() => {
 97 |           errorPara.innerHTML = "";
 98 |         }, 3000);
 99 |       }
100 |     });
101 | });
102 | 
103 | onAuthStateChanged(auth, (user) => {
104 |   if (user) {
105 |     const userUid = user.uid;
106 |   } else {
107 |     localStorage.removeItem("userUid");
108 |   }
109 | });
110 | 
111 | if (localStorage.getItem("userUid")) {
112 |   location.href = "../index.html";
113 | }
114 | 


--------------------------------------------------------------------------------
/dashboard.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
 9 |         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
11 |         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
12 |         crossorigin="anonymous"></script>
13 |     <script src="https://kit.fontawesome.com/4876bfe495.js" crossorigin="anonymous"></script>
14 |     <link rel="stylesheet" href="style.css">
15 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
16 | 
17 | </head>
18 | 
19 | <body>
20 |     <div>
21 |         <nav class="navbar navbar-expand-lg">
22 |             <div class="container-fluid">
23 |                 <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
24 |                     <img width="150" src="images/logo.png" alt="" />
25 |                 </a>
26 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
27 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
28 |                     aria-expanded="false" aria-label="Toggle navigation">
29 |                     <span class="navbar-toggler-icon"></span>
30 |                 </button>
31 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
32 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
33 |                         <li class="nav-item">
34 |                             <a class="nav-link active" aria-current="page" href="dashboard.html">Dashbaord</a>
35 |                         </li>
36 |                         <li class="nav-item">
37 |                             <a class="nav-link" aria-current="page" href="restaurants.html">Restaurants</a>
38 |                         </li>
39 |                         <li class="nav-item">
40 |                             <a class="nav-link" aria-current="page" href="add-dishes.html">Dishes</a>
41 |                         </li>
42 |                         <li class="nav-item">
43 |                             <a class="nav-link" aria-current="page" href="orders.html">Orders</a>
44 |                         </li>
45 |                     </ul>
46 |                     <div class="d-flex gap-2" role="search">
47 |                         <button class="btn btn-outline-primary" type="button" id="logoutbtn">Logout</button>
48 |                     </div>
49 |                 </div>
50 |             </div>
51 |         </nav>
52 | 
53 |         <div class="row px-2 py-4">
54 |             <div class="col">
55 |                 <div class="card" style="width: 18rem;">
56 |                     <div class="card-body">
57 |                         <h5 class="card-title">Total restaurants</h5>
58 |                         <h6 class="card-subtitle mb-2 text-body-secondary">500</h6>
59 |                     </div>
60 |                 </div>
61 |             </div>
62 |             <div class="col">
63 |                 <div class="card" style="width: 18rem;">
64 |                     <div class="card-body">
65 |                         <h5 class="card-title">Total dishes</h5>
66 |                         <h6 class="card-subtitle mb-2 text-body-secondary">3000</h6>
67 |                     </div>
68 |                 </div>
69 |             </div>
70 |             <div class="col">
71 |                 <div class="card" style="width: 18rem;">
72 |                     <div class="card-body">
73 |                         <h5 class="card-title">Total orders</h5>
74 |                         <h6 class="card-subtitle mb-2 text-body-secondary">10000</h6>
75 |                     </div>
76 |                 </div>
77 |             </div>
78 |             <div class="col">
79 |                 <div class="card" style="width: 18rem;">
80 |                     <div class="card-body">
81 |                         <h5 class="card-title">Total users</h5>
82 |                         <h6 class="card-subtitle mb-2 text-body-secondary">10</h6>
83 |                     </div>
84 |                 </div>
85 |             </div>
86 |         </div>
87 |     </div>
88 | 
89 | 
90 | 
91 |     <script src="app.js" type="module"></script>
92 |     <script src="./js/dashboard.js" type="module"></script>
93 |     <script src="./js/logout.js" type="module"></script>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/js/add-dishes.js:
--------------------------------------------------------------------------------
  1 | import { storage, ref, uploadBytesResumable, getDownloadURL, db, collection, addDoc, getDocs } from "./firebase.js"
  2 | 
  3 | let uploadFile = (file, name) => {
  4 |     return new Promise((resolve, reject) => {
  5 |         const storageRef = ref(storage, `images/${name.split(" ").join("-")}`);
  6 |         const uploadTask = uploadBytesResumable(storageRef, file);
  7 |         uploadTask.on('state_changed',
  8 |             (snapshot) => {
  9 |                 const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 10 |                 console.log('Upload is ' + progress + '% done');
 11 |                 switch (snapshot.state) {
 12 |                     case 'paused':
 13 |                         console.log('Upload is paused');
 14 |                         break;
 15 |                     case 'running':
 16 |                         console.log('Upload is running');
 17 |                         break;
 18 |                 }
 19 |             },
 20 |             (error) => {
 21 |                 reject(error)
 22 |             },
 23 |             () => {
 24 | 
 25 |                 getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
 26 |                     console.log('File available at', downloadURL);
 27 |                     resolve(downloadURL)
 28 |                 });
 29 |             }
 30 |         );
 31 |     })
 32 | }
 33 | 
 34 | const getAllRestaurants = async () => {
 35 |     try {
 36 |         const q = collection(db, "restaurants");
 37 |         const querySnapshot = await getDocs(q);
 38 |         const resSelect = document.getElementById("restaurant-name");
 39 |         let index = 0;
 40 |         let restaurants = [];
 41 |         resSelect.innerHTML = `<option selected>Select restaurant</option>`
 42 |         querySnapshot.forEach((doc) => {
 43 |             restaurants.push({ ...doc.data(), id: doc.id })
 44 |             index++
 45 |             resSelect.innerHTML += `
 46 |             <option value="${doc.id}">${doc.data().name}</option>
 47 |             `
 48 |         });
 49 |         return new Promise((resolve, reject) => {
 50 |             resolve(restaurants)
 51 |         })
 52 |     } catch (err) {
 53 |         console.log("err", err)
 54 |     }
 55 | }
 56 | 
 57 | getAllRestaurants()
 58 | 
 59 | const getAllDishes = async () => {
 60 |     const restaurants = await getAllRestaurants();
 61 |     const allDishes = document.getElementById("all-dishes");
 62 |     const q = collection(db, "dishes");
 63 |     const querySnapshot = await getDocs(q);
 64 |     let index = 0;
 65 |     let restaurantNames = {};
 66 |     for (var i = 0; i < restaurants.length; i++) {
 67 |         restaurantNames[restaurants[i].id] = restaurants[i].name
 68 |     }
 69 |     console.log("restaurantNames", restaurantNames)
 70 |     allDishes.innerHTML = ``
 71 |     querySnapshot.forEach((doc) => {
 72 |         index++;
 73 |         allDishes.innerHTML += `
 74 |                      <tr>
 75 |                         <th scope="row">1</th>
 76 |                         <td><img class="dish-image" src="${doc.data().image}" alt=""></td>
 77 |                         <td>${doc.data().name}</td>
 78 |                         <td>${doc.data().price}</td>
 79 |                         <td>${doc.data().serving}</td>
 80 |                         <td>${restaurantNames[doc.data().restaurant]}</td>
 81 |                     </tr>
 82 |         `
 83 |     });
 84 | }
 85 | 
 86 | getAllDishes();
 87 | 
 88 | const addDish = document.getElementById("addDish");
 89 | 
 90 | addDish.addEventListener('click', async () => {
 91 |     const closeBtn = document.getElementById("close-btn")
 92 |     const spinner = document.getElementById("dish-spinner");
 93 |     const resName = document.getElementById("restaurant-name");
 94 |     const dishName = document.getElementById("dish-name");
 95 |     const dishPrice = document.getElementById("dish-price");
 96 |     const dishServing = document.getElementById("dish-serving");
 97 |     const dishImage = document.getElementById("dish-image");
 98 |     spinner.style.display = "block"
 99 |     const image = await uploadFile(dishImage.files[0], dishName.value)
100 |     const dishDetail = {
101 |         restaurant: resName.value,
102 |         name: dishName.value,
103 |         price: dishPrice.value,
104 |         serving: dishServing.value,
105 |         image
106 |     }
107 |     const docRef = await addDoc(collection(db, "dishes"), dishDetail);
108 |     resName.value = "";
109 |     dishName.value = "";
110 |     dishPrice.value = "";
111 |     dishServing.value = "";
112 |     dishImage.value = "";
113 |     spinner.style.display = "none"
114 |     closeBtn.click()
115 |     getAllDishes()
116 |     console.log(docRef)
117 | })


--------------------------------------------------------------------------------
/orders.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Document</title>
  7 |     <link
  8 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  9 |       rel="stylesheet"
 10 |       integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
 11 |       crossorigin="anonymous"
 12 |     />
 13 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 14 | 
 15 |     <script
 16 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 17 |       integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
 18 |       crossorigin="anonymous"
 19 |     ></script>
 20 |     <script
 21 |       src="https://kit.fontawesome.com/4876bfe495.js"
 22 |       crossorigin="anonymous"
 23 |     ></script>
 24 |     <link rel="stylesheet" href="style.css" />
 25 |   </head>
 26 | 
 27 |   <body>
 28 |     <div>
 29 |       <nav class="navbar navbar-expand-lg">
 30 |         <div class="container-fluid">
 31 |           <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
 32 |             <img width="150" src="images/logo.png" alt="" />
 33 |           </a>
 34 |           <button
 35 |             class="navbar-toggler"
 36 |             type="button"
 37 |             data-bs-toggle="collapse"
 38 |             data-bs-target="#navbarSupportedContent"
 39 |             aria-controls="navbarSupportedContent"
 40 |             aria-expanded="false"
 41 |             aria-label="Toggle navigation"
 42 |           >
 43 |             <span class="navbar-toggler-icon"></span>
 44 |           </button>
 45 |           <div class="collapse navbar-collapse" id="navbarSupportedContent">
 46 |             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 47 |               <li class="nav-item">
 48 |                 <a class="nav-link" aria-current="page" href="dashboard.html"
 49 |                   >Dashbaord</a
 50 |                 >
 51 |               </li>
 52 |               <li class="nav-item">
 53 |                 <a class="nav-link" aria-current="page" href="restaurants.html"
 54 |                   >Restaurants</a
 55 |                 >
 56 |               </li>
 57 |               <li class="nav-item">
 58 |                 <a
 59 |                   class="nav-link active"
 60 |                   aria-current="page"
 61 |                   href="add-dishes.html"
 62 |                   >Dishes</a
 63 |                 >
 64 |               </li>
 65 |               <li class="nav-item">
 66 |                 <a class="nav-link" aria-current="page" href="orders.html"
 67 |                   >Orders</a
 68 |                 >
 69 |               </li>
 70 |             </ul>
 71 |             <div class="d-flex gap-2" role="search">
 72 |               <button class="btn btn-outline-primary" type="button" id="logoutbtn">
 73 |                 Logout
 74 |               </button>
 75 |             </div>
 76 |           </div>
 77 |         </div>
 78 |       </nav>
 79 | 
 80 |       <div id="page-spinner" class="p-5 text-center">
 81 |         <div class="spinner-border page-spinner" role="status">
 82 |           <span class="visually-hidden">Loading...</span>
 83 |         </div>
 84 |       </div>
 85 |       <div style="display: none" id="main-content">
 86 |         <div class="row px-2 py-4">
 87 |           <div class="d-flex justify-content-between align-items-center">
 88 |             <h2>Orders</h2>
 89 |           </div>
 90 |         </div>
 91 | 
 92 |         <div class="row px-2 py-4">
 93 |           <table class="table">
 94 |             <thead>
 95 |               <tr>
 96 |                 <th scope="col">#</th>
 97 |                 <th scope="col">Customer name</th>
 98 |                 <th scope="col">Customer contact</th>
 99 |                 <th scope="col">Customer address</th>
100 |                 <th scope="col">Status</th>
101 |                 <th scope="col">Total</th>
102 |                 <th scope="col">Order</th>
103 |               </tr>
104 |             </thead>
105 |             <tbody id="all-orders"></tbody>
106 |           </table>
107 |         </div>
108 |       </div>
109 |       <div
110 |         class="modal fade"
111 |         id="exampleModal"
112 |         tabindex="-1"
113 |         aria-labelledby="exampleModalLabel"
114 |         aria-hidden="true"
115 |       >
116 |         <div class="modal-dialog">
117 |           <div class="modal-content">
118 |             <div class="modal-header">
119 |               <h1 class="modal-title fs-5" id="exampleModalLabel">
120 |                 Order details
121 |               </h1>
122 |               <button
123 |                 id="close-btn"
124 |                 type="button"
125 |                 class="btn-close"
126 |                 data-bs-dismiss="modal"
127 |                 aria-label="Close"
128 |               ></button>
129 |             </div>
130 |             <div class="modal-body">
131 |               <div class="card text-center">
132 |                 <div id="cart" class="card-body"></div>
133 |                 <select
134 |                   id="orderStatus"
135 |                   class="form-select"
136 |                   aria-label="Default select example"
137 |                 >
138 |                   <option selected>Select status</option>
139 |                   <option value="pending">Pending</option>
140 |                   <option value="delivered">Delivered</option>
141 |                 </select>
142 |                 <br />
143 |                 <button id="updateOrder" class="btn btn-primary">
144 |                   Update order
145 |                 </button>
146 |               </div>
147 |             </div>
148 |           </div>
149 |         </div>
150 |       </div>
151 |     </div>
152 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
153 |     <script src="./js/order.js" type="module"></script>
154 |     <script src="./js/logout.js" type="module"></script>
155 |   </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/js/order.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   storage,
  3 |   ref,
  4 |   uploadBytesResumable,
  5 |   getDownloadURL,
  6 |   db,
  7 |   collection,
  8 |   addDoc,
  9 |   getDocs,
 10 |   serverTimestamp,
 11 |   doc,
 12 |   getDoc,
 13 |   updateDoc,
 14 | } from "./firebase.js";
 15 | const placeOrder = document.getElementById("placeOrder");
 16 | 
 17 | placeOrder &&
 18 |   placeOrder.addEventListener("click", async () => {
 19 |     const cartDiv = document.getElementById("cart");
 20 |     const customerName = document.getElementById("customerName");
 21 |     const customerContact = document.getElementById("customerContact");
 22 |     const customerAddress = document.getElementById("customerAddress");
 23 |     const cart = JSON.parse(localStorage.getItem("cart"));
 24 |     const sum = cart.reduce((a, b) => a + Number(b.price) * b.qty, 0);
 25 |     const totalAmount = document.getElementById("totalAmount");
 26 |     const closeBtn = document.getElementById("closeBtn");
 27 | 
 28 |     const orderDetails = {
 29 |       customerName: customerName.value,
 30 |       customerContact: customerContact.value,
 31 |       customerAddress: customerAddress.value,
 32 |       status: "pending",
 33 |       cart,
 34 |       timestamp: serverTimestamp(),
 35 |       orderAmount: sum,
 36 |       deliveryCharges: 100,
 37 |       totalAmount: sum + 100,
 38 |     };
 39 |     await addDoc(collection(db, "orders"), orderDetails);
 40 |     Swal.fire({
 41 |       position: "center-center",
 42 |       icon: "success",
 43 |       title: "Your order has been placed",
 44 |       showConfirmButton: false,
 45 |       timer: 1500,
 46 |     });
 47 |     customerName.value = "";
 48 |     customerContact.value = "";
 49 |     customerAddress.value = "";
 50 |     localStorage.removeItem("cart");
 51 |     cartDiv.innerHTML = "";
 52 |     totalAmount.innerHTML = "";
 53 |     closeBtn.click();
 54 |   });
 55 | 
 56 | const getAllOrders = async () => {
 57 |   const pageSpinner = document.getElementById("page-spinner");
 58 |   const mainContent = document.getElementById("main-content");
 59 |   const allOrders = document.getElementById("all-orders");
 60 |   const q = collection(db, "orders");
 61 |   const querySnapshot = await getDocs(q);
 62 |   let index = 0;
 63 |   querySnapshot.forEach((doc) => {
 64 |     index++;
 65 |     console.log("order", doc.data());
 66 |     let status = doc.data().status;
 67 |     let statusColor = "";
 68 |     if (status === "pending") {
 69 |       statusColor = "text-bg-warning";
 70 |     }
 71 |     if (status === "delivered") {
 72 |       statusColor = "text-bg-success";
 73 |     }
 74 |     allOrders.innerHTML += `
 75 | <tr>
 76 |     <th scope="row">${index}</th>
 77 |     <td>${doc.data().customerName}</td>
 78 |     <td>${doc.data().customerContact}</td>
 79 |     <td>${doc.data().customerAddress}</td>
 80 |     <td><span class="badge ${statusColor}">${status}</span>
 81 |     </td>
 82 |     <td>${doc.data().totalAmount}</td>
 83 |     <td>
 84 |     <button onclick="viewOrderDetail('${
 85 |       doc.id
 86 |     }')" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 87 |     View details
 88 | </button>
 89 |     </td>
 90 | </tr>
 91 |     `;
 92 |   });
 93 |   pageSpinner.style.display = "none";
 94 |   mainContent.style.display = "block";
 95 | };
 96 | 
 97 | getAllOrders();
 98 | 
 99 | let updateOrderId;
100 | 
101 | const viewOrderDetail = async (id) => {
102 |   updateOrderId = id;
103 |   const cart = document.getElementById("cart");
104 |   const orderStatus = document.getElementById("orderStatus");
105 |   const docRef = doc(db, "orders", id);
106 |   const docSnap = await getDoc(docRef);
107 |   const cartItems = docSnap.data().cart;
108 |   orderStatus.value = docSnap.data().status;
109 |   cart.innerHTML = "";
110 |   for (var i = 0; i < cartItems.length; i++) {
111 |     cart.innerHTML += `
112 |                 <div class="card dish-card w-100 mb-3">
113 |                                     <div class="card-body">
114 |                                         <div class="d-flex align-items-center justify-content-between">
115 |                                             <div class="d-flex align-items-center">
116 |                                                 <img class="dish-image"
117 |                                                     src="${
118 |                                                       cartItems[i].image
119 |                                                     }" />
120 |                                                 <div class="p-2">
121 |                                                     <h5 class="card-title">${
122 |                                                       cartItems[i].name
123 |                                                     }</h5>
124 |                                                     <h3 class="card-title">Rs: ${
125 |                                                       cartItems[i].price
126 |                                                     } /- x ${
127 |       cartItems[i].qty
128 |     } = ${cartItems[i].price * cartItems[i].qty}</h3>
129 |                                                     <p class="card-text">Serves ${
130 |                                                       cartItems[i].serving
131 |                                                     }
132 |                                                     </p>
133 |                                                 </div>
134 |                                             </div>
135 |                                         </div>
136 |                                     </div>
137 |                                 </div>
138 |                 `;
139 |   }
140 | };
141 | 
142 | const updateOrder = document.getElementById("updateOrder");
143 | 
144 | updateOrder.addEventListener("click", async () => {
145 |   const closeBtn = document.getElementById("close-btn");
146 |   const orderStatus = document.getElementById("orderStatus");
147 |   const docRef = doc(db, "orders", updateOrderId);
148 |   await updateDoc(docRef, {
149 |     status: orderStatus.value,
150 |   });
151 |   closeBtn.click();
152 |   getAllOrders();
153 | });
154 | 
155 | window.viewOrderDetail = viewOrderDetail;
156 | 


--------------------------------------------------------------------------------
/js/dishes.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   collection,
  3 |   getDocs,
  4 |   db,
  5 |   where,
  6 |   query,
  7 |   doc,
  8 |   getDoc,
  9 | } from "./firebase.js";
 10 | 
 11 | var urlParams = new URLSearchParams(window.location.search);
 12 | let pageSpinner = document.getElementById("page-spinner");
 13 | let mainContent = document.getElementById("main-content");
 14 | 
 15 | const getRestaurantDetail = async () => {
 16 |   const resName = document.getElementById("res-name");
 17 |   const resAddress = document.getElementById("res-address");
 18 |   const resImage = document.getElementById("res-image");
 19 |   const docRef = doc(db, "restaurants", urlParams.get("restaurant"));
 20 |   const docSnap = await getDoc(docRef);
 21 |   if (docSnap.exists()) {
 22 |     resName.innerHTML = docSnap.data().name;
 23 |     resAddress.innerHTML = docSnap.data().address;
 24 |     resImage.src = docSnap.data().image;
 25 |     console.log("Document data:", docSnap.data());
 26 |   } else {
 27 |     // docSnap.data() will be undefined in this case
 28 |     console.log("No such document!");
 29 |   }
 30 | };
 31 | 
 32 | getRestaurantDetail();
 33 | 
 34 | let dishes = [];
 35 | 
 36 | const getAllDishes = async () => {
 37 |   const allDishes = document.getElementById("all-dishes");
 38 |   const q = query(
 39 |     collection(db, "dishes"),
 40 |     where("restaurant", "==", urlParams.get("restaurant"))
 41 |   );
 42 |   const querySnapshot = await getDocs(q);
 43 |   pageSpinner.style.display = "none";
 44 |   mainContent.style.display = "block";
 45 |   allDishes.innerHTML = ``;
 46 |   querySnapshot.forEach((doc) => {
 47 |     dishes.push({ ...doc.data(), id: doc.id });
 48 |     allDishes.innerHTML += `
 49 |         <div class="card dish-card w-100 mb-3">
 50 |         <div class="card-body">
 51 |             <div class="d-flex align-items-center justify-content-between">
 52 |                 <div class="d-flex align-items-center">
 53 |                     <img class="dish-image"
 54 |                         src="${doc.data().image}" />
 55 |                     <div class="p-2">
 56 |                         <h5 class="card-title">${doc.data().name}</h5>
 57 |                         <h3 class="card-title">Rs: ${doc.data().price} /-</h3>
 58 |                         <p class="card-text">Serves ${doc.data().serving}
 59 |                         </p>
 60 |                     </div>
 61 |                 </div>
 62 |                 <div class="d-flex align-items-center gap-2">
 63 |                     <button onclick="updateQty('-','${
 64 |                       doc.id
 65 |                     }')" class="qty-btn"><i class="fa-solid fa-minus"></i></button>
 66 |                     <span class="fw-bold" id="${doc.id}">1</span>
 67 |                     <button onclick="updateQty('+','${
 68 |                       doc.id
 69 |                     }')" class="qty-btn"><i class="fa-solid fa-plus"></i></button>
 70 | 
 71 |                     <a href="#" class="btn btn-primary" onclick="addToCart('${
 72 |                       doc.id
 73 |                     }')">Add to cart</a>
 74 |                 </div>
 75 |             </div>
 76 |         </div>
 77 |     </div>
 78 |         `;
 79 |   });
 80 | };
 81 | 
 82 | getAllDishes();
 83 | 
 84 | const updateQty = (type, id) => {
 85 |   const qty = document.getElementById(id);
 86 |   if (Number(qty.innerHTML) < 2 && type === "-") {
 87 |     return;
 88 |   }
 89 |   if (type === "+") {
 90 |     qty.innerHTML = Number(qty.innerHTML) + 1;
 91 |   } else {
 92 |     qty.innerHTML = Number(qty.innerHTML) - 1;
 93 |   }
 94 | };
 95 | 
 96 | const addToCart = (id) => {
 97 |   const cartItems = localStorage.getItem("cart");
 98 |   const cart = cartItems ? JSON.parse(cartItems) : [];
 99 |   const qty = document.getElementById(id);
100 |   const dish = dishes.filter((v) => v.id === id);
101 |   cart.push({ ...dish[0], qty: Number(qty.innerHTML) });
102 |   localStorage.setItem("cart", JSON.stringify(cart));
103 |   console.log("cart", cart);
104 |   const totalAmount = document.getElementById("totalAmount");
105 |   const sum = cart.reduce((a, b) => a + Number(b.price) * b.qty, 0);
106 |   totalAmount.innerHTML = `Rs ${sum + 100} /-`;
107 |   getCartItems();
108 | };
109 | 
110 | const deleteCartItem = (i) => {
111 |   const cartItems = JSON.parse(localStorage.getItem("cart"));
112 |   cartItems.splice(Number(i), 1);
113 |   localStorage.setItem("cart", JSON.stringify(cartItems));
114 |   const totalAmount = document.getElementById("totalAmount");
115 |   const sum = cartItems.reduce((a, b) => a + Number(b.price) * b.qty, 0);
116 |   totalAmount.innerHTML = `Rs ${sum + 100} /-`;
117 |   getCartItems();
118 | };
119 | 
120 | const getCartItems = () => {
121 |   const cartItems = JSON.parse(localStorage.getItem("cart"));
122 |   const cart = document.getElementById("cart");
123 |   cart.innerHTML = "";
124 |   if (cartItems) {
125 |     for (var i = 0; i < cartItems.length; i++) {
126 |       console.log(cartItems[i]);
127 |       cart.innerHTML += `
128 |             <div class="card dish-card w-100 mb-3">
129 |                                 <div class="card-body">
130 |                                     <div class="d-flex align-items-center justify-content-between">
131 |                                         <div class="d-flex align-items-center">
132 |                                             <img class="dish-image"
133 |                                                 src="${cartItems[i].image}" />
134 |                                             <div class="p-2">
135 |                                                 <h5 class="card-title">${
136 |                                                   cartItems[i].name
137 |                                                 }</h5>
138 |                                                 <h3 class="card-title">Rs: ${
139 |                                                   cartItems[i].price
140 |                                                 } /- x ${cartItems[i].qty} = ${
141 |         cartItems[i].price * cartItems[i].qty
142 |       }</h3>
143 |                                                 <p class="card-text">Serves ${
144 |                                                   cartItems[i].serving
145 |                                                 }
146 |                                                 </p>
147 |                                             </div>
148 |                                         </div>
149 |                                         <a href="#" onClick="deleteCartItem('${i}')" class="btn btn-primary"><i class="fa-solid fa-trash"></i></a>
150 |                                     </div>
151 |                                 </div>
152 |                             </div>
153 |             `;
154 |     }
155 |   }
156 | };
157 | 
158 | getCartItems();
159 | 
160 | window.updateQty = updateQty;
161 | window.addToCart = addToCart;
162 | window.deleteCartItem = deleteCartItem;
163 | 


--------------------------------------------------------------------------------
/restaurants.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
  9 |         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 11 |         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
 12 |         crossorigin="anonymous"></script>
 13 |     <script src="https://kit.fontawesome.com/4876bfe495.js" crossorigin="anonymous"></script>
 14 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 15 | 
 16 |     <link rel="stylesheet" href="style.css">
 17 | </head>
 18 | 
 19 | <body>
 20 |     <div>
 21 |         <nav class="navbar navbar-expand-lg">
 22 |             <div class="container-fluid">
 23 |                 <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
 24 |                     <img width="150" src="images/logo.png" alt="" />
 25 |                 </a>
 26 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 27 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 28 |                     aria-expanded="false" aria-label="Toggle navigation">
 29 |                     <span class="navbar-toggler-icon"></span>
 30 |                 </button>
 31 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 32 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 33 |                         <li class="nav-item">
 34 |                             <a class="nav-link" aria-current="page" href="dashboard.html">Dashbaord</a>
 35 |                         </li>
 36 |                         <li class="nav-item">
 37 |                             <a class="nav-link active" aria-current="page" href="restaurants.html">Restaurants</a>
 38 |                         </li>
 39 |                         <li class="nav-item">
 40 |                             <a class="nav-link" aria-current="page" href="add-dishes.html">Dishes</a>
 41 |                         </li>
 42 |                         <li class="nav-item">
 43 |                             <a class="nav-link" aria-current="page" href="orders.html">Orders</a>
 44 |                         </li>
 45 |                     </ul>
 46 |                     <div class="d-flex gap-2" role="search">
 47 |                         <button class="btn btn-outline-primary" type="button" id="logoutbtn">Logout</button>
 48 |                     </div>
 49 |                 </div>
 50 |             </div>
 51 |         </nav>
 52 | 
 53 |         <div class="row px-2 py-4">
 54 |             <div class="d-flex justify-content-between align-items-center">
 55 |                 <h2>Restaurants</h2>
 56 | 
 57 | 
 58 |                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#restaurantModal">
 59 |                     Add new restaurant
 60 |                 </button>
 61 |                 <div class="modal fade" id="restaurantModal" tabindex="-1" aria-labelledby="restaurantModal"
 62 |                     aria-hidden="true">
 63 |                     <div class="modal-dialog">
 64 |                         <div class="modal-content">
 65 |                             <div class="modal-header">
 66 |                                 <h1 class="modal-title fs-5" id="restaurantModal">Add new restaurant</h1>
 67 |                                 <button type="button" class="btn-close" data-bs-dismiss="modal"
 68 |                                     aria-label="Close"></button>
 69 |                             </div>
 70 |                             <div class="modal-body">
 71 |                                 <div class="mb-3">
 72 |                                     <label for="exampleFormControlInput1" class="form-label">Restaurant name</label>
 73 |                                     <input type="text" class="form-control" id="restaurant-name"
 74 |                                         placeholder="Enter name">
 75 |                                 </div>
 76 |                                 <div class="mb-3">
 77 |                                     <label for="exampleFormControlTextarea1" class="form-label">Restaurant
 78 |                                         address</label>
 79 |                                     <textarea class="form-control" id="restaurant-address" rows="3"></textarea>
 80 |                                 </div>
 81 |                                 <div class="mb-3">
 82 |                                     <label for="formFile" class="form-label">Restaurant logo</label>
 83 |                                     <input class="form-control" type="file" id="restaurant-logo">
 84 |                                 </div>
 85 |                                 <div class="mb-3">
 86 |                                     <img class="slected-logo" width="100" height="100px" id="selected-logo" src=""
 87 |                                         alt="">
 88 |                                 </div>
 89 |                             </div>
 90 |                             <div class="modal-footer">
 91 |                                 <button type="button" id="close-btn" class="btn btn-secondary"
 92 |                                     data-bs-dismiss="modal">Close</button>
 93 |                                 <button id="submit-restaurant" type="button" class="btn btn-primary">
 94 | 
 95 |                                     <div id="restaurant-spinner" class="spinner-border" role="status">
 96 |                                         <span class="visually-hidden">Loading...</span>
 97 |                                     </div>
 98 |                                     Submit
 99 |                                 </button>
100 |                             </div>
101 |                         </div>
102 |                     </div>
103 |                 </div>
104 |             </div>
105 |         </div>
106 |         <div class="row px-2 py-4">
107 |             <table class="table">
108 |                 <thead>
109 |                     <tr>
110 |                         <th scope="col">#</th>
111 |                         <th scope="col">Restaurant image</th>
112 |                         <th scope="col">Restaurant name</th>
113 |                         <th scope="col">Address</th>
114 |                     </tr>
115 |                 </thead>
116 |                 <tbody id="res-list">
117 | 
118 |                 </tbody>
119 |             </table>
120 |         </div>
121 |     </div>
122 | 
123 | 
124 | 
125 |     <script src="./js/restaurant.js" type="module"></script>
126 | </body>
127 | 
128 | </html>


--------------------------------------------------------------------------------
/add-dishes.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
  9 |         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 10 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 11 |         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
 12 |         crossorigin="anonymous"></script>
 13 |     <script src="https://kit.fontawesome.com/4876bfe495.js" crossorigin="anonymous"></script>
 14 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 15 | 
 16 |     <link rel="stylesheet" href="style.css">
 17 | </head>
 18 | 
 19 | <body>
 20 |     <div>
 21 |         <nav class="navbar navbar-expand-lg">
 22 |             <div class="container-fluid">
 23 |                 <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
 24 |                     <img width="150" src="images/logo.png" alt="" />
 25 |                 </a>
 26 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 27 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 28 |                     aria-expanded="false" aria-label="Toggle navigation">
 29 |                     <span class="navbar-toggler-icon"></span>
 30 |                 </button>
 31 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 32 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 33 |                         <li class="nav-item">
 34 |                             <a class="nav-link" aria-current="page" href="dashboard.html">Dashbaord</a>
 35 |                         </li>
 36 |                         <li class="nav-item">
 37 |                             <a class="nav-link" aria-current="page" href="restaurants.html">Restaurants</a>
 38 |                         </li>
 39 |                         <li class="nav-item">
 40 |                             <a class="nav-link active" aria-current="page" href="add-dishes.html">Dishes</a>
 41 |                         </li>
 42 |                         <li class="nav-item">
 43 |                             <a class="nav-link" aria-current="page" href="orders.html">Orders</a>
 44 |                         </li>
 45 |                     </ul>
 46 |                     <div class="d-flex gap-2" role="search">
 47 |                         <button class="btn btn-outline-primary" type="button" id="logoutbtn">Logout</button>
 48 |                     </div>
 49 |                 </div>
 50 |             </div>
 51 |         </nav>
 52 | 
 53 |         <div class="row px-2 py-4">
 54 |             <div class="d-flex justify-content-between align-items-center">
 55 |                 <h2>Dishes</h2>
 56 | 
 57 |                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 58 |                     Add new dish
 59 |                 </button>
 60 |                 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
 61 |                     aria-hidden="true">
 62 |                     <div class="modal-dialog">
 63 |                         <div class="modal-content">
 64 |                             <div class="modal-header">
 65 |                                 <h1 class="modal-title fs-5" id="exampleModalLabel">Add new dish</h1>
 66 |                                 <button type="button" class="btn-close" data-bs-dismiss="modal"
 67 |                                     aria-label="Close"></button>
 68 |                             </div>
 69 |                             <div class="modal-body">
 70 |                                 <div class="mb-3">
 71 |                                     <label for="exampleFormControlInput1" class="form-label">Restaurant name</label>
 72 |                                     <select id="restaurant-name" class="form-select"
 73 |                                         aria-label="Default select example">
 74 | 
 75 | 
 76 |                                     </select>
 77 |                                 </div>
 78 |                                 <div class="mb-3">
 79 |                                     <label for="exampleFormControlInput1" class="form-label">Dish name</label>
 80 |                                     <input type="text" class="form-control" id="dish-name" placeholder="Dish name">
 81 |                                 </div>
 82 |                                 <div class="mb-3">
 83 |                                     <label for="exampleFormControlInput1" class="form-label">Dish price</label>
 84 |                                     <input type="text" class="form-control" id="dish-price" placeholder="Dish price">
 85 |                                 </div>
 86 |                                 <div class="mb-3">
 87 |                                     <label for="exampleFormControlInput1" class="form-label">Dish serving</label>
 88 |                                     <select id="dish-serving" class="form-select" aria-label="Default select example">
 89 |                                         <option selected>Select restaurant</option>
 90 |                                         <option value="1 person">1 person</option>
 91 |                                         <option value="2 person">2 person</option>
 92 |                                         <option value="3 person">3 person</option>
 93 | 
 94 |                                     </select>
 95 |                                 </div>
 96 |                                 <div class="mb-3">
 97 |                                     <label for="formFile" class="form-label">Dish image</label>
 98 |                                     <input class="form-control" type="file" id="dish-image">
 99 |                                 </div>
100 |                                 <div class="mb-3">
101 |                                     <img class="slected-logo" width="100" height="100px" id="selected-logo" src=""
102 |                                         alt="">
103 |                                 </div>
104 |                             </div>
105 |                             <div class="modal-footer">
106 |                                 <button type="button" id="close-btn" class="btn btn-secondary"
107 |                                     data-bs-dismiss="modal">Close</button>
108 |                                 <button id="addDish" type="button" class="btn btn-primary">
109 |                                     <div id="dish-spinner" class="spinner-border" role="status">
110 |                                         <span class="visually-hidden">Loading...</span>
111 |                                     </div>
112 | 
113 |                                     Submit
114 | 
115 |                                 </button>
116 |                             </div>
117 |                         </div>
118 |                     </div>
119 |                 </div>
120 |             </div>
121 |         </div>
122 |         <div class="row px-2 py-4">
123 |             <table class="table">
124 |                 <thead>
125 |                     <tr>
126 |                         <th scope="col">#</th>
127 |                         <th scope="col">Dish image</th>
128 |                         <th scope="col">Dish name</th>
129 |                         <th scope="col">Price</th>
130 |                         <th scope="col">Serving</th>
131 |                         <th scope="col">Restaurant</th>
132 |                     </tr>
133 |                 </thead>
134 |                 <tbody id="all-dishes">
135 | 
136 |                 </tbody>
137 |             </table>
138 |         </div>
139 |     </div>
140 | 
141 | 
142 | 
143 |     <script src="./js/add-dishes.js" type="module"></script>
144 |     <script src="./js/logout.js" type="module"></script>
145 | </body>
146 | 
147 | </html>


--------------------------------------------------------------------------------
/dishes.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Document</title>
  7 |     <link
  8 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  9 |       rel="stylesheet"
 10 |       integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
 11 |       crossorigin="anonymous"
 12 |     />
 13 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 14 | 
 15 |     <script
 16 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 17 |       integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
 18 |       crossorigin="anonymous"
 19 |     ></script>
 20 |     <script
 21 |       src="https://kit.fontawesome.com/4876bfe495.js"
 22 |       crossorigin="anonymous"
 23 |     ></script>
 24 |     <link rel="stylesheet" href="style.css" />
 25 |   </head>
 26 | 
 27 |   <body>
 28 |     <div>
 29 |       <nav class="navbar navbar-expand-lg">
 30 |         <div class="container-fluid">
 31 |           <a href="https://smit-food.surge.sh/" class="navbar-brand" href="#">
 32 |             <img width="150" src="images/logo.png" alt="" />
 33 |           </a>
 34 |           <button
 35 |             class="navbar-toggler"
 36 |             type="button"
 37 |             data-bs-toggle="collapse"
 38 |             data-bs-target="#navbarSupportedContent"
 39 |             aria-controls="navbarSupportedContent"
 40 |             aria-expanded="false"
 41 |             aria-label="Toggle navigation"
 42 |           >
 43 |             <span class="navbar-toggler-icon"></span>
 44 |           </button>
 45 |           <div class="collapse navbar-collapse" id="navbarSupportedContent">
 46 |             <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
 47 |             <div class="d-flex gap-2" role="search">
 48 |               <a href="register.html">
 49 |               <button class="btn btn-primary">Register</button></a>
 50 |               <a href="login.html"
 51 |                 ><button class="btn btn-outline-primary">Login</button></a
 52 |               >
 53 |               <a href="login.html"
 54 |                 ><button class="btn btn-outline-primary" id="logoutbtn">logout</button></a
 55 |               >
 56 |             </div>
 57 |           </div>
 58 |         </div>
 59 |       </nav>
 60 | 
 61 |       <div id="page-spinner" class="p-5 text-center">
 62 |         <div class="spinner-border page-spinner" role="status">
 63 |           <span class="visually-hidden">Loading...</span>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <div style="display: none" id="main-content">
 68 |         <div class="row px-2 py-4">
 69 |           <div class="col">
 70 |             <div class="card">
 71 |               <div class="card-body">
 72 |                 <div class="d-flex justify-content-between align-items-center">
 73 |                   <div>
 74 |                     <div class="mb-4">
 75 |                       <img
 76 |                         id="res-image"
 77 |                         width="200"
 78 |                         src="https://www.xbytesolutions.com/assets/img/food-delivery-app/hero-screen.png"
 79 |                         alt=""
 80 |                       />
 81 |                     </div>
 82 |                     <h5 class="card-title" id="res-name">Saylani Foods</h5>
 83 |                     <p class="card-text" id="res-address"></p>
 84 |                     <span class="badge rounded-pill text-bg-primary"
 85 |                       >Biryani</span
 86 |                     >
 87 |                     <span class="badge rounded-pill text-bg-primary"
 88 |                       >Biryani</span
 89 |                     >
 90 |                     <span class="badge rounded-pill text-bg-primary"
 91 |                       >Biryani</span
 92 |                     >
 93 |                     <span class="badge rounded-pill text-bg-primary"
 94 |                       >Biryani</span
 95 |                     >
 96 |                     <span class="badge rounded-pill text-bg-primary"
 97 |                       >Biryani</span
 98 |                     >
 99 |                   </div>
100 |                   <div class="d-flex gap-4 socail-icons">
101 |                     <i class="fa-brands fa-facebook"></i>
102 |                     <i class="fa-brands fa-instagram"></i>
103 |                     <i class="fa-brands fa-youtube"></i>
104 |                   </div>
105 |                 </div>
106 |               </div>
107 |             </div>
108 |           </div>
109 |         </div>
110 | 
111 |         <div class="row px-2 py-4">
112 |           <div id="all-dishes" class="col-8"></div>
113 |           <div class="col-4">
114 |             <div class="card text-center">
115 |               <div class="card-header text-bold font-weight-bold">
116 |                 <b>Cart</b>
117 |               </div>
118 |               <div id="cart" class="card-body"></div>
119 |               <button
120 |                 type="button"
121 |                 class="btn btn-primary"
122 |                 data-bs-toggle="modal"
123 |                 data-bs-target="#exampleModal"
124 |               >
125 |                 Checkout
126 |               </button>
127 |               <!-- Modal -->
128 |               <div
129 |                 class="modal fade"
130 |                 id="exampleModal"
131 |                 tabindex="-1"
132 |                 aria-labelledby="exampleModalLabel"
133 |                 aria-hidden="true"
134 |               >
135 |                 <div class="modal-dialog">
136 |                   <div class="modal-content">
137 |                     <div class="modal-header">
138 |                       <h1 class="modal-title fs-5" id="exampleModalLabel">
139 |                         Checkout
140 |                       </h1>
141 |                       <button
142 |                         type="button"
143 |                         class="btn-close"
144 |                         data-bs-dismiss="modal"
145 |                         aria-label="Close"
146 |                       ></button>
147 |                     </div>
148 |                     <div class="modal-body text-start">
149 |                       <div class="mb-3">
150 |                         <label for="exampleFormControlInput1" class="form-label"
151 |                           >Name</label
152 |                         >
153 |                         <input
154 |                           type="text"
155 |                           class="form-control"
156 |                           id="customerName"
157 |                           placeholder="Enter name"
158 |                         />
159 |                       </div>
160 |                       <div class="mb-3">
161 |                         <label for="exampleFormControlInput1" class="form-label"
162 |                           >Contact number</label
163 |                         >
164 |                         <input
165 |                           type="number"
166 |                           class="form-control"
167 |                           id="customerContact"
168 |                           placeholder="Enter contact number"
169 |                         />
170 |                       </div>
171 |                       <div class="mb-3">
172 |                         <label for="exampleFormControlInput1" class="form-label"
173 |                           >Address</label
174 |                         >
175 |                         <textarea
176 |                           class="form-control"
177 |                           id="customerAddress"
178 |                           rows="3"
179 |                         ></textarea>
180 |                       </div>
181 |                       <div class="d-flex justify-content-between">
182 |                         <span>Delivery charges:</span>
183 |                         <span class="fw-bold">Rs 100 /-</span>
184 |                       </div>
185 |                       <div class="d-flex justify-content-between">
186 |                         <span>Total amount:</span>
187 |                         <span class="fw-bold" id="totalAmount">Rs 343</span>
188 |                       </div>
189 |                     </div>
190 |                     <div class="modal-footer">
191 |                       <button
192 |                         id="closeBtn"
193 |                         type="button"
194 |                         class="btn btn-secondary"
195 |                         data-bs-dismiss="modal"
196 |                       >
197 |                         Close
198 |                       </button>
199 |                       <button id="placeOrder" class="btn btn-primary">
200 |                         Place order
201 |                       </button>
202 |                     </div>
203 |                   </div>
204 |                 </div>
205 |               </div>
206 |             </div>
207 |           </div>
208 |         </div>
209 |       </div>
210 |     </div>
211 | 
212 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
213 |     <script src="./js/dishes.js" type="module"></script>
214 |     <script src="./js/order.js" type="module"></script>
215 |     <script src="./js/logout.js" type="module"></script>
216 |   </body>
217 | </html>
218 | 


--------------------------------------------------------------------------------