MrDanil/ToDo
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Доработка приложение, исправление ошибок

Browse Source
This commit is contained in:
Danil
2024-07-10 09:20:37 +07:00
parent 95b3e979ad
commit ad1795ba01
7 changed files with 101 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api.html
-12
View File
@@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Api</title>
</head>
<body>
<div id="app_api"></div>
<script type="module" src="/src/api_window.js"></script>
</body>
</html>
src-tauri/src/main.rs
-20
View File
@@ -13,25 +13,6 @@ use std::thread;
#[path="config.rs"] mod config; #[path="config.rs"] mod config;
#[path="enc_dec_file.rs"] mod enc_dec_file; #[path="enc_dec_file.rs"] mod enc_dec_file;
#[tauri::command]
fn open_api_window(app_handle: tauri::AppHandle){
thread::spawn(move || {
match tauri::WindowBuilder::new(
&app_handle,
"api",
tauri::WindowUrl::App("api.html".into())
).title("Api")
//.skip_taskbar(true)
.decorations(false)
.build() {
Ok(_) => {}
Err(_) => {
//println!("{err}");
}
}
});
}
fn main() { fn main() {
std::env::set_var("WEBKIT_DISABLE_DMABUF_RENDERER", "1"); std::env::set_var("WEBKIT_DISABLE_DMABUF_RENDERER", "1");
tauri::Builder::default() tauri::Builder::default()
@@ -53,7 +34,6 @@ fn main() {
tasks::edit_task, tasks::edit_task,
tasks::delete_task, tasks::delete_task,
tasks::set_task_field, tasks::set_task_field,
open_api_window,
multi_tcp_listener::start_tcp_server, multi_tcp_listener::start_tcp_server,
multi_tcp_listener::get_status, multi_tcp_listener::get_status,
multi_tcp_listener::send_command_to_server, multi_tcp_listener::send_command_to_server,
src-tauri/tauri.conf.json
+3 -3
View File
@@ -7,7 +7,7 @@
}, },
"package": { "package": {
"productName": "to-do-app", "productName": "to-do-app",
"version": "1.5.0" "version": "1.6.0"
}, },
"tauri": { "tauri": {
"allowlist": { "allowlist": {
@@ -30,10 +30,10 @@
}, },
"windows": [ "windows": [
{ {
"title": "To Do List",
"width": 800, "width": 800,
"height": 600, "height": 600,
"decorations": false "decorations": false,
"title": "To Do List"
} }
], ],
"security": { "security": {
src/ApiApp.vue
+3 -4
View File
@@ -110,10 +110,9 @@ function select_input(event){
<template> <template>
<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"> <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"> <div @click="$emit('close')" class="fixed left-0 top-0.5 text-lg dark:text-white cursor-pointer" title="Назад">
<span v-if="!wiki_open">API</span> <Icon icon="material-symbols:arrow-back" width="32" height="32"/>
<span v-else>API Wiki</span> </div>
</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"> <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"/> <Icon class="" icon="mdi:window-minimize" width="20" height="20"/>
</div> </div>
src/App.vue
+93 -85
View File
@@ -10,10 +10,13 @@ import { appWindow } from '@tauri-apps/api/window';
import {useDark, useToggle} from "@vueuse/core"; import {useDark, useToggle} from "@vueuse/core";
import PriorityModal from "./components/modals/PriorityModal.vue"; import PriorityModal from "./components/modals/PriorityModal.vue";
import {listen} from "@tauri-apps/api/event"; import {listen} from "@tauri-apps/api/event";
import ApiApp from "./ApiApp.vue";
const isDark = useDark(); const isDark = useDark();
const toggleDark = useToggle(isDark); const toggleDark = useToggle(isDark);
let api = ref(false);
let tasks = ref({}); let tasks = ref({});
let pending = ref(true); let pending = ref(true);
let api_status = ref(false); let api_status = ref(false);
@@ -140,101 +143,106 @@ function change_priority(id_task, name, priority){
} }
async function open_api(){ function change_api(){
await invoke('open_api_window'); api.value = !api.value;
} }
</script> </script>
<template> <template>
<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"> <div v-if="!api">
<p class="fixed left-2 top-0.5 text-lg dark:text-white">To Do</p> <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">
<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"> <!-- <p class="fixed left-2 top-0.5 text-lg dark:text-white">To Do</p>-->
<Icon class="" icon="mdi:window-minimize" width="20" height="20"/> <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>
<div @click="appWindow.toggleMaximize()" 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-maximize">
<Icon class="" icon="mdi:window-maximize" width="20" height="20"/>
</div>
<div @click="appWindow.close()" 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-close">
<Icon class="" icon="mdi:close" width="26" height="26"/>
</div>
</div> </div>
<div @click="appWindow.toggleMaximize()" 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-maximize"> <div v-if="pending">
<Icon class="" icon="mdi:window-maximize" width="20" height="20"/> <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>
<div @click="appWindow.close()" 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-close"> <div v-else>
<Icon class="" icon="mdi:close" width="26" height="26"/> <button class="absolute bottom-2 left-2 opacity-50 hover:opacity-100" @click="change_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"/>
</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 id="search" class="relative flex h-10 mx-[15vw] lg:mx-[25vw] mt-12">
<div class="!absolute right-1 top-1 z-10">
<button
v-if="search_text !== ''"
@click="search_text = ''; get_tasks()"
class="p-[1px] pt-[1px] pb-[2px] mr-0.5 rounded-lg group text-gray-400 hover:text-gray-500 transition-colors"
type="button"
data-ripple-light="true"
>
<Icon icon="ic:baseline-close" width="26" height="26"/>
</button>
<button
@click="create_modal = !create_modal"
class="p-[1px] pt-[1px] pb-[2px] border-green-400 border-2 rounded-lg group hover:bg-green-400 transition-colors"
type="button"
data-ripple-light="true"
>
<Icon class="group-hover:invert dark:invert" icon="ic:baseline-plus" width="26" height="26"/>
</button>
</div>
<input
v-model="search_text"
type="text"
class="peer h-full w-full rounded-lg border border-blue-gray-200 bg-transparent px-3 py-2.5 pr-20 font-sans text-sm font-normal text-blue-gray-700 dark:text-white dark:border-white outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
:class="{'dark:border-t-[rgb(30,30,30)]': search_text.length}"
placeholder=" "
@input="search_tasks"
/>
<label class="text-gray-400 dark:text-gray-300 focus:text-black before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-lg after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Поиск...
</label>
</div>
<div id="list" class="relative mx-[14vw] lg:mx-[22vw] mt-5">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-500">
<li v-for="task in tasks" :id="task.id" class="flex justify-between gap-x-6 py-5 group/task">
<div @click="set_task_field(task.id, task.completed)" class="inline-flex items-center space-x-2 min-w-0 gap-x-2 group-hover/task:cursor-pointer">
<p class="text-sm flex-none border rounded-full" :class="[ task.completed === 'true' ? 'border-green-500 group-hover:border-green-400' : 'border-gray-300 group-hover:border-gray-500' ]"><Icon class="m-0.5" :class="[ task.completed === 'true' ? 'text-green-500 group-hover:text-green-400' : 'text-gray-50 group-hover:text-gray-500 dark:text-[rgb(30,30,30)]' ]" icon="material-symbols:check" width="20" height="20"/></p>
<div class="min-w-0 flex-auto">
<p class="truncate sm:text-[2vw] lg:text-[1.5vw] xl:text-[1vw] font-semibold leading-6 decoration-2" :class="[ task.completed === 'true' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-gray-300' ]" >{{task.name}}</p>
<p class="truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{task.description}}</p>
</div>
</div>
<div class="shrink-0 group-hover/task:opacity-100 transition-all">
<div class="inline-flex items-center gap-x-1">
<div title="Приоритет" class="mr-4 cursor-pointer drop-shadow-sm dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]" @click="change_priority(task.id, task.name, task.priority)">
<Icon v-if="parseInt(task.priority) === 0" class="opacity-60 dark:text-white text-gray-500" icon="streamline:signal-none-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) > 0 && parseInt(task.priority) < 4" class="opacity-80 text-orange-300" icon="streamline:signal-low-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 4 && parseInt(task.priority) < 7" class="opacity-85 text-amber-500" icon="streamline:signal-medium-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 7 && parseInt(task.priority) < 9" class="opacity-90 text-orange-600" icon="streamline:signal-full-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 9" class="opacity-100 text-red-500" icon="heroicons-solid:exclamation" width="32" height="32"/>
</div>
<p class="mt-0.5 text-xs text-gray-400 mr-2 text-center">{{task.date}}<br>{{task.time}}</p>
<button @click="edit_task(task.id, task.name, task.description, task.priority)" class="group/button border-2 rounded-lg p-1.5 border-green-400/70 hover:bg-green-400 hover:border-green-400 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="mdi:pencil" width="24" height="24" style="color: black"/></button>
<button @click="delete_task(task.id)" class="group/button border-2 rounded-lg p-1.5 border-red-400/70 hover:bg-red-500 hover:border-red-500 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="ic:baseline-delete" width="24" height="24" style="color: black"/></button>
</div>
</div>
</li>
</ul>
</div>
<div v-if="create_modal || edit_modal || priority_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
<CreateModal v-if="create_modal" @close="create_modal = !create_modal"/>
<EditModal v-if="edit_modal" :task_id="to_edit_id" :task_name="to_edit_name" :task_description="to_edit_description" :task_priority="to_edit_priority" @close="edit_modal = !edit_modal"/>
<PriorityModal v-if="priority_modal" :task_id="to_change_id" :task_name="to_change_name" :task_priority="to_change_priority" @close="priority_modal = !priority_modal"/>
</div> </div>
</div> </div>
<div v-if="pending">
<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> <div v-else>
<button class="absolute bottom-2 left-2 opacity-50 hover:opacity-100" @click="open_api()"> <ApiApp @close="change_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"/>
</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 id="search" class="relative flex h-10 mx-[15vw] lg:mx-[25vw] mt-12">
<div class="!absolute right-1 top-1 z-10">
<button
v-if="search_text !== ''"
@click="search_text = ''; get_tasks()"
class="p-[1px] pt-[1px] pb-[2px] mr-0.5 rounded-lg group text-gray-400 hover:text-gray-500 transition-colors"
type="button"
data-ripple-light="true"
>
<Icon icon="ic:baseline-close" width="26" height="26"/>
</button>
<button
@click="create_modal = !create_modal"
class="p-[1px] pt-[1px] pb-[2px] border-green-400 border-2 rounded-lg group hover:bg-green-400 transition-colors"
type="button"
data-ripple-light="true"
>
<Icon class="group-hover:invert dark:invert" icon="ic:baseline-plus" width="26" height="26"/>
</button>
</div>
<input
v-model="search_text"
type="text"
class="peer h-full w-full rounded-lg border border-blue-gray-200 bg-transparent px-3 py-2.5 pr-20 font-sans text-sm font-normal text-blue-gray-700 dark:text-white dark:border-white outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-green-400 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
:class="{'dark:border-t-[rgb(30,30,30)]': search_text.length}"
placeholder=" "
@input="search_tasks"
/>
<label class="text-gray-400 dark:text-gray-300 focus:text-black before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-lg after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-green-400 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-green-400 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-green-400 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Поиск...
</label>
</div>
<div id="list" class="relative mx-[14vw] lg:mx-[22vw] mt-5">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-500">
<li v-for="task in tasks" :id="task.id" class="flex justify-between gap-x-6 py-5 group/task">
<div @click="set_task_field(task.id, task.completed)" class="inline-flex items-center space-x-2 min-w-0 gap-x-2 group-hover/task:cursor-pointer">
<p class="text-sm flex-none border rounded-full" :class="[ task.completed === 'true' ? 'border-green-500 group-hover:border-green-400' : 'border-gray-300 group-hover:border-gray-500' ]"><Icon class="m-0.5" :class="[ task.completed === 'true' ? 'text-green-500 group-hover:text-green-400' : 'text-gray-50 group-hover:text-gray-500 dark:text-[rgb(30,30,30)]' ]" icon="material-symbols:check" width="20" height="20"/></p>
<div class="min-w-0 flex-auto">
<p class="truncate sm:text-[2vw] lg:text-[1.5vw] xl:text-[1vw] font-semibold leading-6 decoration-2" :class="[ task.completed === 'true' ? 'line-through text-gray-400' : 'text-gray-900 dark:text-gray-300' ]" >{{task.name}}</p>
<p class="truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{task.description}}</p>
</div>
</div>
<div class="shrink-0 group-hover/task:opacity-100 transition-all">
<div class="inline-flex items-center gap-x-1">
<div title="Приоритет" class="mr-4 cursor-pointer drop-shadow-sm dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.35)]" @click="change_priority(task.id, task.name, task.priority)">
<Icon v-if="parseInt(task.priority) === 0" class="opacity-60 dark:text-white text-gray-500" icon="streamline:signal-none-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) > 0 && parseInt(task.priority) < 4" class="opacity-80 text-orange-300" icon="streamline:signal-low-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 4 && parseInt(task.priority) < 7" class="opacity-85 text-amber-500" icon="streamline:signal-medium-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 7 && parseInt(task.priority) < 9" class="opacity-90 text-orange-600" icon="streamline:signal-full-solid" width="26" height="26"/>
<Icon v-if="parseInt(task.priority) >= 9" class="opacity-100 text-red-500" icon="heroicons-solid:exclamation" width="32" height="32"/>
</div>
<p class="mt-0.5 text-xs text-gray-400 mr-2 text-center">{{task.date}}<br>{{task.time}}</p>
<button @click="edit_task(task.id, task.name, task.description, task.priority)" class="group/button border-2 rounded-lg p-1.5 border-green-400/70 hover:bg-green-400 hover:border-green-400 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="mdi:pencil" width="24" height="24" style="color: black"/></button>
<button @click="delete_task(task.id)" class="group/button border-2 rounded-lg p-1.5 border-red-400/70 hover:bg-red-500 hover:border-red-500 transition-colors"><Icon class="group-hover/button:invert dark:invert" icon="ic:baseline-delete" width="24" height="24" style="color: black"/></button>
</div>
</div>
</li>
</ul>
</div>
<div v-if="create_modal || edit_modal || priority_modal" class="bg-black w-[100vw] h-full fixed top-0 opacity-70 z-40"/>
<CreateModal v-if="create_modal" @close="create_modal = !create_modal"/>
<EditModal v-if="edit_modal" :task_id="to_edit_id" :task_name="to_edit_name" :task_description="to_edit_description" :task_priority="to_edit_priority" @close="edit_modal = !edit_modal"/>
<PriorityModal v-if="priority_modal" :task_id="to_change_id" :task_name="to_change_name" :task_priority="to_change_priority" @close="priority_modal = !priority_modal"/>
</div> </div>
</template> </template>
src/api_window.js
-4
View File
@@ -1,4 +0,0 @@
import { createApp } from "vue";
import ApiApp from "./ApiApp.vue";
createApp(ApiApp).mount("#app_api");
vite.config.js
+2 -2
View File
@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(async () => ({ export default defineConfig(() => ({
plugins: [vue()], plugins: [vue()],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
@@ -17,5 +17,5 @@ export default defineConfig(async () => ({
// 3. tell vite to ignore watching `src-tauri` // 3. tell vite to ignore watching `src-tauri`
ignored: ["**/src-tauri/**"], ignored: ["**/src-tauri/**"],
}, },
}, }
})); }));