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 -->
|
<!-- Serviceworker registration -->
|
||||||
<script>
|
<script>
|
||||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
// if (typeof navigator.serviceWorker !== 'undefined') {
|
||||||
navigator.serviceWorker.register('sw.js')
|
// navigator.serviceWorker.register('serviceworker.js')
|
||||||
}
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Meta Pixel Code -->
|
<!-- Meta Pixel Code -->
|
||||||
|
|
|
@ -2,5 +2,5 @@ const autoprefixer = require('autoprefixer')
|
||||||
const tailwind = require('tailwindcss')
|
const tailwind = require('tailwindcss')
|
||||||
|
|
||||||
module.exports = {
|
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)
|
// 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'
|
const CACHE = 'pwabuilder-offline-page'
|
||||||
|
|
||||||
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js')
|
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";
|
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
|
||||||
const offlineFallbackPage = '/offline.html'
|
const offlineFallbackPage = '/offline.html'
|
||||||
|
|
||||||
|
|
|
@ -94,5 +94,9 @@
|
||||||
path: '/forgot-pswd',
|
path: '/forgot-pswd',
|
||||||
component: () => import('$routes/authorization/forgottonPassword/forgot-pswd.svelte'),
|
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 experiences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
|
||||||
const users = new Collection('63ded6c18e8493bffc83', 'Users')
|
const users = new Collection('63ded6c18e8493bffc83', 'Users')
|
||||||
|
const categories = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
experiences,
|
experiences,
|
||||||
users,
|
users,
|
||||||
|
categories,
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
import collections from '$lib/collections'
|
import collections from '$lib/collections'
|
||||||
import { Query } from 'appwrite'
|
import { Query } from 'appwrite'
|
||||||
import { navigate } from 'svelte-routing'
|
import { navigate } from 'svelte-routing'
|
||||||
|
import Category from "$lib/components/Interests/category.svelte";
|
||||||
|
|
||||||
export let current_state = 1
|
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">
|
<script lang="ts">
|
||||||
import Interests from "$lib/components/Interests/Interests.svelte"
|
import Interests from "$lib/components/Interests/interests.svelte"
|
||||||
|
|
||||||
let current_state = 1
|
let current_state = 1
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue