Merge branch 'development' of https://github.com/hotosm/fmtm into dev…

…elopment

.pre-commit-config.yaml

@@ -9,7 +9,7 @@ repos:
   # Lint / autoformat: Python code
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
-    rev: "v0.6.9"
+    rev: "v0.7.0"
     hooks:
       # Run the linter
       - id: ruff
@@ -73,7 +73,7 @@ repos:
 
   # Lint & Autoformat: SQL
   - repo: https://github.com/sqlfluff/sqlfluff
-    rev: 3.2.3
+    rev: 3.2.4
     hooks:
       - id: sqlfluff-lint
         files: ^src/backend/migrations/.*\.sql$

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: {