main.js - master - danpr/weather

main.js
218 строк6 KB
danpr
first_commit
24 май 2026, 10:37
24 май 2026, 10:37eedbee9
const app = Vue.createApp({
    data() {
        return {
            city: 'Владивосток',
            latitude: null,
            longitude: null,
            loading: false,
            error: null,
            forecastData: null
        };
    },

    computed: {

        URI() {
            return `https://api.open-meteo.com/v1/forecast?latitude=${this.latitude}&longitude=${this.longitude}&hourly=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,cloudcover,wind_speed_10m,wind_gusts_10m,wind_direction_10m,pressure_msl&forecast_days=7&timezone=auto`;
        },

        CoordURI() {
            return `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(this.city)}&count=1&language=ru&format=json`;
        }
    },

    methods: {
        async queryData() {

            if (!this.city.trim()) {
                this.error = 'Введите название города';
                return;
            }

            this.loading = true;
            this.error = null;
            this.forecastData = null;

            try {
                const coordResponse = await fetch(this.CoordURI);

                if (!coordResponse.ok) {
                    throw new Error(`HTTP ${coordResponse.status}`);
                }

                const coordData = await coordResponse.json();

                if (!coordData.results || !coordData.results.length) {
                    throw new Error('Город не найден');
                }

                const cityData = coordData.results[0];

                this.latitude = cityData.latitude;
                this.longitude = cityData.longitude;

                const weatherResponse = await fetch(this.URI);

                if (!weatherResponse.ok) {
                    throw new Error(`HTTP ${weatherResponse.status}`);
                }

                const weatherData = await weatherResponse.json();
                this.processData(weatherData);
            } catch (e) {
                console.error(e);
                this.error = e.message || 'Не удалось загрузить данные';
            } finally {
                this.loading = false;
            }
        },

        processData(data) {

            if (!data.hourly || !data.hourly.time) {
                throw new Error('Некорректный формат данных');
            }

            const hourly = data.hourly;
            const times = hourly.time;

            let hoursArray = [];

            for (let i = 0; i < times.length; i++) {
                const timeStr = times[i];
                const dateObj = new Date(timeStr);
                const hourNum = dateObj.getHours();

                hoursArray.push({
                    timeIndex: i,
                    timeLabel: `${hourNum.toString().padStart(2, '0')}:00`,
                    dateObj: dateObj,
                    hourNum: hourNum,
                    temperature: hourly.temperature_2m?.[i],
                    apparentTemperature: hourly.apparent_temperature?.[i],
                    humidity: hourly.relative_humidity_2m?.[i],
                    precipitation: hourly.precipitation?.[i],
                    cloudcover: hourly.cloudcover?.[i],
                    windSpeed: hourly.wind_speed_10m?.[i],
                    windGusts: hourly.wind_gusts_10m?.[i],
                    windDirection: hourly.wind_direction_10m?.[i],
                    pressure: hourly.pressure_msl?.[i]
                });
            }

            const dateRow = [];

            let currentDate = null;
            let currentLabel = null;

            let colspan = 0;
            let startIndex = 0;

            for (let i = 0; i < hoursArray.length; i++) {

                const hour = hoursArray[i];

                const dateKey = hour.dateObj.toLocaleDateString('ru-RU');

                const weekday = hour.dateObj.toLocaleDateString(
                        'ru-RU',
                        { weekday: 'long' }
                    );

                const dateLabel = `${weekday}, ${hour.dateObj.toLocaleDateString('ru-RU')}`;

                if (currentDate === null) {
                    currentDate = dateKey;
                    currentLabel = dateLabel;

                    colspan = 1;
                    startIndex = i;
                } else if (dateKey === currentDate) {
                    colspan++;
                } else {
                    dateRow.push({
                        index: startIndex,
                        colspan: colspan,
                        label: currentLabel
                    });

                    currentDate = dateKey;
                    currentLabel = dateLabel;

                    colspan = 1;
                    startIndex = i;
                }
            }

            dateRow.push({
                index: startIndex,
                colspan: colspan,
                label: currentLabel
            });

            this.forecastData = {
                hours: hoursArray,
                dateRow: dateRow
            };
        },

        formatTemperature(value) {
            if (value === undefined || value === null) {
                return '—';
            }

            const sign = value > 0 ? '+' : '';

            return `${sign}${Math.round(value)}`;
        },

        formatPressure(value) {
            if (value === undefined || value === null) {
                return '—';
            }

            const mmHg = value * 0.75006;

            return Math.round(mmHg);
        },

        formatPrecipitation(value) {
            if (value === undefined || value === null) {
                return '—';
            }

            return value.toFixed(1);
        },

        formatWindSpeed(value) {
            if (value === undefined || value === null) {
                return '—';
            }

            return value.toFixed(1);
        },

        getWindDirection(degrees) {
            if (degrees === undefined || degrees === null) {
                return '—';
            }

            const directions = [
                'С',
                'С-В',
                'В',
                'Ю-В',
                'Ю',
                'Ю-З',
                'З',
                'С-З'
            ];

            const index = Math.round(degrees / 45) % 8;

            return directions[index];
        }
    }
});

app.mount('#app');