src/components/services/OpenWeather.vue

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