180 lines
6.4 KiB
Svelte
180 lines
6.4 KiB
Svelte
|
|
<script lang="ts">
|
|
import '@/popup/scss/settings.scss';
|
|
import { wipeStorage, setSettings } from "@/utils/storage";
|
|
import { mainStore } from '@/utils/store'
|
|
import { navigate } from "@/utils/router";
|
|
import { storageDefault } from '@/utils/storage'
|
|
import { onMount } from "svelte";
|
|
import PageLoader from "@/components/PageLoader.svelte";
|
|
import { clearBadge, reloadExtension, sendSWMessage } from '@/utils/chrome-misc';
|
|
import { DISABLE_RIGHT_CLICK, ENABLE_RIGHT_CLICK } from '@/constants/messeges'
|
|
|
|
let settings: typeof $mainStore['settings'] = null;
|
|
let settingLoading = false;
|
|
|
|
const logout = () => {
|
|
wipeStorage().then(async () => {
|
|
await Promise.all([mainStore.set(storageDefault),
|
|
clearBadge(),
|
|
navigate("/login")]);
|
|
reloadExtension()
|
|
});
|
|
};
|
|
|
|
const setSettingsLocal = async (setting: string, value = '') => {
|
|
settingLoading = true;
|
|
if(value) $mainStore.settings[setting] = value;
|
|
else {
|
|
$mainStore.settings[setting] = !$mainStore.settings[setting];
|
|
}
|
|
settings = $mainStore.settings;
|
|
await setSettings($mainStore.settings);
|
|
switch(setting) {
|
|
case 'enableRightClick':
|
|
if($mainStore.settings[setting]) {
|
|
await sendSWMessage({type: ENABLE_RIGHT_CLICK })
|
|
break;
|
|
}
|
|
await sendSWMessage({type: DISABLE_RIGHT_CLICK })
|
|
break;
|
|
}
|
|
|
|
settingLoading = false;
|
|
};
|
|
|
|
onMount(async () => {
|
|
settings = $mainStore.settings
|
|
console.log(settings)
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
{#if settings}
|
|
<button on:click={() => logout() } class="logout" >
|
|
<svg class="w-5" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<g id=""/><g id=""><g>
|
|
<path fill="#fff" d="M20.9,11.6c-0.1-0.1-0.1-0.2-0.2-0.3l-3-3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3H13c-0.6,0-1,0.4-1,1s0.4,1,1,1h4.6 l-1.3,1.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3-3c0.1-0.1,0.2-0.2,0.2-0.3C21,12.1,21,11.9,20.9,11.6z "/>
|
|
<path fill="#fff" d="M15.5,18.1C14.4,18.7,13.2,19,12,19c-3.9,0-7-3.1-7-7s3.1-7,7-7c1.2,0,2.4,0.3,3.5,0.9c0.5,0.3,1.1,0.1,1.4-0.4 c0.3-0.5,0.1-1.1-0.4-1.4C15.1,3.4,13.6,3,12,3c-5,0-9,4-9,9s4,9,9,9c1.6,0,3.1-0.4,4.5-1.2c0.5-0.3,0.6-0.9,0.4-1.4 C16.6,18,16,17.8,15.5,18.1z"/>
|
|
</g></g>
|
|
</svg> Logout
|
|
</button>
|
|
|
|
<section class="switches-settings flex flex-col w-full justify-center" data-theme="blue">
|
|
<h2 class="text-1xl font-bold">Settings</h2>
|
|
<div class="flex flex-col">
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block">Enable Notifications</span>
|
|
<label aria-hidden class="switch__label mt-2">
|
|
<input type="checkbox" class="switch__input"
|
|
on:click={() => setSettingsLocal('notificationsEnabled')}
|
|
checked={settings.notificationsEnabled}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block switch-txt">Light Theme</span>
|
|
<label class="switch__label mt-2">
|
|
<input type="checkbox" class="switch__input"
|
|
on:click={() => setSettingsLocal('theme', settings.theme === 'light' ? 'dark' : 'light' )}
|
|
checked={settings.theme === 'light'}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block switch-txt">Inject overlay for all websites</span>
|
|
<label class="switch__label mt-2">
|
|
<input type="checkbox" class="switch__input"
|
|
on:click={() => setSettingsLocal('injectEmbed')}
|
|
checked={settings.injectEmbed}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block">Browser notification at reward</span>
|
|
<label aria-hidden class="switch__label mt-2">
|
|
<input type="checkbox" class="switch__input"
|
|
on:click={() => setSettingsLocal('chromeNotifWhenReward')}
|
|
checked={settings.chromeNotifWhenReward}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block">Auto-refill Actions if online</span>
|
|
<label class="switch__label mt-2">
|
|
<input on:click={() => setSettingsLocal('chromeNotifWhenAbleToVote')} type="checkbox" class="switch__input"
|
|
checked={settings.chromeNotifWhenAbleToVote}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block">Enable Right Click rating on page</span>
|
|
<label class="switch__label mt-2">
|
|
<input on:click={() => setSettingsLocal('enableRightClick')} type="checkbox" class="switch__input"
|
|
checked={settings.enableRightClick}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="switch switch--4 text-[0.8rem] flex flex-col mb-4">
|
|
<span class="inline-block">Browser notification if right click rating succeeded</span>
|
|
<label class="switch__label mt-2">
|
|
<input on:click={() => setSettingsLocal('enableRightClickNotif')} type="checkbox" class="switch__input"
|
|
checked={settings.enableRightClickNotif}
|
|
>
|
|
<span class="switch__design"></span>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
{:else}
|
|
<PageLoader />
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
|
|
.switch-txt{
|
|
top: -0.4rem;
|
|
}
|
|
|
|
.logout {
|
|
background: none;
|
|
border: 1px solid #160e0e;
|
|
box-shadow: inset 1px 1px 16px 3px #004985d1;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
padding: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
color: #f0f8ff;
|
|
text-transform: uppercase;
|
|
padding: 0.4rem 1rem;
|
|
margin: auto;
|
|
margin-top: 1rem;
|
|
border-radius: 0.3rem;
|
|
}
|
|
.logout:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.logout:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
</style> |