Compare commits

..

1 Commits

Author SHA1 Message Date
Evgeniy0220 58c276f0de 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
2024-04-19 16:16:59 +05:00
5 changed files with 680 additions and 2 deletions

View File

@ -1,4 +1,4 @@
const theme = { export const theme = {
primary: '#006666', primary: '#006666',
secondary: '#003333', secondary: '#003333',
h1: ` h1: `

View File

@ -0,0 +1,6 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M12.1667 18.2083H8.83342V19.4583H12.1667V18.2083ZM2.79175 12.1667V8.83333H1.54175V12.1667H2.79175ZM18.2084 11.8024V12.1667H19.4584V11.8024H18.2084ZM12.9094 4.3426L16.2084 7.31168L17.0446 6.38256L13.7457 3.41348L12.9094 4.3426ZM19.4584 11.8024C19.4584 10.3954 19.471 9.50458 19.116 8.70748L17.9742 9.216C18.1958 9.71375 18.2084 10.285 18.2084 11.8024H19.4584ZM16.2084 7.31168C17.3362 8.32675 17.7525 8.71833 17.9742 9.216L19.116 8.70748C18.761 7.91034 18.0904 7.32378 17.0446 6.38256L16.2084 7.31168ZM8.85825 2.79167C10.1764 2.79167 10.6738 2.80132 11.1172 2.97144L11.565 1.80442C10.8552 1.53202 10.0817 1.54167 8.85825 1.54167V2.79167ZM13.7457 3.41348C12.8407 2.59898 12.2748 2.07678 11.565 1.80442L11.1172 2.97144C11.5607 3.14161 11.9347 3.4653 12.9094 4.3426L13.7457 3.41348ZM8.83342 18.2083C7.2444 18.2083 6.11551 18.207 5.25912 18.0918C4.42071 17.9792 3.93767 17.7677 3.585 17.4151L2.70112 18.299C3.32476 18.9226 4.11554 19.1993 5.09257 19.3308C6.0516 19.4597 7.27973 19.4583 8.83342 19.4583V18.2083ZM1.54175 12.1667C1.54175 13.7203 1.54042 14.9485 1.66936 15.9075C1.80072 16.8845 2.07748 17.6753 2.70112 18.299L3.585 17.4151C3.23232 17.0624 3.02093 16.5793 2.90822 15.741C2.79307 14.8846 2.79175 13.7557 2.79175 12.1667H1.54175ZM12.1667 19.4583C13.7204 19.4583 14.9486 19.4597 15.9076 19.3308C16.8846 19.1993 17.6754 18.9226 18.2991 18.299L17.4152 17.4151C17.0625 17.7677 16.5794 17.9792 15.7411 18.0918C14.8847 18.207 13.7557 18.2083 12.1667 18.2083V19.4583ZM18.2084 12.1667C18.2084 13.7557 18.2071 14.8846 18.0919 15.741C17.9792 16.5793 17.7678 17.0624 17.4152 17.4151L18.2991 18.299C18.9227 17.6753 19.1994 16.8845 19.3308 15.9075C19.4597 14.9485 19.4584 13.7203 19.4584 12.1667H18.2084ZM2.79175 8.83333C2.79175 7.24432 2.79307 6.11543 2.90822 5.25904C3.02093 4.42063 3.23232 3.93759 3.585 3.58492L2.70112 2.70103C2.07748 3.32468 1.80072 4.11546 1.66936 5.09248C1.54042 6.05152 1.54175 7.27965 1.54175 8.83333H2.79175ZM8.85825 1.54167C7.29623 1.54167 6.0621 1.54035 5.09914 1.66923C4.11868 1.80045 3.32524 2.07692 2.70112 2.70103L3.585 3.58492C3.93719 3.23273 4.42172 3.02104 5.26496 2.90818C6.12571 2.79298 7.26101 2.79167 8.85825 2.79167V1.54167Z" fill="#303030"/>
<path d="M11.3333 2.58333V4.66666C11.3333 6.63084 11.3333 7.61294 11.9434 8.22314C12.5537 8.83333 13.5358 8.83333 15.4999 8.83333H18.8333" stroke="#303030" stroke-width="1.25"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

11
src/images/trash.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5" clip-path="url(#clip0_146_2999)">
<path d="M7.16675 1.75001V2.58334H3.00008C2.53985 2.58334 2.16675 2.95644 2.16675 3.41667V4.25001C2.16675 4.71024 2.53985 5.08334 3.00008 5.08334H18.0001C18.4603 5.08334 18.8334 4.71024 18.8334 4.25001V3.41667C18.8334 2.95644 18.4603 2.58334 18.0001 2.58334H13.8334V1.75001C13.8334 1.28977 13.4603 0.916672 13.0001 0.916672H8.00008C7.53985 0.916672 7.16675 1.28977 7.16675 1.75001Z" fill="#303030"/>
<path d="M3.76929 6.75H17.2306L16.4454 17.3513C16.3486 18.6568 15.2613 19.6667 13.9522 19.6667H7.04774C5.73867 19.6667 4.65127 18.6568 4.55457 17.3513L3.76929 6.75Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_146_2999">
<rect width="20" height="20" fill="white" transform="translate(0.5 0.5)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 875 B

View File

@ -5,6 +5,7 @@ import App from './App.tsx'
import { GlobalStyles } from './assets/globalStyles.ts' import { GlobalStyles } from './assets/globalStyles.ts'
import { darkTheme, lightTheme } from './assets/theme.ts' import { darkTheme, lightTheme } from './assets/theme.ts'
import Layout from './components/layout/Layout.tsx' import Layout from './components/layout/Layout.tsx'
import Backup from './pages/backup.tsx'
const theme = 'light' const theme = 'light'
@ -12,7 +13,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
<ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}> <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
<GlobalStyles /> <GlobalStyles />
<Layout> <Layout>
<App /> <Backup/>
</Layout> </Layout>
</ThemeProvider> </ThemeProvider>
) )

