Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sei-22-qunda #145

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
4,039 changes: 4,039 additions & 0 deletions data.json

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions html/edited.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<title>fastfood</title>
</head>
<body class="h-100">
<header>
<nav class="navbar fixed-top justify-content-center border-bottom" style="color: #ED4233;">
<span class="navbar-brand mb-0 h1">fastfood</span>
</nav>
</header>

<div class="row h-100 align-items-center">
<div class="col text-center">
<div class="col">
<h1>Your edits have been saved!</h1>
</div>
<div class="col my-4">
<form class="d-inline-block mx-2" method="GET" action="/recipes/">
<input type="submit" value="Home">
</form>
<form class="d-inline-block mx-2" method="GET" action="/recipes/">
<input type="submit" value="Back to Recipe">
</form>
</div>
</div>
</div>

<footer>
<nav class="navbar fixed-bottom navbar-dark bg-dark justify-content-end w-100">
<span class="navbar-brand" style="font-size: 14px;">© fastfood 2020</span>
</nav>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
54 changes: 54 additions & 0 deletions html/form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<title>fastfood</title>
</head>
<body>
<header>
<nav class="navbar justify-content-center border-bottom" style="color: #ED4233;">
<span class="navbar-brand mb-0 h1">fastfood</span>
</nav>
</header>

<main class="container border my-5 p-5">
<h2><u>Create New Recipe</u></h2>
<form>
<div>
<h3>Image</h3>
<div class="input-group my-4">
<div class="custom-file">
<input type="file" class="custom-file-input" id="input-image">
<label class="custom-file-label" htmlFor="input-image">Choose file</label>
</div>
</div>
<h3>Title</h3>
<input class="my-4" type="text" name="title">
<h3>Preparation Time</h3>
<input class="my-4" type="number" name="prepTime">
<h3>Ingredients</h3>
<select class="selectpicker my-4" multiple data-live-search="true">
<option>Ketchup</option>
<option>Mustard</option>
<option>Mayonnaise</option>
</select>
<h3>Preparation</h3>
<input class="my-4" type="textarea" name="preparation">
<br/>
<input class="my-4" type="submit" value="Create">
</div>
</form>
</main>

<footer>
<nav class="navbar navbar-dark bg-dark justify-content-end w-100">
<span class="navbar-brand" style="font-size: 14px;">© fastfood 2020</span>
</nav>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions html/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<title>fastfood</title>
</head>
<body class="h-100">
<header>
<nav class="navbar justify-content-center border-bottom" style="color: #ED4233;">
<span class="navbar-brand mb-0 h1">fastfood</span>
</nav>
</header>

<div class="d-inline-block" style="background: url(https://wallpaperplay.com/walls/full/1/6/2/93324.jpg); background-position: center; background-size: cover; width: 100%; height: 500px; opacity: 0.7">
<div class="row h-100 align-items-center justify-content-center">
<div class="d-inline-block w-25 text-center" style="background-color: rgba(255,255,255,0.8)">
<h1>Welcome</h1>
</div>
</div>
</div>

<br/><br/><br/>

<div class="row justify-content-around my-5 text-center">
<div class="d-inline-block" style="width: 40%">
<a href=""><div class="d-inline-block" style="background: url(../images/porkchop.jpg); background-position: center; background-size: cover; width: 500px; height: 300px;"></div></a>
<h4>Cuisine</h4>
<h2>Title</h2>
</div>
<div class="d-inline-block" style="width: 40%">
<a href=""><div class="d-inline-block" style="background: url(../images/porkchop.jpg); background-position: center; background-size: cover; width: 500px; height: 300px;"></div></a>
<h4>Cuisine</h4>
<h2>Title</h2>
</div>
</div>

<footer>
<nav class="navbar navbar-dark bg-dark justify-content-end w-100">
<span class="navbar-brand" style="font-size: 14px;">© fastfood 2020</span>
</nav>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions html/recipe.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
<title>fastfood</title>
</head>
<body class="h-100">
<header>
<nav class="navbar justify-content-center border-bottom" style="color: #ED4233;">
<span class="navbar-brand mb-0 h1">fastfood</span>
</nav>
</header>

