traxxx-web/components/settings/settings.vue

84 lines
1.6 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="tag in tags"
:key="`tag-${tag}`"
class="tags-item"
>
<label class="tag noselect">
<Checkbox
:checked="checkedTags.has(tag)"
class="minus"
@change="(checked) => toggleTag(tag, checked)"
/>{{ tag }}
</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 prolapse',
'bisexual',
'gay',
'pissing',
'transsexual',
];
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%;
}
.tags-item {
display: block;
}
.tag {
display: flex;
padding: .5rem 0;
text-transform: capitalize;
.check-container {
margin-right: 1rem;
}
}
</style>