routes creator

src/components/VuesticLogo.stories.ts

@@ -1,29 +0,0 @@
-import VuesticLogo from "./VuesticLogo.vue";
-
-export default {
-  title: "VuesticLogo",
-  component: VuesticLogo,
-  tags: ["autodocs"],
-};
-
-export const Default = () => ({
-  components: { VuesticLogo },
-  template: `<VuesticLogo start="#6B7AFE" end="#083CC6" />`,
-});
-
-export const White = () => ({
-  components: { VuesticLogo },
-  template: `<div class="bg-primary">
-    <VuesticLogo start="#FFF"/>
-  </div>`,
-});
-
-export const Blue = () => ({
-  components: { VuesticLogo },
-  template: `<VuesticLogo start="#0E41C9"/>`,
-});
-
-export const Height = () => ({
-  components: { VuesticLogo },
-  template: `<VuesticLogo start="#6B7AFE" end="#083CC6" :height="48"/>`,
-});

src/components/navbar/components/GitHubButton.vue

@@ -1,15 +0,0 @@
-<template>
-  <VaButton
-    preset="secondary"
-    color="textPrimary"
-    href="https://github.com/epicmaxco/vuestic-admin"
-    target="_blank"
-    aria-label="Visit github"
-  >
-    <VaIcon :component="VaIconGitHub" />
-  </VaButton>
-</template>
-
-<script lang="ts" setup>
-import VaIconGitHub from "../../icons/VaIconGitHub.vue";
-</script>

src/components/sidebar/NavigationRoutes.ts

@@ -12,6 +12,13 @@ const authRoutes = [
       icon: "vuestic-iconset-dashboard",
     },
   },
