fix login & add sveltestrap

This commit is contained in:
ThePetrovich 2025-06-26 19:15:33 +08:00
parent a822fb1e36
commit 527d4417ff
15 changed files with 373 additions and 191 deletions

136
package-lock.json generated
View file

@ -8,7 +8,9 @@
"name": "app4",
"version": "0.0.1",
"dependencies": {
"@sveltestrap/sveltestrap": "^7.1.0",
"bootstrap-icons": "^1.11.3",
"js-cookie": "^3.0.5",
"leaflet": "^1.9.4",
"leaflet-velocity": "^2.1.4"
},
@ -16,7 +18,7 @@
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0",
"svelte": "^5.34.8",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.2.5"
@ -26,7 +28,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
@ -439,7 +440,6 @@
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"dev": true,
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
@ -453,7 +453,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"engines": {
"node": ">=6.0.0"
}
@ -462,7 +461,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"engines": {
"node": ">=6.0.0"
}
@ -470,14 +468,12 @@
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"dev": true
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@ -489,6 +485,15 @@
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.39.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.39.0.tgz",
@ -753,7 +758,6 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
"dev": true,
"peerDependencies": {
"acorn": "^8.9.0"
}
@ -771,22 +775,24 @@
}
},
"node_modules/@sveltejs/kit": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.3.tgz",
"integrity": "sha512-z1SQ8qra/kGY3DzarG7xc6XsbKm8UY3SnI82XLI3PqMYWbYj/LpjPWuAz9WA5EyLjFNLD7sOAOEW8Gt4yjr5Vg==",
"version": "2.22.0",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.22.0.tgz",
"integrity": "sha512-DJm0UxVgzXq+1MUfiJK4Ridk7oIQsIets6JwHiEl97sI6nXScfXe+BeqNhzB7jQIVBb3BM51U4hNk8qQxRXBAA==",
"dev": true,
"dependencies": {
"@sveltejs/acorn-typescript": "^1.0.5",
"@types/cookie": "^0.6.0",
"acorn": "^8.14.1",
"cookie": "^0.6.0",
"devalue": "^5.1.0",
"esm-env": "^1.2.2",
"import-meta-resolve": "^4.1.0",
"kleur": "^4.1.5",
"magic-string": "^0.30.5",
"mrmime": "^2.0.0",
"sade": "^1.8.1",
"set-cookie-parser": "^2.6.0",
"sirv": "^3.0.0"
"sirv": "^3.0.0",
"vitefu": "^1.0.6"
},
"bin": {
"svelte-kit": "svelte-kit.js"
@ -795,9 +801,9 @@
"node": ">=18.13"
},
"peerDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
"svelte": "^4.0.0 || ^5.0.0-next.0",
"vite": "^5.0.3 || ^6.0.0"
"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
}
},
"node_modules/@sveltejs/vite-plugin-svelte": {
@ -838,6 +844,17 @@
"vite": "^6.0.0"
}
},
"node_modules/@sveltestrap/sveltestrap": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-7.1.0.tgz",
"integrity": "sha512-TpIx25kqLV+z+VD3yfqYayOI1IaCeWFbT0uqM6NfA4vQgDs9PjFwmjkU4YEAlV/ngs9e7xPmaRWE7lkrg4Miow==",
"dependencies": {
"@popperjs/core": "^2.11.8"
},
"peerDependencies": {
"svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@ -847,14 +864,12 @@
"node_modules/@types/estree": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
"dev": true
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
},
"node_modules/acorn": {
"version": "8.14.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
},
@ -866,7 +881,6 @@
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
"dev": true,
"engines": {
"node": ">= 0.4"
}
@ -875,7 +889,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"engines": {
"node": ">= 0.4"
}
@ -914,7 +927,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"engines": {
"node": ">=6"
}
@ -1003,22 +1015,20 @@
"node_modules/esm-env": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
},
"node_modules/esrap": {
"version": "1.4.6",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
"integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
"dev": true,
"version": "1.4.9",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.9.tgz",
"integrity": "sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
},
"node_modules/fdir": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
"version": "6.4.6",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
"dev": true,
"peerDependencies": {
"picomatch": "^3 || ^4"
@ -1057,11 +1067,18 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"dependencies": {
"@types/estree": "^1.0.6"
}
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"engines": {
"node": ">=14"
}
},
"node_modules/kleur": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@ -1084,14 +1101,12 @@
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
},
"node_modules/magic-string": {
"version": "0.30.17",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
"dev": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
}
@ -1144,6 +1159,18 @@
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true
},
"node_modules/picomatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/postcss": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@ -1266,10 +1293,9 @@
}
},
"node_modules/svelte": {
"version": "5.25.6",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.25.6.tgz",
"integrity": "sha512-RGkaeAXDuJdvhA1fdSM5GgD++vYfJYijZL0uN6kM2s/TRJ663jktBhZlF0qjzAJGR/34PtaeT3G8MKJY1EKeqg==",
"dev": true,
"version": "5.34.8",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.34.8.tgz",
"integrity": "sha512-TF+8irl7rpj3+fpaLuPRX5BqReTAqckp0Fumxa/mCeK3fo0/MnBb9W/Z2bLwtqj3C3r5Lm6NKIAw7YrgIv1Fwg==",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
"@jridgewell/sourcemap-codec": "^1.5.0",
@ -1280,7 +1306,7 @@
"axobject-query": "^4.1.0",
"clsx": "^2.1.1",
"esm-env": "^1.2.1",
"esrap": "^1.4.6",
"esrap": "^1.4.8",
"is-reference": "^3.0.3",
"locate-character": "^3.0.0",
"magic-string": "^0.30.11",
@ -1313,6 +1339,22 @@
"typescript": ">=5.0.0"
}
},
"node_modules/tinyglobby": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
"integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
"dev": true,
"dependencies": {
"fdir": "^6.4.4",
"picomatch": "^4.0.2"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/totalist": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@ -1336,14 +1378,17 @@
}
},
"node_modules/vite": {
"version": "6.2.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
"integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
"dev": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.4.4",
"picomatch": "^4.0.2",
"postcss": "^8.5.3",
"rollup": "^4.30.1"
"rollup": "^4.34.9",
"tinyglobby": "^0.2.13"
},
"bin": {
"vite": "bin/vite.js"
@ -1423,8 +1468,7 @@
"node_modules/zimmerframe": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
"dev": true
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
}
}
}

