From 0d6974e00d6551d45720efc1be8cf50aeaee3a03 Mon Sep 17 00:00:00 2001 From: Ushie Date: Fri, 3 Mar 2023 12:59:48 +0300 Subject: [PATCH] feat(poll): prevent submission, when there is no selection (#74) --- src/lib/components/atoms/LogoOption.svelte | 14 +-- src/routes/poll/+page.svelte | 133 +++++++++++++-------- 2 files changed, 87 insertions(+), 60 deletions(-) diff --git a/src/lib/components/atoms/LogoOption.svelte b/src/lib/components/atoms/LogoOption.svelte index da1f4db..fb175b2 100644 --- a/src/lib/components/atoms/LogoOption.svelte +++ b/src/lib/components/atoms/LogoOption.svelte @@ -3,9 +3,9 @@ import Modal from './Dialogue.svelte'; import Button from './Button.svelte'; - import next from '$lib/assets/icons/next.svg'; - import previous from '$lib/assets/icons/previous.svg'; - import type { APILogo } from '$lib/types'; + import next from '$lib/assets/icons/next.svg'; + import previous from '$lib/assets/icons/previous.svg'; + import type { APILogo } from '$lib/types'; export let name = ''; export let selected: string[]; @@ -171,11 +171,6 @@ font-weight: 800; } - h6 { - font-size: 0.9rem; - overflow: hidden; - text-overflow: ellipsis; - } .text { width: 100%; white-space: nowrap; @@ -186,8 +181,7 @@ background-color: var(--accent-low-opacity); } - .clicked h2, - .clicked h6 { + .clicked h2 { color: var(--white); } diff --git a/src/routes/poll/+page.svelte b/src/routes/poll/+page.svelte index 8d719a8..1c8f1c2 100644 --- a/src/routes/poll/+page.svelte +++ b/src/routes/poll/+page.svelte @@ -2,15 +2,15 @@ import { onMount } from 'svelte'; import { fly } from 'svelte/transition'; import { expoOut } from 'svelte/easing'; - import type { Logo, LogoAPIResponse } from '$lib/types'; + import type { Logo, LogoAPIResponse } from '$lib/types'; import Modal from '$lib/components/atoms/Dialogue.svelte'; import LogoOption from '$lib/components/atoms/LogoOption.svelte'; import Button from '$lib/components/atoms/Button.svelte'; - interface Selected { - [key: string] : string[]; - } + interface Selected { + [key: string]: string[]; + } let modalOpen = false; let selected: Selected = {}; @@ -37,7 +37,10 @@ let max = logoAmount; let token = ''; let submit = false; - $: finalPage = currentPage >= logoPages; + let allowReviewSelections = false; + $: finalPage = false; + $: min = currentPage * logoAmount; + $: max = min + logoAmount; async function exchange_token(bot_token: string) { const response = await fetch('https://poll.revanced.app/auth/exchange', { @@ -105,12 +108,19 @@ }); function previousPage() { - if (currentPage <= 0) return null; - currentPage--; + if (currentPage <= 0 && !allowReviewSelections) { + if (allowReviewSelections) { + // If the current page is 0 and the user has reached the final page beforehand, go to the final page + currentPage = logoPages - 1; + } else { + // If the current page is 0 and the user has not reached the final page beforehand, return + return; + } + } else { + // If the current page is not 0, go to the previous page + currentPage--; + } submit = false; - - min = currentPage * logoAmount; - max = min + logoAmount; transitionDirection = -5; } @@ -120,23 +130,46 @@ } function nextPage() { - if (currentPage >= logoPages || submit) return null; - currentPage++; + let nextPage = currentPage + 1; - min = currentPage * logoAmount; - max = min + logoAmount; + // If the current page is the last page, set the current page to the first page + if (currentPage >= logoPages - 1) { + currentPage = 0; + } else { + currentPage++; - if (currentPage < logoPages) { - const nextPage = currentPage + 1; - const nextMin = nextPage * logoAmount; - const nextMax = nextMin + logoAmount; - logos.slice(nextMin, nextMax).forEach(({ variants }) => { - variants.forEach((variant) => preloadImage(variant.gdrive_direct_url)); - }); + // If the current page is now the last page, allow review selections and set the current page to the first page + if (currentPage >= logoPages - 1) { + allowReviewSelections = true; + nextPage = 0; + } } + + const nextMin = nextPage * logoAmount; + const nextMax = nextMin + logoAmount; + + logos.slice(nextMin, nextMax).forEach(({ variants }) => { + variants.forEach((variant) => preloadImage(variant.gdrive_direct_url)); + }); transitionDirection = 5; } + function stopReview() { + finalPage = false; + submit = false; + } + + function reviewSelections() { + if (allowReviewSelections) { + finalPage = true; + } + } + + function submitSelection() { + if (ui_selected_count < 1) return null; + submit = true; + } + function clearLogos() { if (submit) { return; @@ -186,7 +219,7 @@

ReVanced

{finalPage ? 'Review selected logos' : 'Select logos'}

- {ui_selected_count}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1} + {ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages}

@@ -195,19 +228,6 @@
- {#each logos.slice(min, max) as { variants, name }} - {#key currentPage} - - - - {/key} - {/each} - {#if finalPage} {#each logos as { variants, name }} {#if selected[name].length != 0} @@ -221,6 +241,19 @@ {/if} {/each} + {:else} + {#each logos.slice(min, max) as { variants, name }} + {#key currentPage} + + + + {/key} + {/each} {/if}
@@ -254,11 +287,21 @@ {/if}
- + {#if !finalPage} + + {/if} + @@ -270,8 +313,8 @@
- This is an approval voting system. Voters can choose any number of logo and variants. The logo that is - selected the most wins. Note that you can only vote once! + This is an approval voting system. Voters can choose any number of logo and variants. The + logo that is selected the most wins. Note that you can only vote once!
@@ -314,11 +357,6 @@ margin-bottom: 0.5rem; } - b { - color: var(--white); - margin-bottom: 1rem; - } - .buttons-container { display: flex; gap: 1rem; @@ -333,11 +371,6 @@ border-top: 1px solid var(--grey-three); } - .information { - text-align: center; - margin-bottom: 1rem; - } - .buttons { display: flex; justify-content: flex-end;