tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 11:50:14 +00:00
Code Issues Projects Releases Wiki Activity

Fixed button margin & pagination testing

Browse Source
This commit is contained in:
n8detar 2022-04-20 09:37:33 -07:00
parent 950f83cd52
commit 54882b744d
1 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
tubearchivist/www/src/pages/download.tsx
View File

@ -19,11 +19,13 @@ import { getTAUrl } from "../lib/constants";
const TA_BASE_URL = getTAUrl(); const TA_BASE_URL = getTAUrl();
type ViewStyle = "grid" | "list"; type ViewStyle = "grid" | "list";
type Page = number;
type IgnoredStatus = boolean; type IgnoredStatus = boolean;
type FormHidden = boolean; type FormHidden = boolean;
type ErrorMessage = boolean; type ErrorMessage = boolean;
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const session = await getSession(context); const session = await getSession(context);
@ -55,7 +57,6 @@ const Download: NextPage = () => {
const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false); const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
const [formHidden, setFormHidden] = useState<FormHidden>(true); const [formHidden, setFormHidden] = useState<FormHidden>(true);
const { const {
data: downloads, data: downloads,
error, error,
@ -73,18 +74,18 @@ const Download: NextPage = () => {
const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads); const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads);
const [errorMessage, setErrorMessage] = useState<ErrorMessage>(false); const [errorMessage, setErrorMessage] = useState<ErrorMessage>(false);
const [page, setPage] = useState<Page>(1);
const handleSetViewstyle = (selectedViewStyle: ViewStyle) => { const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
setViewStyle(selectedViewStyle); setViewStyle(selectedViewStyle);
}; };
const handleSetIgnoredStatus = (selectedIgnoredStatus: IgnoredStatus) => { const handleSetIgnoredStatus = (selectedIgnoredStatus: IgnoredStatus) => {
// ignoredStatus = !ignoredStatus;
setIgnoredStatus(selectedIgnoredStatus); setIgnoredStatus(selectedIgnoredStatus);
refetch(); refetch();
}; };
const handleSetFormHidden = (selectedFormHidden: FormHidden) => { const handleSetFormHidden = (selectedFormHidden: FormHidden) => {
setFormHidden(selectedFormHidden); setFormHidden(selectedFormHidden);
}; };
@ -93,6 +94,12 @@ const Download: NextPage = () => {
setErrorMessage(selectedErrorMessage); setErrorMessage(selectedErrorMessage);
}; };
const handleSetPage = (selectedPage: Page) => {
console.log(page);
setPage(selectedPage);
console.log(page);
};
const addToDownloadQueue = event => { const addToDownloadQueue = event => {
event.preventDefault(); event.preventDefault();
sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true)); sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true));
@ -225,23 +232,27 @@ const Download: NextPage = () => {
</div> </div>
</div> </div>
<div className="view-icons"> <div className="view-icons">
<NextImage <div className="view-icons-margin">
width={30} <NextImage
height={34} width={30}
src={GridViewIcon} height={34}
alt="grid view" src={GridViewIcon}
title="Switch to grid view" alt="grid view"
onClick={() => handleSetViewstyle("grid")} title="Switch to grid view"
/> onClick={() => handleSetViewstyle("grid")}
/>
</div>
{/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */} {/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */}
<NextImage <div className="view-icons-margin">
width={30} <NextImage
height={34} width={30}
src={ListViewIcon} height={34}
alt="list view" src={ListViewIcon}
title="Switch to list view" alt="list view"
onClick={() => handleSetViewstyle("list")} title="Switch to list view"
/> onClick={() => handleSetViewstyle("list")}
/>
</div>
{/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */} {/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */}
</div> </div>
</div> </div>
@ -286,8 +297,8 @@ const Download: NextPage = () => {
{/* <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p> */} {/* <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p> */}
{ignoredStatus && {ignoredStatus &&
<div> <div>
<button data-id={`${video?.youtube_id}`} onClick={() => sendMoveVideoQueuedIgnored(session.ta_token.token, video?.youtube_id, "pending")}>Add to queue</button> <button className="button-padding" title="Move this video to the download queue." onClick={() => sendMoveVideoQueuedIgnored(session.ta_token.token, video?.youtube_id, "pending")}>Add to queue</button>
<button title="Remove video from the ignored list." onClick={() => sendDeleteVideoQueuedIgnored(session.ta_token.token, video?.youtube_id)}>Remove</button> <button className="button-padding" title="Remove this video from the ignored list." onClick={() => sendDeleteVideoQueuedIgnored(session.ta_token.token, video?.youtube_id)}>Remove</button>
</div> </div>
} }
{/* {% if show_ignored_only %} */} {/* {% if show_ignored_only %} */}
@ -295,9 +306,9 @@ const Download: NextPage = () => {
{/* <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button> */} {/* <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button> */}
{!ignoredStatus && {!ignoredStatus &&
<div> <div>
<button data-id={`${video?.youtube_id}`} onClick={() => sendMoveVideoQueuedIgnored(session.ta_token.token, video?.youtube_id, "ignore")}>Ignore</button> <button className="button-padding" title="Ignore this video." onClick={() => sendMoveVideoQueuedIgnored(session.ta_token.token, video?.youtube_id, "ignore")}>Ignore</button>
<button id={`${video?.youtube_id}`} data-id={`${video?.youtube_id}`} onClick={() => console.log("downloadNow(this)")}>Download now</button> <button className="button-padding" title="Download this video now." onClick={() => console.log("downloadNow(this)")}>Download now</button>
<button title="Delete video from the queue." onClick={() => sendDeleteVideoQueuedIgnored(session.ta_token.token, video?.youtube_id)}>Delete</button> <button className="button-padding" title="Delete video from the queue." onClick={() => sendDeleteVideoQueuedIgnored(session.ta_token.token, video?.youtube_id)}>Delete</button>
</div> </div>
} }
{/* {% else %} */} {/* {% else %} */}
@ -342,6 +353,22 @@ const Download: NextPage = () => {
</div> </div>
</div> </div>
<div className="boxed-content">
<div className="pagination">
<a className="pagination-item" onClick={() => handleSetPage(1)}>First</a>
<a className="pagination-item" onClick={() => handleSetPage(2)}>2</a>
<span>&lt; Page 3</span>
<span> &gt;</span>
<a className="pagination-item" onClick={() => handleSetPage(4)}>4</a>
<a className="pagination-item" onClick={() => handleSetPage(5)}> Last (5) </a>
<a className="pagination-item" onClick={() => handleSetPage(5)}> Max (5) </a>
</div>
<div className="pagination">
<a className="pagination-item" href="?page=2">
Last (2)
</a>
</div>
</div>
{/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */} {/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
</Layout> </Layout>
</> </>