initial commit, fetch weather from open weather map, graph temperatures via CSS
This commit is contained in:
10
src/App.vue
Normal file
10
src/App.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
import Weather from './components/Weather.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Weather</h1>
|
||||
<Weather />
|
||||
</div>
|
||||
</template>
|
||||
30
src/App.vue.bak
Normal file
30
src/App.vue.bak
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
</style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
43
src/components/HelloWorld.vue
Normal file
43
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
342
src/components/Weather.vue
Normal file
342
src/components/Weather.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
computed
|
||||
} from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const apiKey = '226ab4dffe77ceefbbd0ba1309ec62b3';
|
||||
const city = ref('Köthen');
|
||||
const numPoints = 12;
|
||||
const forecast = ref(null);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
let intervalId;
|
||||
|
||||
const chartHeight = 500; // Height of the graph in pixels
|
||||
const chartWidth = 800; // Width of the graph in pixels
|
||||
|
||||
// cities for dropdown
|
||||
const cities = ['Köthen', 'Magdeburg', 'Halle', 'Leipzig', 'New York'];
|
||||
|
||||
const fetchWeather = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`https://api.openweathermap.org/data/2.5/forecast?q=${city.value}&units=metric&appid=${apiKey}`
|
||||
);
|
||||
forecast.value = response.data;
|
||||
} catch (err) {
|
||||
error.value = 'Failed to load weather data.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Lifecycle: after component is mounted
|
||||
onMounted(() => {
|
||||
fetchWeather();
|
||||
|
||||
// Refresh every 60 seconds (60000 ms)
|
||||
intervalId = setInterval(() => {
|
||||
fetchWeather();
|
||||
}, 60000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
|
||||
// watch city for changes
|
||||
watch(city, () => {
|
||||
clearInterval(intervalId);
|
||||
fetchWeather();
|
||||
});
|
||||
|
||||
// computed values
|
||||
const minTemp = computed(() => {
|
||||
if (!forecast.value) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
return Math.min(...temps);
|
||||
});
|
||||
const maxTemp = computed(() => {
|
||||
if (!forecast.value) return null;
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
return Math.max(...temps);
|
||||
});
|
||||
// raw numeric positions
|
||||
const numericValues = computed(() => {
|
||||
if (!forecast.value) return [];
|
||||
const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
|
||||
const min = minTemp.value;
|
||||
const max = maxTemp.value;
|
||||
const tempRange = max - min || 1; // Prevent division by zero
|
||||
const spacing = chartWidth / (numPoints - 1); // Horizontal spacing
|
||||
|
||||
return temps.map((temp, index) => {
|
||||
const normalizedTemp = (temp - min) / tempRange; // Normalize between 0 and 1
|
||||
const bottom = normalizedTemp * chartHeight; // Scale to chart height
|
||||
const left = index * spacing; // Evenly space points
|
||||
const temperature = temp;
|
||||
|
||||
return { bottom, left, temperature };
|
||||
});
|
||||
});
|
||||
|
||||
// raw positions to string values with "px"
|
||||
const applicationValues = computed(() => {
|
||||
return numericValues.value.map(vals => ({
|
||||
bottom: `${vals.bottom}px`,
|
||||
left: `${vals.left}px`,
|
||||
temperature: `<span class="short-temp">${Math.round(vals.temperature)}</span><span class="full-temp">${vals.temperature.toFixed(1)}</span> ºC`
|
||||
}));
|
||||
});
|
||||
|
||||
// line properties (hypotenuse, angle)
|
||||
const pointLines = computed(() => {
|
||||
const rawPositions = numericValues.value;
|
||||
let lines = [];
|
||||
for (let i = 0; i < rawPositions.length - 1; i++) {
|
||||
const dx = rawPositions[i + 1].left - rawPositions[i].left;
|
||||
const dy = rawPositions[i + 1].bottom - rawPositions[i].bottom;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
// Calculate angle in degrees
|
||||
const angleDeg = Math.atan2(dy, dx) * (180 / Math.PI) * -1;
|
||||
lines.push({
|
||||
hypotenuse: `${distance}px`,
|
||||
angle: `${angleDeg}deg`
|
||||
});
|
||||
}
|
||||
return lines;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="weather-container">
|
||||
<h2>Forecast for {{ city }}</h2>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<select v-model="city" class="city-selector">
|
||||
<option v-for="(c, index) in cities" :key="index" :value="c">
|
||||
{{ c }}
|
||||
</option>
|
||||
</select>
|
||||
<button @click="fetchWeather" class="refresh-btn">Refresh weather</button>
|
||||
|
||||
<div v-if="loading" class="loading">Loading …</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-else>
|
||||
<figure class="forecast-chart">
|
||||
<ul class="forecast-line-chart">
|
||||
<li class="line-chart-element"
|
||||
v-for="(item, index) in forecast.list.slice(0, numPoints)"
|
||||
:key="index"
|
||||
:style="{
|
||||
'--y': applicationValues[index]?.bottom,
|
||||
'--x': applicationValues[index]?.left,
|
||||
'--hypotenuse': index < pointLines.length ? pointLines[index].hypotenuse : '0px',
|
||||
'--angle': index < pointLines.length ? pointLines[index].angle : '0deg'
|
||||
}"
|
||||
>
|
||||
<div class="data-points">
|
||||
<div class="line-segment"></div>
|
||||
<div class="data-point">
|
||||
<div class="data-point-dot"></div>
|
||||
<div class="data-point-temperature" v-html="applicationValues[index]?.temperature"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-label">
|
||||
{{ new Date(item.dt * 1000).getHours() }}:00
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
|
||||
<!--
|
||||
<ul class="forecast-list">
|
||||
<li v-for="(item, index) in forecast.list.slice(0, numPoints)" :key="index" class="forecast-item">
|
||||
{{ new Date(item.dt * 1000).toLocaleString("de-DE") }}: {{ item.main.temp }}°C
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.weather-container {
|
||||
padding: 2rem;
|
||||
background: #f0f4f8;
|
||||
border-radius: 10px;
|
||||
// max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.city-selector {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
.forecast-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.forecast-item {
|
||||
padding: 0.75rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.forecast-chart {
|
||||
border-bottom: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
height: 600px;
|
||||
width: 900px;
|
||||
margin: 0;
|
||||
padding: 1rem 4rem;
|
||||
position: relative;
|
||||
|
||||
.forecast-line-chart {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.line-chart-element {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
//bottom: var(--y);
|
||||
transform: translate(-50%, 0);
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
width: 2px;
|
||||
|
||||
.data-points {
|
||||
position: absolute;
|
||||
bottom: var(--y);
|
||||
transform: translate(0, 50%);
|
||||
|
||||
.data-point {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.data-point-temperature {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
top: -1lh;
|
||||
transform: translate(-70%, 0);
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
background-color: white;
|
||||
padding: 0.1em 0.6em;
|
||||
border-radius: 0.5lh;
|
||||
cursor: default;
|
||||
:deep(.short-temp) {
|
||||
display: inline;
|
||||
}
|
||||
:deep(.full-temp) {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
:deep(.short-temp) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.full-temp) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-point-dot {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
border: 3px solid black;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-segment {
|
||||
height: 3px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
width: var(--hypotenuse);
|
||||
transform-origin: left center;
|
||||
transform: rotate(var(--angle));
|
||||
position: absolute;
|
||||
bottom: 12.5px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-label {
|
||||
color: black;
|
||||
position: absolute;
|
||||
bottom: -2.5em;
|
||||
font-weight: bold;
|
||||
left: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
src/main.js
Normal file
5
src/main.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user