show image

2024-09-29 08:35:36 +03:00 · 2024-09-29 08:35:36 +03:00 · 45bfcc7f6f
parent 40d2a3083b
commit 45bfcc7f6f
4 changed files with 79 additions and 28 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,11 +1,11 @@
 {
-  "name": "vuestic-admin",
+  "name": "cycle-rider",
  "version": "3.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "vuestic-admin",
+      "name": "cycle-rider",
      "version": "3.1.0",
      "dependencies": {
        "@gtm-support/vue-gtm": "^2.0.0",
@ -26,6 +26,7 @@
        "vue-chartjs": "^5.3.0",
        "vue-i18n": "^9.6.2",
        "vue-router": "^4.2.5",
+        "vue-yandex-maps": "^2.1.4",
        "vuestic-ui": "^1.9.0"
      },
      "devDependencies": {
@ -5569,7 +5570,7 @@
      "version": "15.7.10",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
      "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/qs": {
      "version": "6.9.10",
@ -5587,7 +5588,7 @@
      "version": "18.2.37",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -5598,7 +5599,7 @@
      "version": "0.16.6",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
      "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/semver": {
      "version": "7.5.8",
@ -6371,6 +6372,27 @@
        }
      }
    },
+    "node_modules/@yandex/ymaps3-types": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@yandex/ymaps3-types/-/ymaps3-types-0.0.28.tgz",
+      "integrity": "sha512-xPXIDeN5zXWJB29o8yXgaOCLbQpHqqQrn6PaqPhqk4/0SM/pWWBuR9dI6wrM9ZBV7xnIrFIAbdF6hk3tqqs9Pg==",
+      "peerDependencies": {
+        "@types/react": "16-18",
+        "@types/react-dom": "16-18",
+        "@vue/runtime-core": "3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@yarnpkg/esbuild-plugin-pnp": {
      "version": "3.0.0-rc.15",
      "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz",
@ -16823,6 +16845,30 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "node_modules/vue-yandex-maps": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-2.1.4.tgz",
+      "integrity": "sha512-W/vJPbBRkSXpGxeDgHBYQmyViq4ct4T4Vih7RM2uhXMJySSHrVMl1yKUDE0qpg2Or4ZD9BiwYOm3HG/JtvcHxg==",
+      "dependencies": {
+        "@yandex/ymaps3-types": ">=0.0.27"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": ">=1",
+        "nuxt": "^2.16 || ^3",
+        "vue": "^2.7 || ^3.3"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/vue/node_modules/@vue/shared": {
      "version": "3.3.9",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.9.tgz",
--- a/src/main.ts
+++ b/src/main.ts
@ -10,8 +10,8 @@ import App from "./App.vue";
 import axios from 'axios';
 import { AxiosResponse } from "axios";

-const HOST = "https://cycle-rider.ru";
-// const HOST = "http://localhost:8000";
+// const HOST = "https://cycle-rider.ru";
+const HOST = "http://localhost:8000";

 axios.defaults.baseURL = HOST;

--- a/src/pages/workouts/WorkoutList.vue
+++ b/src/pages/workouts/WorkoutList.vue
@ -20,7 +20,7 @@
            <li><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
            <li><span>Мощность:</span> {{ Math.round(item.power) }}</li>
        </ul>
-        <!-- <img src="img/first_workout.jpg" alt="Изображение первой тренировки"> -->
+        <div class="image-container" :style="{'background-image': `url(${item.attachment.url})` }"></div>
    </article>
  </template>
  </section>
@ -64,7 +64,9 @@ const speedConvert = (speed: number) => {
  return Math.round(speed*3.6)
 }

-
+type Attachment = {
+  url: string;
+}
 type WorkoutItem = {
  id: string;
  name: string;
@ -79,6 +81,7 @@ type WorkoutItem = {
  power: number;
  duraion_sec: number;
  distantion: number;
+  attachment: Attachment;
 };

 const axiosAuth= inject('axiosAuth') as AxiosInstance;
@ -103,15 +106,12 @@ initWorkouts();
 </script>

 <style>
-.background-image {
-    background-image: url('bg.jpg');
-    background-size: cover;
-    height: 100vh;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
+.image-container {
+  height: 300px;
+  width: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
 }

 .news-feed {
@ -141,13 +141,6 @@ initWorkouts();
  cursor: pointer;
 }

-.news-item img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-    border-radius: 5px;
-    margin-bottom: 1rem;
-}

 .news-item h3 {
    font-weight: bold;
--- a/yarn.lock
+++ b/yarn.lock
@ -2658,7 +2658,7 @@
  resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz"
  integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==

-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16", "@types/react@16-18":
  version "18.2.37"
  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz"
  integrity sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==
@ -3096,7 +3096,7 @@
  dependencies:
    "@vue/shared" "3.3.9"

-"@vue/runtime-core@3.3.9":
+"@vue/runtime-core@3", "@vue/runtime-core@3.3.9":
  version "3.3.9"
  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.9.tgz"
  integrity sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==
@ -3158,6 +3158,11 @@
  dependencies:
    vue-demi ">=0.14.6"

+"@yandex/ymaps3-types@>=0.0.27":
+  version "0.0.28"
+  resolved "https://registry.npmjs.org/@yandex/ymaps3-types/-/ymaps3-types-0.0.28.tgz"
+  integrity sha512-xPXIDeN5zXWJB29o8yXgaOCLbQpHqqQrn6PaqPhqk4/0SM/pWWBuR9dI6wrM9ZBV7xnIrFIAbdF6hk3tqqs9Pg==
+
 "@yarnpkg/esbuild-plugin-pnp@^3.0.0-rc.10":
  version "3.0.0-rc.15"
  resolved "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz"
@ -9065,7 +9070,14 @@ vue-tsc@^1.8.22:
    "@vue/language-core" "1.8.22"
    semver "^7.5.4"

-"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=2, vue@3.3.9:
+vue-yandex-maps@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-2.1.4.tgz"
+  integrity sha512-W/vJPbBRkSXpGxeDgHBYQmyViq4ct4T4Vih7RM2uhXMJySSHrVMl1yKUDE0qpg2Or4ZD9BiwYOm3HG/JtvcHxg==
+  dependencies:
+    "@yandex/ymaps3-types" ">=0.0.27"
+
+"vue@^2.6.14 || ^3.3.0", "vue@^2.7 || ^3.3", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=2, vue@3.3.9:
  version "3.3.9"
  resolved "https://registry.npmjs.org/vue/-/vue-3.3.9.tgz"
  integrity sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==