Merge #2
Generated
+16
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
+27
-1
@@ -2,10 +2,15 @@
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -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'),
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user