Строшков Артем

index.mjs

@@ -7,6 +7,42 @@ const rootDir = process.cwd();
 const port = 3000;
 const app = express();
 
+let cart = [];
+let historyOfOrders = []
+
+const menu = [
+  {
+    name: "Americano",
+    image: "/static/img/americano.jpg",
+    price: 199,
+  },
+  {
+    name: "Cappuccino",
+    image: "/static/img/cappuccino.jpg",
+    price: 219
+  },
+  {
+    name: "Espresso",
+    image: "/static/img/espresso.jpg",
+    price: 119
+  },
+  {
+    name: "Latte",
+    image: "/static/img/latte.jpg",
+    price: 299
+  },
+  {
+    name: "Flat white",
+    image: "/static/img/flat-white.jpg",
+    price: 349
+  },
+  {
+    name: "Latte macchiato",
+    image: "/static/img/latte-macchiato.jpg",
+    price: 249
+  },
+]
+
 // Выбираем в качестве движка шаблонов Handlebars
 app.set("view engine", "hbs");
 // Настраиваем пути и дефолтный view
@@ -20,38 +56,76 @@ app.engine(
   })
 );
 
+app.use("/static", express.static("static"))
+app.use(cookieParser());
+
 app.get("/", (_, res) => {
-  res.sendFile(path.join(rootDir, "/static/html/index.html"));
+  res.redirect("/menu")
 });
 
-app.get("/menu", (_, res) => {
+app.get("/menu", (req, res) => {
   res.render("menu", {
     layout: "default",
-    items: [
-      {
-        name: "Americano",
-        image: "/static/img/americano.jpg",
-        price: 999,
-      },
-      { name: "Cappuccino", image: "/static/img/cappuccino.jpg", price: 999 },
-    ],
+    items: menu,
+    theme: req.cookies.theme || "light",
+    title: "Меню",
   });
 });
 
 app.get("/buy/:name", (req, res) => {
-  res.status(501).end();
+  const username = req.cookies.username || "Аноним";
+  if (cart[username] === undefined) cart[username] = [];
+  cart[username].push(menu.find(product => product.name === req.params.name));
+  res.redirect("/menu");
 });
 
 app.get("/cart", (req, res) => {
-  res.status(501).end();
+  const username = req.cookies.username || "Аноним";
+
+  if (cart[username] === undefined) cart[username] = [];
+  res.render("cart", {
+    layout: "default",
+    cartContents: cart[username],
+    sum: cart[username].reduce((sum, item) => sum + item.price, 0),
+    title: "Корзина",
+    theme: req.cookies.theme || "light",
+  });
 });
 
 app.post("/cart", (req, res) => {
-  res.status(501).end();
+  const username = req.cookies.username || "Аноним";
+  if (historyOfOrders[username] === undefined) historyOfOrders[username] = [];
+  if (cart[username].length > 0) {
+    historyOfOrders[username].push({
+      number: historyOfOrders[username].length + 1,
+      items: cart[username],
+      totalPrice: cart[username].reduce((sum, item) => sum + item.price, 0),
+    });
+    cart[username] = []
+  }
+  res.redirect("/cart");
 });
 
 app.get("/login", (req, res) => {
-  res.status(501).end();
+  const username = req.query.username || req.cookies.username || "Аноним";
+  res.cookie("username", username).render("login", {
+    layout: "default",
+    username: username,
+    theme: req.cookies.theme || "light",
+    title: "Личный кабинет",
+  })
+});
+
+app.get("/history", (req, res) => {
+  const username = req.cookies.username || "Аноним";
+  if (historyOfOrders[username] === undefined) historyOfOrders[username] = [];
+  console.log(historyOfOrders[username]);
+  res.render("history", {
+    layout: "default",
+    history: historyOfOrders[username],
+    theme: req.cookies.theme || "light",
+    title: "История заказов",
+  })
 });
 
-app.listen(port, () => console.log(`App listening on port ${port}`));
+app.listen(port, () => console.log(`App listening on port ${port}`));

static/css/index.css

@@ -53,7 +53,10 @@ body {
   padding: 0.5rem 1rem;
   box-shadow: 0 0 0 1px var(--border);
 }
-
+.historyBox {
+  border-bottom: 2px solid;
+  margin: 5px;
+}
 .navigation ul {
   display: flex;
   flex-flow: row nowrap;
@@ -65,7 +68,7 @@ body {
 }
 
 .navigation li {
-  margin: 0;
+  margin: 0 10px 0 10px;
   padding: 0;
   display: block;
   position: relative;

static/js/theme.mjs

@@ -5,4 +5,11 @@ const defaultState = root.classList.contains("dark");
 themeSwitch.checked = defaultState;
 themeSwitch.addEventListener("click", () => {
   root.classList.toggle("dark");
+  if (root.classList.contains("dark")) setCookie("theme", "dark")
+  else setCookie("theme", "")
+  document.cookie = `dark_theme=${themeSwitch.checked}`;
 });
+
+function setCookie(key, value) {
+  document.cookie = `${key}=${value}`
+}

views/cart.hbs

@@ -0,0 +1,17 @@
+<main>
+	<section class="cart__total">
+		<div>Итого к оплате: {{sum}} ₽</div>
+		<form class="action" method="post">
+			<input class="action" type="submit" value="Оформить заказ">
+		</form>
+	</section>
+	<ul class="coffee__list">
+		{{#each cartContents}}
+			<li>
+				<header class="coffee__name">{{name}}</header>
+				<img src="{{image}}" alt="{{name}}">
+				<footer>{{price}} ₽</footer>
+			</li>
+		{{/each}}
+	</ul>
+</main> 

views/history.hbs

@@ -0,0 +1,15 @@
+{{#each history}}
+    <div class="historyBox">
+        <section class="user__hello">Заказ №{{number}}</section>
+        <ul class="coffee__list">
+            {{#each items}}
+                <li>
+                    <header class="coffee__name">{{name}}</header>
+                    <img src="{{image}}" alt="{{name}}">
+                    <footer>{{price}} ₽</footer>
+                </li>
+            {{/each}}
+        </ul>
+        <section class="user__hello">Cумма заказа: {{totalPrice}} ₽</section>
+    </div>
+{{/each}}

views/layouts/default.hbs

@@ -1,8 +1,8 @@
-<html lang="ru">
+<html lang="ru" class="{{theme}}">
 
 <head>
   <meta charset="utf-8">
-  <title>Overpriced Coffee</title>
+  <title>{{title}}</title>
   <link rel="stylesheet" href="/static/css/index.css" />
   <script type="module" src="/static/js/theme.mjs"></script>
 </head>

views/login.hbs

@@ -0,0 +1,10 @@
+<section class="user__hello">
+	Привет, {{username}}!
+</section>
+<form class="form" method="get">
+	<label class="label">
+		Меня зовут
+		<input id="username" name="username" type="text" value="{{username}}"> !
+	</label>
+	<input class="action" type="submit" value="Сохранить">
+</form> 

views/partials/header.hbs

@@ -4,6 +4,7 @@
       <li><a class="link" href="/menu">Меню</a></li>
       <li><a class="link" href="/cart">Корзина</a></li>
       <li><a class="link" href="/login">Личный кабинет</a></li>
+      <li><a class="link" href="/history">История заказов</a></li>
     </ul>
   </nav>
   <label class="theme__switch">