From 58c276f0dec61a60de7731a77050eb8ca20cbb40 Mon Sep 17 00:00:00 2001 From: Evgeniy0220 Date: Fri, 19 Apr 2024 16:16:59 +0500 Subject: [PATCH] On branch Evgeniy Changes to be committed: modified: src/assets/theme.ts new file: src/images/file-download.svg new file: src/images/trash.svg modified: src/main.tsx new file: src/pages/backup.tsx --- src/assets/theme.ts | 2 +- src/images/file-download.svg | 6 + src/images/trash.svg | 11 + src/main.tsx | 3 +- src/pages/backup.tsx | 660 +++++++++++++++++++++++++++++++++++ 5 files changed, 680 insertions(+), 2 deletions(-) create mode 100644 src/images/file-download.svg create mode 100644 src/images/trash.svg create mode 100644 src/pages/backup.tsx diff --git a/src/assets/theme.ts b/src/assets/theme.ts index 5c15d55..5f3cad4 100644 --- a/src/assets/theme.ts +++ b/src/assets/theme.ts @@ -1,4 +1,4 @@ -const theme = { +export const theme = { primary: '#006666', secondary: '#003333', h1: ` diff --git a/src/images/file-download.svg b/src/images/file-download.svg new file mode 100644 index 0000000..68b782a --- /dev/null +++ b/src/images/file-download.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/trash.svg b/src/images/trash.svg new file mode 100644 index 0000000..87fe496 --- /dev/null +++ b/src/images/trash.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/main.tsx b/src/main.tsx index 5d2a2ad..3a5f720 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,6 +5,7 @@ import App from './App.tsx' import { GlobalStyles } from './assets/globalStyles.ts' import { darkTheme, lightTheme } from './assets/theme.ts' import Layout from './components/layout/Layout.tsx' +import Backup from './pages/backup.tsx' const theme = 'light' @@ -12,7 +13,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render( - + ) diff --git a/src/pages/backup.tsx b/src/pages/backup.tsx new file mode 100644 index 0000000..943a0d4 --- /dev/null +++ b/src/pages/backup.tsx @@ -0,0 +1,660 @@ +import styled from "styled-components" +import { lightTheme } from "src/assets/theme" +import RadioButton from "src/components/UI/radio-button/RadioButton" +import MainInput from "src/components/UI/input/main-input/MainInput" +import { ChangeEvent, useState } from 'react' +import Checkbox from "src/components/UI/checkbox/Checkbox" +import { ReactComponent as DownloadImage } from "src/images/file-download.svg" +import { ReactComponent as TrashImage } from "src/images/trash.svg" + +type Props = {} + +const Container = styled.div` + padding: 35px 25px; + display: flex; + flex-direction: column; + gap: 25px; +` + +const Blockcontainer = styled.div` + display: flex; + flex-direction: column; + gap: 10px; +` + +const Block = styled.div` + display: flex; + gap: 25px; + flex-direction: column; + padding: 20px; + background-color: ${lightTheme.content_block_bg}; + border-radius: 12px; +` + +const BlockRow = styled.div` + display: flex; + gap: 25px; +` + +const BlockColumn = styled.div` + display: flex; + flex-direction: column; + gap: 15px; + width: 100%; +` + +const Module = styled.div` + h2{ + width: 200px + } +` + +const InputRow = styled.div` + display: flex; + align-items: center; + gap: 15px; + padding-left: 30px; + flex-shrink: 0; +` + +const RadioButtonTitle = styled.div` + display: flex; + gap: 15px; + align-items: center; + flex-shrink: 0; +` + +const Row = styled.div` + display: flex; + align-items: center; + gap: 15px; +` + +const FileButton = styled.button` + padding: 6px 8px; + background-color: white; + border: 1px solid rgba(48, 48, 48, 0.5); + border-radius: 12px; + cursor: pointer; +` +const MainButton = styled.button` + background-color: #006666; + border-radius: 12px; + border: none; + padding: 10px 15px; + color: white; + cursor: pointer; +` + +const ButtonRow = styled.div` + display: flex; + justify-content: flex-start; +` + +export default function Backup({ }: Props) { + + + const [selectedOption, setSelectedOption] = useState('option1') + const [checkboxValue, setCheckboxValue] = useState(false) + const [inputValue, setInputValue] = useState('') + + const handleOptionChange = (option: string) => { + setSelectedOption(option) + } + + return ( + + +

Резервное копирование файлов конфигурации

+ + + +

Выберите модуль

+ + + + +

Выберите расположение для резервной копии

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Локальный файл

+ + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

FTP-Сервер

+ + + + ) => + setInputValue(e.target.value) + } + placeholder='Хост' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Имя пользователя' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Пароль' + /> + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

SSH-Сервер

+ + + + ) => + setInputValue(e.target.value) + } + placeholder='Хост' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Имя пользователя' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Пароль' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Порт сервера' + /> + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Загрузить через браузер

+ + + + + + +

Включить в резеврную копию

+ + + +

Конфигурационные файлы помогатора

+ + + + +

Конфигурационные файлы сервера

+ + + + +

Перечисленные файлы

+ + + + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + + + Запустить резервное копирование + + + + + + + + + +

Резервное копирование по расписанию

+ + +

Нет запланированных задач

+ + + + Добавить новое запланированное задание + + + + + + + + +

Восстановление

+ + + +

Выберите модуль

+ + + + +

Выберите расположение резервной копии

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Локальный файл

+ + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

FTP-Сервер

+ + + + ) => + setInputValue(e.target.value) + } + placeholder='Хост' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Имя пользователя' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Пароль' + /> + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

SSH-Сервер

+ + + + ) => + setInputValue(e.target.value) + } + placeholder='Хост' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Имя пользователя' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Пароль' + /> + + + + ) => + setInputValue(e.target.value) + } + placeholder='Порт сервера' + /> + + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Загрузить файл

+ + + + + + + + + + + +

Другие файлы для восстановления

+ + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + ) => + setInputValue(e.target.value) + } + placeholder='Путь к папке' + /> + + + + + + + + + + Запуск восстановление + + + + + + + + + +

Настройки

+ + + +

Использовать подстановку strftime при указании расположения резервной копии?

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Да

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Нет

+ + + + + + +

Выполняется ли замена переменных Помогатора в резервных копиях?

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Да

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

Нет

+ + + + + + +

Адрес указываемый в поле "От:" в отправляемых письмах

+ + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + +

osgos_pomogator@hostname

+ + + + + handleOptionChange(isChecked ? 'option1' : '') + } + name='options' + /> + + ) => + setInputValue(e.target.value) + } + placeholder='Email' + /> + + + + + + + + Сохранить + + + + + + + ) +} \ No newline at end of file