shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): status badge Unavailable renamed to Requested

Browse Source 
closes #374
This commit is contained in:
sct
2020-12-24 23:42:12 +09:00
parent 395cbb2be6
commit ed94a0f335
6 changed files with 39 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/MovieDetails/index.tsx
View File

@@ -23,7 +23,6 @@ import {
MediaRequestStatus, MediaRequestStatus,
} from '../../../server/constants/media'; } from '../../../server/constants/media';
import RequestModal from '../RequestModal'; import RequestModal from '../RequestModal';
import Badge from '../Common/Badge';
import ButtonWithDropdown from '../Common/ButtonWithDropdown'; import ButtonWithDropdown from '../Common/ButtonWithDropdown';
import axios from 'axios'; import axios from 'axios';
import SlideOver from '../Common/SlideOver'; import SlideOver from '../Common/SlideOver';
@@ -36,9 +35,9 @@ import RTAudRotten from '../../assets/rt_aud_rotten.svg';
import type { RTRating } from '../../../server/api/rottentomatoes'; import type { RTRating } from '../../../server/api/rottentomatoes';
import Error from '../../pages/_error'; import Error from '../../pages/_error';
import Head from 'next/head'; import Head from 'next/head';
import globalMessages from '../../i18n/globalMessages';
import ExternalLinkBlock from '../ExternalLinkBlock'; import ExternalLinkBlock from '../ExternalLinkBlock';
import { sortCrewPriority } from '../../utils/creditHelpers'; import { sortCrewPriority } from '../../utils/creditHelpers';
import StatusBadge from '../StatusBadge';
const messages = defineMessages({ const messages = defineMessages({
releasedate: 'Release Date', releasedate: 'Release Date',
@@ -217,21 +216,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div> </div>
<div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo?.status === MediaStatus.AVAILABLE && ( <StatusBadge status={data.mediaInfo?.status} />
<Badge badgeType="success">
{intl.formatMessage(globalMessages.available)}
</Badge>
)}
{data.mediaInfo?.status === MediaStatus.PROCESSING && (
<Badge badgeType="danger">
{intl.formatMessage(globalMessages.unavailable)}
</Badge>
)}
{data.mediaInfo?.status === MediaStatus.PENDING && (
<Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)}
</Badge>
)}
</div> </div>
<h1 className="text-2xl lg:text-4xl"> <h1 className="text-2xl lg:text-4xl">
{data.title}{' '} {data.title}{' '}

30
src/components/RequestModal/TvRequestModal.tsx
View File

@@ -223,13 +223,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
} }
> >
<div className="flex flex-col"> <div className="flex flex-col">
<div className="-mx-4 sm:mx-0 overflow-auto max-h-96"> <div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div className="shadow overflow-hidden sm:rounded-lg"> <div className="overflow-hidden shadow sm:rounded-lg">
<table className="min-w-full"> <table className="min-w-full">
<thead> <thead>
<tr> <tr>
<th className="px-4 py-3 bg-gray-500 w-16"> <th className="w-16 px-4 py-3 bg-gray-500">
<span <span
role="checkbox" role="checkbox"
tabIndex={0} tabIndex={0}
@@ -240,7 +240,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
toggleAllSeasons(); toggleAllSeasons();
} }
}} }}
className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none" className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none"
> >
<span <span
aria-hidden="true" aria-hidden="true"
@@ -256,13 +256,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
></span> ></span>
</span> </span>
</th> </th>
<th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider"> <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.season)} {intl.formatMessage(messages.season)}
</th> </th>
<th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider"> <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.numberofepisodes)} {intl.formatMessage(messages.numberofepisodes)}
</th> </th>
<th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider"> <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.status)} {intl.formatMessage(messages.status)}
</th> </th>
</tr> </tr>
@@ -279,7 +279,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
); );
return ( return (
<tr key={`season-${season.id}`}> <tr key={`season-${season.id}`}>
<td className="px-4 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100"> <td className="px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
<span <span
role="checkbox" role="checkbox"
tabIndex={0} tabIndex={0}
@@ -320,17 +320,17 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
></span> ></span>
</span> </span>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100"> <td className="px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
{season.seasonNumber === 0 {season.seasonNumber === 0
? intl.formatMessage(messages.extras) ? intl.formatMessage(messages.extras)
: intl.formatMessage(messages.seasonnumber, { : intl.formatMessage(messages.seasonnumber, {
number: season.seasonNumber, number: season.seasonNumber,
})} })}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200"> <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
{season.episodeCount} {season.episodeCount}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200"> <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
{!seasonRequest && !mediaSeason && ( {!seasonRequest && !mediaSeason && (
<Badge> <Badge>
{intl.formatMessage(messages.notrequested)} {intl.formatMessage(messages.notrequested)}
@@ -346,10 +346,8 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
{!mediaSeason && {!mediaSeason &&
seasonRequest?.status === seasonRequest?.status ===
MediaRequestStatus.APPROVED && ( MediaRequestStatus.APPROVED && (
<Badge badgeType="danger"> <Badge badgeType="primary">
{intl.formatMessage( {intl.formatMessage(globalMessages.requested)}
globalMessages.unavailable
)}
</Badge> </Badge>
)} )}
{!mediaSeason && {!mediaSeason &&

30
src/components/StatusBadge/index.tsx
View File

@@ -5,36 +5,40 @@ import { useIntl } from 'react-intl';
import globalMessages from '../../i18n/globalMessages'; import globalMessages from '../../i18n/globalMessages';
interface StatusBadgeProps { interface StatusBadgeProps {
status: MediaStatus; status?: MediaStatus;
} }
const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => { const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
const intl = useIntl(); const intl = useIntl();
switch (status) {
case MediaStatus.AVAILABLE:
return ( return (
<>
{status === MediaStatus.AVAILABLE && (
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage(globalMessages.available)} {intl.formatMessage(globalMessages.available)}
</Badge> </Badge>
)} );
{status === MediaStatus.PARTIALLY_AVAILABLE && ( case MediaStatus.PARTIALLY_AVAILABLE:
return (
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage(globalMessages.partiallyavailable)} {intl.formatMessage(globalMessages.partiallyavailable)}
</Badge> </Badge>
)} );
{status === MediaStatus.PROCESSING && ( case MediaStatus.PROCESSING:
<Badge badgeType="danger"> return (
{intl.formatMessage(globalMessages.unavailable)} <Badge badgeType="primary">
{intl.formatMessage(globalMessages.requested)}
</Badge> </Badge>
)} );
{status === MediaStatus.PENDING && ( case MediaStatus.PENDING:
return (
<Badge badgeType="warning"> <Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)} {intl.formatMessage(globalMessages.pending)}
</Badge> </Badge>
)}
</>
); );
default:
return null;
}
}; };
export default StatusBadge; export default StatusBadge;

24
src/components/TvDetails/index.tsx
View File

@@ -19,7 +19,6 @@ import { useUser, Permission } from '../../hooks/useUser';
import { TvDetails as TvDetailsType } from '../../../server/models/Tv'; import { TvDetails as TvDetailsType } from '../../../server/models/Tv';
import { MediaStatus } from '../../../server/constants/media'; import { MediaStatus } from '../../../server/constants/media';
import RequestModal from '../RequestModal'; import RequestModal from '../RequestModal';
import Badge from '../Common/Badge';
import ButtonWithDropdown from '../Common/ButtonWithDropdown'; import ButtonWithDropdown from '../Common/ButtonWithDropdown';
import axios from 'axios'; import axios from 'axios';
import SlideOver from '../Common/SlideOver'; import SlideOver from '../Common/SlideOver';
@@ -32,11 +31,11 @@ import RTAudFresh from '../../assets/rt_aud_fresh.svg';
import RTAudRotten from '../../assets/rt_aud_rotten.svg'; import RTAudRotten from '../../assets/rt_aud_rotten.svg';
import type { RTRating } from '../../../server/api/rottentomatoes'; import type { RTRating } from '../../../server/api/rottentomatoes';
import Head from 'next/head'; import Head from 'next/head';
import globalMessages from '../../i18n/globalMessages';
import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb'; import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb';
import ExternalLinkBlock from '../ExternalLinkBlock'; import ExternalLinkBlock from '../ExternalLinkBlock';
import { sortCrewPriority } from '../../utils/creditHelpers'; import { sortCrewPriority } from '../../utils/creditHelpers';
import { Crew } from '../../../server/models/common'; import { Crew } from '../../../server/models/common';
import StatusBadge from '../StatusBadge';
const messages = defineMessages({ const messages = defineMessages({
firstAirDate: 'First Air Date', firstAirDate: 'First Air Date',
@@ -237,26 +236,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</div> </div>
<div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo?.status === MediaStatus.AVAILABLE && ( <StatusBadge status={data.mediaInfo?.status} />
<Badge badgeType="success">
{intl.formatMessage(globalMessages.available)}
</Badge>
)}
{data.mediaInfo?.status === MediaStatus.PARTIALLY_AVAILABLE && (
<Badge badgeType="success">
{intl.formatMessage(globalMessages.partiallyavailable)}
</Badge>
)}
{data.mediaInfo?.status === MediaStatus.PROCESSING && (
<Badge badgeType="danger">
{intl.formatMessage(globalMessages.unavailable)}
</Badge>
)}
{data.mediaInfo?.status === MediaStatus.PENDING && (
<Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)}
</Badge>
)}
</div> </div>
<h1 className="text-2xl lg:text-4xl"> <h1 className="text-2xl lg:text-4xl">
<span>{data.name}</span> <span>{data.name}</span>

1
src/i18n/globalMessages.ts
View File

@@ -5,6 +5,7 @@ const globalMessages = defineMessages({
partiallyavailable: 'Partially Available', partiallyavailable: 'Partially Available',
processing: 'Processing', processing: 'Processing',
unavailable: 'Unavailable', unavailable: 'Unavailable',
requested: 'Requested',
pending: 'Pending', pending: 'Pending',
declined: 'Declined', declined: 'Declined',
approved: 'Approved', approved: 'Approved',

1
src/i18n/locale/en.json
View File

@@ -380,6 +380,7 @@
"i18n.partiallyavailable": "Partially Available", "i18n.partiallyavailable": "Partially Available",
"i18n.pending": "Pending", "i18n.pending": "Pending",
"i18n.processing": "Processing…", "i18n.processing": "Processing…",
"i18n.requested": "Requested",
"i18n.tvshows": "Series", "i18n.tvshows": "Series",
"i18n.unavailable": "Unavailable", "i18n.unavailable": "Unavailable",
"pages.internalServerError": "{statusCode} - Internal Server Error", "pages.internalServerError": "{statusCode} - Internal Server Error",