Вяткин Сергей

index.mjs

@@ -6,10 +6,44 @@ import cookieParser from "cookie-parser";
 const rootDir = process.cwd();
 const port = 3000;
 const app = express();
+let cartContents = [];
+let history = []
+
+const products = [
+  {
+    name: "Americano",
+    image: "/static/img/americano.jpg",
+    price: 777,
+  },
+  {
+    name: "Cappuccino",
+    image: "/static/img/cappuccino.jpg",
+    price: 666
+  },
+  {
+    name: "Espresso",
+    image: "/static/img/espresso.jpg",
+    price: 999
+  },
+  {
+    name: "Latte",
+    image: "/static/img/latte.jpg",
+    price: 333
+  },
+  {
+    name: "Flat white",
+    image: "/static/img/flat-white.jpg",
+    price: 322
+  },
+  {
+    name: "Latte macchiato",
+    image: "/static/img/latte-macchiato.jpg",
+    price: 146
+  },
+]
 
-// Выбираем в качестве движка шаблонов Handlebars
 app.set("view engine", "hbs");
-// Настраиваем пути и дефолтный view
+
 app.engine(
   "hbs",
   hbs({
@@ -20,38 +54,83 @@ app.engine(
   })
 );
 
+app.use(cookieParser());
+app.use("/static", express.static("static"))
+
 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: products,
+    theme: getTheme(req),
+    title: "Меню",
   });
 });
 
 app.get("/buy/:name", (req, res) => {
-  res.status(501).end();
+  const username = getUsername(req);
+  if (cartContents[username] === undefined) cartContents[username] = [];
+  cartContents[username].push(products.find(product => product.name === req.params.name));
+  res.redirect("/menu");
 });
 
 app.get("/cart", (req, res) => {
-  res.status(501).end();
+  const username = getUsername(req);
+  if (cartContents[username] === undefined) cartContents[username] = [];
+  res.render("cart", {
+    layout: "default",
+    cartContents: cartContents[username],
+    sum: cartContents[username].reduce((sum, item) => sum + item.price, 0),
+    title: "Корзина",
+    theme: getTheme(req),
+  });
 });
 
 app.post("/cart", (req, res) => {
-  res.status(501).end();
+  const username = getUsername(req);
+  if (history[username] === undefined) history[username] = [];
+  if (cartContents[username].length > 0) {
+    history[username].push({
+      number: history[username].length + 1,
+      items: cartContents[username],
+      totalPrice: cartContents[username].reduce((sum, item) => sum + item.price, 0),
+    });
+    cartContents[username] = []
+  }
+  res.redirect("/cart");
 });
 
 app.get("/login", (req, res) => {
-  res.status(501).end();
+  const username = req.query.username || getUsername(req);
+  res.cookie("username", username).render("login", {
+    layout: "default",
+    username: username,
+    theme: getTheme(req),
+    title: "Личный кабинет",
+  })
+});
+
+app.get("/history", (req, res) => {
+  const username = getUsername(req);
+  if (history[username] === undefined) history[username] = [];
+  console.log(history[username]);
+  res.render("history", {
+    layout: "default",
+    history: history[username],
+    theme: getTheme(req),
+    title: "История",
+  })
 });
 
 app.listen(port, () => console.log(`App listening on port ${port}`));
+
+function getTheme(req) {
+  return req.cookies.theme || "light";
+}
+
+function getUsername(req) {
+  return req.cookies.username || "Безымянный"
+}

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 @@
+<div>
+	<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>
+</div>

views/history.hbs

@@ -0,0 +1,12 @@
+{{#each history}}
+	<section class="user__hello">Заказ №{{number}} на сумму {{totalPrice}} ₽</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>
+{{/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,10 +4,11 @@
       <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">
-    <input type="checkbox" />
+    <input type="checkbox"/>
     <span class="theme__toggle"></span>
   </label>
 </header>