Dz2.15

frontend/src/App.vue

@@ -1,16 +1,14 @@
 <template>
-  <div class="main__wrapper">
-    <div class="main__header">
-      <img src="@/assets/img/logo.svg" width="300" height="47" alt="V!U!E! Pizza" />
-    </div>
-    <h1>Добро пожаловать!</h1>
-    <p>
-      Это проект V!U!E! Pizza для обучения на профессиональном онлайн‑курсе<br />
-      <b>«Vue.js для опытных разработчиков».</b>
-    </p>
-  </div>
+  <app-layout>
+    <home-view />
+  </app-layout>
 </template>
 
+<script setup>
+import AppLayout from "@/layouts/AppLayout.vue";
+import HomeView from "@/views/HomeView.vue";
+</script>
+
 <style lang="scss">
 @import "@/assets/scss/app.scss";
 body {

frontend/src/common/components/AppDrag.vue

@@ -0,0 +1,30 @@
+<template>
+    <div
+      :draggable="draggable"
+      @dragstart.self="onDragStart"
+      @dragover.prevent
+      @dragenter.prevent
+    >
+      <slot />
+    </div>
+  </template>
+
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+
+  const props = defineProps({
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    dataTransfer: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const onDragStart = ({ dataTransfer }) => {
+    const data = JSON.stringify(props.dataTransfer);
+    dataTransfer.setData(DATA_TRANSFER_PAYLOAD, data);
+  };
+  </script>

frontend/src/common/components/AppDrop.vue

@@ -0,0 +1,25 @@
+<template>
+    <div @drop.stop="onDrop" @dragover.prevent @dragenter.prevent>
+      <slot />
+    </div>
+  </template>
+
+  <script setup>
+  import { DATA_TRANSFER_PAYLOAD } from "@/common/constants";
+
+  const emit = defineEmits(["drop"]);
+
+  const onDrop = ({ dataTransfer }) => {
+    if (!dataTransfer) {
+      return;
+    }
+
+    const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+
+    if (payload) {
+      const transferData = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+      const data = JSON.parse(transferData);
+      emit("drop", data);
+    }
+  };
+  </script>

frontend/src/common/constants/index.js

@@ -0,0 +1,2 @@
+export const DATA_TRANSFER_PAYLOAD = "payload";
+export const MAX_INGREDIENT_COUNT = 3;

frontend/src/common/helpers/normalize.js

@@ -0,0 +1,32 @@
+import doughSizes from "@/common/data/doughSizes";
+import ingredients from "@/common/data/ingredients";
+import sauces from "@/common/data/sauces";
+import sizes from "@/common/data/sizes";
+
+export const normalizeDough = (dough) => {
+  return {
+    ...dough,
+    value: doughSizes[dough.id],
+  };
+};
+
+export const normalizeSize = (size) => {
+  return {
+    ...size,
+    value: sizes[size.id],
+  };
+};
+
+export const normalizeIngredients = (ingredient) => {
+  return {
+    ...ingredient,
+    value: ingredients[ingredient.id],
+  };
+};
+
+export const normalizeSauces = (sauce) => {
+  return {
+    ...sauce,
+    value: sauces[sauce.id],
+  };
+};

frontend/src/layouts/AppHeader.vue

@@ -0,0 +1,150 @@
+<template>
+    <header class="header">
+    <div class="header__logo">
+      <a href="index.html" class="logo">
+        <img src="@/assets/img/logo.svg" alt="Pizza logo" width="90" height="40">
+      </a>
+    </div>
+    <div class="header__cart">
+      <a href="cart.html">0 ₽</a>
+    </div>
+    <div class="header__user">
+      <a href="#" class="header__login"><span>Войти</span></a>
+    </div>
+  </header>
+</template>
+<style lang="scss" scoped>
+@import "@/assets/scss/ds-system/ds";
+
+.header {
+  position: relative;
+  z-index: 2;
+
+  display: flex;
+
+  padding: 0 2.12%;
+
+  background-color: $green-500;
+  box-shadow: $shadow-light;
+}
+
+.header__logo {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.header__cart {
+  margin-right: 10px;
+  margin-left: auto;
+
+  a {
+    @include b-s16-h19;
+
+    display: block;
+
+    padding: 21px 15px 21px 58px;
+
+    transition: 0.3s;
+
+    color: $white;
+    background-color: $green-500;
+    background-image: url("@/assets/img/cart.svg");
+    background-repeat: no-repeat;
+    background-position: 20px center;
+    background-size: 29px 27px;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+}
+
+.header__user {
+  display: flex;
+  align-items: center;
+
+  a {
+    display: block;
+
+    padding: 14px 20px;
+
+    transition: 0.3s;
+
+    background-color: $green-500;
+
+    &:hover:not(:active) {
+      background-color: $green-400;
+    }
+
+    &:active {
+      background-color: $green-600;
+    }
+
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+
+  img {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    vertical-align: middle;
+
+    border-radius: 50%;
+  }
+
+  span {
+    @include r-s14-h16;
+
+    display: inline-block;
+
+    vertical-align: middle;
+
+    color: $white;
+  }
+}
+
+.header__logout {
+  &::before {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+
+.header__login {
+  &::after {
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+    margin-left: 8px;
+
+    content: "";
+    vertical-align: middle;
+
+    background: url("@/assets/img/login.svg") no-repeat center;
+    background-size: auto 50%;
+  }
+}
+</style>

frontend/src/layouts/AppLayout.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+      <app-header />
+      <slot />
+    </div>
+  </template>
+
+  <script setup>
+  import AppHeader from "./AppHeader.vue";
+  </script>
+