From e53bddfc71d70eb9f2b7a2910b4b191bc43088ab Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Tue, 13 Oct 2020 20:28:52 +0200
Subject: First commit

---
 src/components/PredictedSpaceWeatherThing.svelte | 64 ++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/PredictedSpaceWeatherThing.svelte

(limited to 'src/components/PredictedSpaceWeatherThing.svelte')

diff --git a/src/components/PredictedSpaceWeatherThing.svelte b/src/components/PredictedSpaceWeatherThing.svelte
new file mode 100644
index 0000000..0a40e79
--- /dev/null
+++ b/src/components/PredictedSpaceWeatherThing.svelte
@@ -0,0 +1,64 @@
+<script>
+    export let prediction;
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December"
+    ];
+
+    let kp = prediction["kp"];
+    let dateTime = prediction["time"].split(" ");
+    let date = Number(dateTime[0].split("-")[2]) + ". " + monthNames[Number(dateTime[0].split("-")[1])];
+    let time = dateTime[1].substring(0,5);
+    let temp = prediction["temp"];
+    let clouds = prediction["clouds"];
+</script>
+
+<style>
+    .prediction-details {
+      display: flex;
+      justify-content: space-between;
+      border-bottom-width: 1px;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      font-size: 0.75rem;
+      letter-spacing: 0.05em;
+    }
+
+    .prediction-details:last-of-type {
+      border-width: 0;
+      padding-bottom: 0;
+    }
+
+    .prediction-details h3 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-right: 0.5rem;
+    }
+
+    .prediction-details .data {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .prediction-details .data h2 {
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+
+</style>
+
+<div class="prediction-details">
+    <div>
+        <h3>{time}</h3>
+        <p>{date}</p>
+    </div>
+    <div class="data">
+        <h2>{kp}</h2>
+        <div>
+            <p><i class="fas fa-thermometer-half"></i> {temp}°C</p>
+            <p><i class="fas fa-cloud"></i> {clouds}%</p>
+        </div>
+    </div>
+</div>
-- 
cgit v1.2.3