|
|
@ -6,7 +6,10 @@ |
|
|
|
<p class="mb-4 font-bold">Show only activities that are…</p> |
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-2"> |
|
|
|
<div class="flex items-center justify-between cursor-pointer"> |
|
|
|
<div |
|
|
|
class="flex items-center justify-between cursor-pointer" |
|
|
|
@click="toggleContacts()" |
|
|
|
> |
|
|
|
<!-- label --> |
|
|
|
<div>From my contacts</div> |
|
|
|
<!-- toggle --> |
|
|
@ -14,7 +17,7 @@ |
|
|
|
<!-- input --> |
|
|
|
<input |
|
|
|
type="checkbox" |
|
|
|
v-model="isFromMyContacts" |
|
|
|
v-model="isInMyContacts" |
|
|
|
name="toggleFilterFromMyContacts" |
|
|
|
class="sr-only" |
|
|
|
/> |
|
|
@ -27,11 +30,18 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex items-center justify-between cursor-pointer"> |
|
|
|
<div |
|
|
|
class="flex items-center justify-between cursor-pointer" |
|
|
|
@click=" |
|
|
|
hasSearchBox |
|
|
|
? toggleNearby() |
|
|
|
: $router.push({ name: 'search-area' }) |
|
|
|
" |
|
|
|
> |
|
|
|
<!-- label --> |
|
|
|
<div>Nearby</div> |
|
|
|
<!-- toggle --> |
|
|
|
<div class="relative ml-2"> |
|
|
|
<div v-if="hasSearchBox" class="relative ml-2"> |
|
|
|
<!-- input --> |
|
|
|
<input |
|
|
|
type="checkbox" |
|
|
@ -46,26 +56,32 @@ |
|
|
|
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
<div v-else class="relative ml-2"> |
|
|
|
<button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"> |
|
|
|
Select Location |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button |
|
|
|
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mt-4" |
|
|
|
@click="confirm" |
|
|
|
> |
|
|
|
Apply |
|
|
|
</button> |
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2"> |
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4"> |
|
|
|
<button |
|
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" |
|
|
|
@click="setAll()" |
|
|
|
> |
|
|
|
Set All |
|
|
|
</button> |
|
|
|
<button |
|
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" |
|
|
|
@click="clearAll()" |
|
|
|
> |
|
|
|
Clear All |
|
|
|
</button> |
|
|
|
<button |
|
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" |
|
|
|
@click="cancel" |
|
|
|
@click="done()" |
|
|
|
> |
|
|
|
Cancel |
|
|
|
Done |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -81,6 +97,9 @@ import { |
|
|
|
LTileLayer, |
|
|
|
} from "@vue-leaflet/vue-leaflet"; |
|
|
|
|
|
|
|
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
|
|
|
import { db } from "@/db/index"; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
components: { |
|
|
|
LRectangle, |
|
|
@ -90,20 +109,80 @@ import { |
|
|
|
}, |
|
|
|
}) |
|
|
|
export default class FeedFilters extends Vue { |
|
|
|
visible = false; |
|
|
|
isFromMyContacts = false; |
|
|
|
callOnCloseIfChanged = () => {}; |
|
|
|
hasSearchBox = false; |
|
|
|
isInMyContacts = false; |
|
|
|
isNearby = false; |
|
|
|
settingChanged = false; |
|
|
|
visible = false; |
|
|
|
|
|
|
|
async open(callOnCloseIfChanged: () => void) { |
|
|
|
this.callOnCloseIfChanged = callOnCloseIfChanged; |
|
|
|
|
|
|
|
await db.open(); |
|
|
|
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
|
|
|
this.isInMyContacts = !!settings?.filterFeedContacts; |
|
|
|
this.isNearby = !!settings?.filterFeedNearby; |
|
|
|
if (settings?.searchBoxes && settings.searchBoxes.length > 0) { |
|
|
|
this.hasSearchBox = true; |
|
|
|
} |
|
|
|
|
|
|
|
async open() { |
|
|
|
this.settingChanged = false; |
|
|
|
this.visible = true; |
|
|
|
} |
|
|
|
|
|
|
|
toggleContacts() { |
|
|
|
this.settingChanged = true; |
|
|
|
this.isInMyContacts = !this.isInMyContacts; |
|
|
|
db.settings.update(MASTER_SETTINGS_KEY, { |
|
|
|
filterFeedContacts: this.isInMyContacts, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
toggleNearby() { |
|
|
|
this.settingChanged = true; |
|
|
|
this.isNearby = !this.isNearby; |
|
|
|
db.settings.update(MASTER_SETTINGS_KEY, { |
|
|
|
filterFeedNearby: this.isNearby, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
async clearAll() { |
|
|
|
if (this.isInMyContacts || this.isNearby) { |
|
|
|
this.settingChanged = true; |
|
|
|
} |
|
|
|
|
|
|
|
db.settings.update(MASTER_SETTINGS_KEY, { |
|
|
|
filterFeedNearby: false, |
|
|
|
filterFeedContacts: false, |
|
|
|
}); |
|
|
|
|
|
|
|
this.isInMyContacts = false; |
|
|
|
this.isNearby = false; |
|
|
|
} |
|
|
|
|
|
|
|
async setAll() { |
|
|
|
if (!this.isInMyContacts || !this.isNearby) { |
|
|
|
this.settingChanged = true; |
|
|
|
} |
|
|
|
|
|
|
|
db.settings.update(MASTER_SETTINGS_KEY, { |
|
|
|
filterFeedNearby: true, |
|
|
|
filterFeedContacts: true, |
|
|
|
}); |
|
|
|
|
|
|
|
this.isInMyContacts = true; |
|
|
|
this.isNearby = true; |
|
|
|
} |
|
|
|
|
|
|
|
close() { |
|
|
|
// close the dialog but don't change values (just in case some actions are added later) |
|
|
|
if (this.settingChanged) { |
|
|
|
this.callOnCloseIfChanged(); |
|
|
|
} |
|
|
|
this.visible = false; |
|
|
|
} |
|
|
|
|
|
|
|
cancel() { |
|
|
|
done() { |
|
|
|
this.close(); |
|
|
|
} |
|
|
|
} |
|
|
|