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                   {{ temp | tempSuffix(this.item.units) }}
  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   created() {
  54     this.fetchWeather();
  55   },
  56   methods: {
  57     fetchWeather: async function () {
  58       let locationQuery;
  59
  60       // Use location ID if specified, otherwise retrieve value from location (name).
  61       if (this.item.locationId) {
  62         locationQuery = `id=${this.item.locationId}`;
  63       } else {
  64         locationQuery = `q=${this.item.location}`;
  65       }
  66
  67       const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
  68       fetch(url)
  69         .then((response) => {
  70           if (!response.ok) {
  71             throw Error(response.statusText);
  72           }
  73           return response.json();
  74         })
  75         .then((weather) => {
  76           this.id = weather.id;
  77           this.name = weather.name;
  78           this.temp = parseInt(weather.main.temp).toFixed(1);
  79           this.icon = weather.weather[0].icon;
  80           this.conditions = weather.weather[0].description;
  81         })
  82         .catch((e) => {
  83           console.log(e);
  84           this.error = true;
  85         });
  86     },
  87   },
  88   filters: {
  89     tempSuffix: function (value, type) {
  90       if (!value) return "";
  91
  92       let unit = "K";
  93       if (type === "metric") {
  94         unit = "°C";
  95       } else if (type === "imperial") {
  96         unit = "°F";
  97       }
  98       return `${value} ${unit}`;
  99     },
 100   },
 101 };
 102 </script>
 103
 104 <style scoped lang="scss">
 105 // Add a border around the weather image.
 106 // Otherwise the image is not always distinguishable.
 107 .media-left {
 108   &.circle,
 109   &.square {
 110     background-color: #e4e4e4;
 111   }
 112
 113   &.circle {
 114     border-radius: 90%;
 115   }
 116
 117   img {
 118     max-height: 100%;
 119   }
 120 }
 121
 122 .error {
 123   color: #de0000;
 124 }
 125
 126 // Change background color in dark mode.
 127 .is-dark {
 128   .media-left {
 129     &.circle,
 130     &.square {
 131       background-color: #909090;
 132     }
 133   }
 134 }
 135 </style>