+  {
+    name: "routes",
+    displayName: "menu.routes",
+    meta: {
+      icon: "near_me",
+    },
+  },
   {
     name: 'workouts',
     displayName: 'menu.workouts',
@@ -38,6 +45,13 @@ const authRoutes = [
 ] as INavigationRoute[]
 
 const publicRoutes = [
+  {
+    name: "routes",
+    displayName: "menu.routes",
+    meta: {
+      icon: "vuestic-iconset-map",
+    },
+  },
   {
     name: "dashboard",
     displayName: "menu.dashboard",

src/i18n/locales/ru.json

@@ -40,6 +40,7 @@
     "auth": "Auth",
     "buttons": "Buttons",
     "timelines": "Timelines",
+    "routes": "Построение маршрутов",
     "dashboard": "Лента",
     "billing": "Billing",
     "login": "Login",

src/pages/routes/Route.vue

@@ -0,0 +1,119 @@
+
+<template>
+    <section class="map">
+      <div id="workout-map">
+            <yandex-map v-model="map" :settings="{
+                location: {
+                    center: mapCenter,
+                    zoom: 10,
+                },
+            }" width="100%" :height=height>
+                <yandex-map-default-scheme-layer />
+                <yandex-map-default-features-layer />
+                <yandex-map-listener :settings="{ onClick: (_: any, e: any) => clickCoordinates = [...clickCoordinates, e.coordinates]}"/>
+                <yandex-map-default-marker
+                  v-if="clickCoordinates.length === 1"
+                  :settings="{ title: 'Начальная точка', coordinates: clickCoordinates[0] }"
+              />
+              <yandex-map-feature
+                :settings="{
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: clickCoordinates,
+                    },
+                    style: {
+                        stroke: [{ color: '#007afce6', width: 4 }],
+                    },
+                }"
+            />
+            <yandex-map-controls :settings="{ position: 'right top', orientation: 'vertical' }">
+              <yandex-map-control>
+                  <div class="info">
+                      Вы можете добавлять новые точки<br> на карту путём клика на неё
+                  </div>
+              </yandex-map-control>
+              <yandex-map-control-button
+                  v-if="clickCoordinates.length"
+                  :settings="{ background: 'blue', color: '#fff', onClick: () => downloadAsCSV()}"
+              >
+                  Выгрузить
+              </yandex-map-control-button>
+              <yandex-map-control-button
+                  v-if="clickCoordinates.length"
+                  :settings="{ background: 'blue', color: '#fff', onClick: () => clickCoordinates.pop()}"
+              >
+                  Отменить последнюю точку
+              </yandex-map-control-button>
+              <yandex-map-control-button
+                  v-if="clickCoordinates.length"
+                  :settings="{ background: '#fd6466e6', color: '#fff', onClick: () => clickCoordinates = []}"
+              >
+                  Стереть точки ({{ clickCoordinates.length }})
+              </yandex-map-control-button>
+          </yandex-map-controls>
+            </yandex-map>
+        </div>
+    </section>
+  </template>
+  <script setup lang="ts">
+  
+  import { AxiosResponse, AxiosInstance } from "axios";
+  import { ref, inject, shallowRef  } from 'vue';
+  import { useToast } from "vuestic-ui/web-components";
+  import { useRouter } from "vue-router";
+  
+  import type { LngLat, YMap } from '@yandex/ymaps3-types';
+  import { 
+    YandexMap, 
+    YandexMapDefaultSchemeLayer, 
+    YandexMapFeature, 
+    YandexMapDefaultFeaturesLayer, 
+    YandexMapDefaultMarker, 
+    YandexMapControl,
+    YandexMapControlButton,
+    YandexMapControls,
+    YandexMapListener, } from 'vue-yandex-maps';
+
+  
+  const { push } = useRouter();
+  const axiosPublic= inject('axiosPublic') as AxiosInstance;
+  const { init } = useToast();
+  const mapCenter = ref([30.31413, 59.93863]);
+  const height = `${window.innerHeight}px`;
+  
+  const map = shallowRef<null | YMap>(null);
+  const clickCoordinates = ref<LngLat[]>([]);
+
+const toGPX = () => {
+  let content = "";
+  var date = (new Date()).toISOString();
+  for (let i in clickCoordinates.value) {
+    content += `<trkpt lat="${clickCoordinates.value[i][1]}" lon="${clickCoordinates.value[i][0]}"><ele>${i}</ele><time>${date}</time></trkpt>`
+  }
+  return `<?xml version="1.0" encoding="UTF-8" standalone="no" ?><gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="cycle-rider.ru.ru" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd"><metadata><name>cycle-rider.ru</name><time>${date}</time></metadata><trk><name>cycle-rider.ru</name><trkseg>${content}</trkseg></trk></gpx>`;
+};
+ 
+const downloadAsCSV = () => {
+  const gpx = toGPX();
+
+  const blob = new Blob([gpx], { type: "text/xml" });
+
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  link.download = "df";
+  link.click();
+};
+  </script>
+  
+  
+<style>
+.map:deep([class$="main-engine-container"] canvas) {
+  cursor: pointer;
+}
+
+.info {
+  padding: 15px;
+  width: 300px;
+  font-size: 14px;
+}
+</style>

src/pages/workouts/components/WorkoutItem.vue

@@ -156,7 +156,7 @@ import {
 
 import LineWithLineChart from './LineWithLineChart.js'
 import type { YMap } from '@yandex/ymaps3-types';
-import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapMarker, YandexMapDefaultMarker, YandexMapListener, } from 'vue-yandex-maps';
+import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapDefaultMarker, YandexMapListener, } from 'vue-yandex-maps';
 import { WorkoutItem, distConvert, speedConvert, formatTime, ChartData } from "../Definitions.vue";
 
 

src/router/index.ts

@@ -21,6 +21,11 @@ const routes: Array<RouteRecordRaw> = [
         path: "dashboard",
         component: () => import("../pages/workouts/Feed.vue"),
       },
+      {
+        name: "routes",
+        path: "routes",
+        component: () => import("../pages/routes/Route.vue"),
+      },
       {
         name: "workouts",
         path: "workouts",