admin/probody
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge branch 'miheev-dev' of https://github.com/IliaMiheev/probody into gerasimova-dev

Browse Source
This commit is contained in:
alisagerasimova
2026-03-14 11:13:26 +03:00
parent cdd3d61db2 76bda1c0ee
commit a98a7e8b4f
14 changed files with 411 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/icons/base_square.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

public/icons/blue_square.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

public/icons/plus.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

public/icons/qr_code.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

public/icons/red_square.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

public/icons/trash.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

public/icons/white_square.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

src/App.vue
+99 -61
View File
@@ -1,11 +1,12 @@
<script setup>
import {ref, onMounted} from "vue";
import izitoast from "./izitoast";
import {ref, onMounted, h} from "vue";
import izitoast from "@/shared/izitoast";
import {useEventListener} from "@vueuse/core";
import MyDialog from "./components/MyDialog.vue";
import MyDropMenu from "./components/MyDropMenu.vue";
import copyToclipboard from "./copyToclipboard";
import ContextMenu from '@imengyu/vue3-context-menu'
import MyDialog from "@/components/MyDialog.vue";
import MyDropMenu from "@/components/MyDropMenu.vue";
import copyToclipboard from "@/shared/copyToclipboard";
import ContextMenu from "@imengyu/vue3-context-menu";
import CustomButton from '@/components/UI/CustomButton.vue'
const numbers = ref([]); // Инициализируем массив с пустыми строками
const clickCount = ref(1); // Счетчик нажатий
@@ -36,7 +37,7 @@ function setNumber(item) {
clickCount.value++;
} else {
//если нажимаем на ранее отмеченную клетку, то выводится ошибка
if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
if (item.variable.at(-1) === clickCount.value - 1) {
izitoast.error({
title: "Ошибка",
message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
@@ -44,7 +45,7 @@ function setNumber(item) {
return;
}
listOfTrips.value.push(item);
numbers.value[item.index].variable.push(clickCount.value);
item.variable.push(clickCount.value);
clickCount.value++;
}
}
@@ -89,31 +90,35 @@ async function saveResult() {
finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
if (isUsedPlatform) {
finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
} else {
finallyText.value = finallyText.value.replace("<<ColorDetect>>", '');
}
if (isUsedQR) {
finallyText.value = finallyText.value.replace("<<qr_function>>", QRDetectClass.value);
} else {
finallyText.value = finallyText.value.replace("<<qr_function>>", '');
}
isModalVisible.value = true;}
isModalVisible.value = true;
}
function cancel() {
if (clickCount.value === 1) {
return;
} else {
numbers.value[listOfTrips.value.at(-1).index].variable.pop();
}
listOfTrips.value.at(-1).variable.pop();
listOfTrips.value.pop();
clickCount.value--;
}
}
function cleanResult() {
clickCount.value = 1;
listOfTrips.value.forEach(item => {
item.isPlatform = false;
item.isQR = false;
item.variable = [];
item.BgImg = 'images/ArUco-marker.jpg'
})
listOfTrips.value = [];
for (let i = 0; i < 100; i++) {
numbers.value[i].variable = [];
numbers.value[i].BgImg = 'images/ArUco-marker.jpg'
}
}
// Обрабатываем нажатие Ctrl + Z
@@ -158,43 +163,67 @@ function handleDownloadBtn() {
}
function createPlatform(item, color) {
if (!item.isPlatform) {
if (!item.variable.length) {
item.variable.push(clickCount.value);
listOfTrips.value.push(item)
numbers.value[item.index].variable.push(clickCount.value);
}
item['isPlatform'] = true
numbers.value[item.index].BgImg = `images/${color}-platform.jpg`
clickCount.value++
}
item.isPlatform = true;
item.isQR = false;
item.BgImg = `images/${color}-platform.jpg`
}
function deletePlatform(item) {
item['isPlatform'] = false
const index = listOfTrips.value.indexOf(item);
if (index !== -1) {
listOfTrips.value.splice(index, 1);
}
numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
clickCount.value--
item.BgImg = 'images/ArUco-marker.jpg'
item.isPlatform = false
}
function createQR(item) {
if (!item.isQR) {
if (!item.variable.length) {
item.variable.push(clickCount.value);
listOfTrips.value.push(item)
numbers.value[item.index].variable.push(clickCount.value);
}
item['isQR'] = true
numbers.value[item.index].BgImg = `images/qr.jpg`
clickCount.value++
}
item.isPlatform = false;
item.isQR = true;
item.BgImg = `images/qr.jpg`
}
function deleteQR(item) {
item['isQR'] = false
item.BgImg = 'images/ArUco-marker.jpg'
item.isQR = true
}
function deletePointMap(item) {
const index = listOfTrips.value.indexOf(item);
if (index !== -1) {
listOfTrips.value.splice(index, 1);
const deletedIndex = item.variable.at(-1)
listOfTrips.value.forEach(square => {
square.variable.map(itemVariable => {
if (itemVariable === deletedIndex) {
square.variable = []
}
numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
if (itemVariable > deletedIndex) {
square.variable[square.variable.indexOf(itemVariable)]--
}
})
})
listOfTrips.value.splice(index, 1);
clickCount.value--
item.isQR = false
item.isPlatform = false
item.BgImg = 'images/ArUco-marker.jpg'
}
}
function createIcon(src) {
return h('img', {
src: src,
style: {
width: '20px',
height: '20px',
}
})
}
function onContextMenu(e, item) {
@@ -204,44 +233,52 @@ function onContextMenu(e, item) {
y: e.y,
items: [
{
label: "Платформы",
label: "Платформа",
icon: createIcon('icons/base_square.webp'),
children: [
{
label: "Белая",
onClick: () => createPlatform(item, 'white'),
icon: createIcon('icons/white_square.webp'),
},
{
label: "Синяя",
onClick: () => createPlatform(item, 'blue'),
icon: createIcon('icons/blue_square.webp'),
},
{
label: "Красная",
onClick: () => createPlatform(item, 'red'),
icon: createIcon('icons/red_square.webp'),
},
{
label: "Удалить",
onClick: () => deletePlatform(item),
icon: createIcon('icons/trash.webp'),
},
]
},
{
label: "QR код",
icon: createIcon('icons/qr_code.png'),
children: [
{
label: "Добавить",
onClick: () => createQR(item)
onClick: () => createQR(item),
icon: createIcon('icons/plus.webp')
},
{
label: "Удалить",
onClick: () => deleteQR(item)
onClick: () => deleteQR(item),
icon: createIcon('icons/trash.webp')
},
],
},
{
label: "Отмена",
onClick: () => {
alert('Здесь ещё предстоит написать код')
}
label: "Удалить",
icon: createIcon('icons/trash.webp'),
onClick: () => deletePointMap(item),
},
]
});
@@ -259,24 +296,27 @@ function onContextMenu(e, item) {
</div>
<div class="actions">
<button @click="saveResult">Сохранить</button>
<button @click="cleanResult">Очистить</button>
<button @click="cancel">Отменить</button>
<custom-button class="actions__btn">Сохранить</custom-button>
<custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
<custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
</div>
<MyDropMenu/>
</div>
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
:is-success=Boolean(listOfTrips.length)>
<MyDialog
v-model:show="isModalVisible"
class="dialogWindow"
:is-success=Boolean(listOfTrips.length)
>
<template #header>
<strong v-if="listOfTrips.length">Код готов!</strong>
<strong v-else>Код не готов!</strong>
</template>
<template #body>
<main>
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
<p v-else>Выстройте маршрут перед сохранением кода.</p>
</template>
</main>
<template #footer>
<div v-if="listOfTrips.length">
<button @click="handleDownloadBtn">Скачать код</button>
@@ -290,6 +330,7 @@ function onContextMenu(e, item) {
<style>
html {
background-image: radial-gradient(#383838e2, #222222);
font-size: 18px;
}
:root {
@@ -345,19 +386,16 @@ html {
}
.actions {
margin-left: 10px;
margin: 3px 0 0 10px;
display: flex;
flex-direction: column;
gap: 10px;
width: 150px;
}
.actions button {
border: 2px solid rgb(251, 251, 251);
padding: 15px 30px;
font-size: 15px;
background-color: #383838;
color: white;
cursor: pointer;
margin: 5px;
transition: 0.3s;
padding: 20px 35px;
//background-color: red;
}
</style>
src/components/MyDialog.vue
+20 -12
View File
@@ -1,21 +1,22 @@
<template>
<transition name="modal-fade">
<div class="modal-backdrop" @click="closeModal">
<div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
<div class="modal" @click.stop>
<header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
<slot name="header">
<strong>Заголовок по умолчанию</strong>
</slot>
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
<button class="modal-btn-close" @click.stop="$emit('update:show', false)"
aria-label="Закрыть модальное окно">
×
</button>
</header>
<section class="modal-body">
<slot name="body">Тело по умолчанию</slot>
<slot>Тело по умолчанию</slot>
</section>
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
<slot name="footer">
<button @click="closeModal">Закрыть</button>
<button @click.stop="$emit('update:show', false)">Закрыть</button>
</slot>
</footer>
</div>
@@ -24,16 +25,16 @@
</template>
<script setup>
const emit = defineEmits(['close'])
const props = defineProps({
isSuccess: {
type: Boolean,
required: true
},
show: {
type: Boolean,
default: false
}
})
function closeModal() {
emit('close');
}
</script>
<style>
@@ -47,6 +48,7 @@ function closeModal() {
display: flex;
justify-content: center;
align-items: center;
z-index: 501;
}
.modal {
@@ -70,14 +72,16 @@ function closeModal() {
border-bottom: 1px solid #eeeeee;
justify-content: space-between;
}
.modal-header-success {
color: #4AAE9B;
}
.modal-header-error {
color: red;
}
.modal-header [type = 'button'] {
.modal-header button {
color: red;
font-size: 25px;
}
@@ -86,17 +90,21 @@ function closeModal() {
justify-content: flex-end;
border-top: 1px solid white;
}
.modal-footer [type = 'button'] {
.modal-footer button {
justify-content: flex-end;
border-top: 1px solid white;
padding: 5px;
color: white;
}
.modal-footer-success [type = 'button'] {
.modal-footer-success button {
background-color: #4AAE9B;
border: none;
margin: 3px;
}
.modal-footer-error [type = 'button'] {
.modal-footer-error button {
background: red;
border: none;
}
src/components/MyDropMenu.vue
+120 -20
View File
@@ -25,20 +25,37 @@
</div>
<nav class="menu-content">
<a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
<slot>
<p class="placeholder">Здесь будут ваши ссылки...</p>
</slot>
<custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
</nav>
</aside>
</transition>
<MyDialog
isSuccess
v-model:show="isModalVisible"
>
<template #header>
<strong>{{ infoCard.title }}</strong>
</template>
<main>
<p>{{ infoCard.body }}</p>
</main>
<template #footer>
<custom-button title="Посмотреть на stepike">Курс</custom-button>
<custom-button title="Посмотреть в официальной документации">Документация</custom-button>
<custom-button>ОК</custom-button>
</template>
</MyDialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import {ref} from 'vue';
import MyDialog from "@/components/MyDialog.vue";
import CustomButton from '@/components/UI/CustomButton.vue'
const isOpen = ref(false);
const isModalVisible = ref(false);
const infoCard = ref({})
const toggleMenu = () => {
isOpen.value = !isOpen.value;
@@ -48,8 +65,76 @@ const closeMenu = () => {
isOpen.value = false;
};
function openInfoCard(obj) {
isModalVisible.value = true
infoCard.value = obj
}
const links = [
{
title: 'Что такое ROS?',
body: 'ROS — переводится как robot operation system',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '2',
body: 'Информация для учащихся 2',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '3',
body: 'Информация для учащихся 3',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '4',
body: 'Информация для учащихся 4',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '5',
body: 'Информация для учащихся 5',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '6',
body: 'Информация для учащихся 6',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '7',
body: 'Информация для учащихся 7',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '8',
body: 'Информация для учащихся 8',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '9',
body: 'Информация для учащихся 9',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
{
title: '0',
body: 'Информация для учащихся 0',
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
hrefToCourse: 'https://stepic.org'
},
]
// Экспортируем методы, если захотим управлять меню извне
defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
defineExpose({open: () => (isOpen.value = true), close: closeMenu});
</script>
<style scoped>
@@ -68,9 +153,11 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
cursor: pointer;
padding: 5px;
}
h1{
h1 {
text-align: center;
}
.line {
width: 100%;
height: 4px;
@@ -79,9 +166,17 @@ h1{
}
/* Анимация бургера в крестик */
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-active .line:nth-child(2) { opacity: 0; }
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.is-active .line:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.is-active .line:nth-child(2) {
opacity: 0;
}
.is-active .line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Боковая панель */
.side-panel {
@@ -89,10 +184,11 @@ h1{
top: 0;
left: 0;
width: 300px;
height: 100vh;
height: 100%;
background: white;
z-index: 1000;
padding: 0 20px 20px;
overflow-y: scroll;
}
/* Затемнение фона */
@@ -102,19 +198,23 @@ h1{
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
z-index: 2;
}
/* Анимации появления */
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s ease;
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-enter-from, .slide-leave-to {
transform: translateX(-100%);
}
.placeholder {
color: #00e44c;
/* цвет текста */
font-style: italic;
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
src/components/UI/CustomButton.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup>
const props = defineProps({
isSuccess: {
type: Boolean,
required: true
},
to: {
type: String,
default: null
}
})
</script>
<template>
<a v-if="to" :href="props.to" class="btn">
<slot/>
</a>
<button v-else class="btn">
<slot/>
</button>
</template>
<style scoped>
.btn {
border: 2px solid white;
cursor: pointer;
transition: 0.3s;
padding: 5px;
background-color: #383838;
color: white;
width: 100%;
font-size: 17px;
}
</style>
src/copyToclipboard.js → src/shared/copyToclipboard.js
+1 -1
View File
@@ -1,5 +1,5 @@
import copy from 'copy-to-clipboard';
import iziToast from '@/iziToast.js';
import iziToast from '@/shared/iziToast.js';
function copyToclipboard(text) {
try {
src/izitoast.js → src/shared/izitoast.js
+1 -1
View File
@@ -1,4 +1,4 @@
import iziToast from "izitoast"
import iziToast from 'iziToast';
iziToast.settings({
timeout: 3000,