Merge pull request #380 from systemaccounting/379-client-measure-page

379 client measure page

client/package.json

@@ -15,10 +15,12 @@
 	},
 	"devDependencies": {
 		"@fortawesome/free-solid-svg-icons": "^6.2.1",
+		"@googlemaps/js-api-loader": "^1.16.8",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^1.0.0",
 		"@sveltejs/kit": "^1.0.0",
 		"@types/base-64": "^1.0.0",
+		"@types/google.maps": "^3.55.12",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"@urql/core": "^3.1.1",
@@ -30,6 +32,7 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"graphql": "^16.6.0",
+		"graphql-ws": "^5.16.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"shelljs": "^0.8.5",

client/src/graphql/client.ts

@@ -1,4 +1,4 @@
-import { createClient, defaultExchanges } from '@urql/core';
+import { createClient, cacheExchange, fetchExchange } from '@urql/core';
 import type { ClientOptions } from '@urql/core';
 import { getIdToken } from '../auth/cognito';
 import b64 from 'base-64';
@@ -9,7 +9,7 @@ const url: string = b64.decode(process.env.GRAPHQL_URI as string)?.trim() + '/'
 
 const clientOpts: ClientOptions = {
 	url,
-	exchanges: defaultExchanges,
+	exchanges: [cacheExchange, fetchExchange],
 	maskTypename: true,
 	fetchOptions: {
 		credentials: 'same-origin'

client/src/routes/+layout.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-	import MobileLayout from '../containers/MobileLayout.svelte';
-	import client from '../graphql/client';
-	import c from '../utils/constants'
-	import { setContext } from 'svelte';
-	setContext(c.CLIENT_CTX_KEY, client);
+    import MobileLayout from '../containers/MobileLayout.svelte';
+    import client from '../graphql/client';
+    import c from '../utils/constants';
+    import { setContext } from 'svelte';
+    import { page } from '$app/stores';
+    setContext(c.CLIENT_CTX_KEY, client);
 </script>
 
-<MobileLayout>
-	<slot />
-</MobileLayout>
+{#if $page.url.pathname !== '/measure'}
+    <MobileLayout>
+        <slot />
+    </MobileLayout>
+{:else}
+    <slot />
+{/if}