@ -1,5 +1,5 @@
import React , { useState } from 'react' ;
import React , { useState } from 'react' ;
import { defineMessages , FormattedMessage } from 'react-intl' ;
import { defineMessages , FormattedMessage , useIntl } from 'react-intl' ;
import Badge from '../Common/Badge' ;
import Badge from '../Common/Badge' ;
import Button from '../Common/Button' ;
import Button from '../Common/Button' ;
import useSWR from 'swr' ;
import useSWR from 'swr' ;
@ -31,8 +31,48 @@ const messages = defineMessages({
activeProfile : 'Active Profile' ,
activeProfile : 'Active Profile' ,
addradarr : 'Add Radarr Server' ,
addradarr : 'Add Radarr Server' ,
addsonarr : 'Add Sonarr Server' ,
addsonarr : 'Add Sonarr Server' ,
nodefault : 'No default server selected!' ,
nodefaultdescription :
'At least one server must be marked as default before any requests will make it to your services.' ,
no4kimplemented : '(Default 4K servers are not currently implemented)' ,
} ) ;
} ) ;
const NoDefaultAlert : React.FC = ( ) = > {
const intl = useIntl ( ) ;
return (
< div className = "rounded-md bg-yellow-600 p-4 mb-8" >
< div className = "flex" >
< div className = "flex-shrink-0" >
< svg
className = "h-5 w-5 text-yellow-200"
xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 20 20"
fill = "currentColor"
aria - hidden = "true"
>
< path
fillRule = "evenodd"
d = "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule = "evenodd"
/ >
< / svg >
< / div >
< div className = "ml-3" >
< h3 className = "text-sm font-medium text-yellow-200" >
{ intl . formatMessage ( messages . nodefault ) }
< / h3 >
< div className = "mt-2 text-sm text-yellow-300" >
< p > { intl . formatMessage ( messages . nodefaultdescription ) } < / p >
< p className = "mt-2" >
{ intl . formatMessage ( messages . no4kimplemented ) }
< / p >
< / div >
< / div >
< / div >
< / div >
) ;
} ;
interface ServerInstanceProps {
interface ServerInstanceProps {
name : string ;
name : string ;
isDefault? : boolean ;
isDefault? : boolean ;
@ -249,51 +289,57 @@ const SettingsServices: React.FC = () => {
< div className = "mt-6 sm:mt-5" >
< div className = "mt-6 sm:mt-5" >
{ ! radarrData && ! radarrError && < LoadingSpinner / > }
{ ! radarrData && ! radarrError && < LoadingSpinner / > }
{ radarrData && ! radarrError && (
{ radarrData && ! radarrError && (
< ul className = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" >
< >
{ radarrData . map ( ( radarr ) = > (
{ radarrData . length > 0 &&
< ServerInstance
! radarrData . some (
key = { ` radarr-config- ${ radarr . id } ` }
( radarr ) = > radarr . isDefault && ! radarr . is4k
name = { radarr . name }
) && < NoDefaultAlert / > }
address = { radarr . hostname }
< ul className = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" >
profileName = { radarr . activeProfileName }
{ radarrData . map ( ( radarr ) = > (
isSSL = { radarr . useSsl }
< ServerInstance
isDefault = { radarr . isDefault && ! radarr . is4k }
key = { ` radarr-config- ${ radarr . id } ` }
isDefault4K = { radarr . is4k && radarr . isDefault }
name = { radarr . name }
onEdit = { ( ) = > setEditRadarrModal ( { open : true , radarr } ) }
address = { radarr . hostname }
onDelete = { ( ) = >
profileName = { radarr . activeProfileName }
setDeleteServerModal ( {
isSSL = { radarr . useSsl }
open : true ,
isDefault = { radarr . isDefault && ! radarr . is4k }
serverId : radarr.id ,
isDefault4K = { radarr . is4k && radarr . isDefault }
type : 'radarr' ,
onEdit = { ( ) = > setEditRadarrModal ( { open : true , radarr } ) }
} )
onDelete = { ( ) = >
}
setDeleteServerModal ( {
/ >
open : true ,
) ) }
serverId : radarr.id ,
< li className = "col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32" >
type : 'radarr' ,
< div className = "flex items-center justify-center w-full h-full" >
} )
< Button
buttonType = "ghost"
onClick = { ( ) = >
setEditRadarrModal ( { open : true , radarr : null } )
}
}
>
/ >
< svg
) ) }
className = "w-5 h-5 mr-1"
< li className = "col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32" >
fill = "currentColor"
< div className = "flex items-center justify-center w-full h-full" >
viewBox = "0 0 20 20"
< Button
xmlns = "http://www.w3.org/2000/svg"
buttonType = "ghost"
onClick = { ( ) = >
setEditRadarrModal ( { open : true , radarr : null } )
}
>
>
< path
< svg
fillRule = "evenodd"
className = "w-5 h-5 mr-1"
d = "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
fill = "currentColor"
clipRule = "evenodd"
viewBox = "0 0 20 20"
/ >
xmlns = "http://www.w3.org/2000/svg"
< / svg >
>
< FormattedMessage { ...messages.addradarr } / >
< path
< / Button >
fillRule = "evenodd"
< / div >
d = "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
< / li >
clipRule = "evenodd"
< / ul >
/ >
< / svg >
< FormattedMessage { ...messages.addradarr } / >
< / Button >
< / div >
< / li >
< / ul >
< / >
) }
) }
< / div >
< / div >
< div className = "mt-10" >
< div className = "mt-10" >
@ -307,52 +353,58 @@ const SettingsServices: React.FC = () => {
< div className = "mt-6 sm:mt-5" >
< div className = "mt-6 sm:mt-5" >
{ ! sonarrData && ! sonarrError && < LoadingSpinner / > }
{ ! sonarrData && ! sonarrError && < LoadingSpinner / > }
{ sonarrData && ! sonarrError && (
{ sonarrData && ! sonarrError && (
< ul className = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" >
< >
{ sonarrData . map ( ( sonarr ) = > (
{ sonarrData . length > 0 &&
< ServerInstance
! sonarrData . some (
key = { ` sonarr-config- ${ sonarr . id } ` }
( sonarr ) = > sonarr . isDefault && ! sonarr . is4k
name = { sonarr . name }
) && < NoDefaultAlert / > }
address = { sonarr . hostname }
< ul className = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" >
profileName = { sonarr . activeProfileName }
{ sonarrData . map ( ( sonarr ) = > (
isSSL = { sonarr . useSsl }
< ServerInstance
isSonarr
key = { ` sonarr-config- ${ sonarr . id } ` }
isDefault4K = { sonarr . isDefault && sonarr . is4k }
name = { sonarr . name }
isDefault = { sonarr . isDefault && ! sonarr . is4k }
address = { sonarr . hostname }
onEdit = { ( ) = > setEditSonarrModal ( { open : true , sonarr } ) }
profileName = { sonarr . activeProfileName }
onDelete = { ( ) = >
isSSL = { sonarr . useSsl }
setDeleteServerModal ( {
isSonarr
open : true ,
isDefault4K = { sonarr . isDefault && sonarr . is4k }
serverId : sonarr.id ,
isDefault = { sonarr . isDefault && ! sonarr . is4k }
type : 'sonarr' ,
onEdit = { ( ) = > setEditSonarrModal ( { open : true , sonarr } ) }
} )
onDelete = { ( ) = >
}
setDeleteServerModal ( {
/ >
open : true ,
) ) }
serverId : sonarr.id ,
< li className = "col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32" >
type : 'sonarr' ,
< div className = "flex items-center justify-center w-full h-full" >
} )
< Button
buttonType = "ghost"
onClick = { ( ) = >
setEditSonarrModal ( { open : true , sonarr : null } )
}
}
>
/ >
< svg
) ) }
className = "w-5 h-5 mr-1"
< li className = "col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32" >
fill = "currentColor"
< div className = "flex items-center justify-center w-full h-full" >
viewBox = "0 0 20 20"
< Button
xmlns = "http://www.w3.org/2000/svg"
buttonType = "ghost"
onClick = { ( ) = >
setEditSonarrModal ( { open : true , sonarr : null } )
}
>
>
< path
< svg
fillRule = "evenodd"
className = "w-5 h-5 mr-1"
d = "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
fill = "currentColor"
clipRule = "evenodd"
viewBox = "0 0 20 20"
/ >
xmlns = "http://www.w3.org/2000/svg"
< / svg >
>
< FormattedMessage { ...messages.addsonarr } / >
< path
< / Button >
fillRule = "evenodd"
< / div >
d = "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
< / li >
clipRule = "evenodd"
< / ul >
/ >
< / svg >
< FormattedMessage { ...messages.addsonarr } / >
< / Button >
< / div >
< / li >
< / ul >
< / >
) }
) }
< / div >
< / div >
< / >
< / >