diff --git a/.env.example b/.env.example deleted file mode 100644 index 0bde88a..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -SESSION_SECRET=??????? -LOCALDB_URL=mysql://user:password@localhost:3306/Project2Dev \ No newline at end of file diff --git a/README.md b/README.md index 38aaa39..c764349 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,10 @@ LOCALDB_URL=mysql://root:dbpassword@localhost:3306/Project2Dev ### Autofix linting errors where pssible (Note: this will not necessarily fix all of them) npm run fix - ### Associated Links (requires you to be logged into github): [Project Requirements](https://github.com/the-Coding-Boot-Camp-at-UT/UTA-AUS-FSF-FT-06-2020-U-C/blob/master/01-Class-Content/15-Project-2/02-Homework/README.md [Deployment w/ Sequelize](https://github.com/the-Coding-Boot-Camp-at-UT/UTA-AUS-FSF-FT-06-2020-U-C/blob/master/01-Class-Content/14-Full-Stack/04-Supplemental/SequelizeHerokuDeploymentProcess.md) -testing123 \ No newline at end of file +testing............` \ No newline at end of file diff --git a/config/config.json b/config/config.json index 2e2db25..af3e473 100644 --- a/config/config.json +++ b/config/config.json @@ -1,11 +1,12 @@ { "development": { - "use_env_variable": "LOCALDB_URL" + "use_env_variable": "LOCALDB_URL", + "dialect": "mysql" }, "test": { "username": "root", "password": null, - "database": "database_test", + "database": "fmf", "host": "127.0.0.1", "dialect": "mysql" }, diff --git a/db/schema.sql b/db/schema.sql index b03afda..f05151e 100644 --- a/db/schema.sql +++ b/db/schema.sql @@ -1,2 +1,28 @@ -DROP DATABASE IF EXISTS Project2Dev; -CREATE DATABASE Project2Dev; \ No newline at end of file +DROP DATABASE IF EXISTS fmf; +CREATE DATABASE fmf; +USE fmf; + +CREATE TABLE trucks ( + id INT NOT NULL AUTO_INCREMENT, + name VARCHAR(45) NULL, + cuisine VARCHAR (45), + neighborhood VARCHAR (45), + createdAt DATE, + updatedAt DATE, + PRIMARY KEY (id) +); + +INSERT INTO trucks (name, cuisine, neighborhood, createdAt, UpdatedAt) +VALUES ("Veracruz All Natural", "Mexican", "4208 Manchaca Rd. 78704", now(), now()), +("Gordoughs Big Fat Donuts", "American", "1503 South First Street 78704", now(), now()), +("Con Madre Kitchen", "Mexican", "628 E Oltorf St", now(), now()), +("Pueblo Viejo Taco Truck", "Mexican", "121 Pickle Rd", now(), now()), +("Mama Mal's Italian Cuisine Food Truck", "Southern Italian", "1320 S Lamar Blvd", now(), now()), +("Tamale Addiction", "Mexican", "2340 S Lamar Blvd", now(), now()), +("IL Saporis Italian", "Italian", "603 W Live Oak St", now(), now()), +("Luke's Inside Out", "Sandwich", "1109 S Lamar Blvd", now(), now()), +("Pitalicious", "Mediterranean", "1503 S Congress Ave", now(), now()), +("Cannone Cucina Italiana", "Italian", "1720 Barton Springs Rd", now(), now()); +SELECT * FROM fmf.trucks; + + diff --git a/db/schemaV1.sql b/db/schemaV1.sql new file mode 100644 index 0000000..e69de29 diff --git a/models/truck.js b/models/truck.js new file mode 100644 index 0000000..751e5f5 --- /dev/null +++ b/models/truck.js @@ -0,0 +1,24 @@ +// Creating our User model +module.exports = function(sequelize, DataTypes) { + var Truck = sequelize.define("Truck", { + // The email cannot be null, and must be a proper email before creation + name: { + type: DataTypes.STRING + }, + cuisine: { + type: DataTypes.STRING + }, + neighborhood: { + type: DataTypes.STRING + }, + latitude: { + type: DataTypes.FLOAT + }, + longitude: { + type: DataTypes.FLOAT + } + }); + + return Truck; +}; + diff --git a/package.json b/package.json index 927bfa8..759f820 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "test": "npm run lint", "start": "node server.js", + "dev": "nodemon server.js", "lint": "eslint --quiet .", "fix": "eslint --fix .", "watch": "nodemon server.js" @@ -14,11 +15,12 @@ "author": "", "license": "ISC", "dependencies": { + "@ciar4n/izmir": "^1.0.1", "bcryptjs": "2.4.3", "dotenv": "^8.2.0", "express": "^4.17.0", "express-session": "^1.16.1", - "mysql2": "^1.6.5", + "mysql2": "^1.7.0", "passport": "^0.4.0", "passport-local": "^1.0.0", "sequelize": "^5.8.6" diff --git a/public/find_Or_Post.html b/public/find_Or_Post.html new file mode 100644 index 0000000..2201294 --- /dev/null +++ b/public/find_Or_Post.html @@ -0,0 +1,96 @@ + + + + + + + + + Test Area + + + +
+
+