660
src/pages/backup.tsx Normal file
View File

@ -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<string>('option1')
const [checkboxValue, setCheckboxValue] = useState(false)
const [inputValue, setInputValue] = useState('')
const handleOptionChange = (option: string) => {
setSelectedOption(option)
}
return (
<Container>
<Blockcontainer>
<h1>Резервное копирование файлов конфигурации</h1>
<Block>
<BlockRow>
<Module>
<h2>Выберите модуль</h2>
</Module>
<BlockColumn>
<p>Выберите расположение для резервной копии</p>
<Row>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Локальный файл</p>
</RadioButtonTitle>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<DownloadImage />
</FileButton>
</Row>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>FTP-Сервер</p>
</RadioButtonTitle>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Хост'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Имя пользователя'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Пароль'
/>
</InputRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>SSH-Сервер</p>
</RadioButtonTitle>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Хост'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Имя пользователя'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Пароль'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Порт сервера'
/>
</InputRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Загрузить через браузер</p>
</RadioButtonTitle>
</BlockColumn>
</BlockRow>
<BlockColumn>
<p>Включить в резеврную копию</p>
<BlockRow>
<RadioButtonTitle>
<Checkbox value={checkboxValue} onChange={setCheckboxValue} />
<p>Конфигурационные файлы помогатора</p>
</RadioButtonTitle>
<RadioButtonTitle>
<Checkbox value={checkboxValue} onChange={setCheckboxValue} />
<p>Конфигурационные файлы сервера</p>
</RadioButtonTitle>
<RadioButtonTitle>
<Checkbox value={checkboxValue} onChange={setCheckboxValue} />
<p>Перечисленные файлы</p>
</RadioButtonTitle>
</BlockRow>
<BlockRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<DownloadImage />
</FileButton>
</BlockRow>
<BlockRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<TrashImage />
</FileButton>
</BlockRow>
<ButtonRow>
<MainButton>
Запустить резервное копирование
</MainButton>
</ButtonRow>
</BlockColumn>
</Block>
</Blockcontainer>
<Blockcontainer>
<h1>Резервное копирование по расписанию</h1>
<Block>
<h2>Нет запланированных задач</h2>
<ButtonRow>
<MainButton>
Добавить новое запланированное задание
</MainButton>
</ButtonRow>
</Block>
</Blockcontainer>
<Blockcontainer>
<h1>Восстановление</h1>
<Block>
<BlockRow>
<Module>
<h2>Выберите модуль</h2>
</Module>
<BlockColumn>
<p>Выберите расположение резервной копии</p>
<Row>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Локальный файл</p>
</RadioButtonTitle>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<DownloadImage />
</FileButton>
</Row>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>FTP-Сервер</p>
</RadioButtonTitle>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Хост'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Имя пользователя'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Пароль'
/>
</InputRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>SSH-Сервер</p>
</RadioButtonTitle>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Хост'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Имя пользователя'
/>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Пароль'
/>
</InputRow>
<InputRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Порт сервера'
/>
</InputRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Загрузить файл</p>
<FileButton>
<DownloadImage />
</FileButton>
</RadioButtonTitle>
</BlockColumn>
</BlockRow>
<BlockColumn>
<p>Другие файлы для восстановления</p>
<BlockRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<DownloadImage />
</FileButton>
</BlockRow>
<BlockRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Путь к папке'
/>
<FileButton>
<TrashImage />
</FileButton>
</BlockRow>
<ButtonRow>
<MainButton>
Запуск восстановление
</MainButton>
</ButtonRow>
</BlockColumn>
</Block>
</Blockcontainer>
<Blockcontainer>
<h1>Настройки</h1>
<Block>
<BlockColumn>
<p>Использовать подстановку strftime при указании расположения резервной копии?</p>
<BlockRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Да</p>
</RadioButtonTitle>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Нет</p>
</RadioButtonTitle>
</BlockRow>
</BlockColumn>
<BlockColumn>
<p>Выполняется ли замена переменных Помогатора в резервных копиях?</p>
<BlockRow>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Да</p>
</RadioButtonTitle>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>Нет</p>
</RadioButtonTitle>
</BlockRow>
</BlockColumn>
<BlockColumn>
<p>Адрес указываемый в поле "От:" в отправляемых письмах</p>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<p>osgos_pomogator@hostname</p>
</RadioButtonTitle>
<RadioButtonTitle>
<RadioButton
value={selectedOption === 'option1'}
onChange={(isChecked) =>
handleOptionChange(isChecked ? 'option1' : '')
}
name='options'
/>
<ButtonRow>
<MainInput
value={inputValue}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setInputValue(e.target.value)
}
placeholder='Email'
/>
</ButtonRow>
</RadioButtonTitle>
</BlockColumn>
<ButtonRow>
<MainButton>
Сохранить
</MainButton>
</ButtonRow>
</Block>
</Blockcontainer>
</Container>
)
}