Add initial plotting
This commit is contained in:
ThePetrovich
parent
2db5d14202
commit
55295b84aa
10 changed files with 362 additions and 436 deletions
|
|
@ -1,114 +1,57 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { getForecast } from '../lib/prediction.ts';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let isCollapsed = false;
|
||||
|
||||
const profileMap = {
|
||||
'Normal': 'standard_profile',
|
||||
'Float': 'float_profile',
|
||||
'Reverse (ascent only)': 'reverse_profile',
|
||||
'Custom': 'custom_profile'
|
||||
};
|
||||
let profile = 'Normal';
|
||||
|
||||
let mouseLat = 0;
|
||||
let mouseLng = 0;
|
||||
|
||||
|
||||
let startPoint = 'Custom';
|
||||
let startHeight = 0;
|
||||
let startTime = '13:13';
|
||||
let startDate = new Date(2025, 2, 24);
|
||||
let ascentRate = 5;
|
||||
let burstAltitude = 30000;
|
||||
let flightProfile = 'Normal';
|
||||
let descentRate = 5;
|
||||
let forecastMode = 'Single';
|
||||
let inputLat = '56.3576';
|
||||
let inputLng = '39.8666';
|
||||
let now = new Date();
|
||||
let startDate = now.toISOString().split('T')[0]; // YYYY-MM-DD
|
||||
let startTime = now.toISOString().split('T')[1].split('.')[0]; // HH:MM:SS
|
||||
|
||||
function formatLaunchDateTime(dateObj, timeStr) {
|
||||
// Ensure date is a Date object
|
||||
const date = new Date(dateObj);
|
||||
|
||||
// Extract date components
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// Format time (ensure it has seconds)
|
||||
let formattedTime = timeStr;
|
||||
if (timeStr.split(':').length === 2) {
|
||||
formattedTime += ':00'; // Add seconds if missing
|
||||
}
|
||||
|
||||
// Combine into ISO string
|
||||
const isoString = new Date(`${year}-${month}-${day}T${formattedTime}Z`).toISOString();
|
||||
|
||||
return isoString;
|
||||
}
|
||||
const launch_datetime = formatLaunchDateTime(startDate, startTime);
|
||||
|
||||
const getForecast = async () => {
|
||||
const profileMap = {
|
||||
'Normal': 'standard_profile',
|
||||
'Float': 'float_profile',
|
||||
'Reverse (ascent only)': 'ascent_only_profile',
|
||||
'Custom': 'custom_profile'
|
||||
};
|
||||
|
||||
// Create request object
|
||||
const request = {
|
||||
ascent_rate: parseFloat(ascentRate),
|
||||
burst_altitude: parseFloat(burstAltitude),
|
||||
dataset: new Date().toISOString(), // Current time as dataset timestamp
|
||||
descent_rate: parseFloat(descentRate),
|
||||
format: "json",
|
||||
launch_altitude: parseFloat(startHeight),
|
||||
launch_datetime,
|
||||
launch_latitude: parseFloat(inputLat),
|
||||
launch_longitude: parseFloat(inputLng),
|
||||
profile: profileMap[flightProfile] || 'standard_profile',
|
||||
version: 2
|
||||
};
|
||||
|
||||
console.log("Sending request:", request);
|
||||
|
||||
try {
|
||||
// Example POST request - replace with your actual API endpoint
|
||||
const response = await fetch('http://127.0.0.1:8000/api/predictions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(request)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Forecast response:", data);
|
||||
alert("Forecast request successful!");
|
||||
// Handle the response data as needed
|
||||
} catch (error) {
|
||||
console.error("Error sending forecast request:", error);
|
||||
alert("Error getting forecast: " + error.message);
|
||||
}
|
||||
let flightParameters = {
|
||||
ascent_rate: 5.0,
|
||||
burst_altitude: 30000.0,
|
||||
dataset: "",
|
||||
descent_rate: 5.0,
|
||||
format: "json",
|
||||
launch_altitude: 0.0,
|
||||
launch_datetime: "",
|
||||
launch_latitude: 62.1234,
|
||||
launch_longitude: 129.1234,
|
||||
profile: "standard_profile",
|
||||
version: 2
|
||||
};
|
||||
|
||||
// Helper function to format date as YYYY-MM-DD
|
||||
const formatDateForAPI = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
function handleUpdatePosition() {
|
||||
dispatch('updatePosition', {
|
||||
lat: inputLat,
|
||||
lng: inputLng
|
||||
const get_prediction = () => {
|
||||
getForecast(flightParameters, startDate, startTime).then((response) => {
|
||||
console.log(response);
|
||||
}).catch((error) => {
|
||||
console.error("Error fetching forecast:", error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const get_map_position = () => {
|
||||
dispatch('getMapPosition', { lat: mouseLat, lng: mouseLng });
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="card shadow-lg position-absolute bottom-0 end-0 m-3" style="width: 22rem; max-height: 80vh; overflow-y: auto; z-index: 1000;">
|
||||
<div class="card shadow-lg position-absolute bottom-0 end-0 m-3" style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h6 class="card-title mb-0">Prediction Parameters</h6>
|
||||
<h6 class="card-title mb-0">Параметры прогнозирования</h6>
|
||||
<button class="btn btn-sm btn-primary" on:click={() => (isCollapsed = !isCollapsed)}>
|
||||
{#if isCollapsed}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16">
|
||||
|
|
@ -124,7 +67,7 @@
|
|||
{#if !isCollapsed}
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Start Point:</label>
|
||||
<label for="startPoint" class="form-label small">Точка старта:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="startPoint" class="form-select" bind:value={startPoint}>
|
||||
<option>Custom</option>
|
||||
|
|
@ -132,7 +75,7 @@
|
|||
<option>Preset 2</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" title="Edit Saved Locations" on:click={() => dispatch('openLocationsEditor')}>
|
||||
<span>Edit</span>
|
||||
<span>Редакт.</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-bookmark-fill" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"/>
|
||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/>
|
||||
|
|
@ -143,66 +86,64 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Latitude/Longitude:</label>
|
||||
<label for="latitude" class="form-label small">Широта/Долгота:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" class="form-control" bind:value={inputLat} placeholder="Latitude">
|
||||
<input id="latitude" type="text" class="form-control" bind:value={flightParameters.launch_latitude} placeholder="Latitude">
|
||||
<span class="input-group-text">/</span>
|
||||
<input type="text" class="form-control" bind:value={inputLng} placeholder="Longitude">
|
||||
<input id="longitude" type="text" class="form-control" bind:value={flightParameters.launch_longitude} placeholder="Longitude">
|
||||
<button on:click={handleUpdatePosition} class="btn btn-success btn-sm">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<button class="btn btn-outline-secondary btn-sm w-100" on:click={() => {
|
||||
inputLat = mouseLat;
|
||||
inputLng = mouseLng;
|
||||
updateMapPosition();
|
||||
}}>Specify on map (click location)</button>
|
||||
get_map_position();
|
||||
}}>Указать на карте</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="startHeight" class="form-label small">Launch Height (m):</label>
|
||||
<input type="number" id="startHeight" class="form-control form-control-sm" bind:value={startHeight}>
|
||||
<label for="startHeight" class="form-label small">Высота точки старта:</label>
|
||||
<input type="number" id="startHeight" class="form-control form-control-sm" bind:value={flightParameters.launch_altitude}>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<div class="flex-fill">
|
||||
<label for="startTime" class="form-label small">Launch Time (UTC):</label>
|
||||
<label for="startTime" class="form-label small">Время старта (UTC):</label>
|
||||
<input type="time" id="startTime" class="form-control form-control-sm" bind:value={startTime}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="startDate" class="form-label small">Launch Date:</label>
|
||||
<label for="startDate" class="form-label small">Дата старта:</label>
|
||||
<input type="date" id="startDate" class="form-control form-control-sm" bind:value={startDate}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<div class="flex-fill">
|
||||
<label for="ascentRate" class="form-label small">Ascent Rate (m/s):</label>
|
||||
<input type="number" id="ascentRate" class="form-control form-control-sm" bind:value={ascentRate}>
|
||||
<label for="ascentRate" class="form-label small">Скорость подъема (м/c):</label>
|
||||
<input type="number" id="ascentRate" class="form-control form-control-sm" bind:value={flightParameters.ascent_rate}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="descentRate" class="form-label small">Descent Rate (m/s):</label>
|
||||
<input type="number" id="descentRate" class="form-control form-control-sm" bind:value={descentRate}>
|
||||
<label for="descentRate" class="form-label small">Скорость спуска (м/с):</label>
|
||||
<input type="number" id="descentRate" class="form-control form-control-sm" bind:value={flightParameters.descent_rate}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="burstAltitude" class="form-label small">Burst/Drift Altitude (m):</label>
|
||||
<input type="number" id="burstAltitude" class="form-control form-control-sm" bind:value={burstAltitude}>
|
||||
<label for="burstAltitude" class="form-label small">Высота разрыва (м):</label>
|
||||
<input type="number" id="burstAltitude" class="form-control form-control-sm" bind:value={flightParameters.burst_altitude}>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="flightProfile" class="form-label small">Flight Profile:</label>
|
||||
<label for="flightProfile" class="form-label small">Профиль полета:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="flightProfile" class="form-select" bind:value={flightProfile}>
|
||||
<select id="flightProfile" class="form-select" bind:value={profile} on:change={() => flightParameters.profile = profileMap[profile] || 'standard_profile'}>
|
||||
<option>Normal</option>
|
||||
<option>Float</option>
|
||||
<option>Reverse (ascent only)</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary btn-sm" title="Edit profile" disabled={flightProfile !== 'Custom'}>
|
||||
<span>Edit</span>
|
||||
<button class="btn btn-secondary btn-sm" title="Edit profile" disabled={flightParameters.profile !== 'Custom'}>
|
||||
<span>Редакт.</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
|
||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
||||
</svg>
|
||||
|
|
@ -211,9 +152,9 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-2 d-grid gap-1">
|
||||
<button class="btn btn-outline-secondary btn-sm">Show Last Altitude Graph</button>
|
||||
<button class="btn btn-secondary btn-sm">Save as Template</button>
|
||||
<button class="btn btn-sm btn-primary" on:click={getForecast}>Run Prediction</button>
|
||||
<button class="btn btn-outline-secondary btn-sm">Показать график высоты</button>
|
||||
<button class="btn btn-secondary btn-sm">Сохранить как шаблон</button>
|
||||
<button class="btn btn-sm btn-primary" on:click={get_prediction}>Выполнить прогнозирование</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue