traxxx-web/components/settings/settings.vue

88 lines
1.8 KiB
Vue
Raw Normal View History

<template>
<Dialog title="Settings">
<div class="dialog-body">
<div class="dialog-section">
<h3 class="dialog-heading">Filter</h3>
<p class="dialog-description">Check the tags that you prefer to be <strong>excluded</strong> from the results. The filter is a courtesy, and provides no guarantees.</p>
<ul class="tags nolist">
<li
v-for="(label, slug) in tags"
:key="`tag-${slug}`"
class="tags-item"
>
<label class="tag noselect">
<Checkbox
:value="slug"
:checked="checkedTags.has(slug)"
class="minus"
@change="(checked) => toggleTag(slug, checked)"
/>{{ label }}
</label>
</li>
</ul>
</div>
</div>
</Dialog>
</template>
<script setup>
import { ref } from 'vue';
import Cookies from 'js-cookie';
import Dialog from '#/components/dialog/dialog.vue';
import Checkbox from '#/components/form/checkbox.vue';
const cookies = Cookies.withConverter({
write: (value) => value,
});
const tags = {
anal: 'anal',
'anal-prolapse': 'anal prolapse',
pissing: 'pissing',
gay: 'gay',
transsexual: 'transsexual',
bisexual: 'bisexual',
bts: 'behind the scenes',
vr: 'virtual reality',
};
const storedTags = cookies.get('tags');
const checkedTags = ref(new Set(storedTags ? JSON.parse(storedTags) : []));
function toggleTag(tag, isChecked) {
if (isChecked) {
checkedTags.value.add(tag);
} else {
checkedTags.value.delete(tag);
}
cookies.set('tags', JSON.stringify(Array.from(checkedTags.value)), { expires: 400 }); // 100 years from now
}
</script>
<style scoped>
.dialog-body {
padding: 1rem;
width: 30rem;
max-width: 100%;
overflow-y: auto;
}
.tags-item {
display: block;
}
.tag {
display: flex;
padding: .5rem 0;
text-transform: capitalize;
.check-container {
margin-right: 1rem;
}
}
</style>