git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 19:01:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add components for arr settings

Browse Source
This commit is contained in:
Sam Chau
2024-09-18 09:26:06 +09:30
parent d1d1296526
commit bc382e91b3
3 changed files with 216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/settings/arrs/ArrCard.jsx Normal file
View File

@@ -0,0 +1,24 @@
// ArrCard.jsx
import React from 'react';
import PropTypes from 'prop-types';
const ArrCard = ({title, icon: Icon, onClick}) => (
<div
className='bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm cursor-pointer hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500 transition-all'
onClick={onClick}>
<div className='flex flex-col items-center justify-center h-32'>
<Icon size={48} className='text-blue-500 mb-2' />
<h3 className='font-bold text-lg text-gray-800 dark:text-gray-200'>
{title}
</h3>
</div>
</div>
);
ArrCard.propTypes = {
title: PropTypes.string.isRequired,
icon: PropTypes.elementType.isRequired,
onClick: PropTypes.func.isRequired
};
export default ArrCard;

57
frontend/src/components/settings/arrs/ArrContainer.jsx Normal file
View File

@@ -0,0 +1,57 @@
// ArrContainer.jsx
import React, {useState} from 'react';
import AddNewCard from '../../ui/AddNewCard';
import ArrModal from './ArrModal';
const ArrContainer = () => {
const [showModal, setShowModal] = useState(false);
const [editingArr, setEditingArr] = useState(null);
const handleAddArr = () => {
setEditingArr(null);
setShowModal(true);
};
const handleEditArr = arr => {
setEditingArr(arr);
setShowModal(true);
};
const handleCloseModal = () => {
setShowModal(false);
setEditingArr(null);
};
const handleSubmit = arrData => {
if (editingArr) {
console.log('Updating arr:', arrData);
// Implement your update logic here
} else {
console.log('Adding new arr:', arrData);
// Implement your add logic here
}
setShowModal(false);
setEditingArr(null);
};
return (
<>
<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4'>
<AddNewCard
onAdd={handleAddArr}
width='200px'
height='200px'
minHeight='200px'
/>
</div>
<ArrModal
isOpen={showModal}
onClose={handleCloseModal}
onSubmit={handleSubmit}
editingArr={editingArr}
/>
</>
);
};
export default ArrContainer;

135
frontend/src/components/settings/arrs/ArrModal.jsx Normal file
View File

@@ -0,0 +1,135 @@
// ArrModal.js
import React, {useState, useEffect} from 'react';
import {Plus, TestTube, Loader, Save} from 'lucide-react';
import Modal from '../../ui/Modal';
const ArrModal = ({isOpen, onClose, onSubmit, editingArr}) => {
const [arrType, setArrType] = useState('');
const [arrName, setArrName] = useState('');
const [apiKey, setApiKey] = useState('');
const [isTestingConnection, setIsTestingConnection] = useState(false);
useEffect(() => {
if (editingArr) {
setArrType(editingArr.type);
setArrName(editingArr.name);
setApiKey(editingArr.apiKey);
} else {
setArrType('');
setArrName('');
setApiKey('');
}
}, [editingArr]);
const handleTestConnection = async () => {
setIsTestingConnection(true);
try {
const result = await testConnection(arrType, apiKey);
if (result.success) {
alert('Connection successful!');
} else {
alert('Connection failed: ' + result.error);
}
} catch (error) {
alert('An error occurred while testing the connection.');
console.error('Error testing connection:', error);
} finally {
setIsTestingConnection(false);
}
};
const handleSubmit = e => {
e.preventDefault();
onSubmit({type: arrType, name: arrName, apiKey});
};
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={editingArr ? 'Edit Arr' : 'Add New Arr'}
size='md'>
<form onSubmit={handleSubmit} className='space-y-4'>
<div>
<label
htmlFor='arrType'
className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
Arr Type
</label>
<select
id='arrType'
value={arrType}
onChange={e => setArrType(e.target.value)}
className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
required>
<option value=''>Select an arr type</option>
<option value='radarr'>Radarr</option>
<option value='sonarr'>Sonarr</option>
<option value='custom'>Custom</option>
</select>
</div>
<div>
<label
htmlFor='arrName'
className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
Arr Name
</label>
<input
type='text'
id='arrName'
value={arrName}
onChange={e => setArrName(e.target.value)}
className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
required
/>
</div>
<div>
<label
htmlFor='apiKey'
className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
API Key
</label>
<input
type='text'
id='apiKey'
value={apiKey}
onChange={e => setApiKey(e.target.value)}
className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'
required
/>
</div>
<div className='flex justify-end space-x-2'>
<button
type='button'
onClick={handleTestConnection}
className='px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200 ease-in-out flex items-center'
disabled={isTestingConnection || !arrType || !apiKey}>
{isTestingConnection ? (
<Loader size={16} className='animate-spin mr-2' />
) : (
<TestTube size={16} className='mr-2' />
)}
Test Connection
</button>
<button
type='submit'
className='px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 ease-in-out flex items-center'>
{editingArr ? (
<>
<Save size={16} className='mr-2' />
Update Arr
</>
) : (
<>
<Plus size={16} className='mr-2' />
Add Arr
</>
)}
</button>
</div>
</form>
</Modal>
);
};
export default ArrModal;