On branch Matt/preferenceUPD
Changes to be committed: modified: index.html modified: postcss.config.cjs modified: public/serviceworker.js modified: src/__routes.svelte modified: src/lib/collections.ts modified: src/lib/components/Interests/Interests.svelte new file: src/lib/components/Interests/category.svelte new file: src/routes/onboarding/interestsPage.svelte modified: src/routes/profile/functions/Interests-Update.svelte
This commit is contained in:
parent
b4df394e29
commit
e9402c2825
|
@ -10,9 +10,9 @@
|
|||
|
||||
<!-- Serviceworker registration -->
|
||||
<script>
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
navigator.serviceWorker.register('sw.js')
|
||||
}
|
||||
// if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
// navigator.serviceWorker.register('serviceworker.js')
|
||||
// }
|
||||
</script>
|
||||
|
||||
<!-- Meta Pixel Code -->
|
||||
|
|
|
@ -2,5 +2,5 @@ const autoprefixer = require('autoprefixer')
|
|||
const tailwind = require('tailwindcss')
|
||||
|
||||
module.exports = {
|
||||
plugins: [tailwind(), autoprefixer()],
|
||||
plugins: [tailwind(), autoprefixer()]
|
||||
}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
|
||||
import { workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js'
|
||||
import workbox from 'workbox-sw'
|
||||
|
||||
const CACHE = 'pwabuilder-offline-page'
|
||||
|
||||
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js')
|
||||
|
||||
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
|
||||
const offlineFallbackPage = '/offline.html'
|
||||
|
||||
|
|
|
@ -94,5 +94,9 @@
|
|||
path: '/forgot-pswd',
|
||||
component: () => import('$routes/authorization/forgottonPassword/forgot-pswd.svelte'),
|
||||
},
|
||||
{
|
||||
path: '/preferences',
|
||||
component: () => import('$root/src/routes/onboarding/interestsPage.svelte'),
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
@ -2,8 +2,10 @@ import { Collection } from './appwrite'
|
|||
|
||||
const experiences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
|
||||
const users = new Collection('63ded6c18e8493bffc83', 'Users')
|
||||
const categories = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
|
||||
|
||||
export default {
|
||||
experiences,
|
||||
users,
|
||||
categories,
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
import collections from '$lib/collections'
|
||||
import { Query } from 'appwrite'
|
||||
import { navigate } from 'svelte-routing'
|
||||
import Category from "$lib/components/Interests/category.svelte";
|
||||
|
||||
export let current_state = 1
|
||||
|
||||
|
|
|
@ -0,0 +1,55 @@
|
|||
<!-- This component is imported to display a category to (de)select-->
|
||||
<script lang="ts">
|
||||
export let name;
|
||||
export let image;
|
||||
export let selected = false;
|
||||
export let onToggle = () => {};
|
||||
|
||||
const handleClick = () => {
|
||||
onToggle();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="category" class:selected={selected} on:click={handleClick}>
|
||||
<div class="image">
|
||||
<img src={image} alt={name} />
|
||||
</div>
|
||||
<div class="name">{name}</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 2px solid blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!-- The InterestsPage component is responsible for displaying a list of categories that a user can select from -->
|
||||
|
||||
<script lang="ts">
|
||||
// Import necessary modules and components
|
||||
import { user } from '$lib/appwrite';
|
||||
import collections from '$lib/collections';
|
||||
import { Query } from 'appwrite';
|
||||
import { navigate } from 'svelte-routing';
|
||||
import Category from "$lib/components/Interests/category.svelte";
|
||||
|
||||
// Define reactive variables using Svelte's $ syntax
|
||||
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')]);
|
||||
$: console.log($user);
|
||||
|
||||
// Define a writable store to keep track of selected categories
|
||||
import { writable } from 'svelte/store';
|
||||
const selectedCategories = writable([]);
|
||||
|
||||
// Define a function to toggle the selected state of a category
|
||||
const toggleSelected = (categoryName) => {
|
||||
selectedCategories.update((categories) => {
|
||||
if (categories.includes(categoryName)) {
|
||||
return categories.filter((name) => name !== categoryName);
|
||||
} else {
|
||||
return [...categories, categoryName];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Define a function to handle the form submission
|
||||
const handleSubmit = async () => {
|
||||
const { $id } = await collections.users.updateDocument(userInfo.$id, {
|
||||
preferences: {
|
||||
categories: $selectedCategories,
|
||||
},
|
||||
});
|
||||
|
||||
navigate(`/profile/${$id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Render each category as a Category component and pass its name, image, and selected state as props to the Category component. -->
|
||||
{#await collections.categories.listDocuments()}
|
||||
<p>Loading...</p>
|
||||
{:then categories}
|
||||
{#each categories.data as category}
|
||||
<Category
|
||||
name={category.name}
|
||||
image={category.image}
|
||||
selected={$selectedCategories.includes(category.name)}
|
||||
onToggle={() => toggleSelected(category.name)}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<!-- Display a form with a button to submit the selected categories -->
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<button type="submit">Save Preferences</button>
|
||||
</form>
|
||||
{:catch error}
|
||||
<p>Error: {error.message}</p>
|
||||
{/await}
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import Interests from "$lib/components/Interests/Interests.svelte"
|
||||
import Interests from "$lib/components/Interests/interests.svelte"
|
||||
|
||||
let current_state = 1
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue