From f26e7d393d50983d681e3a1b1ea7b4a7f6aa076b Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 12:37:11 +0300
Subject: [PATCH 1/7] add link to policy page

---
 assets/main.scss     |  3 +++
 components/modal.vue | 13 +++++++++++++
 pages/policy.vue     | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 pages/policy.vue

diff --git a/assets/main.scss b/assets/main.scss
index f8886a2..9e2a361 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -174,6 +174,9 @@ label {
 input {
     @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed;
 }
+input[type=checkbox] {
+    @apply w-4 h-4;
+}
 
 textarea {
     @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
diff --git a/components/modal.vue b/components/modal.vue
index eec4526..fab00a0 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -178,6 +178,14 @@ const modalStatus = {
     'success': ["mdi:check-circle-outline", 'Данные отправлены'],
     'error': ["mdi:close-circle-outline", 'Ошибка отправки'],
 }
+
+const policy = () => {
+    navigateTo('/policy', {
+        open: {
+            target: "_blank",
+        },
+    });
+}
 </script>
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
@@ -199,6 +207,11 @@ const modalStatus = {
                         @keypress="validateInput" @keyup="validate" />
                     <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email" @keypress="validateInput"
                         @keyup="validate" />
+                    <div class="flex gap-4 justify-between items-center">
+                        <input type="checkbox" id="policy" />
+                        <label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
+                            </label>
+                    </div>
                     {{ total_txt && total_txt.total[0] }}
                     <div class="flex gap-4">
                         <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
diff --git a/pages/policy.vue b/pages/policy.vue
new file mode 100644
index 0000000..08d67ef
--- /dev/null
+++ b/pages/policy.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const config = useRuntimeConfig()
+const imgBase = config.public.imgBase
+
+import { apiFetch } from '~/utils/apiFetch';
+import { marked } from 'marked';
+
+import og_img from '/og_img.png'
+
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+useSeoMeta({
+    title: seoData.value?.title,
+    ogTitle: seoData.value?.title,
+    description: seoData.value?.content,
+    ogDescription: seoData.value?.content,
+    ogImage: config.public.baseUrl + og_img,
+    // twitterCard: 'summary_large_image',
+})
+
+const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
+const policyText = computed(() => {
+    let c = policyData?.value.content || ''
+    return marked.parse(c)
+})
+
+</script>
+<template>
+    <div>
+        <div class="siteblock bg-white">
+            <div class="container">
+                <h1 class="siteblock-title">{{ policyData.title }}</h1>
+                <div class="col-span-full prose max-w-full" v-html="policyText" />
+            </div>
+        </div>
+        <div class="siteblock siteblock_calc bg-white">
+            <Suspense>
+                <CalcModels />
+            </Suspense>
+        </div>
+    </div>
+</template>
\ No newline at end of file

From e946079728e29b5873bd135359a45a3b2f3808c0 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 12:44:18 +0300
Subject: [PATCH 2/7] modal check validate

---
 components/modal.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/modal.vue b/components/modal.vue
index fab00a0..b0c8c20 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -30,12 +30,15 @@ type modalDataType = {
     phone?: string
     name?: string
     email?: string
+    policy: boolean
 }
 const modal_data = reactive<modalDataType>({
     email: undefined,
     phone: undefined,
-    name: undefined
+    name: undefined,
+    policy: true
 })
+
 const modal_form = reactive({
     disabled: true,
     errors: [],
@@ -62,13 +65,17 @@ const validate = () => {
 
     modal_form.disabled = true
     if (
-        (modal_data.phone && phone_regexp.test(modal_data.phone))
-        || (modal_data.email && email_regex.test(modal_data.email))
+        (
+            (modal_data.phone && phone_regexp.test(modal_data.phone))
+            || (modal_data.email && email_regex.test(modal_data.email))
+        ) && modal_data.policy == true
     ) {
         modal_form.disabled = false
         return
     }
 }
+watch(modal_data, validate)
+
 const submit = async (e: any) => {
     goal('submit_form', modal_data)
     modal_state.show_status = 'loading'
@@ -202,15 +209,15 @@ const policy = () => {
             <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
                 <form @submit.prevent="submit" ref="form">
-                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
+                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
-                        @keypress="validateInput" @keyup="validate" />
-                    <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email" @keypress="validateInput"
-                        @keyup="validate" />
+                        @keypress="validateInput" />
+                    <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email"
+                        @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
-                        <input type="checkbox" id="policy" />
+                        <input type="checkbox" id="policy" v-model="modal_data.policy" />
                         <label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
-                            </label>
+                        </label>
                     </div>
                     {{ total_txt && total_txt.total[0] }}
                     <div class="flex gap-4">

From c4b6e61655bc3311f97dc0e20607d62590acedfd Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 14:00:07 +0300
Subject: [PATCH 3/7] 404 redirect

---
 components/header.vue            |  3 ++-
 error.vue                        | 15 ++++++++++-----
 pages/{policy.vue => [slug].vue} | 14 ++++++++++----
 pages/index.vue                  | 11 ++++++-----
 types/index.d.ts                 |  6 ++++++
 utils/apiFetch.ts                | 10 +++++++++-
 6 files changed, 43 insertions(+), 16 deletions(-)
 rename pages/{policy.vue => [slug].vue} (74%)

diff --git a/components/header.vue b/components/header.vue
index 4bf8c74..bb122bf 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { apiFetch } from '~/utils/apiFetch';
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 const route = useRoute()
 </script>
 <template>
diff --git a/error.vue b/error.vue
index 2d6582b..55e048d 100644
--- a/error.vue
+++ b/error.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import '@/assets/main.scss'
-
+const config = useRuntimeConfig()
 import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
@@ -20,9 +18,11 @@ useSeoMeta({
 const props = defineProps({
     error: Object as () => NuxtError
 })
-
+const route = useRoute()
+if(route.path !== '/404') {
+    navigateTo('/404')
+}
 </script>
-
 <template>
     <div>
         <Header />
@@ -32,6 +32,11 @@ const props = defineProps({
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
+                    <p class="hidden">
+                        <code>
+                            {{ error?.message }}
+                        </code>
+                    </p>
                     <button @click="navigateTo('/')" class="not-prose">Вернуться на главную</button>
                 </div>
             </div>
diff --git a/pages/policy.vue b/pages/[slug].vue
similarity index 74%
rename from pages/policy.vue
rename to pages/[slug].vue
index 08d67ef..6112102 100644
--- a/pages/policy.vue
+++ b/pages/[slug].vue
@@ -16,10 +16,16 @@ useSeoMeta({
     ogImage: config.public.baseUrl + og_img,
     // twitterCard: 'summary_large_image',
 })
-
-const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
+const route = useRoute()
+const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}`)
+if (!data.value) {
+    throw createError({
+        statusCode: 404,
+    })
+}
 const policyText = computed(() => {
-    let c = policyData?.value.content || ''
+    if (!data?.value) return ''
+    let c = data?.value.content || ''
     return marked.parse(c)
 })
 
@@ -28,7 +34,7 @@ const policyText = computed(() => {
     <div>
         <div class="siteblock bg-white">
             <div class="container">
-                <h1 class="siteblock-title">{{ policyData.title }}</h1>
+                <h1 class="siteblock-title">{{ data?.title || '404' }}</h1>
                 <div class="col-span-full prose max-w-full" v-html="policyText" />
             </div>
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 7d1ac30..a74436c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -17,15 +17,16 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 
 const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
 const { data: calculatorData } = await apiFetch(`calculator/5/`)
 
-const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
-const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
-const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'how_to')
-const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages')
+const about = pagesData.find(el => el.slug == 'about')
+const reviews = pagesData.find(el => el.slug == 'clients')
+const delivery = pagesData.find(el => el.slug == 'how_to')
+const advantages = pagesData.find(el => el.slug == 'advantages')
 
 const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
diff --git a/types/index.d.ts b/types/index.d.ts
index eea6bba..8c61d6e 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -14,6 +14,12 @@ type ApiKpType = {
     is_indexed: boolean
 }
 
+type ApiMenuType = {
+    id: number
+    type: string
+    pages: ApiPagesType[]
+}
+
 type ApiPagesType = {
     id: number
     title: string
diff --git a/utils/apiFetch.ts b/utils/apiFetch.ts
index 2a3aa53..706c87f 100644
--- a/utils/apiFetch.ts
+++ b/utils/apiFetch.ts
@@ -5,6 +5,14 @@ export async function apiFetch<T>(path: string) {
     headers.set('Referer', config.public.baseUrl)
     return useFetch<T>(`${apiBase}/${path}`, {
         baseURL: config.public.baseUrl,
-        headers
+        headers,
+        onResponseError({ response }) {
+            console.log(response)
+            window.location.pathname = '/404'
+            throw createError({
+                statusCode: 404,
+                fatal: true
+            })
+        },
     })
 }
\ No newline at end of file

From e18e1bcc18d07d4de92f189b3d9f004c673b0f5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=97=D0=B5=D0=BB=D0=B5=D0=BD=D1=81=D0=BA=D0=B0=D1=8F=20?=
 =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20=D0=9D?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2=D0=BD=D0=B0?=
 <a.zelenskaya@svs-tech.pro>
Date: Wed, 10 Jul 2024 14:14:57 +0300
Subject: [PATCH 4/7] policy

---
 components/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/modal.vue b/components/modal.vue
index b0c8c20..c6c810f 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -216,7 +216,7 @@ const policy = () => {
                         @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
                         <input type="checkbox" id="policy" v-model="modal_data.policy" />
-                        <label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
+                        <label for="policy"> Я соглашаюсь с Политикой конфиденциальности <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
                         </label>
                     </div>
                     {{ total_txt && total_txt.total[0] }}

From 3542e8c49a33aeb147c3ca765dc104d8cb046083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=97=D0=B5=D0=BB=D0=B5=D0=BD=D1=81=D0=BA=D0=B0=D1=8F=20?=
 =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20=D0=9D?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2=D0=BD=D0=B0?=
 <a.zelenskaya@svs-tech.pro>
Date: Wed, 10 Jul 2024 14:18:01 +0300
Subject: [PATCH 5/7] policy

---
 components/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/modal.vue b/components/modal.vue
index c6c810f..b5bcfb2 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -216,7 +216,7 @@ const policy = () => {
                         @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
                         <input type="checkbox" id="policy" v-model="modal_data.policy" />
-                        <label for="policy"> Я соглашаюсь с Политикой конфиденциальности <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
+                        <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на обработку персональных данных.<NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
                         </label>
                     </div>
                     {{ total_txt && total_txt.total[0] }}

From 5e14427a13c89d16c8a47da77eda2e4807d5792c Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 15:11:39 +0300
Subject: [PATCH 6/7] use fetch

---
 components/header.vue | 4 ++--
 error.vue             | 4 ++--
 nuxt.config.ts        | 5 +++++
 pages/[slug].vue      | 7 +++++--
 pages/index.vue       | 2 +-
 types/index.d.ts      | 1 +
 utils/apiFetch.ts     | 3 ++-
 7 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/header.vue b/components/header.vue
index bb122bf..31d4f48 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { apiFetch } from '~/utils/apiFetch';
 
-const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
-const pagesData = menuData.value ? menuData.value.pages : []
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/`)
+const pagesData = (menuData.value ? menuData.value.pages : []).sort((a, b) => a.order - b.order)
 const route = useRoute()
 </script>
 <template>
diff --git a/error.vue b/error.vue
index 55e048d..2ba9369 100644
--- a/error.vue
+++ b/error.vue
@@ -5,7 +5,7 @@ import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/2/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 const route = useRoute()
 if(route.path !== '/404') {
-    navigateTo('/404')
+    // navigateTo('/404')
 }
 </script>
 <template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a2e80c4..d45e970 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -42,6 +42,11 @@ export default defineNuxtConfig({
       },
     },
   },
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => ['nobr'].includes(tag),
+    }
+  },
   ssr: true,
   modules: [
     '@nuxtjs/tailwindcss',
diff --git a/pages/[slug].vue b/pages/[slug].vue
index 6112102..59ea8ef 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -7,7 +7,7 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -17,7 +17,7 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 const route = useRoute()
-const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}`)
+const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}/`)
 if (!data.value) {
     throw createError({
         statusCode: 404,
@@ -38,6 +38,9 @@ const policyText = computed(() => {
                 <div class="col-span-full prose max-w-full" v-html="policyText" />
             </div>
         </div>
+        <div class="siteblock-image" v-if="data?.image">
+            <NuxtImg :src="[imgBase, data?.image].join('/')" :alt="data.title || 'фоновая картинка'" title="" format="webp" />
+        </div>
         <div class="siteblock siteblock_calc bg-white">
             <Suspense>
                 <CalcModels />
diff --git a/pages/index.vue b/pages/index.vue
index a74436c..4dffb05 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
diff --git a/types/index.d.ts b/types/index.d.ts
index 8c61d6e..be3fce7 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -22,6 +22,7 @@ type ApiMenuType = {
 
 type ApiPagesType = {
     id: number
+    order: number
     title: string
     menu_title: string
     slug: string
diff --git a/utils/apiFetch.ts b/utils/apiFetch.ts
index 706c87f..e42ca76 100644
--- a/utils/apiFetch.ts
+++ b/utils/apiFetch.ts
@@ -7,7 +7,8 @@ export async function apiFetch<T>(path: string) {
         baseURL: config.public.baseUrl,
         headers,
         onResponseError({ response }) {
-            console.log(response)
+            console.log(response.status)
+            console.log(response.url)
             window.location.pathname = '/404'
             throw createError({
                 statusCode: 404,

From c4d942e4f09b2e84c9974d902e3fc99dd4d9016c Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 15:12:23 +0300
Subject: [PATCH 7/7] policy text

---
 components/modal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/modal.vue b/components/modal.vue
index b5bcfb2..76e2c70 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -216,7 +216,8 @@ const policy = () => {
                         @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
                         <input type="checkbox" id="policy" v-model="modal_data.policy" />
-                        <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на обработку персональных данных.<NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
+                        <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy" @click="policy">обработку персональных
+                            данных</NuxtLink>.
                         </label>
                     </div>
                     {{ total_txt && total_txt.total[0] }}