4im_node/vue/16_owm_extended/weatherwebapp/src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  <div class="searchBox"> 
     <input type="text" class="searchBox"
     placeholder="Zadej město pro zjištění počasí..."
     v-model="query" @keypress="fetchWeather"
     :disabled="loading">
  </div>

  <div v-if="loading" class="loadingScreen">
    <p>Načítám data o počasí</p>
  </div>
  <div v-if="error" class="errorScreen">
    <p>{{ error }}</p>
  </div>

  <div class="weatherWrap" v-if="weather.main && !loading && !error">
    <div class="weatherInfo">
      <div class="location"> {{ weather.name }}, {{ weather.sys.country }}</div>

      <div class="temp">{{ weather.main.temp }}°C</div>
      <div class="feelsLike"> Pocitová teplota: 
        {{ weather.main.feels_like }}°C</div>

      <div class="weatherDescription">
        <img v-if="weather.weather[0].icon" :src="weatherIconUrl" 
        :alt="weather.weather[0].description" class="weatherIcon">
        {{ capitalizeFirstLetter(weather.weather[0].description) }}
      </div>
    </div>
  </div>


</template>

<script>
console.log("Api Klíč",process.env.VUE_APP_OWM_API_KEY)

export default {
  name: 'App',
  data() {
    return {
      api_key: process.env.VUE_APP_OWM_API_KEY,
      url_base: "https://api.openweathermap.org/data/2.5/",
      query: "",
      weather: {},
      loading: false,
      error: null
    }
  },
  computed: {
    weatherIconUrl() {
      if(this.weather.weather && 
      this.weather.weather[0] && this.weather.weather[0].icon){
        const iconCode = this.weather.weather[0].icon;
        return `https://openweathermap.org/img/wn/${iconCode}@2x.png`
      }
      return "";
    }
  },
  methods: {
    fetchWeather(e) {
      if (e.key == "Enter" && this.query.trim()) {
        this.loading = true;
        this.error = null;
        this.weather = {};

        const apiUrl = `${this.url_base}weather?q=${this.query}&units=metric&appid=${this.api_key}&lang=cz`;
        console.log("fetching:",apiUrl);

        fetch(apiUrl).then(res => {
          if(!res.ok) {
            return res.json().then(errorData => {
              throw new Error(errorData.message || `Chyba ${res.status}:${res.statusText}`); 
            })
          }
          return res.json()
        }).then(this.setResults)
          .catch (err => {
            console.error("Chyba při načítaní dat:",err);
          this.error = `Nepodařilo se načíst data:${err.message}`;
          this.weather={};
        }).finally(()=>{ this.loading = false})
      }
    },
    setResults(results){
      if (results.cod == 200) {
        this.weather = results;
        this.error = null;
      } else {
        this.error = `Chyba API: ${results.message|| "neznáma chyba"}`;
        this.weather = {}
      }
      console.log(this.weather)
    },
    capitalizeFirstLetter(string){
      if(!string) return "";
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.weatherWrap {
  margin-top: 80px;
  background-color: #41b883;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  min-width: 300px;
}

.weatherInfo {
  font-size: 18px;
  line-height: 1.6;
}

.weatherInfo .location {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}
.weatherInfo .temp {
  font-size: 50px;
  font-weight: bold;
  margin: 10px 0px;
  color: #333;
}
.weatherInfo .feelsLike {
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
}

.weatherInfo .weatherDescription {
  font-size: 20px;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.weatherIcon {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
</style>