Find

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+

Post

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+

Delete

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + --> + + + + + + + + + + + + +
IdTruck NameCuisine TypeNeighborhood
+ + + + + + + \ No newline at end of file diff --git a/public/images/login.jpg b/public/images/login.jpg new file mode 100644 index 0000000..c09ff66 Binary files /dev/null and b/public/images/login.jpg differ diff --git a/public/images/truck.jpg b/public/images/truck.jpg new file mode 100644 index 0000000..ebda42b Binary files /dev/null and b/public/images/truck.jpg differ diff --git a/public/js/find_Or_Post.js b/public/js/find_Or_Post.js new file mode 100644 index 0000000..07156dc --- /dev/null +++ b/public/js/find_Or_Post.js @@ -0,0 +1,177 @@ +$(document).ready(function() { + // Getting references to our form and inputs + var findTruckForm = $("form.find"); + var truckNameInput = $("input#truck_name"); + var cuisineTypeInput = $("input#cuisine_type"); + var locationInput = $("input#location"); + + var addTruckForm = $("form.add"); + var addTruckNameInput = $("input#add_truck_name"); + var addLocationInput = $("input#add_location"); + var addCuisineTypeInput = $("input#add_cuisine_type"); + + var addLatitude = $("input#add_latitude"); + var addLongitude = $("input#add_longitude"); + +// initMap(); + + findTruckForm.on("submit", function(event) { + event.preventDefault(); + clearTable(); + + var searchBy = { + name: truckNameInput.val().trim(), + cuisine: cuisineTypeInput.val().trim(), + neighborhood: locationInput.val().trim() + }; + + // Make sure atleast one field has been filled + if (!searchBy.name && !searchBy.cuisine && !searchBy.neighborhood) { + console.log("PLEASE SELECT ATLEAST ONE ITEM TO SEARCH FOR"); + + tstQry(); + // Search by name, cuisine, neighborhood + } else if (searchBy.name && searchBy.cuisine && searchBy.neighborhood) { + console.log("search by ALL 3"); + + // Search by name only + } else if (searchBy.name && !searchBy.cuisine && !searchBy.neighborhood) { + queryByName(searchBy); + + // Search by cuisine + } else if (!searchBy.name && searchBy.cuisine && !searchBy.neighborhood) { + console.log("search by CUISINE"); + queryByCuisine(searchBy); + + // Search by location + } else if (!searchBy.name && !searchBy.cuisine && searchBy.neighborhood) { + console.log("search by LOCATION"); + + // Search by name and cuisine + } else if (searchBy.name && searchBy.cuisine && !searchBy.neighborhood) { + console.log("search by NAME & CUISINE"); + + // Search by name and location + } else if (searchBy.name && !searchBy.cuisine && searchBy.neighborhood) { + console.log("search by NAME & LOCATION"); + + // Search by cuisine and location + } else if (!searchBy.name && searchBy.cuisine && searchBy.neighborhood) { + console.log("search by CUISINE & LOCATION"); + } + }); + + + function tstQry() { + $.ajax({ url: "/api/trucks", method: "GET" }) + // .then (renderTable) + .then(function(qryResults){ + renderResults(qryResults); + initMap(qryResults); + }); + } + + function queryByName(searchBy) { + console.log(searchBy); + $.get("/api/trucks/" + searchBy.name, function(qryResults) { + // renderTable(qryResults); + renderResults(qryResults); + initMap(qryResults); + }); + } + + function queryByCuisine(searchBy) { + $.get("/api/trucks/cuisine/" + searchBy.cuisine, function(qryResults) { + // renderTable(qryResults); + renderResults(qryResults); + initMap(qryResults); + }); + } + + function clearTable() { + $(".table") + .find("tbody") + .empty(); + } + + function renderTable(qryResults) { + for (var i = 0; i < qryResults.length; i++) { + $(".table") + .find("tbody") + .append( + $("") + .append($('').text(qryResults[i].id)) + .append($("").text(qryResults[i].name)) + .append($("").text(qryResults[i].cuisine)) + .append($("").text(qryResults[i].neighborhood)) + .append($("").text(qryResults[i].latitude)) + .append($("").text(qryResults[i].longitude)) + ); + } + } + + function renderResults(qryResults) { + for (var i = 0; i < qryResults.length; i++) { + + let resBox = $('
'); + let nameEl = $('

'); + let cuisineEl = $('

'); + let neighborhoodEl = $('

'); + + resBox.attr('class',"card") + nameEl.text(qryResults[i].name); + nameEl.attr("class","title"); + cuisineEl.text(qryResults[i].cuisine); + cuisineEl.attr("class","subtitle"); + neighborhoodEl.text(qryResults[i].neighborhood); + neighborhoodEl.attr("class","card-footer"); + + + resBox.append(nameEl); + resBox.append(cuisineEl); + resBox.append(neighborhoodEl); + + $('.table').find('tbody').append(resBox); + } + } + + + $("#view_all").on("click", function(){ + qryAllRecords(); + + + }) + + + function qryAllRecords() { + $.ajax({ url: "/api/trucks", method: "GET" }) + // .then (renderTable) + .then(function(qryResults){ + // renderResults(qryResults); + renderTable(qryResults); + + + }); + } + + + + + // WORKS FINE + addTruckForm.on("submit", function(event) { + event.preventDefault(); + + var addUserData = { + name: addTruckNameInput.val().trim(), + cuisine: addCuisineTypeInput.val().trim(), + neighborhood: addLocationInput.val().trim(), + latitude: addLatitude.val().trim(), + longitude: addLongitude.val().trim() + }; + + $.post("/api/trucks", addUserData).then(function(data) { + console.log(data); + }); + }); +}); + diff --git a/public/js/members.js b/public/js/members.js index 0d65799..6efec41 100644 --- a/public/js/members.js +++ b/public/js/members.js @@ -5,3 +5,46 @@ $(document).ready(function() { $(".member-name").text(data.email); }); }); + + +const triggers=document.querySelectorAll('.cool > li'); +const background=document.querySelector('.dropdownBackground'); +const nav=document.querySelector('.top'); + + +function handleEnter() { + this.classList.add('trigger-enter'); + setTimeout(() => { + if(this.classList.contains('trigger-enter')) { + this.classList.add('trigger-enter-active') + } + },150); + background.classList.add('open'); + const dropdown=this.querySelector('.dropdown'); + const dropdownCoords=dropdown.getBoundingClientRect(); + const navCoords=nav.getBoundingClientRect(); + + const coords={ + height: dropdownCoords.height, + width: dropdownCoords.width, + top: dropdownCoords.top-navCoords.top, + left: dropdownCoords.left-navCoords.left, + } + + background.style.setProperty('width',`${coords.width}px`); + background.style.setProperty('height',`${coords.height}px`); + background.style.setProperty('transform',`translate(${coords.left}px, ${coords.top}px)`); + +} + + +function handleLeave() { + this.classList.remove('trigger-enter','trigger-enter-active'); + background.classList.remove('open'); + + const dropdown=this.querySelector('.dropdown'); +} + + +triggers.forEach(trigger => trigger.addEventListener('mouseenter',handleEnter)); +triggers.forEach(trigger => trigger.addEventListener('mouseleave',handleLeave)); diff --git a/public/login.html b/public/login.html index bf53ede..68bea8c 100644 --- a/public/login.html +++ b/public/login.html @@ -7,32 +7,37 @@ + + -

-

Login Form

+

Login Form


-

Or sign up here

+

Or sign up here

@@ -43,3 +48,4 @@

Login Form

+ diff --git a/public/members.html b/public/members.html index 392a23c..75f8484 100644 --- a/public/members.html +++ b/public/members.html @@ -5,31 +5,139 @@ Passport Authentication - + + + + + + + + + + - -
-
-
-

Welcome

+ + + +
+ + +
+ + + +
+
+
+

Welcome

+
-
+ + + +
+ + + + + + + + + + + + + + - + \ No newline at end of file diff --git a/public/signup.html b/public/signup.html index 2a56d1d..e51673b 100644 --- a/public/signup.html +++ b/public/signup.html @@ -7,36 +7,48 @@ + + + + - +
-

Sign Up Form

+

Find My Fare

+

Sign up or login for the best food truck fare!


-

Or log in here

+
+
+
+

Or log in here

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e61d8a8..1f7b07b 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,4 +1,225 @@ + +/* Set up page Grid */ form.signup, form.login { margin-top: 50px; } + +.page-grid { + display: grid; + grid-template-columns: 2fr 1.25fr; + grid-template-rows: 80px auto; + grid-template-areas: "welcome sidebar" + "main sidebar" + "main sidebar" + "results sidebar"; +} + +body { + margin: 0; + min-height: 100vh; +} + +.navbar { + background-color: lightgray; +} + + +/* Start of elements */ + +.welcome { + padding: 10px 20px; + font-size: x-large; + margin: 20px; + grid-area: welcome; +} + +.top { + grid-area: main; +} + +.table{ + grid-area: results; + margin: 30px; +} + +.inputSection { + grid-area: main; + max-width: 50vw; + box-sizing: border-box; + padding: 10px; + margin: 0 auto ; +} + +.form-group { + padding: 10px; +} + +.inputBox { + display: inline-block; + margin: 15px; +} + +.input { + margin: 0px; +} + +.label { + font-family: 'Caveat', cursive; + font-size: xx-large +} + +h1, +h2 { + background-color: white; + text-align: center; + opacity: 95%; +} + + +.hero { + float: right; + padding: 18rem 1.2rem; + color: white; + grid-area: sidebar; + /* background-image: url(https://images.all-free-download.com/images/graphiclarge/vivid_food_icons_vector_536507.jpg); */ +} + +.card { + margin: 20px; + box-sizing: border-box; + padding: 25px; + +} + +.card-footer{ + padding: 5px; + font-style: italic; +} + +/* Search & Add button styling and animation_____________*/ + +.btn { + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: 1px solid #e74d3cc5; + border-radius: 0.6em; + color: #e74d3cc5; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + font-size: 1rem; + font-weight: 300; + line-height: 1; + margin: 20px; + padding: 1.2em 2.8em; + text-decoration: none; + text-align: center; + text-transform: uppercase; + font-family: 'Montserrat', sans-serif; + font-weight: 700; +} + +.btn:hover, .btn:focus { + color: #fff; + outline: 0; +} + +.first { + -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; + transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; +} + +.first:hover { + box-shadow: 0 0 40px 40px #f76151 inset; +} + + + +/* Buttons (no longer used) */ +.cool>li>a { + color: rgb(255, 255, 255); + text-decoration: none; + font-size: 20px; + background: rgba(0, 0, 0, 0.411); + padding: 10px 20px; + display: inline-block; + margin: 20px; + border-radius: 5px; +} +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: center; +} +.cool>li { + position: relative; + display: flex; + justify-content: center; +} +a.button, +.thumbimg { + margin: 4px; + display: block; +} +.dropdown { + opacity: 0; + position: absolute; + overflow: hidden; + padding: 20px; + top: -20px; + border-radius: 2px; + transition: all 0.5s; + transform: translateY(100px); + will-change: opacity; + display: none; +} +.trigger-enter .dropdown { + display: block; +} +.trigger-enter-active .dropdown { + opacity: 1; +} +.trigger-leave .dropdown {} +.dropdownBackground { + width: 100px; + height: 100px; + position: absolute; + background: #fff; + border-radius: 4px; + box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); + transition: all 0.3s, opacity 0.1s, transform 0.2s; + transform-origin: 50% 0; + display: flex; + justify-content: center; + opacity: 0; +} +.dropdownBackground.open { + opacity: 1; +} +.arrow { + position: absolute; + width: 20px; + height: 20px; + display: block; + background: white; + transform: translateY(-50%) rotate(45deg); +} + + + + +.group{ + display: inline-block; + } + \ No newline at end of file diff --git a/routes/api-routes.js b/routes/api-routes.js index e8c2700..c6f1299 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -46,4 +46,59 @@ module.exports = function(app) { }); } }); + + + + + app.get("/api/trucks", function(req, res){ + db.Truck.findAll({ + + }).then(function(trucks){ + res.json(trucks); + }); + }); + + // Search by name + app.get("/api/trucks/:name", function(req, res){ + db.Truck.findAll({ + where: { + name: req.params.name + } + }).then(function(result){ + res.json(result) + }) + }) + + // Search by cuisine + app.get("/api/trucks/cuisine/:cuisine", function(req, res){ + db.Truck.findAll({ + where: { + cuisine: req.params.cuisine + } + }).then(function(result){ + res.json(result) + }) + }) + + + + + + app.post("/api/trucks", function(req, res) { + db.Truck.create({ + name: req.body.name, + cuisine: req.body.cuisine, + neighborhood: req.body.neighborhood, + latitude: req.body.latitude, + longitude: req.body.longitude + }) + .then(function(data) { + // console.log(json(data)); + // res.json(data); + }) + .catch(function(err) { + res.status(401).json(err); + }); + }); + }; diff --git a/routes/html-routes.js b/routes/html-routes.js index 11cfa12..f767677 100644 --- a/routes/html-routes.js +++ b/routes/html-routes.js @@ -21,6 +21,14 @@ module.exports = function(app) { res.sendFile(path.join(__dirname, "../public/login.html")); }); + app.get("/main", function(req, res) { + // If the user already has an account send them to the members page + if (req.user) { + return res.redirect("/main"); + } + res.sendFile(path.join(__dirname, "../public/main.html")); + }); + // Here we've add our isAuthenticated middleware to this route. // If a user who is not logged in tries to access this route they will be redirected to the signup page app.get("/members", isAuthenticated, function(req, res) { diff --git a/zREADME - Project.md b/zREADME - Project.md new file mode 100644 index 0000000..1bbe993 --- /dev/null +++ b/zREADME - Project.md @@ -0,0 +1,34 @@ +# Project 2 Template + +## BEFORE YOU BEGIN +1. Run `db/schema.sql` to create your database +2. Make sure to create a `.env` file and copy the contents of `.env.example` into it. +3. In the `.env` file replace the ???? for SESSION_SECRET and set your db credentials in LOCALDB_URL +it should look something like this +``` +SESSION_SECRET=SomethingBesidesKeyboardCat +LOCALDB_URL=mysql://root:dbpassword@localhost:3306/Project2Dev +``` +**NOTE** Do *not* check in your `.env` file into source control, it is particular to *your* environment. + +## Scripts +### Install + npm install +### Run (production) + npm start +### Run (dev) + npm run watch +### Tests (includes linting) + npm test +### Linting by itself (only detects errors) + npm run lint +### Autofix linting errors where pssible (Note: this will not necessarily fix all of them) + npm run fix + +### Associated Links (requires you to be logged into github): +[Project Requirements](https://github.com/the-Coding-Boot-Camp-at-UT/UTA-AUS-FSF-FT-06-2020-U-C/blob/master/01-Class-Content/15-Project-2/02-Homework/README.md + +[Deployment w/ Sequelize](https://github.com/the-Coding-Boot-Camp-at-UT/UTA-AUS-FSF-FT-06-2020-U-C/blob/master/01-Class-Content/14-Full-Stack/04-Supplemental/SequelizeHerokuDeploymentProcess.md) + + +testing............ \ No newline at end of file