src/components/services/OpenWeather.vue

   1 <template>
   2   <div>
   3     <div class="card" :class="item.class">
   4       <a
   5         :href="`https://openweathermap.org/city/${id}`"
   6         :target="item.target"
   7         rel="noreferrer"
   8       >
   9         <div class="card-content">
  10           <div class="media">
  11             <div v-if="icon" class="media-left" :class="item.background">
  12               <figure class="image is-48x48">
  13                 <img
  14                   :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
  15                   :alt="conditions"
  16                   :title="conditions"
  17                 />
  18               </figure>
  19             </div>
  20             <div class="media-content">
  21               <p v-if="error" class="error">Data could not be retrieved</p>
  22               <div v-else>
  23                 <p class="title is-4">{{ name }}</p>
  24                 <p class="subtitle is-6">
  25                   {{ temperature }}
  26                 </p>
  27               </div>
  28             </div>
  29           </div>
  30           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  31             <strong class="tag-text">#{{ item.tag }}</strong>
  32           </div>
  33         </div>
  34       </a>
  35     </div>
  36   </div>
  37 </template>
  38
  39 <script>
  40 export default {
  41   name: "OpenWeather",
  42   props: {
  43     item: Object,
  44   },
  45   data: () => ({
  46     id: null,
  47     icon: null,
  48     name: null,
  49     temp: null,
  50     conditions: null,
  51     error: false,
  52   }),
  53   computed: {
  54     temperature: function () {
  55       if (!this.temp) return "";
  56
  57       let unit = "K";
  58       if (this.item.type === "metric") {
  59         unit = "°C";
  60       } else if (this.item.type === "imperial") {
  61         unit = "°F";
  62       }
  63       return `${this.temp} ${unit}`;
  64     },
  65   },
  66   created() {
  67     this.fetchWeather();
  68   },
  69   methods: {
  70     fetchWeather: async function () {
  71       let locationQuery;
  72
  73       // Use location ID if specified, otherwise retrieve value from location (name).
  74       if (this.item.locationId) {
  75         locationQuery = `id=${this.item.locationId}`;
  76       } else {
  77         locationQuery = `q=${this.item.location}`;
  78       }
  79
  80       const apiKey = this.item.apikey || this.item.apiKey;
  81       const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`;
  82       fetch(url)
  83         .then((response) => {
  84           if (!response.ok) {
  85             throw Error(response.statusText);
  86           }
  87           return response.json();
  88         })
  89         .then((weather) => {
  90           this.id = weather.id;
  91           this.name = weather.name;
  92           this.temp = parseInt(weather.main.temp).toFixed(1);
  93           this.icon = weather.weather[0].icon;
  94           this.conditions = weather.weather[0].description;
  95         })
  96         .catch((e) => {
  97           console.log(e);
  98           this.error = true;
  99         });
 100     },
 101   },
 102 };
 103 </script>
 104
 105 <style scoped lang="scss">
 106 // Add a border around the weather image.
 107 // Otherwise the image is not always distinguishable.
 108 .media-left {
 109   &.circle,
 110   &.square {
 111     background-color: #e4e4e4;
 112   }
 113
 114   &.circle {
 115     border-radius: 90%;
 116   }
 117
 118   img {
 119     max-height: 100%;
 120   }
 121 }
 122
 123 .error {
 124   color: #de0000;
 125 }
 126
 127 // Change background color in dark mode.
 128 .is-dark {
 129   .media-left {
 130     &.circle,
 131     &.square {
 132       background-color: #909090;
 133     }
 134   }
 135 }
 136 </style>