app/liteyuki/resources/liteyuki_weather/templates/js/weather_now.js

/**
 * @typedef {Object} Location
 * @property {string} city - The city name.
 * @property {string} country - The country name.
 *
 * @typedef {Object} Weather
 * @property {number} temperature - The current temperature.
 * @property {string} description - The weather description.
 *
 * @typedef {Object} Data
 * @property {Location} location - The location data.
 * @property {Weather} weather - The weather data.
 */

/** @type {Data} */

let data = JSON.parse(document.getElementById("data").innerText)

let localData = data["localization"]  // 本地化数据

let weatherNow = data["weatherNow"]

let weatherDaily = data["weatherDaily"]
let weatherHourly = data["weatherHourly"]
let aqi = data["aqi"]

let locationData = data["location"]

// 处理aqi
let aqiValue = 0
if ("aqi" in aqi) {
    aqi["aqi"].forEach(
        (item) => {
            if (item["defaultLocalAqi"]) {
                document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
                // 将(255,255,255)这种格式的颜色设置给css
                document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
            }
        }
    )
} else {
    document.getElementById("aqi-dot").style.backgroundColor = '#fff'
    document.getElementById("aqi-data").innerText = localData['no_aqi']
}


templates = {
    "time": weatherNow["now"]["obsTime"],
    "city": locationData["name"],
    "adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
    "temperature-now": weatherNow["now"]["temp"] + "°",
    "temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
    "description": weatherNow["now"]["text"]
}

// 遍历每一个id，给其赋值
for (let id in templates) {
    document.getElementById(id).innerText = templates[id]
}

let maxHourlyItem = 8
let percentWidth = 1 / (maxHourlyItem * 1.5) * 100
let hourlyStep = 2 // n小时一个数据
let hourlyCount = 0

let hourlyItemDivTemplate = document.importNode(document.getElementById("hourly-item-template").content, true)
weatherHourly['hourly'].forEach(
    (item, index) => {
        if (index % hourlyStep !== 0) {
            return
        }
        if (hourlyCount >= maxHourlyItem) {
            return
        }

        let hourlyItemDiv = document.importNode(hourlyItemDivTemplate, true)
        hourlyItemDiv.className = "hourly-item"
        hourlyItemDiv.querySelector('.hourly-icon').setAttribute("src", `./img/qw_icon/${item["icon"]}.png`)
        hourlyItemDiv.querySelector('.hourly-time').innerText = get_time_hour(item["fxTime"])
        hourlyItemDiv.querySelector('.hourly-temperature').innerText = " " + item["temp"] + "°"
        // 设置最大宽度
        hourlyItemDiv.querySelector('.hourly-item').style.maxWidth = percentWidth + "%"
        hourlyItemDiv.querySelector('.hourly-icon').style.maxWidth = "100%"
        document.getElementById("hours-info").appendChild(hourlyItemDiv)
        hourlyCount++
    }
)

let maxDailyItem = 7
// 第一和第二天用today和tomorrow，后面用星期X英文小写
let daysStandard = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
let todayDay = new Date().getDay()
let days = [localData['today'], localData['tomorrow']]
for (let i = 0; i < 5; i++) {
    days.push(localData[daysStandard[(todayDay + 2 + i) % 7]])
}

let dailyItemDivTemplate = document.importNode(document.getElementById("daily-item-template").content, true)
weatherDaily['daily'].forEach(
    (item, index) => {
        if (index >= maxDailyItem) {
            return
        }
        let today = days[index]
        if (index >= 2) {
            today += `(${item["fxDate"].split("-")[1]}.${item["fxDate"].split("-")[2]})`
        }
        let dailyItemDiv = document.importNode(dailyItemDivTemplate, true)
        dailyItemDiv.querySelector('.icon-day').setAttribute("src", `./img/qw_icon/${item["iconDay"]}.png`)
        dailyItemDiv.querySelector('.icon-night').setAttribute("src", `./img/qw_icon/${item["iconNight"]}.png`)

        dailyItemDiv.querySelector('.daily-day').innerText = today

        dailyItemDiv.querySelector('.daily-weather').innerText = item["textDay"]
        dailyItemDiv.querySelector('.daily-temperature').innerText = item["tempMin"] + "°~" + item["tempMax"] + "°"

        document.getElementById('days-info').appendChild(dailyItemDiv)
    }
)

function get_time_hour(fxTime) {
//     fxTime 2024-05-03T02:00+/-08:00'
    fxTime = fxTime.replace("-", "+")
    return fxTime.split("T")[1].split("+")[0]
}