src/components/services/OpenWeather.vue

   1 <template>
   2   <div>
   3     <div class="card" :class="item.class">
   4       <a :href="`https://openweathermap.org/city/` + locationId" :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                   <template v-if="temp !== ''">
  29                     {{ temp }}
  30                     <span v-if="this.item.units === 'metric'">&deg;C</span>
  31                     <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
  32                     <span v-else>K</span>
  33                   </template>
  34                   <template v-else>
  35                     <span class="error">Data could not be retrieved</span>
  36                   </template>
  37                 </template>
  38               </p>
  39             </div>
  40           </div>
  41           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  42             <strong class="tag-text">#{{ item.tag }}</strong>
  43           </div>
  44         </div>
  45       </a>
  46     </div>
  47   </div>
  48 </template>
  49
  50 <script>
  51 export default {
  52   name: "OpenWeather",
  53   props: {
  54     item: Object,
  55   },
  56   data: () => ({
  57     error: false,
  58     api: {
  59       id: "",
  60       name: "",
  61       weather: [
  62         {
  63           main: "",
  64           description: "",
  65           icon: "",
  66         },
  67       ],
  68       main: {
  69         temp: "",
  70         humidity: "",
  71       },
  72     },
  73   }),
  74   computed: {
  75     locationId: function () {
  76       if (this.api) {
  77         return this.api.id;
  78       }
  79       return "";
  80     },
  81     temp: function () {
  82       if (this.api && this.api.main.temp !== "") {
  83         return parseInt(this.api.main.temp).toFixed(1);
  84       }
  85       return "";
  86     },
  87     image: function () {
  88       if (this.api) {
  89         return this.api.weather[0].icon;
  90       }
  91       return "";
  92     },
  93     conditions: function () {
  94       if (this.api) {
  95         return this.api.weather[0].description;
  96       }
  97       return "";
  98     },
  99   },
 100   created() {
 101     this.fetchStatus();
 102   },
 103   methods: {
 104     fetchStatus: async function () {
 105       const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
 106       this.api = await fetch(url)
 107         .then((response) => response.json())
 108         .catch((e) => {
 109           this.error = true;
 110           console.log(e)
 111         });
 112     },
 113   },
 114 };
 115 </script>
 116
 117 <style scoped lang="scss">
 118
 119 // Add a border around the weather image.
 120 // Otherwise the image is not always distinguishable.
 121 .media-left {
 122   &.circle,
 123   &.square {
 124     background-color: #e4e4e4;
 125   }
 126
 127   &.circle {
 128     border-radius: 90%;
 129   }
 130
 131   img {
 132     max-height: 100%;
 133   }
 134 }
 135
 136 .error {
 137   color: #de0000;
 138 }
 139
 140 // Change background color in dark mode.
 141 .is-dark {
 142   .media-left {
 143     &.circle,
 144     &.square {
 145       background-color: #909090;
 146     }
 147   }
 148 }
 149 </style>