<div class="container">
<div class="row mb-5">
<div class="col">
<div class="col text-center my-5">
<h3 class="my-4">Smokey BBQ Pork Chops</h3>
<div class="d-inline-block" style="background: url(../images/porkchop.jpg); background-position: center; background-size: cover; width: 500px; height: 300px;"></div>
</div>
<div class="col border my-5 p-4">
<h4 class="my-4">Time: 20 minutes</h4>
<hr/>
<h4 class="my-4">Ingredients</h4>
<ul>
<li>Pork Loin</li>
<li>Smokey BBQ Sauce</li>
<li>Potato</li>
</ul>
<hr/>
<h4 class="my-4">Preparation</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, nesciunt natus labore nam iste suscipit, nulla impedit facilis totam, veritatis cum vero harum. Eaque adipisci ad, distinctio quasi. Dicta, possimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est itaque totam sunt, esse quisquam nam, vitae magni quasi, voluptate in labore. Molestiae, reprehenderit, at? Ut hic corporis suscipit eveniet eius.</p>
</div>
</div>
</div>
</div>

<footer>
<nav class="navbar navbar-dark bg-dark justify-content-end w-100">
<span class="navbar-brand" style="font-size: 14px;">© fastfood 2020</span>
</nav>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
Binary file added images/carbonara.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/pie.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/porkchop.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
175 changes: 175 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
////////////////////////////////
////////////////////////////////
/////// Initialisation ///////
////////////////////////////////
////////////////////////////////

const jsonfile = require('jsonfile');
const FILE = 'data.json';

const express = require('express');
const app = express();

app.use(express.static(__dirname+'/public/'));
app.use(express.json());
app.use(express.urlencoded({
extended: true
}));

const methodOverride = require('method-override')

app.use(methodOverride('_method'));

const reactEngine = require('express-react-views').createEngine();

app.engine('jsx', reactEngine);
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');



////////////////////////////////
////////////////////////////////
//////// GET Requests ////////
////////////////////////////////
////////////////////////////////

// See all recipes
app.get("/recipes/", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
res.render("index", {"data": data})
})
})

// List of recipes
app.get("/recipes/cuisine/:type", (req, res) => {
})

// Create a new recipe
app.get("/recipes/new", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
const ingredients = data.ingredients.map(ingredient => {
return ingredient.name;
});

res.render("form-add", {"ingredients": ingredients});
})
})

// Create confirmation
app.get("/recipes/:id/created", (req, res) => {
res.render("created", {"id": req.params.id});
})

// Show single recipe
app.get("/recipes/:id", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
const recipe = data.recipes[req.params.id];

res.render("recipe", {"id": req.params.id, "recipe": recipe});
})
})

// Edit a recipe
app.get("/recipes/:id/edit", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
const ingredients = data.ingredients.map(ingredient => {
return ingredient.name;
});

const info = {
"id": req.params.id,
"ingredients": ingredients,
"recipe": data.recipes[req.params.id]
}

res.render("form-edit", info)
})
})

// Edit confirmation
app.get("/recipes/:id/edited", (req, res) => {
res.render("edited", {"id": req.params.id});
})

// Confirm Delete
app.get("/recipes/:id/confirm", (req, res) => {
res.render("confirmation", {"id": req.params.id});
})

// Delete confirmation
app.get("/recipes/:id/deleted", (req, res) => {
res.render("deleted", {"id": req.params.id});
})



////////////////////////////////
////////////////////////////////
//////// POST Requests ///////
////////////////////////////////
////////////////////////////////

// Create a new recipe
app.post("/recipes", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
const formValues = req.body;
data.recipes.push(formValues);

jsonfile.writeFile(FILE, data, (error) => {
res.redirect(`/recipes/${data.recipes.length-1}/created`);
})
})
})



////////////////////////////////
////////////////////////////////
//////// PUT Requests ////////
////////////////////////////////
////////////////////////////////

// Update a recipe
app.put("/recipes/:id", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
const formValues = req.body;
data.recipes[req.params.id] = formValues;

jsonfile.writeFile(FILE, data, (error) => {
res.redirect(`/recipes/${req.params.id}/edited`);
})
})
})



////////////////////////////////
////////////////////////////////
////// DELETE Requests ///////
////////////////////////////////
////////////////////////////////

// Delete a recipe
app.delete("/recipes/:id", (req, res) => {
jsonfile.readFile(FILE, (error, data) => {
data.recipes.splice(req.params.id, 1);
console.log(data.recipes)

jsonfile.writeFile(FILE, data, (error) => {
res.redirect(`/recipes/${req.params.id}/deleted`);
})
})
})



////////////////////////////////
////////////////////////////////
/////// Listen to Port ///////
////////////////////////////////
////////////////////////////////

app.listen(3000, () => {
console.log("~~~ Tuning in to the waves of port 3000 ~~~")
})
1 change: 1 addition & 0 deletions node_modules/.bin/browserslist

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/css-beautify

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/editorconfig

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/html-beautify

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/js-beautify

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/jsesc

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/.bin/json5

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading