Минимальная заготовка. Без стилей, но уже ведёт расчёты
This commit is contained in:
Ilia Miheev
@@ -90,3 +90,4 @@ typings/
|
|||||||
|
|
||||||
# Electron-Forge
|
# Electron-Forge
|
||||||
out/
|
out/
|
||||||
|
.idea
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Hello World!</title>
|
<title>Hello World!</title>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Generated
+8
-1
@@ -9,7 +9,8 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"electron-squirrel-startup": "^1.0.1"
|
"electron-squirrel-startup": "^1.0.1",
|
||||||
|
"izitoast": "^1.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@electron-forge/cli": "^7.11.1",
|
"@electron-forge/cli": "^7.11.1",
|
||||||
@@ -5404,6 +5405,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
|
"node_modules/izitoast": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
|
||||||
|
"integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
"node_modules/jest-worker": {
|
"node_modules/jest-worker": {
|
||||||
"version": "27.5.1",
|
"version": "27.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
|
||||||
|
|||||||
+2
-1
@@ -29,6 +29,7 @@
|
|||||||
"vite": "^5.4.21"
|
"vite": "^5.4.21"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"electron-squirrel-startup": "^1.0.1"
|
"electron-squirrel-startup": "^1.0.1",
|
||||||
|
"izitoast": "^1.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+95
-5
@@ -1,8 +1,98 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import izitoast from "./izitoast";
|
||||||
|
|
||||||
|
// const numbers = ref(Array(100).fill('')); // Инициализируем массив с пустыми строками
|
||||||
|
const numbers = ref([]); // Инициализируем массив с пустыми строками
|
||||||
|
const clickCount = ref(1); // Счетчик нажатий
|
||||||
|
const listOfTrips = ref([])
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
numbers.value.push({
|
||||||
|
variable: '',
|
||||||
|
x: (i + 1) % 10 === 0 ? 10: (i + 1) % 10,
|
||||||
|
y: 10 - Math.floor(i / 10),
|
||||||
|
index: i
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function setNumber(item) {
|
||||||
|
let valueOfMarker = numbers.value[item.index].variable
|
||||||
|
// Если строка пустая, то ставим счётчик
|
||||||
|
if (valueOfMarker === '') {
|
||||||
|
numbers.value[item.index].variable = clickCount.value;
|
||||||
|
clickCount.value++;
|
||||||
|
}
|
||||||
|
// Если нажали на последнее число, то удаляем его
|
||||||
|
else if (valueOfMarker === clickCount.value - 1) {
|
||||||
|
numbers.value[item.index].variable = '';
|
||||||
|
clickCount.value--;
|
||||||
|
}
|
||||||
|
// Если нажали на уже заполненную клетку, то выводим сообщение
|
||||||
|
else {
|
||||||
|
izitoast.info({
|
||||||
|
title: 'Информация',
|
||||||
|
message: "Удалять можно только последний пункт маршрута"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveResult() {
|
||||||
|
let finallyText = ''
|
||||||
|
const timeArr = numbers.value.reduce((acc, curr) => [curr, ...acc], [])
|
||||||
|
timeArr.map((item)=>{
|
||||||
|
if (item.variable) {
|
||||||
|
listOfTrips.value.push(item)
|
||||||
|
finallyText += `navigate_wait(${item.x}, ${item.y})\n`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(finallyText)
|
||||||
|
// console.log(listOfTrips)
|
||||||
|
izitoast.info({
|
||||||
|
title: 'Информация',
|
||||||
|
message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1>💖 Hello World!</h1>
|
<div class="grid">
|
||||||
<p>Welcome to your Electron application.</p>
|
<div
|
||||||
|
class="square"
|
||||||
|
v-for="(item, index) in numbers"
|
||||||
|
:data-key="index"
|
||||||
|
:key="index"
|
||||||
|
@click="setNumber(item)"
|
||||||
|
>
|
||||||
|
{{ item.variable }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="saveResult"
|
||||||
|
>Сохранить</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<style>
|
||||||
console.log('👋 This message is being logged by "App.vue", included via Vite');
|
.grid {
|
||||||
</script>
|
display: grid;
|
||||||
|
grid-template-columns: repeat(10, 50px);
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
width: 50px; /* Ширина квадрата */
|
||||||
|
height: 50px; /* Высота квадрата */
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square:hover {
|
||||||
|
background-color: #d0d0d0;
|
||||||
|
}
|
||||||
|
.square[data-key='90'] {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import iziToast from "izitoast"
|
||||||
|
|
||||||
|
iziToast.settings({
|
||||||
|
timeout: 3000,
|
||||||
|
closeOnEscape: true,
|
||||||
|
closeOnClick : true,
|
||||||
|
resetOnHover: false,
|
||||||
|
maxWidth: "400px",
|
||||||
|
displayMode: "replace",
|
||||||
|
position: 'topRight',
|
||||||
|
transitionIn: 'flipInX',
|
||||||
|
transitionOut: 'flipOutX',
|
||||||
|
});
|
||||||
|
|
||||||
|
export default iziToast
|
||||||
Reference in New Issue
Block a user