View file

@ -15,13 +15,15 @@
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0",
"svelte": "^5.34.8",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.2.5"
},
"dependencies": {
"@sveltestrap/sveltestrap": "^7.1.0",
"bootstrap-icons": "^1.11.3",
"js-cookie": "^3.0.5",
"leaflet": "^1.9.4",
"leaflet-velocity": "^2.1.4"
}

View file

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View file

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" href="%sveltekit.assets%/css/bootstrap.min.css">
<link rel="stylesheet" href="%sveltekit.assets%/css/custom.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<style>

80
src/lib/auth.ts Normal file
View file

@ -0,0 +1,80 @@
import Cookies from 'js-cookie';
export const CSRF_URL = 'http://localhost:8000/api/csrf/';
export const LOGIN_URL = 'http://localhost:8000/api/login/';
export const LOGOUT_URL = 'http://localhost:8000/api/logout/';
export const SESSION_URL = 'http://localhost:8000/api/session/';
export const WHOAMI_URL = 'http://localhost:8000/api/whoami/';
export async function getCsrfToken(): Promise<string | null> {
return Cookies.get('csrftoken') || null;
}
export async function getCsrfTokenAuth(): Promise<string | null> {
const response = await fetch(CSRF_URL, {});
console.log('CSRF Token Response:', response);
return Cookies.get('csrftoken') || null;
}
export async function checkAuthenticated(): Promise<boolean> {
const csrfToken = await getCsrfTokenAuth();
if (!csrfToken) {
throw new Error('CSRF token not found');
}
const response = await fetch(SESSION_URL, {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
});
let data = await (response as Response).json();
return data.isAuthenticated;
}
export async function login(username: string, password: string): Promise<void> {
const csrfToken = await getCsrfTokenAuth();
if (!csrfToken) {
throw new Error('CSRF token not found');
}
const response = await fetch(LOGIN_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify({ username, password }),
credentials: 'include'
});
if (!response.ok) {
throw new Error(`Login failed: ${response.statusText}`);
}
const data = await response.json();
return data;
}
export async function logout(): Promise<void> {
const csrfToken = await getCsrfTokenAuth();
if (!csrfToken) {
throw new Error('CSRF token not found');
}
const response = await fetch(LOGOUT_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
credentials: 'include'
});
if (!response.ok) {
throw new Error(`Logout failed: ${response.statusText}`);
}
console.log('Logout successful');
return;
}

View file

