7 files changed, 154 insertions, 22 deletions

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 6bb5068..f2dfb37 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -106,7 +106,7 @@ body {
     }
 
     .first-line {
-      height: 100px;
+      min-height: 100px;
       vertical-align: center;
       background-color: var(--highlight-primary);
 
@@ -121,7 +121,7 @@ body {
       }
 
       .container {
-        height: 80px;
+        min-height: 80px;
         padding: 10px 0;
       }
 
@@ -140,8 +140,7 @@ body {
         }
       }
     }
-    .navbar,
-    .navbar-menu {
+    .navbar {
       background-color: var(--highlight-secondary);
 
       a {
@@ -153,6 +152,9 @@ body {
           background-color: var(--highlight-hover);
         }
       }
+        .navbar-menu {
+      background-color: inherit;
+      }
     }
     .navbar-end {
       text-align: right;
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
new file mode 100644
index 0000000..09ff76a
--- /dev/null
+++ b/src/components/services/OpenWeather.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div class="card" :class="item.class">
+      <a
+        :href="`https://openweathermap.org/city/${id}`"
+        :target="item.target"
+        rel="noreferrer"
+      >
+        <div class="card-content">
+          <div class="media">
+            <div v-if="icon" class="media-left" :class="item.background">
+              <figure class="image is-48x48">
+                <img
+                  :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
+                  :alt="conditions"
+                  :title="conditions"
+                />
+              </figure>
+            </div>
+            <div class="media-content">
+              <p v-if="error" class="error">Data could not be retrieved</p>
+              <div v-else>
+                <p class="title is-4">{{ name }}</p>
+                <p class="subtitle is-6">
+                  {{ temp | tempSuffix(this.item.units) }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OpenWeather",
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    id: null,
+    icon: null,
+    name: null,
+    temp: null,
+    conditions: null,
+    error: false,
+  }),
+  created() {
+    this.fetchWeather();
+  },
+  methods: {
+    fetchWeather: async function () {
+      let locationQuery;
+
+      // Use location ID if specified, otherwise retrieve value from location (name).
+      if (this.item.locationId) {
+        locationQuery = `id=${this.item.locationId}`;
+      } else {
+        locationQuery = `q=${this.item.location}`;
+      }
+
+      const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
+      fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((weather) => {
+          this.id = weather.id;
+          this.name = weather.name;
+          this.temp = parseInt(weather.main.temp).toFixed(1);
+          this.icon = weather.weather[0].icon;
+          this.conditions = weather.weather[0].description;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.error = true;
+        });
+    },
+  },
+  filters: {
+    tempSuffix: function (value, type) {
+      if (!value) return "";
+
+      let unit = "K";
+      if (type === "metric") {
+        unit = "°C";
+      } else if (type === "imperial") {
+        unit = "°F";
+      }
+      return `${value} ${unit}`;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// Add a border around the weather image.
+// Otherwise the image is not always distinguishable.
+.media-left {
+  &.circle,
+  &.square {
+    background-color: #e4e4e4;
+  }
+
+  &.circle {
+    border-radius: 90%;
+  }
+
+  img {
+    max-height: 100%;
+  }
+}
+
+.error {
+  color: #de0000;
+}
+
+// Change background color in dark mode.
+.is-dark {
+  .media-left {
+    &.circle,
+    &.square {
+      background-color: #909090;
+    }
+  }
+}
+</style>
diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index 4fb31f8..af13317 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -59,6 +59,7 @@ export default {
       }
       const url = `${this.item.url}/api/documents/`;
       this.api = await fetch(url, {
+        credentials: "include",
         headers: {
           Authorization: "Token " + this.item.apikey,
         },
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index 7042a7b..87f7090 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -64,7 +64,9 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}/api.php`;
-      this.api = await fetch(url)
+      this.api = await fetch(url, {
+        credentials: "include",
+      })
         .then((response) => response.json())
         .catch((e) => console.log(e));
     },
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 8a9b7a4..e693af4 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -50,7 +50,11 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
-      fetch(url, { method: "HEAD", cache: "no-cache" })
+      fetch(url, {
+        method: "HEAD",
+        cache: "no-cache",
+        credentials: "include",
+      })
         .then((response) => {
           if (!response.ok) {
             throw Error(response.statusText);
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index 93831a7..9d38292 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -70,10 +70,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
-      })
+      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`)
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
@@ -95,10 +92,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
-      })
+      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`)
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 8cebac4..7851b6b 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -70,10 +70,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
-      })
+      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`)
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
@@ -95,10 +92,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
-      })
+      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`)
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);