Toast Add & Update import path (#1828)

* fix(page): prettier code indentation fix

* fix(bottomSheet): improve user experience

* fix(bottom-sheet): bottom sheet component add

* fix(+page): integrate bottom sheet

* feat(pageCss): css for page route

* feat(icons): icon add

* fix(bottom-sheet): width fix

* feat(more): stacked card UI

* feat(images): lock icons add

* feat(+page): symbolLayer add to display lockIcons, more layer color add

* feat(icons): layer, legend icon add

* feat(clickOutside): handle outside click function add

* fix(+page): integrate  legend and layer-switcher

* feat(legend): legend UI slice

* feat(layer-switcher): component for layer switcher

* feat(close): icon add

* fix(+page): task actions modal add

* fix(+page): only show modal if status ready or locked for mapping

* feat(icons): icon add

* feat(tiptap): tiptap rich text editor package add

* feat(editor): tiptap rich text editor add

* fix(bottom-sheet): fix css

* feat(more): implement text editor on comment section

* fix(+page): more section add

* feat(button): button css define

* fix(button): btn classes add for styling

* feat(icons): icons add

* fix(+page): icon add to task action btns

* fix(+page): change selected task boundary color on task select

* feat(asset): location image add

* feat(image): replace locationDot image

* feat(geolocate): icon add

* feat(getDeviceRotation): device orientation track function

* feat(+page): geolocation with device orientation functionality add

* fix(viteConfig): alias store path

* fix(icon): icon add

* feat(toast): reusable toast component add

* feat(layout): add toast component to the main

* feat(commonStore): create writable store to display toast

* fix(toast): show toast for 4 sec

* fix(+page): show toast if browser firefox or safari

* feat(viteConfig): add path aliases

* fix(+page): replace relative paths with absolute paths

src/mapper/src/lib/components/common/toast.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { setAlert } from '$store/common';
+
+	let alertRef;
+	let alertInfo;
+
+	setAlert.subscribe((value) => {
+		if (!value?.message) return;
+		alertInfo = value;
+		alertRef?.toast();
+	});
+
+	const iconName = {
+		default: 'info-circle',
+		success: 'check',
+		warning: 'exclamation-triangle',
+		danger: 'exclamation-octagon',
+	};
+
+	// map with variant because red color for error/danger is not red color i.e. primary is associated with red color (due to HOT theme)
+	const variantMap = {
+		default: 'default',
+		success: 'success',
+		warning: 'warning',
+		danger: 'primary',
+	};
+</script>
+
+<div>
+	<sl-alert bind:this={alertRef} variant={variantMap?.[alertInfo?.variant]} duration="4000" closable>
+		<sl-icon slot="icon" name={iconName?.[alertInfo?.variant]}></sl-icon>
+		{alertInfo?.message}
+	</sl-alert>
+</div>
+
+<style>
+	.alert-duration sl-alert {
+		margin-top: var(--sl-spacing-medium);
+	}
+</style>

src/mapper/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '@hotosm/ui/dist/style.css';
 	import '@hotosm/ui/dist/hotosm-ui';
 	import { setBasePath } from '@hotosm/ui/dist/hotosm-ui';
+	import Toast from '$lib/components/common/toast.svelte';
 
 	setBasePath('/mapnow');
 
@@ -10,5 +11,6 @@
 
 <main class="flex flex-col h-screen overflow-hidden">
 	<hot-header></hot-header>
+	<Toast />
 	<slot {data}></slot>
 </main>

src/mapper/src/routes/[projectId]/+page.svelte

@@ -40,14 +40,15 @@
 	import LayerSwitcher from '$lib/components/page/layer-switcher.svelte';
 	import BottomSheet from '$lib/components/common/bottom-sheet.svelte';
 	import Error from './+error.svelte';
-	import '../../styles/page.css';
-	import BlackLockImg from '../../assets/images/black-lock.png';
-	import RedLockImg from '../../assets/images/red-lock.png';
-	import More from '../../lib/components/page/more/index.svelte';
-	import '../../styles/button.css';
-	import { GetDeviceRotation } from '../../utilFunctions/getDeviceRotation';
-	import LocationArcImg from '../../assets/images/locationArc.png';
-	import LocationDotImg from '../../assets/images/locationDot.png';
+	import '$styles/page.css';
+	import BlackLockImg from '$assets/images/black-lock.png';
+	import RedLockImg from '$assets/images/red-lock.png';
+	import More from '$lib/components/page/more/index.svelte';
+	import '$styles/button.css';
+	import { GetDeviceRotation } from '$utilFunctions/getDeviceRotation';
+	import LocationArcImg from '$assets/images/locationArc.png';
+	import LocationDotImg from '$assets/images/locationDot.png';
+	import { setAlert } from '$store/common';
 
 	export let data: PageData;
 
@@ -256,6 +257,10 @@
 	$: if (map && toggleGeolocationStatus) {
 		if (isFirefox || isSafari) {
 			// firefox & safari doesn't support device orientation sensor
+			setAlert.set({
+				variant: 'warning',
+				message: "Unable to handle device orientation. Your browser doesn't support device orientation sensors.",
+			});
 		} else {
 			// See the API specification at: https://w3c.github.io/orientation-sensor
 			// We use referenceFrame: 'screen' because the web page will rotate when

src/mapper/src/store/common.ts

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+
+export const setAlert = writable({
+	variant: '',
+	message: '',
+});

src/mapper/vite.config.ts

@@ -23,6 +23,10 @@ export default defineConfig({
 			$lib: path.resolve('./src/lib'),
 			$components: path.resolve('./src/components'),
 			$static: path.resolve('./static'),
+			$store: path.resolve('./src/store'),
+			$styles: path.resolve('./src/styles'),
+			$assets: path.resolve('./src/assets'),
+			$utilFunctions: path.resolve('./src/utilFunctions'),
 		},
 	},
 	test: {