Daniabee patch 1

README.md

@@ -1,99 +1,80 @@
-# Webpack Starter Kit
+# Overlook Hotel
 
-## Clone This Repo
+## Introduction
 
-That's right, _clone_ not fork. You will use this repo multiple times, but you can only fork a repository once. So here is what you need to do to clone the repo and still be able to push changes to your repo:
+The Overlook Hotel is an application where users can book hotel rooms. The user can book rooms by date, and by room type as long as there is availability. Customers can also view their upcoming and past stays. As a manager, users can see hotel information, add and delete bookings for a customer, and see any customers bookings.  
 
-1. Clone down this repo. Since you don't want to name your project "webpack-starter-kit", you can use an optional argument when you run `git clone` (you replace the `[...]` with the terminal command arguments): `git clone [remote-address] [what you want to name the repo]`
-1. Remove the default remote: `git remote rm origin` (notice that `git remote -v` not gives you back nothing)
-1. Create a new repo on GitHub with the name of `[what you want to name the repo]` to be consistent with naming
-1. Copy the address that you would use to clone down this repo - something like `[email protected]:...`
-1. Add this remote to your cloned down repo: `git remote add origin [address you copied in the previous step]` - do not include the brackets
+This application was written by [Dani Bagley ](https://github.com/daniabee)
 
-Now try to commit something (just add a line in the README) and push it up to your new repo. If everything is setup correctly, you should see the changes on GitHub.
+**Login View**
 
-## Setup
-
-After one person has gone through the steps of cloning down this repo and editing the remote, everyone should clone down the repo.
-
-Then install the library dependencies. Run:
-
-```bash
-npm install
-```
-
-To verify that it is setup correctly, run `npm start` in your terminal. Go to `http://localhost:8080/` and you should see a page with the Turing logo image and a beautiful gradient background. If that's the case, you're good to go. Enter `control + c` in your terminal to stop the server at any time.
-
-## Where to Add Your Code
-
-### JavaScript
+Upon opening the applications, the user is shown a login page where they can login with a customers username and password or managers username and password.
 
-You have to be very intentional with where you add your feature code. This repo uses a tool called [webpack](https://webpack.js.org/) to combine many JavaScript files into one big file. Webpack enables you to have many, separate JavaScript files to keep your code organized and readable. Webpack expects all of your code files to be in a specific place, or else it doesn't know how to combine them all behind the scenes.
+<img width="1440" alt="loginView" src="https://user-images.githubusercontent.com/108088961/201993218-a12ed7d3-0de7-41d9-9625-b0070c087251.png">
 
-**Create all of your feature code files in the `src` directory.**
+**Welcome View**
 
-Since code is separated into multiple files, you need to use the `import` and `export` syntax to share code across file.
+When the user logs in, they are taken to a welcome page that displays their name or their employee title.
 
-Here is a video that walks through some information about [import and export](https://www.youtube.com/watch?v=_3oSWwapPKQ). There are a lot of resources out there about `import` and `export`, and resources will sometimes call them `ES6 modules`. It's something you will see in React and beyond.
+<img width="1422" alt="WelcomView" src="https://user-images.githubusercontent.com/108088961/201993749-4ad89b26-c0a6-46e4-8b89-7e34414d95eb.png">
 
-### HTML
+**Check Availability By Date & Room Type**
 
-Add the HTML you need in the `index.html` file in the `./dist` directory. There is some boilerplate HTML that exists from the start that you can modify.
+A user can check room availabilty by date. They can narrow their search by choosing what type of room they are looking for.
 
-### Images
+https://user-images.githubusercontent.com/108088961/201994789-dd03e275-e7a9-4ead-bbfc-04ba34ea381e.mov
 
-Add your image files in the `src/images` directory. Similar to CSS files, you need to `import` image files in the JavaScript entry file (`scripts.js`). Then go into the HTML and add an `img` element with the `src` attribute pointing to the `images` directory. There is an example in the `index.html` file for you to see.
+**Book Room**
 
-## How to View Your Code in Action
+A user can double click or tab to the room and press enter to book a room for the current set or loged in customer.
 
-In the terminal, run:
+https://user-images.githubusercontent.com/108088961/201995246-8f182d94-0ce0-4daf-8f39-65a3d85d0618.mov
 
-```bash
-npm start
-```
+**See Customer Bookings**
 
-You will see a bunch of lines output to your terminal. One of those lines will be something like:
+A user can see all bookings associated with a customer.
 
-```bash
-Project is running at http://localhost:8080/
-```
+<img width="1424" alt="CustomerBookings" src="https://user-images.githubusercontent.com/108088961/201995517-de66e54f-84ad-49f4-8660-8378b4a21301.png">
 
-Go to `http://localhost:8080/` in your browser to view your code running in the browser.
+**Manager Dashboard**
 
----
+A manager can add and search rooms like a customer, but they can choose which costumer they are booking for and see todays information for the hotel in their dashboard.
 
-## Test Files Organization
+<img width="1440" alt="ManagerDashboard" src="https://user-images.githubusercontent.com/108088961/201995921-098b853a-c8c5-4720-958e-91c2399ed865.png">
 
-Similar to feature code, your test code needs to be put in a specific place for it to run successfully.
+**Manager View of Customer Bookings**
 
-**Put all of your test files in the `test` directory.** As a convention, all test filenames should end with `-test.js`. For instance: `box-test.js`.
+Only a manager can delete bookings and only future bookings can be deleted. Bookings that can be deleted show up with a red text saying the user can double click to delete the booking or the user can tab to the booking and press enter. 
 
-## Running Your Tests
+<img width="1424" alt="ManagerViewOfCustomerBookings" src="https://user-images.githubusercontent.com/108088961/201996327-fa50462d-c588-4eee-a44d-f36ebf176d13.png">
 
-Run your test suite using the command:
-
-```bash
-npm test
-```
-
-The test results will output to the terminal.
-
----
-
-## Linting Your Code
-
-Run the command in your terminal `npm run lint` to run the linter on your JavaScript code. There will be errors and warnings right from the start in this starter kit - the linter is still running successfully.
+## Setup
 
-Your linter will look at the JavaScript files you have within the `src` directory and the `test` directory.
+1. Clone down this [repo](https://github.com/turingschool-examples/overlook-api)
+2. cd into the directory and run `npm install`
+3. Run `npm start`.
+4. cd out of that directory and clone down this [repo](https://github.com:/daniabee/Hotel-Dani)
+5. cd into the director and run `npm install`
+6. Run `npm start`
+7. Go to `http://localhos:8080/` to view the webpage
 
-## Webpack?
+## Technologies used
 
-If you look in the `package.json` file, you'll see one of the library dependencies called `webpack`. If you're interested in learning more about what Webpack is and how it works behind the scenes, take a look through the [Webpack configuration documentation](https://webpack.js.org/concepts/).
+- Mocha
+- Chai
+- Javascript
+- HTML
+- CSS/SASS
+- Github
+- Get & Post Netork Requests
+- Webpack
 
-## Deploying to GitHub Pages
+## Ending Thoughts
 
-_If you are finished with the functionality and testing of your project_, then you can consider deploying your project to the web! This way anyone can play it without cloning down your repo.
+At this point in my journey as a software developer, I am very proud of this application. Being able to navigate network requests for the first time was a very big win. Another win was being able to change the origonal webpack loader to handle SASS files. 
 
-[GitHub Pages](https://pages.github.com/) is a great way to deploy your project to the web. Don't worry about this until your project is free of bugs and well tested!
+Possible Improvements: 
 
-If you _are_ done, you can follow [this procedure](./gh-pages-procedure.md) to get your project live on GitHub Pages.
+- Add an additional view or section to display past bookings and upcoming bookings, rather than displaying them in the same place. 
+- Adding dynamic functionality for error handling as do dry up my code even further.
+- Cleaning up the error handling css and styling to be more visually appealing.

dist/index.html

@@ -1,16 +1,136 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Webpack Starter Kit</title>
-</head>
-<body>
-  <img src="./images/turing-logo.png" alt="turing logo">
-
-  <!-- Do not include the scripts.js or class files here - it is done by the webpack server -->
-  <script src="bundle.js"></script>
-
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cantata+One&family=Great+Vibes&display=swap"
+      rel="stylesheet"
+    />
+    <title>Hotel Dani</title>
+  </head>
+  <body>
+    <span class="title"
+      ><h1 id="The">The</h1>
+      <h1 id="Overlook">Overlook</h1>
+    </span>
+    <nav class="navigation">
+      <section class="first-navigation hide">
+        <button class="create-bookings-button">My Dashboard</button>
+        <button class="manage-bookings-button">Manage Bookings</button>
+      </section>
+      <button class="sign-in hide">Sign In</button>
+    </nav>
+    <main class="main">
+      <span class="main-box">
+        <h2 class="welcome welcome-styling hide">Welcome</h2>
+        <section class="log-in">
+          <h2 class="bad-login hide">Not a valid user!</h2>
+          <form id="content">
+            <div class="input-bar">
+              <label for="name"
+                ><img
+                  class="icon-image"
+                  src="/images/user.png"
+                  alt="user icon"
+                />Username</label
+              >
+              <input type="text" id="name" class="input" />
+            </div>
+            <div class="input-bar">
+              <label for="password"
+                ><img
+                  class="icon-image"
+                  src="/images/lock.png"
+                  alt="lock icon"
+                />Password</label
+              >
+              <input
+                type="password"
+                id="password"
+                class="input"
+                value="overlook2021"
+              />
+            </div>
+          </form>
+          <button type="submit" id="login-btn">Login</button>
+        </section>
+        <section class="manage-bookings hide">
+          <h2>
+            You have not choosen a customer's bookings to view yet! Please
+            choose a customer.
+          </h2>
+        </section>
+        <section class="add-booking hide">
+          <form id="booking-form">
+            <div class="form-group calendar-section" id="calendarSection">
+              <label class="book-room-titles" for="calendar"
+                >Check availability:</label
+              >
+              <input
+                class="book-room-titles calendar"
+                type="date"
+                id="calendar"
+                name="booking"
+                value=""
+                min=""
+              />
+            </div>
+            <div class="form-group">
+              <label for="select-room"
+                >What room type are you looking for?</label
+              >
+              <select id="select-room" class="form-control" required="">
+                <option disabled="" selected="" value="">
+                  What room type are you looking for?
+                </option>
+                <option value="no-preference">No preference</option>
+                <option value="residential suite">Residential Suite</option>
+                <option value="suite">Suite</option>
+                <option value="single room">Single Room</option>
+                <option value="junior suite">Junior Suite</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <button type="submit" id="submit-booking" class="submit-button">
+                Search
+              </button>
+            </div>
+            <section class="managers-form-section hide">
+              <div class="form-group">
+                <label for="find-customer"
+                  >Type custmers name to manage their bookings:</label
+                >
+                <input type="text" id="find-customer" class="input" />
+              </div>
+              <div class="form-group">
+                <button id="search-customers" class="submit-button">
+                  Choose Customer
+                </button>
+              </div>
+              <section class="hotel-information">
+                <h2 class="hotel-info">Hotel Information:</h2>
+                <h2 id="rooms-available" class="hotel-info">PLACEHOLDER</h2>
+                <h2 id="total-revenue" class="hotel-info">PLACEHOLDER</h2>
+                <h2 id="percentage-occupied" class="hotel-info">PLACEHOLDER</h2>
+                <h2 id="current-searched-customer" class="hotel-info">
+                  Customer: None selected
+                </h2>
+              </section>
+            </section>
+          </form>
+          <section class="booking-results">
+            <h2 id="available-rooms">Double click on a room to book it!</h2>
+            <section class="room-thumbnails">
+              <!-- ROOMS GO HERE -->
+            </section>
+          </section>
+        </section>
+      </span>
+    </main>
+    <script src="bundle.js"></script>
+  </body>
 </html>