leaflet_svelte/src/routes/ControlPanel.svelte

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();

    let isCollapsed = false;
    
    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';

    function formatLaunchDateTime(date, time) {
        // Parse the date
        const d = new Date(date);
        const year = d.getUTCFullYear();
        const month = String(d.getUTCMonth() + 1).padStart(2, '0');
        const day = String(d.getUTCDate()).padStart(2, '0');
        
        // Parse the time (add seconds if missing)
        const [hours, minutes, seconds = '00'] = time.split(':');
        const formattedTime = `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}:${seconds.padStart(2, '0')}`;
    
        return new Date(`${year}-${month}-${day}T${formattedTime}Z`).toISOString();
    }
    const launch_datetime = formatLaunchDateTime(startDate, startTime);

    const getForecast = async () => {
    // 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: flightProfile === 'Normal' ? 'standard_profile' : 'custom_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);
        }
    };

    // 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
        });
    }
</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-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h6 class="card-title mb-0">Prediction Parameters</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">
                <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
              </svg>
            {:else}
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
            </svg>
            {/if}
        </button>
    </div>
    {#if !isCollapsed}
        <div class="card-body">
            <div class="mb-2">
                <label class="form-label small">Start Point:</label>
                <div class="input-group input-group-sm">
                    <select id="startPoint" class="form-select" bind:value={startPoint}>
                        <option>Custom</option>
                        <option>Preset 1</option>
                        <option>Preset 2</option>
                    </select>
                    <button class="btn btn-secondary" title="Edit Saved Locations" on:click={() => dispatch('openLocationsEditor')}>
                        <span>Edit</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"/>
                            <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="mb-2">
                <label class="form-label small">Latitude/Longitude:</label>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control" bind:value={inputLat} placeholder="Latitude">
                    <span class="input-group-text">/</span>
                    <input type="text" class="form-control" bind:value={inputLng} 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>
            </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}>
            </div>

            <div class="mb-2 d-flex gap-2">
                <div class="flex-fill">
                    <label for="startTime" class="form-label small">Launch Time (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>
                    <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}>
                </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}>
                </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}>
            </div>

            <div class="mb-2">
                <label for="flightProfile" class="form-label small">Flight Profile:</label>
                <div class="input-group input-group-sm">
                    <select id="flightProfile" class="form-select" bind:value={flightProfile}>
                        <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>
                        <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>
                    </button>
                </div>
            </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>
            </div>
        </div>
    {/if}
</div>

<style>
    .card {
        transition: all 0.3s ease;
    }
    .card-header {
        cursor: pointer;
    }
</style>