@ -2,6 +2,9 @@ import { writable } from "svelte/store"
import type { LatLngExpression } from "leaflet";
import L from "leaflet";
import { getCsrfToken } from "./auth";
interface TrajectoryPoint {
altitude: number;
datetime: string;
@ -104,12 +107,19 @@ export const getForecast = async (flightParameters: Record<string, any>, startDa
try {
// Example POST request - replace with your actual API endpoint
const response = await fetch('http://127.0.0.1:8000/api/predictions', {
const csrfToken = await getCsrfToken();
if (!csrfToken) {
throw new Error('CSRF token not found');
}
const response = await fetch('http://localhost:8000/api/predictions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify(flightParameters)
body: JSON.stringify(flightParameters),
credentials: 'include'
});
if (!response.ok) {

View file

@ -1,110 +1,130 @@
<script>
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { checkAuthenticated, logout } from '$lib/auth';
import {
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Nav,
NavItem,
NavLink,
Navbar,
NavbarBrand
} from '@sveltestrap/sveltestrap';
// Check if user is authenticated (using localStorage token)
let isAuthenticated = false;
// This should be reactive to changes in auth status
$: isAuthenticated = typeof window !== 'undefined' ? !!localStorage.getItem('accessToken') : false;
$: if (typeof window !== 'undefined') {
Promise.resolve(checkAuthenticated()).then(result => {
isAuthenticated = result;
});
} else {
isAuthenticated = false;
}
function handleLogout() {
// Clear authentication tokens
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
try {
logout();
} catch (error) {
console.error('Logout failed:', error);
}
// Update auth status
isAuthenticated = false;
// Redirect to login page
goto('/login');
goto('/');
}
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top custom-navbar">
<div class="container-fluid white-bg">
<a class="navbar-brand" href="/">
<img src="/logo.svg" alt="Logo" height="36" />
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
<!-- <Navbar color="dark" dark expand="md">
<Nav navbar>
<NavItem>
<NavLink href="/components/">Inactive Link</NavLink>
</NavItem>
<Dropdown nav setActiveFromChild>
<DropdownToggle nav class="nav-link" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#" active>
Lancelot
</DropdownItem>
<DropdownItem href="#">Link</DropdownItem>
<DropdownItem href="#">Secret</DropdownItem>
<DropdownItem href="#">Chimp</DropdownItem>
</DropdownMenu>
</Dropdown>
</Nav>
</Navbar> -->
<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar">
<Nav class="me-auto mb-2 mb-lg-0" navbar>
<NavbarBrand href="/" class="nav-full-height">
<img src="/logo.svg" alt="Logo" height="36" class="d-inline-block align-text-top" />
</NavbarBrand>
<NavItem>
<NavLink
href="/predict"
class="nav-full-height"
active={$page.url.pathname === '/predict'}
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link nav-full-height {window.location.pathname === '/predict' ? 'active' : ''}" href="/predict">Прогнозирование</a>
</li>
<li class="nav-item">
<a class="nav-link nav-full-height {window.location.pathname === '/track' ? 'active' : ''}" href="/track">Слежение</a>
</li>
</ul>
<ul class="navbar-nav">
Прогнозирование
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="/track"
class="nav-full-height"
active={$page.url.pathname === '/track'}
>
Слежение
</NavLink>
</NavItem>
</Nav>
<Nav navbar>
{#if isAuthenticated}
<li class="nav-item">
<button
class="nav-link nav-full-height"
on:click={handleLogout}
style="cursor: pointer;"
>
<Dropdown nav inNavbar>
<DropdownToggle nav caret class="nav-full-height">
Account
</DropdownToggle>
<DropdownMenu end>
<DropdownItem href="/user/account">
Account Settings
</DropdownItem>
<DropdownItem href="/user/templates">
Saved Templates
</DropdownItem>
<DropdownItem href="/user/predictions">
Prediction History
</DropdownItem>
<DropdownItem href="/user/flights">
Flight History
</DropdownItem>
<DropdownItem divider />
<DropdownItem on:click={handleLogout}>
Logout
</button>
</li>
</DropdownItem>
</DropdownMenu>
</Dropdown>
{:else}
<li class="nav-item">
<a class="nav-link nav-full-height {$page.url.pathname === '/login' ? 'active' : ''}" href="/login">Login</a>
</li>
<NavItem>
<NavLink
href="/login"
class="nav-full-height"
active={$page.url.pathname === '/login'}
>
Login
</NavLink>
</NavItem>
{/if}
</ul>
</div>
</div>
</nav>
</Nav>
</Navbar>
<style>
.custom-navbar {
height: 44px;
padding-top: 0rem;
padding-bottom: 0rem;
z-index: 1000;
border: none;
}
.nav-link {
color: inherit;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 12px;
background-color: var(--bs-light);
margin-right: 1px;
}
.nav-link:hover {
color: var(--bs-light);
background-color: var(--bs-primary);
}
.nav-link.active {
color: var(--bs-light);
background-color: var(--bs-primary);
}
.nav-full-height {
display: flex;
align-items: center;
height: 100%;
}
.white-bg {
background-color: #fff !important;
}
.navbar-brand {
margin-right: 1em;
}
</style>

View file

@ -1,18 +1,12 @@
<script>
import { goto } from '$app/navigation';
import { login } from '$lib/auth';
let username = '';
let password = '';
let error = '';
let isLoading = false;
async function getCsrfToken() {
const response = await fetch('http://127.0.0.1:8000/api/session/', {
credentials: 'include'
});
return response.headers.get('X-CSRFToken');
}
async function handleLogin() {
if (!username || !password) {
error = 'Please enter both username and password';
@ -26,37 +20,15 @@
// login request
try {
const response = await fetch('http://127.0.0.1:8000/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': await getCsrfToken(),
},
body: JSON.stringify({
username: username,
password: password
}),
credentials: 'include' // For session/cookie based auth
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Login failed');
}
const data = await response.json();
// Store token if using JWT
if (data.access) {
localStorage.setItem('accessToken', data.access);
if (data.refresh) {
localStorage.setItem('refreshToken', data.refresh);
}
}
await login(username, password);
goto('/'); // Redirect after successful login
} catch (err) {
if (err instanceof Error) {
error = err.message || 'Invalid credentials';
} else {
error = 'Invalid credentials';
}
} finally {
isLoading = false;
}

View file

@ -1,6 +1,9 @@
<script>
<script lang="ts">
import { onMount } from 'svelte';
import * as L from 'leaflet';
import type { Map as LeafletMap } from 'leaflet';
import type { Marker } from 'leaflet';
import type { LatLng } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import VelocityLayer from './velocity.svelte';
import { distHaversine } from '../lib/mathutil.ts';
@ -8,10 +11,7 @@
import { latestPredictionParsed } from '../lib/prediction.ts';
import { latestTelemetryParsed } from '../lib/telemetry.ts';
/**
* @type {L.Map}
*/
let map;
let map: typeof LeafletMap;
let mouseLat = 0;
let mouseLng = 0;
let inputLat = '56.3576';
@ -26,10 +26,7 @@
},
data: null, // здесь будут ваши данные
};
/**
* @type {null}
*/
let marker = null;
let marker: typeof Marker | null = null;
export { mouseLat, mouseLng, inputLat, inputLng, updateMapPosition };
@ -78,7 +75,7 @@
const response = await fetch('src/routes/testVelo.json');
velocityOptions.data = await response.json();
map.on('mousemove', (e) => {
map.on('mousemove', (e: any) => {
mouseLat = e.latlng.lat.toFixed(6);
mouseLng = e.latlng.lng.toFixed(6);
});
@ -97,12 +94,12 @@
});
});
const plotPrediction = (prediction) => {
const plotPrediction = (prediction: any) => {
console.log("Flight data parsed, creating map plot...");
// Clear existing map items
if (marker) {
map.eachLayer((layer) => {
map.eachLayer((layer: any) => {
if (layer instanceof L.Marker || layer instanceof L.Polyline) {
map.removeLayer(layer);
}
@ -163,12 +160,12 @@
map.setView(launch.latlng, 8);
};
const plotTelemetryTrack = (telemetry) => {
const plotTelemetryTrack = (telemetry: any) => {
console.log("Telemetry data parsed, creating map plot...");
// Clear existing map items
if (marker) {
map.eachLayer((layer) => {
map.eachLayer((layer: any) => {
if (layer instanceof L.Marker || layer instanceof L.Polyline) {
map.removeLayer(layer);
}
@ -203,7 +200,7 @@
// }
// Add telemetry markers to the map
telemetry.datapoints.forEach((point) => {
telemetry.datapoints.forEach((point: any) => {
const telemetryMarker = L.marker([point.latitude, point.longitude], {
title: `Telemetry (${point.latitude.toFixed(4)}, ${point.longitude.toFixed(4)}) at ${point.datetime}`,
icon: telemetryIcon,

View file

@ -0,0 +1,12 @@
<script lang="ts">
import Navbar from '../../Navbar.svelte';
</script>
<main>
<Navbar />
<div class="container">
<h1>User Account</h1>
<p>Manage your account settings here.</p>
<!-- Add account management components or links here -->
</div>
</main>

View file

@ -0,0 +1 @@
export const ssr =false;

View file

@ -0,0 +1 @@
export const ssr =false;

View file

@ -0,0 +1 @@
export const ssr =false;

View file

@ -0,0 +1 @@
export const ssr = false;

43
static/css/custom.css Normal file
View file

@ -0,0 +1,43 @@
.custom-navbar {
height: 44px;
padding-top: 0rem;
padding-bottom: 0rem;
z-index: 1000;
border: none;
background-color: white !important;
}
.nav-link {
color: inherit;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 12px;
background-color: var(--bs-light);
margin-right: 1px;
}
.nav-link:hover {
color: var(--bs-light) !important;;
background-color: var(--bs-primary);
}
.nav-link.active {
color: var(--bs-light) !important;
background-color: var(--bs-primary);
}
.nav-full-height {
display: flex;
align-items: center;
height: 100%;
}
.white-bg {
background-color: #fff !important;
}
.navbar-brand {
margin-right: 1em;
}
.navbar {
z-index: 1001;
}