package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "^14.2.1",
+        "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
         "izitoast": "^1.4.0",
         "vue": "^3.5.28"
@@ -3636,6 +3637,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cross-dirname": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cross-dirname/-/cross-dirname-0.1.0.tgz",
@@ -7823,6 +7833,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^14.2.1",
+    "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",
     "izitoast": "^1.4.0",
     "vue": "^3.5.28"

src/App.vue

@@ -1,11 +1,16 @@
 <script setup>
-import { ref, onMounted  } from 'vue';
+import { ref, onMounted } from 'vue';
 import izitoast from "./izitoast";
 import { useEventListener } from '@vueuse/core';
+import MyDialog from './components/MyDialog.vue';
+import copyToclipboard from './copyToclipboard';
+
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([])
+const isModalVisible = ref(false)
+let finallyText = '';
 
 onMounted(()=>{
   
@@ -48,7 +53,6 @@ function setNumber(item) {
 }
 
 function saveResult() {
-  let finallyText = '';
   for (const item of listOfTrips.value) {
     finallyText += `navigate_wait(${item.x}, ${item.y})\n`;
   }
@@ -57,6 +61,7 @@ function saveResult() {
     title: 'Информация',
     message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
   });
+  isModalVisible.value = true
 }
 
 function cleanResult() {
@@ -107,6 +112,27 @@ useEventListener('keydown', handleKeydown);
     <button
     @click="cleanResult"
   >Очистить</button>
+
+  <MyDialog v-show="isModalVisible" @close="isModalVisible = false">
+    <template #header>
+      <strong v-if="listOfTrips.length">Код готов!</strong>
+      <strong v-else>Код не готов!</strong>
+    </template>
+    <template #body>
+      <p v-if="listOfTrips.length">Это тело модального окна.
+            {{ finallyText }}
+
+      </p>
+      <p v-else>Выстройте маршрут перед сохранением кода.
+      </p>
+    </template>
+    <template #footer>
+      <button type="button"  class="btn-green" @click="isModalVisible = false">Скачать код</button>
+      <button type="button"  class="btn-green" @click="copyToclipboard(finallyText)">Скопировать код</button>
+      <button type="button"  class="btn-green" @click="isModalVisible = false">ОК</button>
+    </template>
+  </MyDialog>
+
 </template>
 
 <style>

src/components/MyDialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop" @click="closeModal">
+      <div class="modal" @click.stop>
+        <header class="modal-header">
+          <slot name="header">
+            <strong>Заголовок по умолчанию</strong>
+          </slot>
+          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+            ×
+          </button>
+        </header>
+        <section class="modal-body">
+          <slot name="body">Тело по умолчанию</slot>
+        </section>
+        <footer class="modal-footer">
+          <slot name="footer">
+            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+          </slot>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+const emit = defineEmits(['close'])
+function closeModal() {
+    emit('close');
+}
+</script>
+
+<style>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: #FFFFFF;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  max-width: 500px;
+  width: 90%;
+  border-radius: 5px;
+}
+
+.modal-header,
+.modal-footer {
+  padding: 10px;
+  display: flex;
+}
+
+.modal-header {
+  border-bottom: 1px solid #eeeeee;
+  color: #4AAE9B;
+  justify-content: space-between;
+}
+
+.modal-footer {
+  border-top: 1px solid #eeeeee;
+  justify-content: flex-end;
+}
+
+.modal-body {
+  position: relative;
+  padding: 20px 10px;
+}
+
+.btn-close {
+  border: none;
+  font-size: 20px;
+  padding: 0;
+  cursor: pointer;
+  font-weight: bold;
+  color: #4AAE9B;
+  background: transparent;
+}
+
+.btn-green {
+  color: white;
+  background: #4AAE9B;
+  border: 1px solid #4AAE9B;
+  border-radius: 2px;
+  padding: 5px;
+  margin: 0 5px;
+}
+
+.modal-fade-enter,
+.modal-fade-leave-active {
+  opacity: 0;
+}
+
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+</style>   

src/copyToclipboard.js

@@ -0,0 +1,17 @@
+import copy from 'copy-to-clipboard';
+import iziToast from '@/iziToast.js';
+
+function copyToclipboard(text) {
+    try {
+        copy(text)
+    } catch (error) {
+        console.error("Ошибка при копировании текста: ", error);
+        iziToast.error({
+            title: 'Ошибка',
+            message: "Ошибка при копировании текста. Подробности смотри в консоли",
+        });
+        return;
+    }
+}
+
+export default copyToclipboard

vite.renderer.config.mjs

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config
 export default defineConfig({
-  plugins: [vue()]
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        },
+    },
 });