Автоматизация создания установщика для Arch, доработка API
This commit is contained in:
+53
-35
@@ -8,10 +8,13 @@ import {invoke} from "@tauri-apps/api";
|
||||
import ConfirmModal from "./api_components/ConfirmModal.vue";
|
||||
import {listen} from "@tauri-apps/api/event";
|
||||
import SettingsModal from "./api_components/SettingsModal.vue";
|
||||
import PageHandler from "./api_wiki/PageHandler.vue";
|
||||
|
||||
const isDark = useDark();
|
||||
const toggleDark = useToggle(isDark);
|
||||
|
||||
let wiki_open = ref(false);
|
||||
|
||||
let pending = ref(true);
|
||||
let api_status = ref(false);
|
||||
|
||||
@@ -106,7 +109,11 @@ function select_input(event){
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div data-tauri-drag-region class="z-50 opacity-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
|
||||
<div data-tauri-drag-region class="z-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
|
||||
<p class="fixed left-2 top-0.5 text-lg dark:text-white">
|
||||
<span v-if="!wiki_open">API</span>
|
||||
<span v-else>API Wiki</span>
|
||||
</p>
|
||||
<div @click="appWindow.minimize()" class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-minimize">
|
||||
<Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
|
||||
</div>
|
||||
@@ -121,48 +128,59 @@ function select_input(event){
|
||||
<Icon icon="line-md:loading-twotone-loop" width="96" height="96" class="text-green-500 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="absolute top-10 left-2" @click="open_settings">
|
||||
<Icon icon="material-symbols:settings-outline" width="38" height="38" class="text-zinc-600 dark:text-zinc-200"/>
|
||||
</button>
|
||||
<button class="absolute top-10 right-2" @click="toggleDark()">
|
||||
<Icon v-if="!isDark" class="group-hover:invert text-yellow-400" icon="flowbite:sun-solid" width="38" height="38"/>
|
||||
<Icon v-else class="group-hover:invert text-blue-400" icon="ri:moon-fill" width="38" height="38"/>
|
||||
</button>
|
||||
<div class="mt-8">
|
||||
<p class="text-center dark:text-white">API</p>
|
||||
<div class="grid grid-cols-1 grid-rows-1 sm:grid-cols-2 sm:grid-rows-2 mt-8 sm:mt-2 gap-2.5 dark:text-white md:mt-4 md:mx-16 lg:mt-8 lg:mx-24">
|
||||
<div class="text-center shadow dark:shadow-white mx-4 sm:mx-0 sm:ml-4 rounded-lg p-1">
|
||||
<p class="mb-4">Статус</p>
|
||||
<div v-if="!api_status" class="flex text-center align-middle items-center">
|
||||
<Icon class="text-red-500" icon="oui:dot" width="36" height="36"/>
|
||||
<span>Не подключено</span>
|
||||
<button @click="run_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Запустить</button>
|
||||
</div>
|
||||
<div v-else class="flex text-center align-middle items-center">
|
||||
<Icon class="text-green-500" icon="oui:dot" width="36" height="36"/>
|
||||
<span>Работает</span>
|
||||
<button @click="stop_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Остановить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid text-center shadow dark:shadow-white mx-4 sm:mx-0 sm:mr-4 rounded-lg p-1 justify-center items-center">
|
||||
<div v-if="api_status">
|
||||
<p class="mb-2">Токен подключения</p>
|
||||
<div>
|
||||
<input @click="select_input" size="30" id="token_con" readonly type="password" class="rounded-lg my-0.5 px-2 dark:bg-zinc-700"
|
||||
:value="input_val">
|
||||
<div v-if="!wiki_open">
|
||||
<button class="absolute top-10 left-2" @click="open_settings">
|
||||
<Icon icon="material-symbols:settings-outline" width="38" height="38" class="text-zinc-600 dark:text-zinc-200"/>
|
||||
</button>
|
||||
<div class="mt-8">
|
||||
<div class="mt-[28vh] grid grid-cols-1 grid-rows-3 sm:grid-cols-2 sm:grid-rows-2 gap-2.5 dark:text-white md:mx-16 lg:mx-24">
|
||||
<div class="text-center shadow dark:shadow-white mx-4 sm:mx-0 sm:ml-4 rounded-lg p-1 row-span-1">
|
||||
<p class="mb-4">Статус</p>
|
||||
<div v-if="!api_status" class="flex text-center align-middle items-center">
|
||||
<Icon class="text-red-500" icon="oui:dot" width="36" height="36"/>
|
||||
<span>Не подключено</span>
|
||||
<button @click="run_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Запустить</button>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<button class="text-[15px] m-1 rounded-lg bg-red-500 text-white py-1 px-2" @click="confirm_modal = true">Сгенерировать новый</button>
|
||||
<p id="timer" class="text-xl ml-2"></p>
|
||||
<div v-else class="flex text-center align-middle items-center">
|
||||
<Icon class="text-green-500" icon="oui:dot" width="36" height="36"/>
|
||||
<span>Работает</span>
|
||||
<button @click="stop_api" class="bg-green-500 text-white rounded-lg py-1 px-2 ml-2 hover:bg-green-600 transition-colors">Остановить</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="underline decoration-red-500 decoration-2 underline-offset-2">Нет подключения</p>
|
||||
<div class="grid text-center shadow dark:shadow-white mx-4 sm:mx-0 sm:mr-4 rounded-lg p-1 justify-center items-center row-start-2 sm:row-span-1">
|
||||
<div v-if="api_status">
|
||||
<p class="mb-2">Токен подключения</p>
|
||||
<div>
|
||||
<input @click="select_input" size="30" id="token_con" readonly type="password" class="rounded-lg my-0.5 px-2 dark:bg-zinc-700"
|
||||
:value="input_val">
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<button class="text-[15px] m-1 rounded-lg bg-red-500 text-white py-1 px-2" @click="confirm_modal = true">Сгенерировать новый</button>
|
||||
<p id="timer" class="text-xl ml-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="underline decoration-red-500 decoration-2 underline-offset-2">Нет подключения</p>
|
||||
</div>
|
||||
<div @click="wiki_open = true" class="cursor-pointer group mt-2 text-center shadow dark:shadow-white hover:shadow-md dark:hover:shadow-white ml-4 mr-6 sm:mr-4 rounded-lg p-1 col-start-1 col-end-3 row-start-3 sm:row-span-2">
|
||||
<Icon class="mt-1 text-zinc-800 dark:text-zinc-100 mx-auto" icon="mingcute:question-line" width="48" height="48"/>
|
||||
<p class="text-xl mt-1 mb-2.5 group-hover:underline">Как этим пользоваться?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="confirm_modal || settings_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
|
||||
<ConfirmModal v-if="confirm_modal" @close="confirm_modal = false" @yes="regen_token"/>
|
||||
<SettingsModal v-if="settings_modal" @close="settings_modal = false" :autostart="settings_autostart" :port="settings_port"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="absolute top-10 left-2" @click="wiki_open = false">
|
||||
<Icon icon="material-symbols:arrow-back" width="38" height="38" class="text-zinc-600 dark:text-zinc-200"/>
|
||||
</button>
|
||||
<PageHandler/>
|
||||
</div>
|
||||
<div v-if="confirm_modal || settings_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
|
||||
<ConfirmModal v-if="confirm_modal" @close="confirm_modal = false" @yes="regen_token"/>
|
||||
<SettingsModal v-if="settings_modal" @close="settings_modal = false" :autostart="settings_autostart" :port="settings_port"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -178,7 +196,7 @@ function select_input(event){
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
background-color: rgb(246 247 248);
|
||||
background-color: rgb(244 245 246);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -188,6 +206,6 @@ function select_input(event){
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
background-color: rgb(30, 30, 30);
|
||||
background-color: rgb(35, 35, 35);
|
||||
}
|
||||
</style>
|
||||
+3
-2
@@ -147,7 +147,8 @@ async function open_api(){
|
||||
|
||||
|
||||
<template>
|
||||
<div data-tauri-drag-region class="z-50 opacity-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
|
||||
<div data-tauri-drag-region class="z-50 titlebar h-[30px] select-none fixed flex justify-end top-0 right-0 left-0 bg-gray-100 dark:bg-zinc-800">
|
||||
<p class="fixed left-2 top-0.5 text-lg dark:text-white">To Do</p>
|
||||
<div @click="appWindow.minimize()" class="titlebar-button hover:bg-gray-200 dark:hover:bg-gray-700 justify-center inline-flex w-[30px] h-[30px] items-center dark:text-white" id="titlebar-minimize">
|
||||
<Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
|
||||
</div>
|
||||
@@ -162,7 +163,7 @@ async function open_api(){
|
||||
<Icon icon="line-md:loading-twotone-loop" width="96" height="96" class="text-green-500 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button class="absolute bottom-2 left-2" @click="open_api()">
|
||||
<button class="absolute bottom-2 left-2 opacity-50 hover:opacity-100" @click="open_api()">
|
||||
<Icon icon="icon-park-outline:earth" width="40" height="40" class="relative text-zinc-400 dark:text-zinc-300"/>
|
||||
<Icon v-if="api_status" class="absolute bottom-4 left-4 text-green-500" icon="oui:dot" width="36" height="36"/>
|
||||
<Icon v-else class="absolute bottom-4 left-4 text-red-500" icon="oui:dot" width="36" height="36"/>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<details class="group pt-1 text-md border-gray-400 open:border open:px-1 open:py-1">
|
||||
<summary class="flex cursor-pointer flex-row items-center justify-between py-1 font-semibold text-gray-800 marker:[font-size:0px]">
|
||||
<p class="mx-1 dark:text-gray-100 inline-flex items-center"><slot name="title"/></p>
|
||||
<svg class="h-6 w-6 rotate-0 transform text-gray-400 group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</summary>
|
||||
<p class="mx-2 text-gray-700 dark:text-gray-200"><slot name="body"/></p>
|
||||
</details>
|
||||
<hr class="border-gray-400">
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import {Icon} from "@iconify/vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-zinc-400 dark:border-zinc-200 border bg-zinc-300 dark:bg-zinc-700 rounded-2xl p-2 mx-1 my-2 dark:text-gray-100">
|
||||
<div class="flex">
|
||||
<Icon icon="material-symbols:code" width="26" height="26"/>
|
||||
<p class="text-md ml-1 mt-0.5"><slot name="title"/></p>
|
||||
</div>
|
||||
<p class="text-lg m-1 dark:text-gray-100 whitespace-pre-wrap"><slot name="body"/></p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import {Icon} from "@iconify/vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-yellow-500 dark:border-yellow-600 border bg-yellow-50 dark:bg-gray-700 rounded-2xl p-2 m-2 text-yellow-600 dark:text-yellow-300">
|
||||
<div class="flex">
|
||||
<Icon icon="ic:round-warning" width="32" height="32"/>
|
||||
<p class="text-xl ml-1 mt-0.5"><slot name="title"/></p>
|
||||
</div>
|
||||
<p class="text-lg m-1"><slot name="body"/></p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,376 @@
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
import {Icon} from "@iconify/vue";
|
||||
import Warning from "../api_components/notes/Warning.vue";
|
||||
import AccordionElement from "../api_components/AccordionElement.vue";
|
||||
import Code from "../api_components/notes/Code.vue";
|
||||
|
||||
let page = ref('main');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute top-11 left-[50%] translate-x-[-50%] flex text-lg dark:text-white gap-6">
|
||||
<div @click="page = 'main'" title="Основы" class="cursor-pointer border-b-2" :class="[page === 'main' ? 'border-b-black dark:border-b-white': 'border-b-transparent']">
|
||||
<Icon icon="material-symbols:home" width="40" height="40"/>
|
||||
</div>
|
||||
<div @click="page = 'commands'" title="Команды" class="cursor-pointer border-b-2" :class="[page === 'commands' ? 'border-b-black dark:border-b-white': 'border-b-transparent']">
|
||||
<Icon icon="ri:slash-commands-2" width="38" height="38"/>
|
||||
</div>
|
||||
<div @click="page = 'examples'" title="Примеры" class="cursor-pointer border-b-2" :class="[page === 'examples' ? 'border-b-black dark:border-b-white': 'border-b-transparent']">
|
||||
<Icon icon="majesticons:list-box" width="40" height="40"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-24 mx-8 dark:text-white">
|
||||
<div v-if="page === 'main'" class="lg:mx-12 lg:mt-32 xl:mx-24 xl:mt-48">
|
||||
<p class="text-2xl ml-4 leading-9">Что это такое?</p>
|
||||
<hr>
|
||||
<p class="text-lg ml-2 mt-2 leading-8">
|
||||
<span class="font-bold">API</span>(application programming interface) - описание способов, взаимодействия компьютерной программы с другими.
|
||||
API (интерфейс программирования приложения) упрощает процесс программирования при создании приложений, предоставляя только объекты или действия, необходимые разработчику.
|
||||
</p>
|
||||
<Warning>
|
||||
<template v-slot:title>Внимание!</template>
|
||||
<template v-slot:body>
|
||||
Эта программа предоставляет API с защищённым соединением с помощью AES256.
|
||||
Подключение без защиты не удастся. Возможно будет добавлена поддержка незащищённого соединения.
|
||||
</template>
|
||||
</Warning>
|
||||
<hr>
|
||||
<p class="text-lg ml-2 mt-2 leading-10">
|
||||
<span class="flex">Доступные команды описаны на вкладке "Команды" - <Icon class="ml-2" icon="ri:slash-commands-2" width="38" height="38"/></span>
|
||||
<span class="flex">Примеры описаны на вкладке "Примеры" - <Icon class="ml-2" icon="majesticons:list-box" width="40" height="40"/></span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="page === 'commands'" class="lg:mx-12 lg:mt-32 xl:mx-24 xl:mt-48">
|
||||
<p class="text-2xl ml-4 leading-9">Доступные команды</p>
|
||||
|
||||
<div class="px-3 mx-6 mt-0 grid grid-cols-1 gap-y-1">
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-blue-400 rounded-lg py-1 px-2 mr-2">GET</div>
|
||||
status
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для проверки статуса сервера</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "status" <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
200 - сервер работает <br>
|
||||
*нет доступа* - сервер не работает <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-blue-400 rounded-lg py-1 px-2 mr-2">GET</div>
|
||||
get_tasks
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для получения всех задач</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "get_tasks" <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
JSON - список задач <br>
|
||||
400 - неверные параметры запроса <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-blue-400 rounded-lg py-1 px-2 mr-2">GET</div>
|
||||
get_task_by_id
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для получения задачи по id</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "get_task_by_id" <br>
|
||||
 "id": "id задачи" <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span><br>
|
||||
id <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
id задачи <span class="opacity-80">[String]</span><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
JSON - задача <br>
|
||||
null - задача не найдена <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-green-500 rounded-lg py-1 px-2 mr-2">POST</div>
|
||||
create_task
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для создания задачи</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "get_task_by_id" <br>
|
||||
 "task": { <br>
|
||||
  "name": "Новая задача" <br>
|
||||
  "description": "Описание" <br>
|
||||
  "priority": "4" <br>
|
||||
 } <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span><br>
|
||||
task <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
задача <span class="opacity-80">[JSON Object]</span><br>
|
||||
 name <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
  название задачи <span class="opacity-80">[String]</span><br>
|
||||
 description<br>
|
||||
  описание задачи <span class="opacity-80">[String]</span><br>
|
||||
 priority<br>
|
||||
  проритет задачи (0-10) <span class="opacity-80">[String]</span><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
String - id, созданной задачи <br>
|
||||
400 - неверный параметр запроса <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-yellow-500 rounded-lg py-1 px-2 mr-2">PUT</div>
|
||||
edit_task
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для изменения задачи по id</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "edit_task" <br>
|
||||
 "task": { <br>
|
||||
  "id": "2" <br>
|
||||
  "name": "Новая задача" <br>
|
||||
  "description": "Описание" <br>
|
||||
  "priority": "4" <br>
|
||||
 } <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span><br>
|
||||
task <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
задача <span class="opacity-80">[JSON Object]</span><br>
|
||||
 id <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
  id задачи <span class="opacity-80">[String]</span><br>
|
||||
 name <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
  название задачи <span class="opacity-80">[String]</span><br>
|
||||
 description<br>
|
||||
  описание задачи <span class="opacity-80">[String]</span><br>
|
||||
 priority<br>
|
||||
  проритет задачи (0-10) <span class="opacity-80">[String]</span><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
200 - задача изменена <br>
|
||||
400 - неверный параметр запроса <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-red-400 rounded-lg py-1 px-2 mr-2">DELETE</div>
|
||||
delete_task
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для удаления задачи по id</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "delete_task" <br>
|
||||
 "id": "id задачи" <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span><br>
|
||||
id <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
id задачи <span class="opacity-80">[String]</span><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
200 - задача удалена <br>
|
||||
400 - неверный параметр запроса <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
<AccordionElement>
|
||||
<template v-slot:title>
|
||||
<div class="text-white bg-green-500 rounded-lg py-1 px-2 mr-2">POST</div>
|
||||
stop
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<span class="ml-6 text-lg">Функция для выключения API</span>
|
||||
<Code>
|
||||
<template v-slot:title>Структура запроса</template>
|
||||
<template v-slot:body>
|
||||
{ <br>
|
||||
 "command": "stop" <br>
|
||||
} <br>
|
||||
</template>
|
||||
</Code>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Параметры</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-3">
|
||||
<p>
|
||||
command <span class="text-red-500 text-sm">*обязательно</span><br>
|
||||
название команды <span class="opacity-80">[String]</span><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-zinc-400 rounded-xl p-2 mx-1 my-2">
|
||||
<p class="text-lg">Результат</p>
|
||||
<hr>
|
||||
<div class="mx-3">
|
||||
<div class="my-2">
|
||||
<p>
|
||||
200 - API выключается <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionElement>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,18 +1,17 @@
|
||||
<script setup>
|
||||
import {invoke} from "@tauri-apps/api";
|
||||
import {ref} from "vue";
|
||||
import {Icon} from "@iconify/vue";
|
||||
|
||||
let name = "";
|
||||
let description = "";
|
||||
let priority = 0;
|
||||
let priority = ref(0);
|
||||
|
||||
let error = ref(" ");
|
||||
|
||||
async function create_task(){
|
||||
if (name.replace(/ /g,'') === ""){
|
||||
error.value = "Название задачи не может быть пустым!";
|
||||
} else if(priority < 0 || priority > 10){
|
||||
error.value = "Приоритет не может быть меньше 0 или больше 10";
|
||||
} else{
|
||||
let nowDateTime = new Date();
|
||||
let date = nowDateTime.getFullYear() + "." + ('0' + (nowDateTime.getMonth()+1)).slice(-2) + '.'
|
||||
@@ -24,7 +23,7 @@ async function create_task(){
|
||||
time: time,
|
||||
name: name,
|
||||
description: description,
|
||||
priority: priority.toString()
|
||||
priority: priority.value.toString()
|
||||
});
|
||||
|
||||
location.reload();
|
||||
@@ -70,8 +69,12 @@ async function create_task(){
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="priority" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Приоритет</label>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input v-model="priority" type="number" step="1" id="priority" name="priority" class="px-2 py-1.5 block w-48 rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
|
||||
<div class="mt-2 flex gap-3 ml-2">
|
||||
<Icon @click="priority = 0" :class="[priority === 0 ? 'opacity-100' : 'opacity-50']" class="dark:text-white text-gray-500 cursor-pointer" icon="streamline:signal-none-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 1" :class="[priority > 0 && priority < 4 ? 'opacity-100' : 'opacity-50']" class="text-orange-300 cursor-pointer" icon="streamline:signal-low-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 5" :class="[priority >= 4 && priority < 7 ? 'opacity-100' : 'opacity-50']" class="text-amber-500 cursor-pointer" icon="streamline:signal-medium-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 8" :class="[priority >= 7 && priority < 9 ? 'opacity-100' : 'opacity-50']" class="text-orange-600 cursor-pointer" icon="streamline:signal-full-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 10" :class="[priority >= 9 ? 'opacity-100' : 'opacity-50']" class="text-red-500 cursor-pointer" icon="heroicons-solid:exclamation" width="32" height="32"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup>
|
||||
import {invoke} from "@tauri-apps/api";
|
||||
import {Icon} from "@iconify/vue";
|
||||
import {ref} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
task_id: String,
|
||||
@@ -10,14 +12,14 @@ const props = defineProps({
|
||||
|
||||
let name = props.task_name;
|
||||
let description = props.task_description;
|
||||
let priority = parseInt(props.task_priority);
|
||||
let priority = ref(parseInt(props.task_priority));
|
||||
|
||||
async function send_edited_task(){
|
||||
await invoke('edit_task', {
|
||||
idTask: props.task_id,
|
||||
name: name,
|
||||
description: description,
|
||||
priority: priority.toString()
|
||||
priority: priority.value.toString()
|
||||
}).then(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
@@ -60,8 +62,12 @@ async function send_edited_task(){
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="priority" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Приоритет</label>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input v-model="priority" type="number" required min="0" max="10" step="1" id="priority" name="priority" class="px-2 py-1.5 block w-48 rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-inset sm:text-sm sm:leading-6" />
|
||||
<div class="mt-2 flex gap-3 ml-2">
|
||||
<Icon @click="priority = 0" :class="[priority === 0 ? 'opacity-100' : 'opacity-50']" class="dark:text-white text-gray-500 cursor-pointer" icon="streamline:signal-none-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 1" :class="[priority > 0 && priority < 4 ? 'opacity-100' : 'opacity-50']" class="text-orange-300 cursor-pointer" icon="streamline:signal-low-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 5" :class="[priority >= 4 && priority < 7 ? 'opacity-100' : 'opacity-50']" class="text-amber-500 cursor-pointer" icon="streamline:signal-medium-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 8" :class="[priority >= 7 && priority < 9 ? 'opacity-100' : 'opacity-50']" class="text-orange-600 cursor-pointer" icon="streamline:signal-full-solid" width="26" height="26"/>
|
||||
<Icon @click="priority = 10" :class="[priority >= 9 ? 'opacity-100' : 'opacity-50']" class="text-red-500 cursor-pointer" icon="heroicons-solid:exclamation" width="32" height="32"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user