From db9bde53abdfaca8bc1a375275de993b0adcc809 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D1=8F=D1=82=D0=BA=D0=B8=D0=BD=20=D0=A1=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B3=D0=B5=D0=B9?= <68995714+ohtoe02@users.noreply.github.com>
Date: Thu, 2 Dec 2021 21:20:26 +0500
Subject: [PATCH] 1-11

---
 index.mjs                 | 111 ++++++++++++++++++++++++++++++++------
 static/js/theme.mjs       |   7 +++
 views/cart.hbs            |  17 ++++++
 views/history.hbs         |  12 +++++
 views/layouts/default.hbs |   4 +-
 views/login.hbs           |  10 ++++
 views/partials/header.hbs |   3 +-
 7 files changed, 145 insertions(+), 19 deletions(-)
 create mode 100644 views/cart.hbs
 create mode 100644 views/history.hbs
 create mode 100644 views/login.hbs

diff --git a/index.mjs b/index.mjs
index 867c9f2..7f634a5 100644
--- a/index.mjs
+++ b/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 || "Безымянный"
+}
\ No newline at end of file
diff --git a/static/js/theme.mjs b/static/js/theme.mjs
index 5229c9e..5cfb4f1 100644
--- a/static/js/theme.mjs
+++ b/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}`
+}
diff --git a/views/cart.hbs b/views/cart.hbs
new file mode 100644
index 0000000..249b9e9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/views/history.hbs b/views/history.hbs
new file mode 100644
index 0000000..2bb469a
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/views/layouts/default.hbs b/views/layouts/default.hbs
index 6d9433a..56ea13e 100644
--- a/views/layouts/default.hbs
+++ b/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>
diff --git a/views/login.hbs b/views/login.hbs
new file mode 100644
index 0000000..ad16c90
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/views/partials/header.hbs b/views/partials/header.hbs
index 85fc56a..580710e 100644
--- a/views/partials/header.hbs
+++ b/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>
\ No newline at end of file